Numeric object origin b (#3120)

* Allows setting origin to any value between 0(top/left) and 1(bottom/right). * Oops, time to sleep. * Style fixes * Fix for _flipObject, _setLocalMouse and _resetCurrentTransform
fabricjs · Jul 24, 2016 · b75b28e · b75b28e
1 parent 9980c83
commit b75b28e
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 21 deletions.
diff --git a/src/canvas.class.js b/src/canvas.class.js
@@ -264,16 +264,16 @@
           this._setOriginToCenter(t.target);
         }
         else {
-          if (t.originX !== 'center') {
-            if (t.originX === 'right') {
+          if (t.originX !== 'center' && t.originX !== 0.5) {
+            if (t.originX === 'right' || t.originX > 0.5) {
               t.mouseXSign = -1;
             }
             else {
               t.mouseXSign = 1;
             }
           }
-          if (t.originY !== 'center') {
-            if (t.originY === 'bottom') {
+          if (t.originY !== 'center' && t.originY !== 0.5) {
+            if (t.originY === 'bottom' || t.originY > 0.5) {
               t.mouseYSign = -1;
             }
             else {
@@ -756,20 +756,40 @@
      */
     _flipObject: function(transform, by) {
       if (transform.newScaleX < 0 && by !== 'y') {
-        if (transform.originX === 'left') {
-          transform.originX = 'right';
+        if (transform.originX === 'left' || transform.originX > 0.5) {
+          if (typeof(transform.originX) === 'string') {
+            transform.originX = 'right';
+          }
+          else {
+            transform.originX = 1 - transform.originX;
+          }
         }
-        else if (transform.originX === 'right') {
-          transform.originX = 'left';
+        else if (transform.originX === 'right' || transform.originX < 0.5) {
+          if (typeof(transform.originX) === 'string') {
+            transform.originX = 'left';
+          }
+          else {
+            transform.originX = 1 - transform.originX;
+          }
         }
       }
 
       if (transform.newScaleY < 0 && by !== 'x') {
-        if (transform.originY === 'top') {
-          transform.originY = 'bottom';
+        if (transform.originY === 'top' || transform.originY < 0.5) {
+          if (typeof(transform.originY) === 'string') {
+            transform.originY = 'bottom';
+          }
+          else {
+            transform.originY = 1 - transform.originY;
+          }
         }
-        else if (transform.originY === 'bottom') {
-          transform.originY = 'top';
+        else if (transform.originY === 'bottom' || transform.originY > 0.5) {
+          if (typeof(transform.originY) === 'string') {
+            transform.originY = 'top';
+          }
+          else {
+            transform.originY = 1 - transform.originY;
+          }
         }
       }
     },
@@ -780,21 +800,21 @@
     _setLocalMouse: function(localMouse, t) {
       var target = t.target;
 
-      if (t.originX === 'right') {
+      if (t.originX === 'right' || t.originX > 0.5) {
         localMouse.x *= -1;
       }
-      else if (t.originX === 'center') {
+      else if (t.originX === 'center' || t.originX === 0.5) {
         localMouse.x *= t.mouseXSign * 2;
 
         if (localMouse.x < 0) {
           t.mouseXSign = -t.mouseXSign;
         }
       }
 
-      if (t.originY === 'bottom') {
+      if (t.originY === 'bottom' || t.originY > 0.5) {
         localMouse.y *= -1;
       }
-      else if (t.originY === 'center') {
+      else if (t.originY === 'center' || t.originY === 0.5) {
         localMouse.y *= t.mouseYSign * 2;
 
         if (localMouse.y < 0) {

diff --git a/src/mixins/object_origin.mixin.js b/src/mixins/object_origin.mixin.js
@@ -26,14 +26,45 @@
     translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
       var x = point.x,
           y = point.y,
-          offsetX = originXOffset[toOriginX] - originXOffset[fromOriginX],
-          offsetY = originYOffset[toOriginY] - originYOffset[fromOriginY],
-          dim;
+
+      if (typeof(fromOriginX) === 'string') {
+        fromOriginX = originXOffset[fromOriginX];
+      }
+      else {
+        fromOriginX -= 0.5;
+      }
+
+      if (typeof(toOriginX) === 'string') {
+        toOriginX = originXOffset[toOriginX];
+      }
+      else {
+        toOriginX -= 0.5;
+      }
+
+      offsetX = toOriginX - fromOriginX;
+
+      if (typeof(fromOriginY) === 'string') {
+        fromOriginY = originYOffset[fromOriginY];
+      }
+      else {
+        fromOriginY -= 0.5;
+      }
+
+      if (typeof(toOriginY) === 'string') {
+        toOriginY = originYOffset[toOriginY];
+      }
+      else {
+        toOriginY -= 0.5;
+      }
+
+      offsetY = toOriginY - fromOriginY;
+
       if (offsetX || offsetY) {
         dim = this._getTransformedDimensions();
         x = point.x + offsetX * dim.x;
         y = point.y + offsetY * dim.y;
       }
+
       return new fabric.Point(x, y);
     },
 
@@ -155,8 +186,14 @@
           yFull = Math.sin(angle) * hypotFull;
 
       //TODO: this function does not consider mixed situation like top, center.
-      this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
-      this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);
+      if (typeof(this.originX) === 'number') {
+        this.left += xFull * (originXOffset[to] - (this.originX - 0.5));
+        this.top += yFull * (originXOffset[to] - (this.originX - 0.5));
+      }
+      else {
+        this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
+        this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);
+      }
 
       this.setCoords();
       this.originX = to;