Refactor ComponentDrag

src/commands/index.js

@@ -26,7 +26,7 @@
  * @module Commands
  */
 
-import { isFunction } from 'underscore';
+import { isFunction, includes } from 'underscore';
 import CommandAbstract from './view/CommandAbstract';
 
 module.exports = () => {
@@ -118,6 +118,8 @@ module.exports = () => {
           const toolbarStyle = ed.Canvas.getToolbarEl().style;
           const nativeDrag = event && event.type == 'dragstart';
           const defComOptions = { preserveSelected: 1 };
+          const modes = ['absolute', 'translate'];
+          const mode = sel.get('dmode') || em.get('dmode');
 
           const hideTlb = () => {
             toolbarStyle.display = 'none';
@@ -139,14 +141,13 @@ module.exports = () => {
             sel.emitUpdate();
           };
 
-          if (em.get('designerMode')) {
+          if (includes(modes, mode)) {
             // TODO move grabbing func in editor/canvas from the Sorter
             dragger = editor.runCommand('core:component-drag', {
+              mode,
               target: sel,
-              options: {
-                event,
-                onEnd
-              }
+              onEnd,
+              event
             });
           } else {
             if (nativeDrag) {

src/commands/view/ComponentDrag.js

@@ -1,57 +1,25 @@
-import { keys } from 'underscore';
+import { keys, bindAll } from 'underscore';
 import Dragger from 'utils/Dragger';
 
 module.exports = {
   run(editor, sender, opts = {}) {
-    const { id } = this;
-    const { target, options = {} } = opts;
-    const { onEnd, event } = options;
+    bindAll(this, 'setPosition', 'onStart', 'onEnd', 'getPosition');
+    const { target, event, mode } = opts;
     const { Canvas } = editor;
     const el = target.getEl();
     const scale = Canvas.getZoomMultiplier();
-    const setPosition = ({ x, y, end, position, width, height }) => {
-      const unit = 'px';
-      const adds = { position, width, height };
-      const style = {
-        left: `${x}${unit}`,
-        top: `${y}${unit}`,
-        e: !end ? 1 : '' // this will trigger the final change
-      };
-      keys(adds).forEach(add => {
-        const prop = adds[add];
-        if (prop) style[add] = prop;
-      });
-      target.addStyle(style, { avoidStore: !end });
-    };
     const config = {
-      ...options,
       scale,
       doc: el.ownerDocument,
-      onStart() {
-        const style = target.getStyle();
-        const position = 'absolute';
-
-        if (style.position !== position) {
-          const { left, top, width, height } = Canvas.offset(el);
-          setPosition({ x: left, y: top, position, width, height });
-        }
-      },
-      onEnd() {
-        onEnd && onEnd();
-        editor.stopCommand(id);
-      },
-      getPosition() {
-        const { left, top } = target.getStyle();
-        const result = {
-          x: parseFloat(left),
-          y: parseFloat(top)
-        };
-
-        return result;
-      },
-      setPosition
+      onStart: this.onStart,
+      onEnd: this.onEnd,
+      getPosition: this.getPosition,
+      setPosition: this.setPosition
     };
+    this.opts = opts;
     this.editor = editor;
+    this.target = target;
+    this.isTran = mode == 'translate';
     let dragger = this.dragger;
 
     if (!dragger) {
@@ -71,6 +39,49 @@ module.exports = {
     this.toggleDrag();
   },
 
+  getPosition() {
+    const { target } = this;
+    const { left, top } = target.getStyle();
+    return {
+      x: parseFloat(left),
+      y: parseFloat(top)
+    };
+  },
+
+  setPosition({ x, y, end, position, width, height }) {
+    const { target } = this;
+    const unit = 'px';
+    const adds = { position, width, height };
+    const style = {
+      left: `${x}${unit}`,
+      top: `${y}${unit}`,
+      e: !end ? 1 : '' // this will trigger the final change
+    };
+    keys(adds).forEach(add => {
+      const prop = adds[add];
+      if (prop) style[add] = prop;
+    });
+    target.addStyle(style, { avoidStore: !end });
+  },
+
+  onStart() {
+    const { target, editor } = this;
+    const style = target.getStyle();
+    const position = 'absolute';
+
+    if (style.position !== position) {
+      const { left, top, width, height } = editor.Canvas.offset(target.getEl());
+      this.setPosition({ x: left, y: top, position, width, height });
+    }
+  },
+
+  onEnd() {
+    const { editor, opts, id } = this;
+    const { onEnd } = opts;
+    onEnd && onEnd();
+    editor.stopCommand(id);
+  },
+
   toggleDrag(on) {
     const { ppfx, editor } = this;
     const methodCls = on ? 'add' : 'remove';

src/dom_components/model/Component.js

@@ -115,6 +115,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       attributes: '',
       traits: ['id', 'title'],
       propagate: '',
+      dmode: '',
       toolbar: null
     },
 

src/editor/model/Editor.js

@@ -54,7 +54,7 @@ module.exports = Backbone.Model.extend({
       editing: 0,
       selected: new Collection(),
       clipboard: null,
-      designerMode: false,
+      dmode: 0,
       componentHovered: null,
       previousModel: null,
       changesCount: 0,