refactor(core): minor code updates, refactoring

nichollascarter · Nov 4, 2023 · d592d5b · d592d5b
1 parent e7421e1
commit d592d5b
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 101 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -16,7 +16,7 @@ const libraryName = 'subjx';
 
 const banner = `/*@license
 * Drag/Rotate/Resize Library
-* Released under the MIT license, 2018-2022
+* Released under the MIT license, 2018-2023
 * Karen Sarksyan
 * [email protected]
 */`;

diff --git a/src/js/core/clone/Cloneable.js b/src/js/core/clone/Cloneable.js
@@ -33,14 +33,12 @@ export default class Cloneable extends SubjectModel {
             options
         } = this;
 
-        const $el = helper(elements);
-
         const {
             style,
             appendTo
         } = options;
 
-        const css = {
+        const nextStyle = {
             position: 'absolute',
             'z-index': '2147483647',
             ...style
@@ -55,76 +53,54 @@ export default class Cloneable extends SubjectModel {
         ));
 
         this.storage = {
-            css,
+            style: nextStyle,
             data
         };
 
-        $el.on(E_MOUSEDOWN, this._onMouseDown)
+        helper(elements).on(E_MOUSEDOWN, this._onMouseDown)
             .on(E_TOUCHSTART, this._onTouchStart);
 
-        EMITTER_EVENTS.slice(0, 3).forEach((eventName) => {
-            this.eventDispatcher.registerEvent(eventName);
-        });
+        EMITTER_EVENTS.slice(0, 3).forEach((eventName) => (
+            this.eventDispatcher.registerEvent(eventName)
+        ));
     }
 
-    _processOptions(options) {
-        let _style = {},
-            _appendTo = null,
-            _stack = document,
-            _onInit = noop,
-            _onMove = noop,
-            _onDrop = noop,
-            _onDestroy = noop;
-
-        if (isDef(options)) {
-            const {
-                style,
-                appendTo,
-                stack,
-                onInit,
-                onMove,
-                onDrop,
-                onDestroy
-            } = options;
-
-            _style = (isDef(style) && typeof style === 'object') ? style : _style;
-            _appendTo = appendTo || null;
-
-            const dropZone = isDef(stack)
-                ? helper(stack)[0]
-                : document;
-
-            _onInit = createMethod(onInit);
-            _onMove = createMethod(onMove);
-            _onDrop = isFunc(onDrop)
-                ? function(evt) {
-                    const {
-                        storage: {
-                            clone
-                        } = {}
-                    } = this;
-
-                    const result = objectsCollide(clone, dropZone);
-
-                    if (result) {
-                        onDrop.call(this, evt, this.elements, clone);
-                    }
+    _processOptions(options = {}) {
+        const {
+            style = {},
+            appendTo = null,
+            stack = document.body,
+            onInit = noop,
+            onMove = noop,
+            onDrop = noop,
+            onDestroy = noop
+        } = options;
+
+        const dropable = helper(stack)[0];
+
+        const _onDrop = isFunc(onDrop)
+            ? function (evt) {
+                const { storage: { clone } = {} } = this;
+
+                const isCollide = objectsCollide(clone, dropable);
+
+                if (isCollide) {
+                    onDrop.call(this, evt, this.elements, clone);
                 }
-                : noop;
-            _onDestroy = createMethod(onDestroy);
-        }
+            }
+            : noop;
 
         this.options = {
-            style: _style,
-            appendTo: _appendTo,
-            stack: _stack
+            style,
+            appendTo,
+            stack
         };
 
         this.proxyMethods = {
-            onInit: _onInit,
+            onInit: createMethod(onInit),
             onDrop: _onDrop,
-            onMove: _onMove,
-            onDestroy: _onDestroy
+            onMove: createMethod(onMove),
+            onDestroy: createMethod(onDestroy)
         };
     }
 
@@ -134,7 +110,7 @@ export default class Cloneable extends SubjectModel {
             storage,
             storage: {
                 data,
-                css
+                style
             }
         } = this;
 
@@ -148,11 +124,11 @@ export default class Cloneable extends SubjectModel {
 
         const { left, top } = getOffset(parent);
 
-        css.left = `${(clientX - left)}px`;
-        css.top = `${(clientY - top)}px`;
+        style.left = `${(clientX - left)}px`;
+        style.top = `${(clientY - top)}px`;
 
         const clone = element.cloneNode(true);
-        helper(clone).css(css);
+        helper(clone).css(style);
 
         storage.clientX = clientX;
         storage.clientY = clientY;
@@ -225,14 +201,14 @@ export default class Cloneable extends SubjectModel {
             } = {}
         } = this;
 
-        const translate = `translate(${dx}px, ${dy}px)`;
+        const transformCommand = `translate(${dx}px, ${dy}px)`;
 
         helper(clone).css({
-            transform: translate,
-            webkitTranform: translate,
-            mozTransform: translate,
-            msTransform: translate,
-            otransform: translate
+            transform: transformCommand,
+            webkitTranform: transformCommand,
+            mozTransform: transformCommand,
+            msTransform: transformCommand,
+            otransform: transformCommand
         });
     }
 

diff --git a/src/js/core/transform/Draggable.js b/src/js/core/transform/Draggable.js
@@ -98,12 +98,12 @@ export default class Draggable extends Transformable {
 
         const nextTransformOrigin = Array.isArray(transformOrigin)
             ? [...transformOrigin, 0, 1]
-            : finalVertices.center;
+            : [...finalVertices.center, 0, 1];
 
         const allHandles = {
             ...resizingHandles,
             center: transformOrigin && rotatable
-                ? nextTransformOrigin
+                ? [...nextTransformOrigin].slice(0, 2)
                 : undefined,
             rotator
         };
@@ -793,8 +793,38 @@ export default class Draggable extends Transformable {
         }
     }
 
-    _processControlsRotate() {
-        this._applyTransformToHandles();
+    _processControlsRotate({ radians }) {
+        const {
+            storage: {
+                transform: {
+                    wrapperMatrix,
+                    controlsMatrix
+                },
+                transformOrigin: [
+                    originX,
+                    originY
+                ]
+            }
+        } = this;
+
+        const cos = floatToFixed(Math.cos(radians)),
+            sin = floatToFixed(Math.sin(radians));
+
+        const rotateMatrix = createRotateMatrix(sin, cos);
+
+        const transformMatrix = multiplyMatrix(
+            multiplyMatrix(matrixInvert(wrapperMatrix), rotateMatrix),
+            wrapperMatrix
+        );
+
+        const rotateResultMatrix = multiplyMatrix(
+            multiplyMatrix(createTranslateMatrix(-originX, -originY), transformMatrix),
+            createTranslateMatrix(originX, originY)
+        );
+
+        this._updateControlsView(
+            multiplyMatrix(controlsMatrix, rotateResultMatrix)
+        );
     }
 
     _moveCenterHandle(x, y, updateTransformOrigin = true) {

diff --git a/src/js/core/transform/svg/DraggableSVG.js b/src/js/core/transform/svg/DraggableSVG.js
@@ -1164,25 +1164,34 @@ export default class DraggableSVG extends Transformable {
 
     _processControlsRotate({ radians }) {
         const {
+            options: {
+                isGrouped
+            },
             storage: {
                 transform: {
                     controlsMatrix,
                     wrapperOriginMatrix
-                }
+                } = {}
             } = {}
         } = this;
 
-        const cos = floatToFixed(Math.cos(radians)),
-            sin = floatToFixed(Math.sin(radians));
+        if (isGrouped) {
+            const cos = floatToFixed(Math.cos(radians)),
+                sin = floatToFixed(Math.sin(radians));
 
-        const rotateMatrix = createRotateMatrix(sin, cos);
+            const rotateMatrix = createRotateMatrix(sin, cos);
 
-        const wrapperResultMatrix = wrapperOriginMatrix
-            .multiply(rotateMatrix)
-            .multiply(wrapperOriginMatrix.inverse())
-            .multiply(controlsMatrix);
+            const wrapperResultMatrix = wrapperOriginMatrix
+                .multiply(rotateMatrix)
+                .multiply(wrapperOriginMatrix.inverse())
+                .multiply(controlsMatrix);
 
-        this._updateControlsView(wrapperResultMatrix);
+            this._updateControlsView(wrapperResultMatrix);
+        } else {
+            this._applyTransformToHandles({
+                boxMatrix: controlsMatrix.inverse()
+            });
+        }
     }
 
     _updateElementView(element, [attr, value]) {
@@ -1610,9 +1619,7 @@ const applyTranslate = (element, { x, y }) => {
 
     }
 
-    attrs.forEach(item => {
-        element.setAttribute(item[0], item[1]);
-    });
+    attrs.forEach(([name, value]) => element.setAttribute(name, value));
 };
 
 const applyResize = (element, data) => {
@@ -1809,9 +1816,7 @@ const applyResize = (element, data) => {
 
     }
 
-    attrs.forEach(([key, value]) => {
-        element.setAttribute(key, value);
-    });
+    attrs.forEach(([name, value]) => element.setAttribute(name, value));
 };
 
 const createHandler = (left, top, color, key) => {

diff --git a/src/js/core/util/css-util.js b/src/js/core/util/css-util.js
@@ -1,9 +1,9 @@
 import { helper } from '../Helper';
 import { CSS_PREFIXES } from '../consts';
 
-export const getOffset = node => node.getBoundingClientRect();
+const getOffset = node => node.getBoundingClientRect();
 
-export const addClass = (node, cls) => {
+const addClass = (node, cls) => {
     if (!cls) return;
 
     if (node.classList) {
@@ -18,7 +18,7 @@ export const addClass = (node, cls) => {
     return node;
 };
 
-export const removeClass = (node, cls) => {
+const removeClass = (node, cls) => {
     if (!cls) return;
 
     if (node.classList) {
@@ -33,7 +33,7 @@ export const removeClass = (node, cls) => {
     return node;
 };
 
-export const objectsCollide = (a, b) => {
+const objectsCollide = (a, b) => {
     const {
             top: aTop,
             left: aLeft
@@ -53,7 +53,7 @@ export const objectsCollide = (a, b) => {
     );
 };
 
-export const matrixToCSS = (arr) => {
+const matrixToCSS = (arr) => {
     const style = `matrix3d(${arr.join()})`;
 
     return {
@@ -65,7 +65,7 @@ export const matrixToCSS = (arr) => {
     };
 };
 
-export const getStyle = (el, property) => {
+const getStyle = (el, property) => {
     const style = window.getComputedStyle(el);
     let value = null;
 
@@ -77,15 +77,15 @@ export const getStyle = (el, property) => {
     return value;
 };
 
-export const getScrollOffset = () => {
+const getScrollOffset = () => {
     const doc = document.documentElement;
     return {
         left: (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
         top: (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
     };
 };
 
-export const getElementOffset = (el) => {
+const getElementOffset = (el) => {
     let left = 0;
     let top = 0;
 
@@ -95,4 +95,15 @@ export const getElementOffset = (el) => {
         el = el.offsetParent;
     }
     return { left, top };
-};
+};
+
+export {
+    getOffset,
+    addClass,
+    removeClass,
+    objectsCollide,
+    matrixToCSS,
+    getStyle,
+    getScrollOffset,
+    getElementOffset
+};
diff --git a/src/js/index.js b/src/js/index.js
@@ -6,9 +6,7 @@ export default function subjx(params) {
 }
 
 Object.defineProperty(subjx, 'createObservable', {
-    value: () => {
-        return new Observable();
-    }
+    value: () => new Observable()
 });
 
 Object.defineProperty(subjx, 'Subjx', {