Add moveable pivot to selection widget and clips

engine/src/base/Clip.js

@@ -53,6 +53,7 @@ Wick.Clip = class extends Wick.Tickable {
         this._isSynced = false;
 
         this._transformation = args.transformation || new Wick.Transformation();
+        this._pivot = args.pivot || [0,0];
 
         this.cursor = 'default';
 
@@ -74,6 +75,7 @@ Wick.Clip = class extends Wick.Tickable {
         var data = super._serialize(args);
 
         data.transformation = this.transformation.values;
+        data.pivot = this._pivot;
         data.timeline = this._timeline;
         data.animationType = this._animationType;
         data.singleFrameNumber = this._singleFrameNumber;
@@ -87,6 +89,7 @@ Wick.Clip = class extends Wick.Tickable {
         super._deserialize(data);
 
         this.transformation = new Wick.Transformation(data.transformation);
+        this.pivot = data.pivot;
         this._timeline = data.timeline;
         this._animationType = data.animationType || 'loop';
         this._singleFrameNumber = data.singleFrameNumber || 1;
@@ -549,6 +552,18 @@ Wick.Clip = class extends Wick.Tickable {
         }
     }
 
+    /**
+     * The pivot point of the clip.
+     * @type {Array}
+     */
+    get pivot() {
+        return this._pivot;
+    }
+
+    set pivot(pivot) {
+        this._pivot = pivot;
+    }
+
     /**
      * Perform circular hit test with other clip.
      * @param {Wick.Clip} other - the clip to hit test with

engine/src/view/View.Clip.js

@@ -172,7 +172,7 @@ Wick.View.Clip = class extends Wick.View {
 
         //this._radius = null;
 
-        this.group.pivot = new this.paper.Point(0,0);
+        this.group.pivot = this.model.pivot || new this.paper.Point(0,0);
         this.group.position.x = this.model.transformation.x;
         this.group.position.y = this.model.transformation.y;
         this.group.scaling.x = this.model.transformation.scaleX;
@@ -206,7 +206,7 @@ Wick.View.Clip = class extends Wick.View {
         });
         group.addChild(border);
 
-        group.pivot = new this.paper.Point(0,0);
+        group.pivot = this.model.pivot || new this.paper.Point(0,0);
         group.position.x = this.model.transformation.x;
         group.position.y = this.model.transformation.y;
         group.scaling.x = this.model.transformation.scaleX;

engine/src/view/View.Frame.js

@@ -138,6 +138,7 @@ Wick.View.Frame = class extends Wick.View {
                     opacity: child.opacity
 
                 });
+                wickClip.pivot = [child.pivot.x, child.pivot.y];
             }
         });