Update resizing callbacks

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

index.html

@@ -15,7 +15,6 @@
 
 		<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>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/dom_components/view/ComponentView.js

@@ -185,23 +185,36 @@ define(['backbone', './ComponentsView'],
 			initResize: function () {
 				var em = this.opts.config.em;
 				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 model = this.model;
 				var modelToStyle;
 
+				var toggleBodyClass = function(method, e, opts) {
+					var handlerAttr = e.target.getAttribute(attrName);
+					var resizeHndClass = pfx + 'resizing-' + handlerAttr;
+					var classToAdd = resizeClass;// + ' ' +resizeHndClass;
+					if (opts.docs) {
+						opts.docs.find('body')[method](classToAdd);
+					}
+				};
+
 				if(editor && this.model.get('resizable')) {
 					editor.runCommand('resize', {
 						el: this.el,
 						options: {
-							onStart: function () {
+							onStart: function (e, opts) {
+								toggleBodyClass('addClass', e, opts);
 								modelToStyle = em.get('StyleManager').getModelToStyle(model);
-								// TODO disable component highlighting
 							},
+							// Update all positioned elements
 							onMove: function () {
-								// Update all positioned elements
 								editor.trigger('change:canvasOffset');
 							},
-							onEnd: function () {
-								// TODO enable component highlighting
+							onEnd: function (e, opts) {
+								toggleBodyClass('removeClass', e, opts);
 								editor.trigger('change:canvasOffset');
 							},
 							updateTarget: function(el, rect, store) {

src/utils/Resizer.js

@@ -228,7 +228,7 @@ define(function(require) {
 
       // Start callback
       if(typeof this.onStart === 'function') {
-        this.onStart(e);
+        this.onStart(e, {docs: doc});
       }
     },
 
@@ -282,7 +282,7 @@ define(function(require) {
 
       // Stop callback
       if(typeof this.onEnd === 'function') {
-        this.onEnd(e);
+        this.onEnd(e, {docs: doc});
       }
     },
 

styles/css/main.css

@@ -2899,6 +2899,34 @@ div.gjs-select {
   right: 0;
   cursor: nwse-resize; }
 
+.gjs-resizing .gjs-highlighter,
+.gjs-resizing .gjs-badge {
+  display: none !important; }
+
+.gjs-resizing-tl * {
+  cursor: nwse-resize !important; }
+
+.gjs-resizing-tr * {
+  cursor: nesw-resize !important; }
+
+.gjs-resizing-tc * {
+  cursor: ns-resize !important; }
+
+.gjs-resizing-cl * {
+  cursor: ew-resize !important; }
+
+.gjs-resizing-cr * {
+  cursor: ew-resize !important; }
+
+.gjs-resizing-bl * {
+  cursor: nesw-resize !important; }
+
+.gjs-resizing-bc * {
+  cursor: ns-resize !important; }
+
+.gjs-resizing-br * {
+  cursor: nwse-resize !important; }
+
 .btn-cl, .gjs-mdl-dialog .gjs-mdl-btn-close, .gjs-am-assets-cont #gjs-am-close {
   opacity: 0.3;
   filter: alpha(opacity=30);

styles/scss/_canvas.scss

@@ -156,6 +156,43 @@
   cursor: nwse-resize;
 }
 
+.#{$app-prefix}resizing .#{$app-prefix}highlighter,
+.#{$app-prefix}resizing .#{$app-prefix}badge {
+  display: none !important;
+}
+
+.#{$app-prefix}resizing-tl * {
+  cursor: nwse-resize !important;
+}
+
+.#{$app-prefix}resizing-tr * {
+  cursor: nesw-resize !important;
+}
+
+.#{$app-prefix}resizing-tc * {
+  cursor: ns-resize !important;
+}
+
+.#{$app-prefix}resizing-cl * {
+  cursor: ew-resize !important;
+}
+
+.#{$app-prefix}resizing-cr * {
+  cursor: ew-resize !important;
+}
+
+.#{$app-prefix}resizing-bl * {
+  cursor: nesw-resize !important;
+}
+
+.#{$app-prefix}resizing-bc * {
+  cursor: ns-resize !important;
+}
+
+.#{$app-prefix}resizing-br * {
+  cursor: nwse-resize !important;
+}
+
 .btn-cl {
   @include opacity(0.3);