Selection and clip skew and tweens

engine/src/Transformation.js

@@ -36,9 +36,14 @@ Wick.Transformation = class {
         this.scaleX = args.scaleX === undefined ? 1 : args.scaleX;
         this.scaleY = args.scaleY === undefined ? 1 : args.scaleY;
         this.rotation = args.rotation === undefined ? 0 : args.rotation;
+        this.shear = args.shear === undefined ? 0 : args.shear;
         this.opacity = args.opacity === undefined ? 1 : args.opacity;
     }
 
+    get scaledSkew () {
+        return Math.atan(this.shear * this.scaleY / this.scaleX) * 180/Math.PI;
+    }
+
     /**
      * An object containing the values of this transformation.
      */
@@ -49,10 +54,31 @@ Wick.Transformation = class {
             scaleX: this.scaleX,
             scaleY: this.scaleY,
             rotation: this.rotation,
+            shear: this.shear,
             opacity: this.opacity,
         }
     }
 
+    /**
+     * An array containing the matrix values of this transformation.
+     */
+    get matrix () {
+        // https://github.com/paperjs/paper.js/blob/92775f5279c05fb7f0a743e9e7fa02cd40ec1e70/src/basic/Matrix.js#L687
+        const { x, y, scaleX, scaleY, rotation } = this;
+        const degrees = 180 / Math.PI,
+            rotateRad = rotation / degrees,
+            skewRad = this.scaledSkew / degrees;
+        let a, b, c, d;
+        let r = scaleX, r2 = r * r,
+            det = scaleY * r,
+            at = Math.tan(skewRad) * r2;
+        a = Math.cos(rotateRad) * r;
+        b = Math.sqrt(r2 - a * a) * (rotateRad > 0 ? 1 : -1);
+        d = (b * at + a * det) / r2;
+        c = (a * at - b * det) / r2;
+        return [a, b, c, d, x, y];
+    }
+
     /**
      * Creates a copy of this transformation.
      * @returns {Wick.Transformation} the copied transformation.

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
@@ -1319,6 +1334,19 @@ let avgIntersection = {
 
         this._onDirtyTransform();
       }
+      /**
+     * The shear of the clip.
+     * @type {number}
+     */
+      get shear() {
+        return this.transformation.shear;
+      }
+
+      set shear(shear) {
+        this.transformation.shear = shear;
+
+        this._onDirtyTransform();
+      }
 
     /**
      * The opacity of the clip.

engine/src/base/Selection.js

@@ -34,6 +34,7 @@ Wick.Selection = class extends Wick.Base {
 
         this._selectedObjectsUUIDs = args.selectedObjects || [];
         this._widgetRotation = args.widgetRotation || 0;
+        this._widgetShear = args.widgetShear || 0;
         this._pivotPoint = { x: 0, y: 0 };
         this._originalWidth = 0;
         this._originalHeight = 0;
@@ -47,6 +48,7 @@ Wick.Selection = class extends Wick.Base {
         var data = super._serialize(args);
         data.selectedObjects = Array.from(this._selectedObjectsUUIDs);
         data.widgetRotation = this._widgetRotation;
+        data.widgetShear = this._widgetShear;
         data.pivotPoint = {
             x: this._pivotPoint.x,
             y: this._pivotPoint.y,
@@ -60,6 +62,7 @@ Wick.Selection = class extends Wick.Base {
         super._deserialize(data);
         this._selectedObjectsUUIDs = data.selectedObjects || [];
         this._widgetRotation = data.widgetRotation;
+        this._widgetShear = data.widgetShear;
         this._pivotPoint = {
             x: data.pivotPoint.x,
             y: data.pivotPoint.y
@@ -96,6 +99,7 @@ Wick.Selection = class extends Wick.Base {
             "width",
             "height",
             "rotation",
+            "shear",
             "opacity",
             "sound",
             "soundVolume",
@@ -399,6 +403,18 @@ Wick.Selection = class extends Wick.Base {
         this._widgetRotation = widgetRotation;
     }
 
+    /**
+     * The shear of the selection (used for canvas selections)
+     * @type {number}
+     */
+    get widgetShear() {
+        return this._widgetShear;
+    }
+
+    set widgetShear(widgetShear) {
+        this._widgetShear = widgetShear;
+    }
+
     /**
      * The point that transformations to the selection will be based around.
      * @type {object}
@@ -561,6 +577,19 @@ Wick.Selection = class extends Wick.Base {
         this.view.rotation = rotation;
     }
 
+    /**
+     * The horizontal shear of the selection.
+     * @type {number}
+     */
+    get shear() {
+        return this.view.shear;
+    }
+
+    set shear(shear) {
+        this.project.tryToAutoCreateTween();
+        this.view.shear = shear;
+    }
+
     /**
      * It is the original width of the selection at creation.
      * @type {number}
@@ -980,13 +1009,15 @@ Wick.Selection = class extends Wick.Base {
         if (selectedObject instanceof Wick.Clip) {
             // Single clip selected: Use that Clip's transformation for the pivot point and rotation
             this._widgetRotation = selectedObject.transformation.rotation;
+            this._widgetShear = selectedObject.transformation.shear;
             this._pivotPoint = {
                 x: selectedObject.transformation.x,
                 y: selectedObject.transformation.y,
             }
         } else {
             // Path selected or multiple objects selected: Reset rotation and use center for pivot point
             this._widgetRotation = 0;
+            this._widgetShear = 0;
 
             var boundsCenter = this.view._getSelectedObjectsBounds().center;
             this._pivotPoint = {

engine/src/base/Tween.js

@@ -72,7 +72,7 @@ Wick.Tween = class extends Wick.Base {
         var t = Wick.Tween._calculateTimeValue(tweenA, tweenB, playheadPosition);
 
         // Interpolate every transformation attribute using the t value
-        ["x", "y", "scaleX", "scaleY", "rotation", "opacity"].forEach(propName => {
+        ["x", "y", "scaleX", "scaleY", "rotation", "shear", "opacity"].forEach(propName => {
             var tweenFn = tweenA._getTweenFunction();
             var tt = tweenFn(t);
             var valA = tweenA.transformation[propName];

engine/src/view/View.Clip.js

@@ -172,12 +172,8 @@ Wick.View.Clip = class extends Wick.View {
 
         //this._radius = null;
 
-        this.group.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;
-        this.group.scaling.y = this.model.transformation.scaleY;
-        this.group.rotation = this.model.transformation.rotation;
+        this.group.pivot = this.model.pivot || new this.paper.Point(0,0);
+        this.group.matrix.translate(this.group.pivot.multiply(-1)).prepend(new paper.Matrix(this.model.transformation.matrix));
         this.group.opacity = this.model.transformation.opacity;
     }
 
@@ -206,12 +202,8 @@ Wick.View.Clip = class extends Wick.View {
         });
         group.addChild(border);
 
-        group.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;
-        group.scaling.y = this.model.transformation.scaleY;
-        group.rotation = this.model.transformation.rotation;
+        group.pivot = this.model.pivot || new this.paper.Point(0,0);
+        group.matrix.translate(this.group.pivot.multiply(-1)).prepend(new paper.Matrix(this.model.transformation.matrix));
 
         return group;
     }

engine/src/view/View.Frame.js

@@ -129,15 +129,17 @@ Wick.View.Frame = class extends Wick.View {
         }).forEach(child => {
             if (child instanceof paper.Group || child instanceof Wick.Clip) {
                 var wickClip = Wick.ObjectCache.getObjectByUUID(child.data.wickUUID);
+                var values = child.matrix.decompose();
                 wickClip.transformation = new Wick.Transformation({
                     x: child.position.x,
                     y: child.position.y,
-                    scaleX: child.scaling.x,
-                    scaleY: child.scaling.y,
-                    rotation: child.rotation,
+                    scaleX: values.scaling.x,
+                    scaleY: values.scaling.y,
+                    rotation: values.rotation,
+                    shear: Math.tan(values.skewing.x * Math.PI/180) * values.scaling.x/values.scaling.y,
                     opacity: child.opacity
-
                 });
+                wickClip.pivot = [child.pivot.x, child.pivot.y];
             }
         });
 

engine/src/view/View.Selection.js

@@ -48,6 +48,7 @@ Wick.View.Selection = class extends Wick.View {
      */
     applyChanges () {
         this.model.widgetRotation = this.widget.rotation;
+        this.model.widgetShear = this.widget.shear;
         this.model.pivotPoint = {
             x: this.widget.pivot.x,
             y: this.widget.pivot.y,
@@ -115,6 +116,19 @@ Wick.View.Selection = class extends Wick.View {
         this.model.widgetRotation = rotation;
     }
 
+    /**
+     *
+     */
+    get shear () {
+        return this.widget.shear;
+    }
+
+    set shear (shear) {
+        this.widget.shear = shear;
+        this.model.project.view.applyChanges();
+        this.model.widgetShear = shear;
+    }
+
     /**
      *
      */
@@ -166,6 +180,7 @@ Wick.View.Selection = class extends Wick.View {
     render () {
         this._widget.build({
             boxRotation: this.model.widgetRotation,
+            boxShear: this.model.widgetShear,
             items: this._getSelectedObjectViews(),
             pivot: new paper.Point(this.model.pivotPoint.x, this.model.pivotPoint.y),
             useGradientGUI: this.model.useGradientGUI,