Update component the resizer in SelectComponent

Author: artf

dist/css/grapes.min.css

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

src/commands/view/Resize.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 resizeClass = pfx + 'resizing';
+    var attrName = `data-${pfx}handler`;
+    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/commands/view/SelectComponent.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/index.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/CssRule.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) {
-    if(typeof models === 'string')
+  add(models, opt = {}) {
+    if (typeof models === 'string') {
       models = this.editor.get('Parser').parseCss(models);
+    }
     return Backbone.Collection.prototype.add.apply(this, [models, opt]);
   },
 

src/css_composer/model/CssRules.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/domain_abstract/model/Styleable.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/style_manager/view/PropertyView.js

@@ -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);