From 8c293e5fba45fb96ab27918d61c1674bdc741534 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 8 Feb 2017 21:25:01 +0100
Subject: [PATCH] Add Resizer to the Image Component

---
 index.html                                    |   1 +
 src/canvas/main.js                            |  39 ++
 src/canvas/view/CanvasView.js                 |   2 +
 src/commands/main.js                          |   1 +
 src/commands/view/Resize.js                   |  31 ++
 src/dom_components/model/Component.js         |   3 +
 src/dom_components/model/ComponentImage.js    |   1 +
 src/dom_components/view/ComponentImageView.js |   3 +-
 src/dom_components/view/ComponentView.js      |  44 ++
 src/style_manager/main.js                     |  32 ++
 src/style_manager/view/SectorsView.js         |   2 +-
 src/utils/Resizer.js                          | 392 ++++++++++++++++++
 src/utils/Sorter.js                           |   1 +
 src/utils/main.js                             |   6 +-
 styles/css/main.css                           |  84 +++-
 styles/scss/_canvas.scss                      | 168 ++++++++
 styles/scss/main.scss                         |  96 +----
 17 files changed, 805 insertions(+), 101 deletions(-)
 create mode 100644 src/commands/view/Resize.js
 create mode 100644 src/utils/Resizer.js
 create mode 100644 styles/scss/_canvas.scss

diff --git a/index.html b/index.html
index 5ee30c738..717efc112 100755
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
 
 		<div id="gjs" style="height:0px; overflow:hidden">
 			<header class="header-banner">
+				<img class="c4415 gjs-comp-selected" onmousedown="return false" src="http://placehold.it/350x250/78c5d6/fff/image1.jpg">
 				<div class="container-width">
 					<!--
 					<table>
diff --git a/src/canvas/main.js b/src/canvas/main.js
index 7fcba5e60..728232ecf 100644
--- a/src/canvas/main.js
+++ b/src/canvas/main.js
@@ -144,6 +144,14 @@ define(function(require) {
 				return CanvasView.toolbarEl;
 			},
 
+			/**
+			 * Returns resizer element
+			 * @return {HTMLElement}
+			 */
+			getResizerEl: function(){
+				return CanvasView.resizerEl;
+			},
+
 			/**
 			 * Render canvas
 			 * */
@@ -233,6 +241,37 @@ define(function(require) {
 				return result;
 			},
 
+			/**
+			 * Instead of simply returning e.clientX and e.clientY this function
+			 * calculates also the offset based on the canvas. This is helpful when you
+			 * need to get X and Y position while moving between the editor area and
+			 * canvas area, which is in the iframe
+			 * @param {Event} e
+			 * @return {Object}
+			 */
+			getMouseRelativePos: function (e, options) {
+				var opts = options || {};
+				var addTop = 0;
+				var addLeft = 0;
+				var subWinOffset = opts.subWinOffset;
+				var doc = e.target.ownerDocument;
+	      var win = doc.defaultView || doc.parentWindow;
+				var frame = win.frameElement;
+				var yOffset = subWinOffset ? win.pageYOffset : 0;
+				var xOffset = subWinOffset ? win.pageXOffset : 0;
+
+				if(frame) {
+					var frameRect = frame.getBoundingClientRect(); // maybe to cache ?!?
+					addTop = frameRect.top || 0;
+					addLeft = frameRect.left || 0;
+				}
+
+				return {
+					y: e.clientY + addTop - yOffset,
+					x: e.clientX + addLeft - xOffset,
+				};
+			},
+
 			/**
 			 * Returns wrapper element
 			 * @return {HTMLElement}
diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index fb97b63c0..63fd819ad 100644
--- a/src/canvas/view/CanvasView.js
+++ b/src/canvas/view/CanvasView.js
@@ -170,12 +170,14 @@ function(Backbone, FrameView) {
 			this.placerIntEl = $('<div>', {class: ppfx + 'placeholder-int'}).get(0);
 			this.ghostEl = $('<div>', {class: ppfx + 'ghost'}).get(0);
 			this.toolbarEl = $('<div>', {class: ppfx + 'toolbar'}).get(0);
+			this.resizerEl = $('<div>', {class: ppfx + 'resizer'}).get(0);
 			this.placerEl.appendChild(this.placerIntEl);
 			this.toolsEl.appendChild(this.hlEl);
 			this.toolsEl.appendChild(this.badgeEl);
 			this.toolsEl.appendChild(this.placerEl);
 			this.toolsEl.appendChild(this.ghostEl);
 			this.toolsEl.appendChild(this.toolbarEl);
+			this.toolsEl.appendChild(this.resizerEl);
 			this.$el.append(this.toolsEl);
       var rte = this.em.get('rte');
 
diff --git a/src/commands/main.js b/src/commands/main.js
index 839bdd7d9..1bd2e40ae 100644
--- a/src/commands/main.js
+++ b/src/commands/main.js
@@ -101,6 +101,7 @@ define(function(require) {
 				defaultCommands['open-assets'] = require('./view/OpenAssets');
 				defaultCommands.fullscreen = require('./view/Fullscreen');
 				defaultCommands.preview = require('./view/Preview');
+				defaultCommands.resize = require('./view/Resize');
 
 				defaultCommands['tlb-delete'] = {
 					run: function(ed){
diff --git a/src/commands/view/Resize.js b/src/commands/view/Resize.js
new file mode 100644
index 000000000..b2d0a4e53
--- /dev/null
+++ b/src/commands/view/Resize.js
@@ -0,0 +1,31 @@
+define(function() {
+	return {
+
+		run: function(editor, sender, opts) {
+			var el = (opts && opts.el) || '';
+			var canvas = editor.Canvas;
+			var canvasResizer = this.canvasResizer;
+			var options = opts.options || {};
+
+			// Create the resizer for the canvas if not yet created
+			if(!canvasResizer) {
+				var canvasView = canvas.getCanvasView();
+				options.prefix = editor.getConfig().stylePrefix;
+				options.appendTo = canvas.getResizerEl();
+				options.posFetcher = canvasView.getElementPos.bind(canvasView);
+				options.mousePosFetcher = canvas.getMouseRelativePos;
+				this.canvasResizer = editor.Utils.Resizer.init(options);
+				canvasResizer = this.canvasResizer;
+			}
+
+			canvasResizer.setOptions(options);
+			canvasResizer.focus(el);
+		},
+
+		stop: function() {
+			if(this.canvasResizer)
+			this.canvasResizer.blur();
+		},
+
+	};
+});
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index d4157ada7..7862a210f 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -29,6 +29,9 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				// True if it's possible to clone the component
 				copyable: true,
 
+				// Indicates if it possible to resize the component (at the moment implemented only on Image)
+				resizable: false,
+
 				// TODO
 				mirror: '',
 
diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js
index e5bd69c37..9ecedeb44 100644
--- a/src/dom_components/model/ComponentImage.js
+++ b/src/dom_components/model/ComponentImage.js
@@ -9,6 +9,7 @@ define(['./Component'],
 				src: '',
 				void: 1,
 				droppable: false,
+				resizable: true,
 				traits: ['alt'],
 				toolbar: [{
 					attributes: {class: 'fa fa-arrows'},
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js
index 01882bb8a..2a08c1d9f 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.js
@@ -7,9 +7,10 @@ define(['backbone', './ComponentView'],
 
 		events: {
 			'dblclick': 'openModal',
+			'click': 'initResize',
 		},
 
-		initialize: function(o){
+		initialize: function(o) {
 			ComponentView.prototype.initialize.apply(this, arguments);
 			this.listenTo(this.model, 'change:src', this.updateSrc);
 			this.listenTo(this.model, 'dblclick active', this.openModal);
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index b9854bbb3..f8a1475e5 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -3,6 +3,10 @@ define(['backbone', './ComponentsView'],
 
 		return Backbone.View.extend({
 
+			events: {
+				'click': 'initResize',
+			},
+
 			className : function(){
 				return this.getClasses();
 			},
@@ -175,6 +179,46 @@ define(['backbone', './ComponentsView'],
 				event.viewResponse = this;
 			},
 
+			/**
+			 * Init component for resizing
+			 */
+			initResize: function () {
+				var em = this.opts.config.em;
+				var editor = em ? em.get('Editor') : '';
+				var model = this.model;
+				var modelToStyle;
+
+				if(editor && this.model.get('resizable')) {
+					editor.runCommand('resize', {
+						el: this.el,
+						options: {
+							onStart: function () {
+								modelToStyle = em.get('StyleManager').getModelToStyle(model);
+								// TODO disable component highlighting
+							},
+							onMove: function () {
+								// Update all positioned elements
+								editor.trigger('change:canvasOffset');
+							},
+							onEnd: function () {
+								// TODO enable component highlighting
+								editor.trigger('change:canvasOffset');
+							},
+							updateTarget: function(el, rect, store) {
+								if (!modelToStyle) {
+									return;
+								}
+								var style = _.clone(modelToStyle.get('style'));
+								style.width = rect.w;
+								style.height = rect.h;
+								modelToStyle.set('style', style, {avoidStore: !store});
+								em.trigger('targetStyleUpdated');
+							}
+						}
+					});
+				}
+			},
+
 			/**
 			 * Prevent default helper
 			 * @param  {Event} e
diff --git a/src/style_manager/main.js b/src/style_manager/main.js
index 152bcf949..b1591dd7c 100644
--- a/src/style_manager/main.js
+++ b/src/style_manager/main.js
@@ -225,6 +225,38 @@ define(function(require) {
 				return props;
 			},
 
+			/**
+			 * Get what to style inside Style Manager. If you select the component
+			 * without classes the entity is the Component itself and all changes will
+			 * go inside its 'style' property. Otherwise, if the selected component has
+			 * one or more classes, the function will return the corresponding CSS Rule
+			 * @param  {Model} model
+			 * @return {Model}
+			 */
+			getModelToStyle: function (model) {
+				var classes = model.get('classes');
+
+				if(c.em && classes && classes.length) {
+					var previewMode = c.em.get('Config').devicePreviewMode;
+					var device = c.em.getDeviceModel();
+					var state = !previewMode ? model.get('state') : '';
+					var deviceW = device && !previewMode ? device.get('width') : '';
+					var cssC = c.em.get('CssComposer');
+
+					var valid = _.filter(classes.models, function(item) {
+						return item.get('active');
+					});
+
+					var CssRule = cssC.get(valid, state, deviceW);
+
+					if(CssRule) {
+						return CssRule;
+					}
+				}
+
+				return model;
+			},
+
 			/**
 			 * Render sectors and properties
 			 * @return	{HTMLElement}
diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js
index 757b00931..454d253fe 100644
--- a/src/style_manager/view/SectorsView.js
+++ b/src/style_manager/view/SectorsView.js
@@ -14,7 +14,7 @@ define(['backbone', './SectorView'],
 			this.listenTo( this.collection, 'add', this.addTo);
 			this.listenTo( this.collection, 'reset', this.render);
 			this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated ' +
-				'targetStateUpdated change:device', this.targetUpdated);
+				'targetStateUpdated targetStyleUpdated change:device', this.targetUpdated);
 
 		},
 
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
new file mode 100644
index 000000000..af18ed16f
--- /dev/null
+++ b/src/utils/Resizer.js
@@ -0,0 +1,392 @@
+define(function(require) {
+
+  var defaults = {
+    // Function which returns custom X and Y coordinates of the mouse
+    mousePosFetcher: null,
+    // Indicates custom target updating strategy
+    updateTarget: null,
+    // Function which gets HTMLElement as an arg and returns it relative position
+    posFetcher: null,
+    onStart: null,
+    onMove: null,
+    onEnd: null,
+    tl: 1,
+    tc: 1,
+    tr: 1,
+    cl: 1,
+    cr: 1,
+    bl: 1,
+    bc: 1,
+    br: 1,
+  };
+
+  var createHandler = function (name, opts) {
+    var pfx = opts.prefix || '';
+    var el = this.document.createElement('i');
+    el.className = pfx + 'resizer-h ' + pfx + 'resizer-h-' + name;
+    el.setAttribute('data-' + pfx + 'handler', name);
+    return el;
+  };
+
+  var getBoundingRect = function(el, win) {
+    var w = win || window;
+    var rect = el.getBoundingClientRect();
+    return {
+      left: rect.left + w.pageXOffset,
+      top: rect.top + w.pageYOffset,
+      width: rect.width,
+      height: rect.height
+    };
+  };
+
+  return {
+
+    /**
+     * Init the Resizer with options
+     * @param  {Object} options
+     */
+    init: function(options) {
+      var opts = options || {};
+      var pfx = opts.prefix || '';
+      var appendTo = opts.appendTo || document.body;
+
+      for (var name in defaults) {
+        if (!(name in opts))
+          opts[name] = defaults[name];
+      }
+
+      var container = document.createElement('div');
+      container.className = pfx + 'resizer-c';
+      appendTo.appendChild(container);
+
+      // Create handlers
+      var handlers = {
+        tl: opts.tl ? createHandler('tl', opts) : '',
+        tc: opts.tc ? createHandler('tc', 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 (var n in handlers) {
+        if(handlers[n])
+          container.appendChild(handlers[n]);
+      }
+
+      this.container = container;
+      this.handlers = handlers;
+      this.opts = opts;
+      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;
+      this.onStart = opts.onStart;
+      this.onMove = opts.onMove;
+      this.onEnd = opts.onEnd;
+
+      return this;
+    },
+
+    /**
+     * Update options
+     * @param {Object} options
+     */
+    setOptions: function (options) {
+      var opts = options || {};
+
+      for (var opt in opts) {
+        if(opt in defaults) {
+          this[opt] = opts[opt];
+        }
+      }
+    },
+
+    /**
+     * Detects if the passed element is a resize handler
+     * @param  {HTMLElement} el
+     * @return {Boolean}
+     */
+    isHandler: function(el) {
+      var handlers = this.handlers;
+
+      for (var n in handlers) {
+        if (handlers[n] === el) return true;
+      }
+
+      return false;
+    },
+
+    /**
+     * Returns the focused element
+     * @return {HTMLElement}
+     */
+    getFocusedEl: function() {
+      return this.el;
+    },
+
+    /**
+     * Returns documents
+     */
+    getDocumentEl: function() {
+      if (!this.$doc) {
+        this.$doc = $([this.el.ownerDocument, document]);
+      }
+      return this.$doc;
+    },
+
+    /**
+     * Return element position
+     * @param  {HTMLElement} el
+     * @return {Object}
+     */
+    getElementPos: function (el) {
+      var posFetcher = this.posFetcher || '';
+      return posFetcher ? posFetcher(el) : getBoundingRect(el);
+    },
+
+    /**
+     * Focus resizer on the element, attaches handlers to it
+     * @param {HTMLElement} el
+     */
+    focus: function(el) {
+      // Avoid focusing on already focused element
+      if (el && el === this.el) {
+        return;
+      }
+
+      this.el = el;
+      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';
+
+			this.getDocumentEl().on('mousedown', this.handleMouseDown);
+    },
+
+    /**
+     * Blur from element
+     */
+    blur: function () {
+      this.container.style.display = 'none';
+      if(this.el) {
+        var doc = $([this.el.ownerDocument, document]);
+        this.getDocumentEl().off('mousedown', this.handleMouseDown);
+        this.el = null;
+      }
+    },
+
+    /**
+     * Start resizing
+     * @param  {Event} e
+     */
+    start: function(e) {
+      //Right or middel click
+      if (e.button !== 0) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      var opts = this.opts || {};
+      var attrName = 'data-' + opts.prefix + 'handler';
+      var rect = this.getElementPos(this.el);
+      this.handlerAttr = e.target.getAttribute(attrName);
+      this.clickedHandler = e.target;
+      this.startDim = {
+        t: rect.top,
+        l: rect.left,
+        w: rect.width,
+        h: rect.height,
+      };
+      this.rectDim = {
+        t: rect.top,
+        l: rect.left,
+        w: rect.width,
+        h: rect.height,
+      };
+      this.startPos = {
+        x: e.clientX,
+        y: e.clientY
+      };
+
+      // Listen events
+      var doc = this.getDocumentEl();
+      doc.on('mousemove', this.move);
+      doc.on('keydown', this.handleKeyDown);
+      doc.on('mouseup', this.stop);
+      this.move(e);
+
+      // Start callback
+      if(typeof this.onStart === 'function') {
+        this.onStart(e);
+      }
+    },
+
+    /**
+     * While resizing
+     * @param  {Event} e
+     */
+    move: function(e) {
+      var mouseFetch = this.mousePosFetcher;
+      var currentPos = mouseFetch ? mouseFetch(e) : {
+        x: e.clientX,
+        y: e.clientY
+      };
+
+      this.currentPos = currentPos;
+      this.delta = {
+        x: currentPos.x - this.startPos.x,
+        y: currentPos.y - this.startPos.y
+      };
+      this.keys = {
+        shift: e.shiftKey,
+        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') {
+        this.onMove(e);
+      }
+
+      // In case the mouse button was released outside of the window
+      if (e.which === 0) {
+        this.stop(e);
+      }
+    },
+
+    /**
+     * Stop resizing
+     * @param  {Event} e
+     */
+    stop: function(e) {
+      var doc = this.getDocumentEl();
+      doc.off('mousemove', this.move);
+      doc.off('keydown', this.handleKeyDown);
+      doc.off('mouseup', this.stop);
+      this.updateRect(1);
+
+      // Stop callback
+      if(typeof this.onEnd === 'function') {
+        this.onEnd(e);
+      }
+    },
+
+    /**
+     * Update rect
+     */
+    updateRect: function(store) {
+      var elStyle = this.el.style;
+      var conStyle = this.container.style;
+      var rect = this.rectDim;
+
+      // Use custom updating strategy if requested
+      if (typeof this.updateTarget === 'function') {
+        this.updateTarget(this.el, rect, store);
+      } else {
+        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);
+      var unit = 'px';
+      conStyle.left = rectEl.left + unit;
+      conStyle.top = rectEl.top + unit;
+      conStyle.width = rectEl.width + unit;
+      conStyle.height = rectEl.height + unit;
+    },
+
+    /**
+     * Handle ESC key
+     * @param  {Event} e
+     */
+    handleKeyDown: function (e) {
+      if (e.keyCode === 27) {
+        // Rollback to initial dimensions
+        this.rectDim = this.startDim;
+        this.stop(e);
+      }
+    },
+
+    /**
+     * Handle mousedown to check if it's possible to start resizing
+     * @param  {Event} e
+     */
+    handleMouseDown: function(e) {
+      var el = e.target;
+      if (this.isHandler(el)) {
+        this.start(e);
+      }else if(el !== this.el){
+        this.blur();
+      }
+    },
+
+    /**
+     * All positioning logic
+     * @return {Object}
+     */
+    calc: function(data) {
+      var startDim = this.startDim;
+      var box = {
+        t: 0,
+        l: 0,
+        w: startDim.w,
+        h: startDim.h
+      };
+
+      if (!data)
+        return;
+
+      var attr = data.handlerAttr;
+      if (~attr.indexOf('r')) {
+        box.w = Math.max(32, startDim.w + data.delta.x);
+      }
+      if (~attr.indexOf('b')) {
+        box.h = Math.max(32, startDim.h + data.delta.y);
+      }
+      if (~attr.indexOf('l')) {
+        box.w = Math.max(32, startDim.w - data.delta.x);
+      }
+      if (~attr.indexOf('t')) {
+        box.h = Math.max(32, startDim.h - data.delta.y);
+      }
+
+      // Enforce aspect ratio (unless shift key is being held)
+      if (attr.indexOf('c') < 0 && data.keys.shift) {
+        var ratio = startDim.w / startDim.h;
+        if (box.w / box.h > ratio) {
+          box.h = Math.round(box.w / ratio);
+        } else {
+          box.w = Math.round(box.h * ratio);
+        }
+      }
+
+      if (~attr.indexOf('l')) {
+        box.l = startDim.w - box.w;
+      }
+      if (~attr.indexOf('t')) {
+        box.t = startDim.h - box.h;
+      }
+
+      return box;
+    },
+
+  };
+
+});
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index 542da0b85..f9ec4457b 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -104,6 +104,7 @@ define(function(require) {
       },
 
       /**
+       * //TODO Refactor, use canvas.getMouseRelativePos to get mouse's X and Y
        * Update the position of the helper
        * @param  {Event} e
        */
diff --git a/src/utils/main.js b/src/utils/main.js
index 2ccbeccaa..e8e12b356 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -4,6 +4,8 @@ define(function(require) {
 
     var Sorter = require('./Sorter');
 
+    var Resizer = require('./Resizer');
+
     return {
       /**
        * Name of the module
@@ -20,8 +22,10 @@ define(function(require) {
       },
 
       Sorter: Sorter,
+
+      Resizer: Resizer,
     };
   };
 
   return Utils;
-});
\ No newline at end of file
+});
diff --git a/styles/css/main.css b/styles/css/main.css
index 2d9358eb2..ea1cb9217 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2638,13 +2638,16 @@ $fontColorActive: #4f8ef7;
 .gjs-checker-bg, .checker-bg, .gjs-sm-sector .gjs-sm-property .gjs-sm-layer > #gjs-sm-preview-box, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer > #gjs-sm-preview-box {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
 
-.gjs-no-user-select {
-  -moz-user-select: "none";
-  -khtml-user-select: "none";
-  -webkit-user-select: "none";
-  -ms-user-select: "none";
-  -o-user-select: "none";
-  user-select: "none"; }
+.gjs-no-user-select, .gjs-nav-comp-name {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none; }
+
+.gjs-no-pointer-events, .gjs-resizer-c {
+  pointer-events: none; }
 
 .gjs-bg-main, .gjs-off-prv, .gjs-select option,
 .gjs-clm-select option,
@@ -2797,7 +2800,8 @@ div.gjs-select {
     z-index: 10;
     opacity: 0.55;
     filter: alpha(opacity=55); }
-  .gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+  .gjs-cv-canvas .gjs-highlighter,
+  .gjs-cv-canvas .gjs-highlighter-sel {
     position: absolute;
     outline: 1px solid #3b97e3;
     pointer-events: none; }
@@ -2835,10 +2839,70 @@ div.gjs-select {
   font-size: 0.8rem;
   cursor: pointer; }
 
+.gjs-resizer-c {
+  position: absolute;
+  z-index: 9; }
+
+.gjs-resizer-h {
+  pointer-events: all;
+  position: absolute;
+  border: 3px solid #3b97e3;
+  width: 10px;
+  height: 10px;
+  background-color: white; }
+
+.gjs-resizer-h-tl {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize; }
+
+.gjs-resizer-h-tr {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize; }
+
+.gjs-resizer-h-tc {
+  top: 0;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  cursor: ns-resize; }
+
+.gjs-resizer-h-cl {
+  left: 0;
+  margin: auto 0;
+  top: 0;
+  bottom: 0;
+  cursor: ew-resize; }
+
+.gjs-resizer-h-cr {
+  margin: auto 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  cursor: ew-resize; }
+
+.gjs-resizer-h-bl {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize; }
+
+.gjs-resizer-h-bc {
+  bottom: 0;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  cursor: ns-resize; }
+
+.gjs-resizer-h-br {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize; }
+
 .btn-cl, .gjs-mdl-dialog .gjs-mdl-btn-close, .gjs-am-assets-cont #gjs-am-close {
-  font-size: 25px;
   opacity: 0.3;
   filter: alpha(opacity=30);
+  font-size: 25px;
   cursor: pointer; }
   .btn-cl:hover, .gjs-mdl-dialog .gjs-mdl-btn-close:hover, .gjs-am-assets-cont #gjs-am-close:hover {
     opacity: 0.7;
@@ -2957,7 +3021,7 @@ ol.example li.placeholder:before {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   height: 100%;
   width: 100%;
-  pointer-events: 'none';
+  pointer-events: none;
   padding: 1.5px;
   outline: none; }
 
diff --git a/styles/scss/_canvas.scss b/styles/scss/_canvas.scss
new file mode 100644
index 000000000..c6a508e87
--- /dev/null
+++ b/styles/scss/_canvas.scss
@@ -0,0 +1,168 @@
+.#{$cv-prefix}canvas {
+  background-color: rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  position: absolute;
+  width: (100% - $leftWidth);
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  padding-top: 40px;
+  z-index: 1;
+
+  > iframe {
+    height: 100%;
+    outline: medium none;
+    width: 100%;
+    border: none;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .#{$app-prefix}ghost {
+    display: none;
+    pointer-events: none;
+    background-color: #5b5b5b;
+    border: 2px dashed #ccc;
+    position: absolute;
+    z-index: 10;
+
+    @include opacity(0.55);
+  }
+
+  .#{$app-prefix}highlighter,
+  .#{$app-prefix}highlighter-sel {
+    position: absolute;
+    outline: 1px solid $colorBlue;
+    pointer-events: none;
+  }
+
+  .#{$app-prefix}highlighter-warning {
+    outline: 3px solid $colorYell;
+  }
+
+  .#{$app-prefix}highlighter-sel {
+    outline: 3px solid $colorBlue;
+  }
+
+  ##{$app-prefix}tools {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    outline: none;
+  }
+
+  /* This simulate body behaviour */
+  > div:first-child {
+    background-color: #fff;
+    position: relative;
+    height: 100%;
+    overflow: auto;
+    width: 100%;
+  }
+}
+
+.#{$cv-prefix}canvas * {
+  box-sizing: border-box;
+}
+
+.#{$app-prefix}frame {
+  transition: width 0.35s ease;
+}
+
+.#{$app-prefix}toolbar {
+  position: absolute;
+  background-color: $colorBlue;
+  color: white;
+  z-index: 10;
+}
+
+.#{$app-prefix}toolbar-item {
+  padding: 5px 7px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.#{$app-prefix}resizer-c {
+  @extend .#{$app-prefix}no-pointer-events;
+
+  position: absolute;
+  z-index: 9;
+}
+
+.#{$app-prefix}resizer-h {
+  pointer-events: all;
+  position: absolute;
+  border: 3px solid $colorBlue;
+  width: 10px;
+  height: 10px;
+  background-color: white;
+}
+
+.#{$app-prefix}resizer-h-tl {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.#{$app-prefix}resizer-h-tr {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.#{$app-prefix}resizer-h-tc {
+  top: 0;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  cursor: ns-resize;
+}
+
+.#{$app-prefix}resizer-h-cl {
+  left: 0;
+  margin: auto 0;
+  top: 0;
+  bottom: 0;
+  cursor: ew-resize;
+}
+
+.#{$app-prefix}resizer-h-cr {
+  margin: auto 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  cursor: ew-resize;
+}
+
+.#{$app-prefix}resizer-h-bl {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.#{$app-prefix}resizer-h-bc {
+  bottom: 0;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  cursor: ns-resize;
+}
+
+.#{$app-prefix}resizer-h-br {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+}
+
+.btn-cl {
+  @include opacity(0.3);
+
+  font-size: 25px;
+  cursor: pointer;
+
+  &:hover {
+    @include opacity(0.7);
+  }
+}
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index e03b967fc..ed4bd5f8d 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -136,7 +136,11 @@ $fontV: 20;//random(1000)
 }
 
 .#{$app-prefix}no-user-select{
-	@include user-select('none');
+	@include user-select(none);
+}
+
+.#{$app-prefix}no-pointer-events{
+  pointer-events: none;
 }
 
 .#{$app-prefix}bg-main{
@@ -287,94 +291,9 @@ div.#{$app-prefix}select {
 }
 
 /*************  CANVAS  ****************/
-.#{$cv-prefix}canvas {
-  background-color: rgba(0, 0, 0, 0.15);
-  box-sizing: border-box;
-  position: absolute;
-  width: (100% - $leftWidth);
-  height: 100%;
-  bottom: 0; left: 0;
-  overflow: hidden;
-  padding-top: 40px;
-  z-index:1;
-
-  > iframe {
-    height: 100%;
-    outline: medium none;
-    width: 100%;
-    border: none;
-    margin: 0 auto;
-    display: block;
-  }
-
-  .#{$app-prefix}ghost{
-    display: none;
-    pointer-events: none;
-    background-color: #5b5b5b;
-    border: 2px dashed #ccc;
-    position: absolute;
-    z-index: 10;
-    @include opacity(0.55);
-  }
 
-  .#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{
-    position: absolute;
-    outline: 1px solid $colorBlue;
-    pointer-events: none;
-  }
+@import "canvas";
 
-  .#{$app-prefix}highlighter-warning{
-    outline: 3px solid $colorYell;
-  }
-
-  .#{$app-prefix}highlighter-sel{
-    outline: 3px solid $colorBlue;
-  }
-
-  ##{$app-prefix}tools{
-    width: 100%;
-    position: absolute;
-    top: 0; left: 0;
-    outline: none;
-  }
-
-  	/* This simulate body behaviour */
-  	> div:first-child {
-  		background-color: #fff;
-  		position: relative;
-	    height: 100%;
-	    overflow: auto;
-	    width: 100%;
-	}
-}
-
-.#{$cv-prefix}canvas *{box-sizing: border-box;}
-
-.#{$app-prefix}frame{
-  transition: width 0.35s ease;
-}
-
-.#{$app-prefix}toolbar {
-  position: absolute;
-  background-color: $colorBlue;
-  color: white;
-  z-index: 10;
-}
-
-.#{$app-prefix}toolbar-item {
-  padding: 5px 7px;
-  font-size: 0.8rem;
-  cursor: pointer;
-}
-
-.btn-cl {
-  font-size: 25px;
-  @include opacity(0.3);
-  cursor: pointer;
-  &:hover{
-  	@include opacity(0.7);
-  }
-}
 /*************  RTE  ****************/
 #commands.panel {
     min-width: 35px;
@@ -474,7 +393,7 @@ ol.example li.placeholder:before {position: absolute;}
 	background-color: $colorGreen;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 	height: 100%; width: 100%;
-	pointer-events: 'none';
+	pointer-events: none;
 	padding: 1.5px;
   outline: none;
 }
@@ -709,6 +628,7 @@ ol.example li.placeholder:before {position: absolute;}
 .#{$app-prefix}nav-comp-name {
   padding: 5px;
   box-sizing: content-box;
+  @extend .#{$app-prefix}no-user-select;
 }
 
 /************* END Navigator *************/