Refactor Drag command

src/commands/view/Drag.js

@@ -1,65 +1,77 @@
 import { isUndefined } from 'underscore';
+import { on, off } from 'utils/mixins';
 import Dragger from 'utils/Dragger';
 
 module.exports = {
   run(editor, sender, opts = {}) {
-    const { target } = opts;
-    var el = (opts && opts.el) || '';
-    var canvas = editor.Canvas;
-    var dragger = this.dragger;
-    var options = opts.options || {};
-    var canvasView = canvas.getCanvasView();
-    options.prefix = editor.getConfig().stylePrefix;
-    options.mousePosFetcher = canvas.getMouseRelativePos;
-    options.posFetcher = canvasView.getElementPos.bind(canvasView);
+    const { id } = this;
+    const { target, options = {} } = opts;
+    const { onEnd, event } = options;
+    const config = {
+      ...options,
+      doc: target.getEl().ownerDocument,
+      onStart() {
+        target.addStyle({ position: 'absolute' });
+      },
+      onEnd() {
+        onEnd && onEnd();
+        editor.stopCommand(id);
+      },
+      getPosition() {
+        const style = target.getStyle();
+        let { left, top } = style;
 
-    // Create the resizer for the canvas if not yet created
-    if (!dragger) {
-      dragger = new Dragger({
-        ...options,
-        doc: target.getEl().ownerDocument,
-        onStart() {
-          target.addStyle({ position: 'absolute' });
-        },
-        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;
+        }
 
-          if (isUndefined(left) || isUndefined(top)) {
-            const rect = target.getEl().getBoundingClientRect();
-            left = rect.left;
-            top = rect.top;
-          }
+        const result = {
+          x: parseFloat(left),
+          y: parseFloat(top)
+        };
 
-          const result = {
-            x: parseFloat(left),
-            y: parseFloat(top)
-          };
+        return result;
+      },
+      setPosition({ x, y, end }) {
+        const unit = 'px';
 
-          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 }
+        );
+      }
+    };
 
-          target.addStyle(
-            {
-              left: `${x}${unit}`,
-              top: `${y}${unit}`,
-              e: !end ? 1 : '' // this will trigger the final change
-            },
-            { avoidStore: !end }
-          );
-        }
-      });
+    let dragger = this.dragger;
+
+    if (!dragger) {
+      dragger = new Dragger(config);
       this.dragger = dragger;
+    } else {
+      dragger.setOptions(config);
     }
 
-    dragger.setOptions(options);
-
-    if (options.event) {
-      dragger.start(options.event);
-    }
+    event && dragger.start(event);
+    this.toggleDrag(1);
 
     return dragger;
+  },
+
+  stop() {
+    this.toggleDrag();
+  },
+
+  toggleDrag(enable) {
+    const { ppfx } = this;
+    const methodCls = enable ? 'add' : 'remove';
+    const canvas = this.getCanvas();
+    const classes = [`${ppfx}is__grabbing`];
+    classes.forEach(cls => canvas.classList[methodCls](cls));
   }
 };