Refactor resizer in ComponentView and make use of Styleable

src/dom_components/view/ComponentView.js

@@ -240,7 +240,7 @@ module.exports = Backbone.View.extend({
   /**
    * Init component for resizing
    */
-  initResize() {
+  initResize(e) {
     var em = this.opts.config.em;
     var editor = em ? em.get('Editor') : '';
     var config = em ? em.get('Config') : '';
@@ -259,45 +259,40 @@ module.exports = Backbone.View.extend({
       }
     };
 
-    if(editor && this.model.get('resizable')) {
-      editor.runCommand('resize', {
-        el: this.el,
-        options: {
-          onStart(e, opts) {
-            toggleBodyClass('addClass', e, opts);
-            modelToStyle = em.get('StyleManager').getModelToStyle(model);
-          },
-          // Update all positioned elements (eg. component toolbar)
-          onMove() {
-            editor.trigger('change:canvasOffset');
-          },
-          onEnd(e, opts) {
-            toggleBodyClass('removeClass', e, opts);
-            editor.trigger('change:canvasOffset');
-          },
-          updateTarget(el, rect, store) {
-            if (!modelToStyle) {
-              return;
-            }
-            var unit = 'px';
-            var style = _.clone(modelToStyle.get('style'));
-            var width = rect.w + (store ? 1 : 0);
-            style.width = width + unit;
-            style.height = rect.h + unit;
-            modelToStyle.set('style', style, {avoidStore: 1});
-            em.trigger('targetStyleUpdated');
-
-            // This trick will trigger the Undo Manager. To trigger "change:style"
-            // on the Model you need to provide a new object and after that
-            // Undo Manager will trigger only if values are different (this is why
-            // above I've added + 1 to width if store required)
-            if(store) {
-              var style3 = _.clone(style);
-              style3.width = (width - 1) + unit;
-              modelToStyle.set('style', style3);
-            }
+    if(editor && model.get('resizable')) {
+      let resizeOptions = {
+        onStart(e, opts) {
+          toggleBodyClass('addClass', e, opts);
+          modelToStyle = em.get('StyleManager').getModelToStyle(model);
+        },
+        // Update all positioned elements (eg. component toolbar)
+        onMove() {
+          editor.trigger('change:canvasOffset');
+        },
+        onEnd(e, opts) {
+          toggleBodyClass('removeClass', e, opts);
+          editor.trigger('change:canvasOffset');
+        },
+        updateTarget(el, rect, store) {
+          if (!modelToStyle) {
+            return;
+          }
+
+          const unit = 'px';
+          const style = modelToStyle.getStyle();
+          style.width = rect.w + unit;
+          style.height = rect.h + unit;
+          modelToStyle.setStyle(style, {avoidStore: 1});
+          em.trigger('targetStyleUpdated');
+
+          if (store) {
+            modelToStyle.setStyle(style);
           }
         }
+      };
+      editor.runCommand('resize', {
+        el: this.el,
+        options: resizeOptions
       });
     }
   },

src/domain_abstract/model/Styleable.js

@@ -15,7 +15,7 @@ export default {
    * @return {Object}
    */
   getStyle() {
-    return this.get('style');
+    return Object.assign({}, this.get('style'));
   },
 
   /**
@@ -53,7 +53,7 @@ export default {
    * @param {string} prop
    */
   removeStyle(prop) {
-    let style = Object.assign({}, this.getStyle());
+    let style = this.getStyle();
     delete style[prop];
     this.setStyle(style);
   }

src/utils/Resizer.js

@@ -9,14 +9,15 @@ var defaults = {
   onStart: null,
   onMove: null,
   onEnd: null,
-  tl: 1,
-  tc: 1,
-  tr: 1,
-  cl: 1,
-  cr: 1,
-  bl: 1,
-  bc: 1,
-  br: 1,
+  // Handlers
+  tl: 1, // Top left
+  tc: 1, // Top center
+  tr: 1, // Top right
+  cl: 1, // Center left
+  cr: 1, // Center right
+  bl: 1, // Bottom left
+  bc: 1, // Bottom center
+  br: 1, // Bottom right
 };
 
 var createHandler = (name, opts) => {