Merge pull request #60 from nichollascarter/fix/rotation-point-moving…

…-on-groupable fix(src): prevent rotation point moving when groupable is rotating
nichollascarter · Dec 14, 2021 · 9267e7d · 9267e7d
2 parents c5224e0 + 2f5b65e
commit 9267e7d
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 15 deletions.
diff --git a/src/js/core/consts.js b/src/js/core/consts.js
@@ -18,6 +18,7 @@ const E_RESIZE_END = 'resizeEnd';
 const E_ROTATE_START = 'rotateStart';
 const E_ROTATE = 'rotate';
 const E_ROTATE_END ='rotateEnd';
+const E_SET_POINT = 'setPoint';
 const E_SET_POINT_START = 'setPointStart';
 const E_SET_POINT_END = 'setPointEnd';
 
@@ -77,6 +78,7 @@ export const EVENT_EMITTER_CONSTANTS = {
     E_ROTATE_START,
     E_ROTATE,
     E_ROTATE_END,
+    E_SET_POINT,
     E_SET_POINT_START,
     E_SET_POINT_END
 };

diff --git a/src/js/core/transform/Draggable.js b/src/js/core/transform/Draggable.js
@@ -146,7 +146,7 @@ export default class Draggable extends Transformable {
             },
             data,
             center: {
-                isShifted: Boolean(rotationPoint)
+                isShifted: Array.isArray(rotationPoint)
             }
         };
 

diff --git a/src/js/core/transform/Transformable.js b/src/js/core/transform/Transformable.js
@@ -43,7 +43,8 @@ const {
     E_RESIZE_END,
     E_ROTATE_START,
     E_ROTATE,
-    E_ROTATE_END
+    E_ROTATE_END,
+    E_SET_POINT
 } = EVENT_EMITTER_CONSTANTS;
 
 const { TRANSFORM_HANDLES_KEYS, TRANSFORM_EDGES_KEYS } = TRANSFORM_HANDLES_CONSTANTS;
@@ -692,7 +693,7 @@ export default class Transformable extends SubjectModel {
                 doResize,
                 doDrag,
                 doRotate,
-                //doSetCenter,
+                doSetCenter,
                 frame,
                 handles: { radius },
                 isTarget
@@ -702,9 +703,25 @@ export default class Transformable extends SubjectModel {
 
         if (!isTarget) return;
 
-        const actionName = doResize
-            ? E_RESIZE
-            : (doDrag ? E_DRAG : E_ROTATE);
+        const { actionName = E_DRAG } = [
+            {
+                actionName: E_RESIZE,
+                condition: doResize
+            },
+            {
+                actionName: E_DRAG,
+                condition: doDrag
+            },
+            {
+                actionName: E_ROTATE,
+                condition: doRotate
+            },
+            {
+                actionName: E_SET_POINT,
+                condition: doSetCenter
+            }
+        ].find((({ condition }) => condition)) || {};
+
 
         storage.doResize = false;
         storage.doDrag = false;

diff --git a/src/js/core/transform/svg/DraggableSVG.js b/src/js/core/transform/svg/DraggableSVG.js
@@ -180,7 +180,7 @@ export default class DraggableSVG extends Transformable {
             },
             data,
             center: {
-                isShifted: Boolean(rotationPoint)
+                isShifted: Array.isArray(rotationPoint)
             }
         };
 
@@ -257,7 +257,13 @@ export default class DraggableSVG extends Transformable {
         const {
             storage: {
                 data,
-                bBox
+                bBox,
+                transform: {
+                    controlsMatrix
+                },
+                center: {
+                    isShifted
+                }
             } = {},
             options: {
                 isGrouped,
@@ -279,8 +285,6 @@ export default class DraggableSVG extends Transformable {
             __data__
         } = nextData;
 
-        //if (isUndef(cached)) return;
-
         const {
             scaleX,
             scaleY,
@@ -386,6 +390,12 @@ export default class DraggableSVG extends Transformable {
 
         if (isGrouped && actionName === E_ROTATE) {
             this._applyTransformToHandles();
+
+            if (isShifted) {
+                const { x: dx, y: dy } = pointTo(controlsMatrix, 0, 0);
+                this._moveCenterHandle(dx, dy);
+            }
+
             this._updateControlsView();
         }
 

diff --git a/test/transform.test.js b/test/transform.test.js
@@ -1,8 +1,4 @@
-const {
-    snapToGrid,
-    floatToFixed,
-    getMinMaxOfArray
-} = require('../src/js/core/transform/common');
+import { snapToGrid, floatToFixed, getMinMaxOfArray } from '../src/js/core/transform/common';
 
 describe('snapToGrid func', () => {
     it('returns value near to grid size', () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -146,7 +146,7 @@ export default class Draggable extends Transformable { @@
                 },
                 data,
                 center: {
-                    isShifted: Boolean(rotationPoint)
+                    isShifted: Array.isArray(rotationPoint)
                 }
             };
@@ Expand Down @@