Add scale to the dragger

src/canvas/index.js

@@ -395,7 +395,7 @@ module.exports = () => {
      * @private
      */
     getMouseRelativeCanvas(ev) {
-      const zoom = this.em.getZoomDecimal();
+      const zoom = this.getZoomDecimal();
       const { top, left } = CanvasView.getPosition();
 
       return {
@@ -469,7 +469,7 @@ module.exports = () => {
 
     updateClientY(ev) {
       ev.preventDefault();
-      this.lastClientY = getPointerEvent(ev).clientY * this.em.getZoomDecimal();
+      this.lastClientY = getPointerEvent(ev).clientY * this.getZoomDecimal();
     },
 
     /**
@@ -528,6 +528,11 @@ module.exports = () => {
       return this.getZoom() / 100;
     },
 
+    getZoomMultiplier() {
+      const zoom = this.getZoomDecimal();
+      return zoom ? 1 / zoom : 1;
+    },
+
     /**
      * Returns wrapper element
      * @return {HTMLElement}

src/commands/view/Drag.js

@@ -1,5 +1,3 @@
-import { isUndefined } from 'underscore';
-import { on, off } from 'utils/mixins';
 import Dragger from 'utils/Dragger';
 
 module.exports = {
@@ -7,26 +5,38 @@ module.exports = {
     const { id } = this;
     const { target, options = {} } = opts;
     const { onEnd, event } = options;
+    const scale = editor.Canvas.getZoomMultiplier();
+    const setPosition = ({ x, y, end }) => {
+      const unit = 'px';
+      target.addStyle(
+        {
+          left: `${x}${unit}`,
+          top: `${y}${unit}`,
+          e: !end ? 1 : '' // this will trigger the final change
+        },
+        { avoidStore: !end }
+      );
+    };
     const config = {
       ...options,
+      scale,
       doc: target.getEl().ownerDocument,
       onStart() {
-        target.addStyle({ position: 'absolute' });
+        const style = target.getStyle();
+        const position = 'absolute';
+
+        if (style.position !== position) {
+          const { left, top } = target.getEl().getBoundingClientRect();
+          target.addStyle({ position });
+          setPosition({ x: left, y: top });
+        }
       },
       onEnd() {
         onEnd && onEnd();
         editor.stopCommand(id);
       },
       getPosition() {
-        const style = target.getStyle();
-        let { left, top } = style;
-
-        if (isUndefined(left) || isUndefined(top)) {
-          const rect = target.getEl().getBoundingClientRect();
-          left = rect.left;
-          top = rect.top;
-        }
-
+        const { left, top } = target.getStyle();
         const result = {
           x: parseFloat(left),
           y: parseFloat(top)
@@ -34,18 +44,7 @@ module.exports = {
 
         return result;
       },
-      setPosition({ x, y, end }) {
-        const unit = 'px';
-
-        target.addStyle(
-          {
-            left: `${x}${unit}`,
-            top: `${y}${unit}`,
-            e: !end ? 1 : '' // this will trigger the final change
-          },
-          { avoidStore: !end }
-        );
-      }
+      setPosition
     };
 
     let dragger = this.dragger;

src/utils/Dragger.js

@@ -1,4 +1,4 @@
-import { bindAll, isFunction } from 'underscore';
+import { bindAll, isFunction, result } from 'underscore';
 import { on, off } from 'utils/mixins';
 
 export default class Dragger {
@@ -43,12 +43,14 @@ export default class Dragger {
       getPosition: null,
 
       // Document on which listen to pointer events
-      doc: 0
+      doc: 0,
+
+      // Scale result points, can also be a function
+      scale: 1
     };
     bindAll(this, 'drag', 'stop');
     this.setOptions(opts);
     this.delta = { x: 0, y: 0 };
-    this.startPosition = this.getStartPosition();
     return this;
   }
 
@@ -79,8 +81,8 @@ export default class Dragger {
     const { onStart } = this.opts;
     this.toggleDrag(1);
     this.startPointer = this.getPointerPos(ev);
-    this.startPosition = this.getStartPosition();
     isFunction(onStart) && onStart(ev, this);
+    this.startPosition = this.getStartPosition();
     this.drag(ev);
   }
 
@@ -141,12 +143,14 @@ export default class Dragger {
   move(x, y, end) {
     const { el, opts } = this;
     const pos = this.startPosition;
+    if (!pos) return;
     const { setPosition } = opts;
     const xPos = pos.x + x;
     const yPos = pos.y + y;
+    const scale = result(opts, 'scale');
     this.position = {
-      x: xPos,
-      y: yPos,
+      x: xPos * scale,
+      y: yPos * scale,
       end
     };