Update component the resizer in SelectComponent

src/commands/view/Resize.js

@@ -25,8 +25,8 @@ module.exports = {
   },
 
   stop() {
-    if(this.canvasResizer)
+    const resizer = this.canvasResizer;
-      this.canvasResizer.blur();
+    resizer && resizer.blur();
   },
 
 };

src/commands/view/SelectComponent.js

@@ -1,4 +1,5 @@
-import {on, off} from 'utils/mixins'
+import {bindAll} from 'underscore';
+import {on, off} from 'utils/mixins';
 
 const ToolbarView = require('dom_components/view/ToolbarView');
 const Toolbar = require('dom_components/model/Toolbar');
@@ -10,12 +11,12 @@ const $ = Backbone.$;
 module.exports = {
 
   init(o) {
-    _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
+    bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress',
+      'copyComp', 'pasteComp', 'onFrameScroll');
   },
 
 
   enable() {
-    _.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll');
     this.frameOff = this.canvasOff = this.adjScroll = null;
     var config  = this.config.em.get('Config');
     this.startSelectComponent();
@@ -25,7 +26,6 @@ module.exports = {
 
     em.on('component:update', this.updateAttached, this);
     em.on('change:canvasOffset', this.updateAttached, this);
-    em.on('change:selectedComponent', this.updateToolbar, this);
   },
 
   /**
@@ -297,6 +297,7 @@ module.exports = {
   onSelect() {
     const editor = this.editor;
     const model = this.em.getSelected();
+    this.updateToolbar(model);
 
     if (model) {
       const el = model.view.el;
@@ -319,22 +320,28 @@ module.exports = {
     var editor = em ? em.get('Editor') : '';
     var config = em ? em.get('Config') : '';
     var pfx = config.stylePrefix || '';
-    var attrName = 'data-' + pfx + 'handler';
+    var attrName = `data-${pfx}handler`;
-    var resizeClass = pfx + 'resizing';
+    var resizeClass = `${pfx}resizing`;
     var model = em.get('selectedComponent');
     var resizable = model.get('resizable');
     var options = {};
     var modelToStyle;
 
     var toggleBodyClass = (method, e, opts) => {
-      opts.docs && opts.docs.find('body')[method](resizeClass);
+      const docs = opts.docs;
+      docs && docs.forEach(doc => {
+        const body = doc.body;
+        const cls = body.className || '';
+        body.className = (method == 'add' ?
+          `${cls} ${resizeClass}` : cls.replace(resizeClass, '')).trim();
+      });
     };
 
 
     if (editor && resizable) {
       options = {
         onStart(e, opts) {
-          toggleBodyClass('addClass', e, opts);
+          toggleBodyClass('add', e, opts);
           modelToStyle = em.get('StyleManager').getModelToStyle(model);
           showOffsets = 0;
         },
@@ -343,7 +350,7 @@ module.exports = {
           editor.trigger('change:canvasOffset');
         },
         onEnd(e, opts) {
-          toggleBodyClass('removeClass', e, opts);
+          toggleBodyClass('remove', e, opts);
           editor.trigger('change:canvasOffset');
           showOffsets = 1;
         },
@@ -367,7 +374,8 @@ module.exports = {
           }
 
           modelToStyle.setStyle(style, {avoidStore: 1});
-          em.trigger('targetStyleUpdated');
+          const updateEvent = `update:component:style`;
+          em && em.trigger(`${updateEvent}:height ${updateEvent}:width`);
 
           if (store) {
             modelToStyle.trigger('change:style', modelToStyle, style, {});

src/css_composer/index.js

@@ -77,9 +77,8 @@ module.exports = () => {
         var elStyle = (c.em && c.em.config.style) || '';
         c.rules = elStyle || c.rules;
 
-        c.sm = c.em; // TODO Refactor
+        c.sm = c.em;
         rules = new CssRules([], c);
-
         rulesView = new CssRulesView({
           collection: rules,
           config: c,
@@ -182,7 +181,7 @@ module.exports = () => {
           opt.state = s;
           opt.mediaText = w;
           opt.selectors = '';
-          rule = new CssRule(opt);
+          rule = new CssRule(opt, c);
           rule.get('selectors').add(selectors);
           rules.add(rule);
           return rule;

src/css_composer/model/CssRule.js

@@ -25,9 +25,9 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     stylable: true,
 	},
 
-  initialize(c, opt) {
+  initialize(c, opt = {}) {
       this.config = c || {};
-      const em = opt && opt.sm;
+      const em = opt.em;
       let selectors = this.config.selectors || [];
       this.em = em;
 

src/css_composer/model/CssRules.js

@@ -4,12 +4,12 @@ var CssRule = require('./CssRule');
 module.exports = Backbone.Collection.extend({
 
   initialize(models, opt) {
-
     // Inject editor
     if(opt && opt.sm)
       this.editor = opt.sm;
 
-    this.model  = (attrs, options) => {
+    // Not used
+    this.model = (attrs, options) => {
       var model;
 
       if(!options.sm && opt && opt.sm)
@@ -25,9 +25,10 @@ module.exports = Backbone.Collection.extend({
 
   },
 
-  add(models, opt) {
+  add(models, opt = {}) {
-    if(typeof models === 'string')
+    if (typeof models === 'string') {
       models = this.editor.get('Parser').parseCss(models);
+    }
     return Backbone.Collection.prototype.add.apply(this, [models, opt]);
   },
 

src/domain_abstract/model/Styleable.js

@@ -33,6 +33,10 @@ export default {
     }
 
     this.set('style', Object.assign({}, prop), opts);
+
+    for (let pr in prop) {
+      this.trigger(`change:style:${pr}`);
+    }
   },
 
   /**

src/style_manager/view/PropertyView.js

@@ -1,3 +1,5 @@
+import {bindAll} from 'underscore';
+
 module.exports = Backbone.View.extend({
 
   template(model) {
@@ -37,8 +39,10 @@ module.exports = Backbone.View.extend({
   },
 
   initialize(o = {}) {
+    bindAll(this, 'targetUpdated');
     this.config = o.config || {};
-    this.em = this.config.em;
+    const em = this.config.em;
+    this.em = em;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
     this.target = o.target || {};
@@ -57,6 +61,7 @@ module.exports = Backbone.View.extend({
       model.set('value', model.getDefaultValue());
     }
 
+    em && em.on(`update:component:style:${this.property}`, this.targetUpdated);
     this.listenTo(this.propTarget, 'update', this.targetUpdated);
     this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model, 'change:value', this.modelValueChanged);

src/styles/scss/main.scss

@@ -444,10 +444,10 @@
 
 /********* Device Manager **********/
 
-.#{$app-prefix}devices-c{
+.#{$app-prefix}devices-c {
   display: flex;
   align-items: center;
-  padding: 4px;
+  padding: 3px;
   /*
   padding: 10px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);

src/utils/Resizer.js

@@ -1,6 +1,9 @@
+import {bindAll, defaults} from 'underscore';
+import {on, off} from 'utils/mixins';
+
 const $ = Backbone.$;
 
-var defaults = {
+var defaultOpts = {
   // Function which returns custom X and Y coordinates of the mouse
   mousePosFetcher: null,
   // Indicates custom target updating strategy
@@ -49,6 +52,7 @@ class Resizer {
    */
   constructor(opts = {}) {
     this.setOptions(opts);
+    bindAll(this, 'handleKeyDown', 'handleMouseDown', 'move', 'stop')
     return this;
   }
 
@@ -57,13 +61,7 @@ class Resizer {
    * @param {Object} options
    */
   setOptions(options = {}) {
-    // Setup default options
+    this.opts = defaults(options, defaultOpts);
-    for (var name in defaults) {
-      if (!(name in options))
-        options[name] = defaults[name];
-    }
-
-    this.opts = options;
     this.setup();
   }
 
@@ -74,45 +72,31 @@ class Resizer {
     const opts = this.opts;
     const pfx = opts.prefix || '';
     const appendTo = opts.appendTo || document.body;
-    let container;
+    let container = this.container;
 
     // Create container if not yet exist
-    if (!this.container) {
+    if (!container) {
       container = document.createElement('div');
-      container.className = pfx + 'resizer-c';
+      container.className = `${pfx}resizer-c`;
       appendTo.appendChild(container);
       this.container = container;
     }
 
-    container = this.container;
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
 
     // Create handlers
-    var handlers = {
+    const handlers = {};
-      tl: opts.tl ? createHandler('tl', opts) : '',
+    ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'].forEach(hdl =>
-      tc: opts.tc ? createHandler('tc', opts) : '',
+      handlers[hdl] = opts[hdl] ? createHandler(hdl, opts) : '');
-      tr: opts.tr ? createHandler('tr', opts) : '',
-      cl: opts.cl ? createHandler('cl', opts) : '',
-      cr: opts.cr ? createHandler('cr', opts) : '',
-      bl: opts.bl ? createHandler('bl', opts) : '',
-      bc: opts.bc ? createHandler('bc', opts) : '',
-      br: opts.br ? createHandler('br', opts) : '',
-    };
 
     for (let n in handlers) {
       const handler = handlers[n];
-      if (handler) {
+      handler && container.appendChild(handler);
-        container.appendChild(handler);
-      }
     }
 
     this.handlers = handlers;
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.move = this.move.bind(this);
-    this.stop = this.stop.bind(this);
     this.mousePosFetcher = opts.mousePosFetcher;
     this.updateTarget = opts.updateTarget;
     this.posFetcher = opts.posFetcher;
@@ -148,10 +132,7 @@ class Resizer {
    * Returns documents
    */
   getDocumentEl() {
-    if (!this.$doc) {
+    return [this.el.ownerDocument, document];
-      this.$doc = $([this.el.ownerDocument, document]);
-    }
-    return this.$doc;
   }
 
   /**
@@ -174,18 +155,19 @@ class Resizer {
       return;
     }
 
+    // Show the handlers
     this.el = el;
+    var unit = 'px';
     var rect = this.getElementPos(el);
     var container = this.container;
     var contStyle = container.style;
-    var unit = 'px';
     contStyle.left = rect.left + unit;
     contStyle.top = rect.top + unit;
     contStyle.width = rect.width + unit;
     contStyle.height = rect.height + unit;
-    this.container.style.display = 'block';
+    container.style.display = 'block';
 
-		this.getDocumentEl().on('mousedown', this.handleMouseDown);
+    on(this.getDocumentEl(), 'mousedown', this.handleMouseDown);
   }
 
   /**
@@ -193,9 +175,9 @@ class Resizer {
    */
   blur() {
     this.container.style.display = 'none';
-    if(this.el) {
+
-      var doc = $([this.el.ownerDocument, document]);
+    if (this.el) {
-      this.getDocumentEl().off('mousedown', this.handleMouseDown);
+      off(this.getDocumentEl(), 'mousedown', this.handleMouseDown);
       this.el = null;
     }
   }
@@ -235,9 +217,9 @@ class Resizer {
 
     // Listen events
     var doc = this.getDocumentEl();
-    doc.on('mousemove', this.move);
+    on(doc, 'mousemove', this.move);
-    doc.on('keydown', this.handleKeyDown);
+    on(doc, 'keydown', this.handleKeyDown);
-    doc.on('mouseup', this.stop);
+    on(doc, 'mouseup', this.stop);
     this.move(e);
 
     // Start callback
@@ -251,6 +233,7 @@ class Resizer {
    * @param  {Event} e
    */
   move(e) {
+    const onMove = this.onMove;
     var mouseFetch = this.mousePosFetcher;
     var currentPos = mouseFetch ? mouseFetch(e) : {
       x: e.clientX,
@@ -267,15 +250,12 @@ class Resizer {
       ctrl: e.ctrlKey,
       alt: e.altKey
     };
-    //console.log('move resizer ', this.currentPos);
 
     this.rectDim = this.calc(this);
     this.updateRect(0);
 
     // Move callback
-    if(typeof this.onMove === 'function') {
+    onMove && onMove(e);
-      this.onMove(e);
-    }
 
     // In case the mouse button was released outside of the window
     if (e.which === 0) {
@@ -289,9 +269,9 @@ class Resizer {
    */
   stop(e) {
     var doc = this.getDocumentEl();
-    doc.off('mousemove', this.move);
+    off(doc, 'mousemove', this.move);
-    doc.off('keydown', this.handleKeyDown);
+    off(doc, 'keydown', this.handleKeyDown);
-    doc.off('mouseup', this.stop);
+    off(doc, 'mouseup', this.stop);
     this.updateRect(1);
 
     // Stop callback
@@ -304,26 +284,28 @@ class Resizer {
    * Update rect
    */
   updateRect(store) {
-    var elStyle = this.el.style;
+    const el = this.el;
-    var conStyle = this.container.style;
+    const rect = this.rectDim;
-    var rect = this.rectDim;
+    const conStyle = this.container.style;
+    const updateTarget = this.updateTarget;
     const selectedHandler = this.getSelectedHandler();
 
     // Use custom updating strategy if requested
-    if (typeof this.updateTarget === 'function') {
+    if (typeof updateTarget === 'function') {
-      this.updateTarget(this.el, rect, {
+      updateTarget(el, rect, {
         store,
         selectedHandler
       });
     } else {
+      const elStyle = el.style;
       elStyle.width = rect.w + 'px';
       elStyle.height = rect.h + 'px';
       //elStyle.top = rect.top + 'px';
       //elStyle.left = rect.left + 'px';
     }
 
-    var rectEl = this.getElementPos(this.el);
+    const unit = 'px';
-    var unit = 'px';
+    const rectEl = this.getElementPos(el);
     conStyle.left = rectEl.left + unit;
     conStyle.top = rectEl.top + unit;
     conStyle.width = rectEl.width + unit;