Refactor commands files to classes

src/commands/index.js

@@ -45,7 +45,7 @@
 import { isFunction, includes } from 'underscore';
 import CommandAbstract from './view/CommandAbstract';
 import defaults from './config/config';
-import { eventDrag } from 'dom_components/model/Component';
+import { eventDrag } from '../dom_components/model/Component';
 
 const commandsDef = [
   ['preview', 'Preview', 'preview'],

src/commands/model/Command.js

@@ -1,7 +1,9 @@
-import Backbone from 'backbone';
+import { Model } from '../../common';
 
-export default Backbone.Model.extend({
-  defaults: {
-    id: ''
+export default class Command extends Model {
+  defaults() {
+    return {
+      id: '',
+    };
   }
-});
+}

src/commands/model/Commands.js

@@ -1,6 +1,6 @@
-import Backbone from 'backbone';
+import { Collection } from '../../common';
 import Command from './Command';
 
-export default Backbone.Collection.extend({
-  model: Command
-});
+export default class Commands extends Collection {}
+
+Commands.prototype.model = Command;

src/commands/view/CanvasMove.js

@@ -1,6 +1,6 @@
 import { bindAll } from 'underscore';
-import { on, off, getKeyChar } from 'utils/mixins';
-import Dragger from 'utils/Dragger';
+import { on, off, getKeyChar } from '../../utils/mixins';
+import Dragger from '../../utils/Dragger';
 
 export default {
   run(ed) {
@@ -39,7 +39,7 @@ export default {
         getPosition() {
           return {
             x: canvasModel.get('x'),
-            y: canvasModel.get('y')
+            y: canvasModel.get('y'),
           };
         },
         setPosition({ x, y }) {
@@ -53,7 +53,7 @@ export default {
         },
         onEnd(ev, dragger) {
           em.trigger('canvas:move:end', dragger);
-        }
+        },
       });
       this.dragger = dragger;
     }
@@ -73,5 +73,5 @@ export default {
     methodsEv[methodEv](document, 'keyup', this.onKeyUp);
     methodsEv[methodEv](canvas, 'mousedown', this.enableDragger);
     methodsEv[methodEv](document, 'mouseup', this.disableDragger);
-  }
+  },
 };

src/commands/view/CommandAbstract.js

@@ -1,6 +1,6 @@
-import { Model } from 'backbone';
+import { Model } from '../../common';
 
-export default Model.extend({
+export default class CommandAbstract extends Model {
   /**
    * Initialize method that can't be removed
    * @param  {Object}  o Options
@@ -18,14 +18,14 @@ export default Model.extend({
 
     this.canvas = this.em.get && this.em.get('Canvas');
     this.init(this.config);
-  },
+  }
 
   /**
    * On frame scroll callback
    * @param  {[type]} e [description]
    * @return {[type]}   [description]
    */
-  onFrameScroll(e) {},
+  onFrameScroll(e) {}
 
   /**
    * Returns canval element
@@ -33,7 +33,7 @@ export default Model.extend({
    */
   getCanvas() {
     return this.canvas.getElement();
-  },
+  }
 
   /**
    * Get canvas body element
@@ -41,7 +41,7 @@ export default Model.extend({
    */
   getCanvasBody() {
     return this.canvas.getBody();
-  },
+  }
 
   /**
    * Get canvas wrapper element
@@ -49,7 +49,7 @@ export default Model.extend({
    */
   getCanvasTools() {
     return this.canvas.getToolsEl();
-  },
+  }
 
   /**
    * Get the offset of the element
@@ -60,16 +60,16 @@ export default Model.extend({
     var rect = el.getBoundingClientRect();
     return {
       top: rect.top + el.ownerDocument.body.scrollTop,
-      left: rect.left + el.ownerDocument.body.scrollLeft
+      left: rect.left + el.ownerDocument.body.scrollLeft,
     };
-  },
+  }
 
   /**
    * Callback triggered after initialize
    * @param  {Object}  o   Options
    * @private
    * */
-  init(o) {},
+  init(o) {}
 
   /**
    * Method that run command
@@ -91,7 +91,7 @@ export default Model.extend({
     editor.trigger(`run:${id}`, result, options);
     editor.trigger('run', id, result, options);
     return result;
-  },
+  }
 
   /**
    * Method that run command
@@ -107,14 +107,14 @@ export default Model.extend({
     editor.trigger(`stop:${id}`, result, options);
     editor.trigger('stop', id, result, options);
     return result;
-  },
+  }
 
   /**
    * Stop current command
    */
   stopCommand() {
     this.em.get('Commands').stop(this.id);
-  },
+  }
 
   /**
    * Method that run command
@@ -122,7 +122,7 @@ export default Model.extend({
    * @param  {Object}  sender  Button sender
    * @private
    * */
-  run(em, sender) {},
+  run(em, sender) {}
 
   /**
    * Method that stop command
@@ -131,4 +131,4 @@ export default Model.extend({
    * @private
    * */
   stop(em, sender) {}
-});
+}

src/commands/view/ComponentDrag.js

@@ -1,5 +1,5 @@
 import { keys, bindAll, each, isUndefined, debounce } from 'underscore';
-import Dragger from 'utils/Dragger';
+import Dragger from '../../utils/Dragger';
 
 const evName = 'dmode';
 
@@ -27,7 +27,7 @@ export default {
       setPosition: this.setPosition,
       guidesStatic: () => this.guidesStatic,
       guidesTarget: () => this.guidesTarget,
-      ...dragger
+      ...dragger,
     };
     this.setupGuides();
     this.opts = opts;
@@ -59,7 +59,7 @@ export default {
       mode: this.opts.mode,
       target: this.target,
       guidesTarget: this.guidesTarget,
-      guidesStatic: this.guidesStatic
+      guidesStatic: this.guidesStatic,
     };
   },
 
@@ -98,12 +98,8 @@ export default {
       this.guidesEl = guidesEl;
       this.elGuideInfoX = elInfoX;
       this.elGuideInfoY = elInfoY;
-      this.elGuideInfoContentX = elInfoX.querySelector(
-        `.${pfx}guide-info__content`
-      );
-      this.elGuideInfoContentY = elInfoY.querySelector(
-        `.${pfx}guide-info__content`
-      );
+      this.elGuideInfoContentX = elInfoX.querySelector(`.${pfx}guide-info__content`);
+      this.elGuideInfoContentY = elInfoY.querySelector(`.${pfx}guide-info__content`);
 
       em.on(
         'canvas:update frame:scroll',
@@ -121,11 +117,7 @@ export default {
     let result = [];
     const el = this.target.getEl();
     const { parentNode = {} } = el;
-    each(
-      parentNode.children,
-      item =>
-        (result = result.concat(el !== item ? this.getElementGuides(item) : []))
-    );
+    each(parentNode.children, item => (result = result.concat(el !== item ? this.getElementGuides(item) : [])));
 
     return result.concat(this.getElementGuides(parentNode));
   },
@@ -179,14 +171,11 @@ export default {
     const un = 'px';
     const guideSize = item.active ? 2 : 1;
     let numEl = el.children[0];
-    el.style = `position: absolute; background-color: ${
-      item.active ? 'green' : 'red'
-    };`;
+    el.style = `position: absolute; background-color: ${item.active ? 'green' : 'red'};`;
 
     if (!el.children.length) {
       numEl = document.createElement('div');
-      numEl.style =
-        'position: absolute; color: red; padding: 5px; top: 0; left: 0;';
+      numEl.style = 'position: absolute; color: red; padding: 5px; top: 0; left: 0;';
       el.appendChild(numEl);
     }
 
@@ -220,12 +209,12 @@ export default {
       { type: 'l', x: left }, // Left
       { type: 'r', x: left + width }, // Right
       { type: 'x', x: left + width / 2 }, // Mid x
-      { type: 'y', y: top + height / 2 } // Mid y
+      { type: 'y', y: top + height / 2 }, // Mid y
     ].map(item => ({
       ...item,
       origin: el,
       originRect,
-      guide: opts.debug && this.renderGuide(item)
+      guide: opts.debug && this.renderGuide(item),
     }));
     guides.forEach(item => this.guides.push(item));
 
@@ -237,8 +226,7 @@ export default {
     (transform || '').split(' ').forEach(item => {
       const itemStr = item.trim();
       const fn = `translate${axis.toUpperCase()}(`;
-      if (itemStr.indexOf(fn) === 0)
-        result = parseFloat(itemStr.replace(fn, ''));
+      if (itemStr.indexOf(fn) === 0) result = parseFloat(itemStr.replace(fn, ''));
     });
     return result;
   },
@@ -302,8 +290,7 @@ export default {
     }
 
     // Update StyleManager properties
-    em.getSelected() &&
-      keys(styleUp).forEach(i => em.trigger(`update:component:style:${i}`));
+    em.getSelected() && keys(styleUp).forEach(i => em.trigger(`update:component:style:${i}`));
   },
 
   _getDragData() {
@@ -311,7 +298,7 @@ export default {
     return {
       target,
       parent: target.parent(),
-      index: target.index()
+      index: target.index(),
     };
   },
 
@@ -353,7 +340,7 @@ export default {
         y: top,
         width: `${width}px`,
         height: `${height}px`,
-        position
+        position,
       });
     }
   },
@@ -363,8 +350,7 @@ export default {
     const { onDrag } = opts;
     this.updateGuides(guidesTarget);
     opts.debug && guidesTarget.forEach(item => this.renderGuide(item));
-    opts.guidesInfo &&
-      this.renderGuideInfo(guidesTarget.filter(item => item.active));
+    opts.guidesInfo && this.renderGuideInfo(guidesTarget.filter(item => item.active));
     onDrag && onDrag(this._getDragData());
   },
 
@@ -397,12 +383,8 @@ export default {
       const isY = axis === 'y';
       const origEdge1 = rectOrigin[isY ? 'left' : 'top'];
       const origEdge1Raw = rectOrigin.rect[isY ? 'left' : 'top'];
-      const origEdge2 = isY
-        ? origEdge1 + rectOrigin.width
-        : origEdge1 + rectOrigin.height;
-      const origEdge2Raw = isY
-        ? origEdge1Raw + rectOrigin.rect.width
-        : origEdge1Raw + rectOrigin.rect.height;
+      const origEdge2 = isY ? origEdge1 + rectOrigin.width : origEdge1 + rectOrigin.height;
+      const origEdge2Raw = isY ? origEdge1Raw + rectOrigin.rect.width : origEdge1Raw + rectOrigin.rect.height;
       const elGuideInfo = this[`elGuideInfo${axis.toUpperCase()}`];
       const elGuideInfoCnt = this[`elGuideInfoContent${axis.toUpperCase()}`];
       const guideInfoStyle = elGuideInfo.style;
@@ -415,11 +397,8 @@ export default {
           const statEdge1 = isY ? left : top;
           const statEdge2 = isY ? left + width : top + height;
           return {
-            gap:
-              statEdge2 < origEdge1
-                ? origEdge1 - statEdge2
-                : statEdge1 - origEdge2,
-            guide: stat
+            gap: statEdge2 < origEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2,
+            guide: stat,
           };
         })
         .filter(item => item.gap > 0)
@@ -432,16 +411,12 @@ export default {
         const statEdge1 = isY ? left : top;
         const statEdge1Raw = isY ? rect.left : rect.top;
         const statEdge2 = isY ? left + width : top + height;
-        const statEdge2Raw = isY
-          ? rect.left + rect.width
-          : rect.top + rect.height;
+        const statEdge2Raw = isY ? rect.left + rect.width : rect.top + rect.height;
         const posFirst = isY ? item.y : item.x;
         const posSecond = isEdge1 ? statEdge2 : origEdge2;
         const pos2 = `${posFirst}px`;
         const size = isEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2;
-        const sizeRaw = isEdge1
-          ? origEdge1Raw - statEdge2Raw
-          : statEdge1Raw - origEdge2Raw;
+        const sizeRaw = isEdge1 ? origEdge1Raw - statEdge2Raw : statEdge1Raw - origEdge2Raw;
         guideInfoStyle.display = '';
         guideInfoStyle[isY ? 'top' : 'left'] = pos2;
         guideInfoStyle[isY ? 'left' : 'top'] = `${posSecond}px`;
@@ -457,7 +432,7 @@ export default {
           size,
           sizeRaw,
           elGuideInfo,
-          elGuideInfoCnt
+          elGuideInfoCnt,
         });
       }
     });
@@ -471,5 +446,5 @@ export default {
     const body = Canvas.getBody();
     classes.forEach(cls => body.classList[methodCls](cls));
     Canvas[enable ? 'startAutoscroll' : 'stopAutoscroll']();
-  }
+  },
 };

src/commands/view/ComponentStyleClear.js

@@ -1,4 +1,4 @@
-import { isArray, flatten } from 'underscore';
+import { flatten } from 'underscore';
 
 export default {
   run(ed, s, opts = {}) {
@@ -21,5 +21,5 @@ export default {
     }
 
     return toRemove;
-  }
+  },
 };

src/commands/view/MoveComponent.js

@@ -1,6 +1,6 @@
 import { extend, bindAll } from 'underscore';
 import Backbone from 'backbone';
-import { on, off } from 'utils/mixins';
+import { on, off } from '../../utils/mixins';
 import SelectComponent from './SelectComponent';
 import SelectPosition from './SelectPosition';
 
@@ -164,8 +164,6 @@ export default extend({}, SelectPosition, SelectComponent, {
     this.getBadgeEl().removeClass(this.badgeClass);
     this.getHighlighterEl().removeClass(this.hoverClass);
     var wp = this.$wrapper;
-    wp.css('cursor', '')
-      .unbind()
-      .removeClass(this.noSelClass);
-  }
+    wp.css('cursor', '').unbind().removeClass(this.noSelClass);
+  },
 });

src/commands/view/SelectComponent.js

@@ -1,9 +1,9 @@
 import Backbone from 'backbone';
-import { bindAll, isElement, isUndefined, debounce } from 'underscore';
-import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from 'utils/mixins';
-import { isVisible, isDoc } from 'utils/dom';
-import ToolbarView from 'dom_components/view/ToolbarView';
-import Toolbar from 'dom_components/model/Toolbar';
+import { bindAll, isElement, debounce } from 'underscore';
+import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from '../../utils/mixins';
+import { isVisible, isDoc } from '../../utils/dom';
+import ToolbarView from '../../dom_components/view/ToolbarView';
+import Toolbar from '../../dom_components/model/Toolbar';
 
 const $ = Backbone.$;
 let showOffsets;

src/commands/view/ShowOffset.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
-import { isTextNode } from 'utils/mixins';
+import { isTextNode } from '../../utils/mixins';
 const $ = Backbone.$;
 
 export default {
@@ -16,11 +16,7 @@ export default {
     const zoom = this.em.getZoomDecimal();
     const el = opt.el || '';
 
-    if (
-      !config.showOffsets ||
-      isTextNode(el) ||
-      (!config.showOffsetsSelected && state == 'Fixed')
-    ) {
+    if (!config.showOffsets || isTextNode(el) || (!config.showOffsetsSelected && state == 'Fixed')) {
       editor.stopCommand(this.id, opts);
       return;
     }
@@ -106,8 +102,7 @@ export default {
     var marginLeftSt = parseFloat(style.marginLeft.replace(unit, '')) * zoom;
     var marginRightSt = parseFloat(style.marginRight.replace(unit, '')) * zoom;
     var marginTopSt = parseFloat(style.marginTop.replace(unit, '')) * zoom;
-    var marginBottomSt =
-      parseFloat(style.marginBottom.replace(unit, '')) * zoom;
+    var marginBottomSt = parseFloat(style.marginBottom.replace(unit, '')) * zoom;
     var mtStyle = marginT.style;
     var mbStyle = marginB.style;
     var mlStyle = marginL.style;
@@ -178,5 +173,5 @@ export default {
     var canvas = editor.Canvas;
     var offsetViewer = canvas[method](opts.view);
     offsetViewer.style.opacity = 0;
-  }
+  },
 };