fix(src): fixed undefined containerMatrix value on applying alignment

nichollascarter · Mar 2, 2022 · 6b20349 · 6b20349
1 parent 201a5b6
commit 6b20349
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/src/js/core/transform/Draggable.js b/src/js/core/transform/Draggable.js
@@ -35,7 +35,8 @@ export default class Draggable extends Transformable {
                 controlsContainer,
                 resizable,
                 rotatable,
-                showNormal
+                showNormal,
+                restrict
             }
         } = this;
 
@@ -137,6 +138,8 @@ export default class Draggable extends Transformable {
             })
         ));
 
+        const restrictContainer = restrict || container;
+
         this.storage = {
             wrapper,
             controls,
@@ -148,7 +151,10 @@ export default class Draggable extends Transformable {
             center: {
                 isShifted: Array.isArray(transformOrigin)
             },
-            transformOrigin: nextTransformOrigin
+            transformOrigin: nextTransformOrigin,
+            transform: {
+                containerMatrix: getCurrentTransformMatrix(restrictContainer, restrictContainer.parentNode)
+            }
         };
 
         [...elements, controls].map(target => (
@@ -644,9 +650,8 @@ export default class Draggable extends Transformable {
         const [glLeft, glTop] = getAbsoluteOffset(elements[0], container);
         const ctm = getCurrentTransformMatrix(elements[0], container);
 
-        const containerMatrix = restrict
-            ? getCurrentTransformMatrix(restrict, restrict.parentNode)
-            : getCurrentTransformMatrix(container, container.parentNode);
+        const restrictContainer = restrict || container;
+        const containerMatrix = getCurrentTransformMatrix(restrictContainer, restrictContainer.parentNode);
 
         const {
             width: boxWidth,

diff --git a/src/js/core/transform/svg/DraggableSVG.js b/src/js/core/transform/svg/DraggableSVG.js
@@ -40,7 +40,8 @@ export default class DraggableSVG extends Transformable {
                 resizable,
                 rotatable,
                 showNormal,
-                transformOrigin
+                transformOrigin,
+                restrict
             }
         } = this;
 
@@ -171,6 +172,8 @@ export default class DraggableSVG extends Transformable {
             })
         ));
 
+        const restrictContainer = restrict || container;
+
         this.storage = {
             wrapper,
             controls,
@@ -182,7 +185,10 @@ export default class DraggableSVG extends Transformable {
             center: {
                 isShifted: Array.isArray(transformOrigin)
             },
-            transformOrigin: nextTransformOrigin
+            transformOrigin: nextTransformOrigin,
+            transform: {
+                containerMatrix: getTransformToElement(restrictContainer, restrictContainer.parentNode)
+            }
         };
 
         [...elements, controls].map(target => (
@@ -773,9 +779,8 @@ export default class DraggableSVG extends Transformable {
             elCenterY
         );
 
-        const containerMatrix = restrict
-            ? getTransformToElement(restrict, restrict.parentNode)
-            : getTransformToElement(container, container.parentNode);
+        const restrictContainer = restrict || container;
+        const containerMatrix = getTransformToElement(restrictContainer, restrictContainer.parentNode);
 
         const center = {
             ...(this.storage.center || {}),

diff --git a/test/subjx.test.js b/test/subjx.test.js
@@ -226,6 +226,19 @@ describe('Test subjx "drag" method', () => {
         draggable.disable();
     });
 
+    it('test subjx api', () => {
+        const draggable = subjx(draggables).drag({ each: { move: true } });
+
+        expect(() => {
+            draggable.fitControlsToSize();
+            draggable.getBoundingRect();
+            draggable.setCenterPoint();
+            draggable.setTransformOrigin();
+            draggable.getDimensions();
+            ['t', 'b', 'l', 'r', 'v', 'h'].map(align => draggable.applyAlignment(align));
+        }).not.toThrow();
+    });
+
     it('init draggable with options', () => {
         const nextOptions = {
             ...options,
@@ -353,19 +366,6 @@ describe('Test subjx "drag" method', () => {
 
         $draggables.disable();
     });
-
-    it('test subjx api', () => {
-        const draggable = subjx(draggables).drag({ each: { move: true } });
-
-        expect(() => {
-            draggable.fitControlsToSize();
-            draggable.getBoundingRect();
-            draggable.setCenterPoint();
-            draggable.setTransformOrigin();
-            draggable.getDimensions();
-            ['t', 'b', 'l', 'r', 'v', 'h'].map(align => draggable.applyAlignment(align));
-        }).not.toThrow();
-    });
 });
 
 describe('Test svg subjx "drag" method', () => {
@@ -380,6 +380,19 @@ describe('Test svg subjx "drag" method', () => {
         draggable.disable();
     });
 
+    it('test subjx api', () => {
+        const draggable = subjx(svgElement).drag({ each: { move: true } });
+
+        expect(() => {
+            draggable.fitControlsToSize();
+            draggable.getBoundingRect(svgElement);
+            draggable.setCenterPoint();
+            draggable.setTransformOrigin();
+            draggable.getDimensions();
+            ['t', 'b', 'l', 'r', 'v', 'h'].map((align) => draggable.applyAlignment(align));
+        }).not.toThrow();
+    });
+
     it('init draggable with options', () => {
         const nextOptions = {
             container: '#svg-container',
@@ -508,17 +521,4 @@ describe('Test svg subjx "drag" method', () => {
 
         $draggables.disable();
     });
-
-    it('test subjx api', () => {
-        const draggable = subjx(svgElement).drag({ each: { move: true } });
-
-        expect(() => {
-            draggable.fitControlsToSize();
-            draggable.getBoundingRect(svgElement);
-            draggable.setCenterPoint();
-            draggable.setTransformOrigin();
-            draggable.getDimensions();
-            ['t', 'b', 'l', 'r', 'v', 'h'].map((align) => draggable.applyAlignment(align));
-        }).not.toThrow();
-    });
 });