diff --git a/src/js/core/transform/Draggable.js b/src/js/core/transform/Draggable.js index 71567f8..141f049 100644 --- 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 index bbfe4c7..54de4d1 100644 --- 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 index 607af2a..5715009 100644 --- 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(); - }); }); \ No newline at end of file