Scale in the Dragger only on move

src/commands/index.js

@@ -94,7 +94,6 @@ module.exports = () => {
       defaultCommands.fullscreen = require('./view/Fullscreen');
       defaultCommands.preview = require('./view/Preview');
       defaultCommands.resize = require('./view/Resize');
-      defaultCommands.drag = require('./view/Drag');
 
       defaultCommands['tlb-delete'] = {
         run(ed) {
@@ -142,7 +141,7 @@ module.exports = () => {
 
           if (em.get('designerMode')) {
             // TODO move grabbing func in editor/canvas from the Sorter
-            dragger = editor.runCommand('drag', {
+            dragger = editor.runCommand('core:component-drag', {
               target: sel,
               el: sel.view.el,
               options: {
@@ -172,13 +171,14 @@ module.exports = () => {
         ['copy', 'CopyComponent'],
         ['paste', 'PasteComponent'],
         ['canvas-move', 'CanvasMove'],
+        ['canvas-clear', 'CanvasClear'],
         ['component-next', 'ComponentNext'],
         ['component-prev', 'ComponentPrev'],
         ['component-enter', 'ComponentEnter'],
         ['component-exit', 'ComponentExit'],
-        ['canvas-clear', 'CanvasClear'],
         ['component-delete', 'ComponentDelete'],
-        ['component-style-clear', 'ComponentStyleClear']
+        ['component-style-clear', 'ComponentStyleClear'],
+        ['component-drag', 'ComponentDrag']
       ].forEach(
         item =>
           (defaultCommands[`core:${item[0]}`] = require(`./view/${item[1]}`))

src/commands/view/Drag.js → src/commands/view/ComponentDrag.js

@@ -1,3 +1,4 @@
+import { keys } from 'underscore';
 import Dragger from 'utils/Dragger';
 
 module.exports = {
@@ -5,30 +6,34 @@ module.exports = {
     const { id } = this;
     const { target, options = {} } = opts;
     const { onEnd, event } = options;
-    const scale = editor.Canvas.getZoomMultiplier();
+    const { Canvas } = editor;
-    const setPosition = ({ x, y, end }) => {
+    const el = target.getEl();
+    const scale = Canvas.getZoomMultiplier();
+    const setPosition = ({ x, y, end, position, width, height }) => {
       const unit = 'px';
-      target.addStyle(
+      const adds = { position, width, height };
-        {
+      const style = {
-          left: `${x}${unit}`,
+        left: `${x}${unit}`,
-          top: `${y}${unit}`,
+        top: `${y}${unit}`,
-          e: !end ? 1 : '' // this will trigger the final change
+        e: !end ? 1 : '' // this will trigger the final change
-        },
+      };
-        { avoidStore: !end }
+      keys(adds).forEach(add => {
-      );
+        const prop = adds[add];
+        if (prop) style[add] = prop;
+      });
+      target.addStyle(style, { avoidStore: !end });
     };
     const config = {
       ...options,
       scale,
-      doc: target.getEl().ownerDocument,
+      doc: el.ownerDocument,
       onStart() {
         const style = target.getStyle();
         const position = 'absolute';
 
         if (style.position !== position) {
-          const { left, top } = target.getEl().getBoundingClientRect();
+          const { left, top, width, height } = Canvas.offset(el);
-          target.addStyle({ position });
+          setPosition({ x: left, y: top, position, width, height });
-          setPosition({ x: left, y: top });
         }
       },
       onEnd() {

src/utils/Dragger.js

@@ -91,6 +91,8 @@ export default class Dragger {
    * @param  {Event} event
    */
   drag(ev) {
+    const { opts } = this;
+    const { onDrag } = opts;
     const { startPointer } = this;
     const currentPos = this.getPointerPos(ev);
     const delta = {
@@ -112,11 +114,11 @@ export default class Dragger {
       delta.y = startPointer.y;
     }
 
+    ['x', 'y'].forEach(co => (delta[co] = delta[co] * result(opts, 'scale')));
     this.lockedAxis = lockedAxis;
     this.delta = delta;
     this.move(delta.x, delta.y);
     this.currentPointer = currentPos;
-    const { onDrag } = this.opts;
     isFunction(onDrag) && onDrag(ev, this);
 
     // In case the mouse button was released outside of the window
@@ -147,10 +149,9 @@ export default class Dragger {
     const { setPosition } = opts;
     const xPos = pos.x + x;
     const yPos = pos.y + y;
-    const scale = result(opts, 'scale');
     this.position = {
-      x: xPos * scale,
+      x: xPos,
-      y: yPos * scale,
+      y: yPos,
       end
     };