Update EditorModel

src/editor/model/Editor.js

@@ -3,6 +3,7 @@ import Backbone from 'backbone';
 import $ from 'utils/cash-dom';
 import Extender from 'utils/extender';
 import { getModel, hasWin } from 'utils/mixins';
+import { Model } from 'common';
 import Selected from './Selected';
 
 Backbone.$ = $;
@@ -47,7 +48,7 @@ const logs = {
   error: console.error,
 };
 
-export default Backbone.Model.extend({
+export default class EditorModel extends Model {
   defaults() {
     return {
       editing: 0,
@@ -63,7 +64,7 @@ export default Backbone.Model.extend({
       opened: {},
       device: '',
     };
-  },
+  }
 
   initialize(c = {}) {
     this.config = c;
@@ -103,21 +104,21 @@ export default Backbone.Model.extend({
         this.logWarning(`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'`);
       });
     });
-  },
+  }
 
   _checkReady() {
     if (this.get('readyLoad') && this.get('readyCanvas') && !this.get('ready')) {
       this.set('ready', true);
     }
-  },
+  }
 
   getContainer() {
     return this.config.el;
-  },
+  }
 
   listenLog(event) {
     this.listenTo(this, `log:${event}`, logs[event]);
-  },
+  }
 
   /**
    * Get configurations
@@ -128,7 +129,7 @@ export default Backbone.Model.extend({
   getConfig(prop) {
     const config = this.config;
     return isUndefined(prop) ? config : config[prop];
-  },
+  }
 
   /**
    * Should be called after all modules and plugins are loaded
@@ -157,7 +158,7 @@ export default Backbone.Model.extend({
     } else {
       setTimeout(postLoad);
     }
-  },
+  }
 
   /**
    * Set the alert before unload in case it's requested
@@ -177,7 +178,7 @@ export default Backbone.Model.extend({
     if (stm.isAutosave() && changes >= stm.getStepsBeforeSave()) {
       this.store();
     }
-  },
+  }
 
   /**
    * Load generic module
@@ -214,7 +215,7 @@ export default Backbone.Model.extend({
     Mod.onLoad && this.get('toLoad').push(Mod);
     this.get('modules').push(Mod);
     return this;
-  },
+  }
 
   /**
    * Initialize editor model and set editor instance
@@ -228,11 +229,11 @@ export default Backbone.Model.extend({
       this.destroyed = 0;
     }
     this.set('Editor', editor);
-  },
+  }
 
   getEditor() {
     return this.get('Editor');
-  },
+  }
 
   /**
    * This method handles updates on the editor and tries to store them
@@ -254,11 +255,11 @@ export default Backbone.Model.extend({
       const { unset, ...opts } = opt;
       this.set('changesCount', curr + 1, opts);
     }, 0);
-  },
+  }
 
   changesUp(opts) {
     this.handleUpdates(0, 0, opts);
-  },
+  }
 
   /**
    * Callback on component hover
@@ -271,7 +272,7 @@ export default Backbone.Model.extend({
     const prev = this.previous('componentHovered');
     prev && this.trigger('component:unhovered', prev, options);
     component && this.trigger('component:hovered', component, options);
-  },
+  }
 
   /**
    * Returns model of the selected component
@@ -280,7 +281,7 @@ export default Backbone.Model.extend({
    */
   getSelected() {
     return this.get('selected').lastComponent();
-  },
+  }
 
   /**
    * Returns an array of all selected components
@@ -289,7 +290,7 @@ export default Backbone.Model.extend({
    */
   getSelectedAll() {
     return this.get('selected').allComponents();
-  },
+  }
 
   /**
    * Select a component
@@ -360,7 +361,7 @@ export default Backbone.Model.extend({
       this.addSelected(model, opts);
       added = model;
     });
-  },
+  }
 
   /**
    * Add component to selection
@@ -378,7 +379,7 @@ export default Backbone.Model.extend({
       opts.forceChange && this.removeSelected(model, opts);
       selected.addComponent(model, opts);
     });
-  },
+  }
 
   /**
    * Remove component from selection
@@ -388,7 +389,7 @@ export default Backbone.Model.extend({
    */
   removeSelected(el, opts = {}) {
     this.get('selected').removeComponent(getModel(el, $), opts);
-  },
+  }
 
   /**
    * Toggle component selection
@@ -407,7 +408,7 @@ export default Backbone.Model.extend({
         this.addSelected(model, opts);
       }
     });
-  },
+  }
 
   /**
    * Hover a component
@@ -420,11 +421,11 @@ export default Backbone.Model.extend({
     if (model && !model.get('hoverable')) return;
     opts.forceChange && this.set('componentHovered', '');
     this.set('componentHovered', model, opts);
-  },
+  }
 
   getHovered() {
     return this.get('componentHovered');
-  },
+  }
 
   /**
    * Set components inside editor's canvas. This method overrides actual components
@@ -435,7 +436,7 @@ export default Backbone.Model.extend({
    */
   setComponents(components, opt = {}) {
     return this.get('DomComponents').setComponents(components, opt);
-  },
+  }
 
   /**
    * Returns components model from the editor's canvas
@@ -450,7 +451,7 @@ export default Backbone.Model.extend({
 
     var wrp = cmp.getComponents();
     return cm.getCode(wrp, 'json');
-  },
+  }
 
   /**
    * Set style inside editor's canvas. This method overrides actual style
@@ -464,7 +465,7 @@ export default Backbone.Model.extend({
     cssc.clear(opt);
     cssc.getAll().add(style, opt);
     return this;
-  },
+  }
 
   /**
    * Add styles to the editor
@@ -475,7 +476,7 @@ export default Backbone.Model.extend({
   addStyle(style, opts = {}) {
     const res = this.getStyle().add(style, opts);
     return isArray(res) ? res : [res];
-  },
+  }
 
   /**
    * Returns rules/style model from the editor's canvas
@@ -484,7 +485,7 @@ export default Backbone.Model.extend({
    */
   getStyle() {
     return this.get('CssComposer').getAll();
-  },
+  }
 
   /**
    * Change the selector state
@@ -494,7 +495,7 @@ export default Backbone.Model.extend({
   setState(value) {
     this.set('state', value);
     return this;
-  },
+  }
 
   /**
    * Get the current selector state
@@ -502,7 +503,7 @@ export default Backbone.Model.extend({
    */
   getState() {
     return this.get('state') || '';
-  },
+  }
 
   /**
    * Returns HTML built inside canvas
@@ -525,7 +526,7 @@ export default Backbone.Model.extend({
       : '';
     html += js ? `<script>${js}</script>` : '';
     return html;
-  },
+  }
 
   /**
    * Returns CSS built inside canvas
@@ -551,7 +552,7 @@ export default Backbone.Model.extend({
         ...opts,
       });
     return wrp ? (opts.json ? css : protCss + css) : '';
-  },
+  }
 
   /**
    * Returns JS of all components
@@ -561,7 +562,7 @@ export default Backbone.Model.extend({
   getJs(opts = {}) {
     var wrp = opts.component || this.get('DomComponents').getWrapper();
     return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : '';
-  },
+  }
 
   /**
    * Store data to the current storage
@@ -581,7 +582,7 @@ export default Backbone.Model.extend({
     });
 
     return store;
-  },
+  }
 
   storeData() {
     let result = {};
@@ -593,7 +594,7 @@ export default Backbone.Model.extend({
       result = { ...result, ...m.store(1) };
     });
     return result;
-  },
+  }
 
   /**
    * Load data from the current storage
@@ -605,7 +606,7 @@ export default Backbone.Model.extend({
       this.loadData(res);
       clb && clb(res);
     });
-  },
+  }
 
   loadData(data = {}) {
     const sm = this.get('StorageManager');
@@ -617,7 +618,7 @@ export default Backbone.Model.extend({
     });
 
     return result;
-  },
+  }
 
   /**
    * Returns cached load
@@ -645,7 +646,7 @@ export default Backbone.Model.extend({
       clb && clb(res);
       setTimeout(() => this.trigger('storage:load', res));
     });
-  },
+  }
 
   /**
    * Returns device model by name
@@ -655,7 +656,7 @@ export default Backbone.Model.extend({
   getDeviceModel() {
     var name = this.get('device');
     return this.get('DeviceManager').get(name);
-  },
+  }
 
   /**
    * Run default command if setted
@@ -668,7 +669,7 @@ export default Backbone.Model.extend({
     command.stop(this, this, opts);
     command.run(this, this, opts);
     this.defaultRunning = 1;
-  },
+  }
 
   /**
    * Stop default command
@@ -681,7 +682,7 @@ export default Backbone.Model.extend({
     if (!command || !this.defaultRunning) return;
     command.stop(this, this, opts);
     this.defaultRunning = 0;
-  },
+  }
 
   /**
    * Update canvas dimensions and refresh data useful for tools positioning
@@ -691,7 +692,7 @@ export default Backbone.Model.extend({
     this.set('canvasOffset', null);
     this.set('canvasOffset', this.get('Canvas').getOffset());
     opts.tools && this.trigger('canvas:updateTools');
-  },
+  }
 
   /**
    * Clear all selected stuf inside the window, sometimes is useful to call before
@@ -702,7 +703,7 @@ export default Backbone.Model.extend({
   clearSelection(win) {
     var w = win || window;
     w.getSelection().removeAllRanges();
-  },
+  }
 
   /**
    * Get the current media text
@@ -715,7 +716,7 @@ export default Backbone.Model.extend({
     const preview = config.devicePreviewMode;
     const width = device && device.get('widthMedia');
     return device && width && !preview ? `(${condition}: ${width})` : '';
-  },
+  }
 
   /**
    * Return the component wrapper
@@ -723,19 +724,19 @@ export default Backbone.Model.extend({
    */
   getWrapper() {
     return this.get('DomComponents').getWrapper();
-  },
+  }
 
   setCurrentFrame(frameView) {
     return this.set('currentFrame', frameView);
-  },
+  }
 
   getCurrentFrame() {
     return this.get('currentFrame');
-  },
+  }
 
   getCurrentFrameModel() {
     return (this.getCurrentFrame() || {}).model;
-  },
+  }
 
   /**
    * Return the count of changes made to the content and not yet stored.
@@ -744,24 +745,24 @@ export default Backbone.Model.extend({
    */
   getDirtyCount() {
     return this.get('changesCount');
-  },
+  }
 
   getZoomDecimal() {
     return this.get('Canvas').getZoomDecimal();
-  },
+  }
 
   getZoomMultiplier() {
     return this.get('Canvas').getZoomMultiplier();
-  },
+  }
 
   setDragMode(value) {
     return this.set('dmode', value);
-  },
+  }
 
   t(...args) {
     const i18n = this.get('I18n');
     return i18n?.t(...args);
-  },
+  }
 
   /**
    * Returns true if the editor is in absolute mode
@@ -769,7 +770,7 @@ export default Backbone.Model.extend({
    */
   inAbsoluteMode() {
     return this.get('dmode') === 'absolute';
-  },
+  }
 
   /**
    * Destroy editor
@@ -790,21 +791,21 @@ export default Backbone.Model.extend({
     ['config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {}));
     editors.splice(editors.indexOf(editor), 1);
     hasWin() && $(config.el).empty().attr(this.attrsOrig);
-  },
+  }
 
   getEditing() {
     const res = this.get('editing');
     return (res && res.model) || null;
-  },
+  }
 
   setEditing(value) {
     this.set('editing', value);
     return this;
-  },
+  }
 
   isEditing() {
     return !!this.get('editing');
-  },
+  }
 
   log(msg, opts = {}) {
     const { ns, level = 'debug' } = opts;
@@ -816,19 +817,19 @@ export default Backbone.Model.extend({
       this.trigger(logNs, msg, opts);
       level && this.trigger(`${logNs}:${level}`, msg, opts);
     }
-  },
+  }
 
   logInfo(msg, opts) {
     this.log(msg, { ...opts, level: 'info' });
-  },
+  }
 
   logWarning(msg, opts) {
     this.log(msg, { ...opts, level: 'warning' });
-  },
+  }
 
   logError(msg, opts) {
     this.log(msg, { ...opts, level: 'error' });
-  },
+  }
 
   initBaseColorPicker(el, opts = {}) {
     const config = this.getConfig();
@@ -848,7 +849,7 @@ export default Backbone.Model.extend({
       ...opts,
       ...colorPicker,
     });
-  },
+  }
 
   /**
    * Execute actions without triggering the storage and undo manager.
@@ -860,7 +861,7 @@ export default Backbone.Model.extend({
     const um = this.get('UndoManager');
     um ? um.skip(clb) : clb();
     this.__skip = false;
-  },
+  }
 
   /**
    * Set/get data from the HTMLElement
@@ -882,5 +883,5 @@ export default Backbone.Model.extend({
     } else {
       el[varName][name] = value;
     }
-  },
-});
+  }
+}