--- a/src/iconolab/static/iconolab/js/components/cutout/index.js	Fri Jun 17 19:01:09 2016 +0200
+++ b/src/iconolab/static/iconolab/js/components/cutout/index.js	Mon Jun 20 15:05:23 2016 +0200
@@ -1,7 +1,6 @@
 
 var Snap = require('snapsvg');
-resizer = require("./resizer");
-console.log(resizer);
+ShapeResizer = require("./shape-resizer");
 
 /* custom plugin */
 Snap.plugin(function (Snap, Element, Paper, glob) {
@@ -66,7 +65,7 @@
 	drawing_path.drag();
 	canDraw = false;
 	pathIsClosed = true;
-	resizer.apply_resize(paper, drawing_path);
+	ShapeResizer.apply_resize(paper, drawing_path);
 };
 
 
@@ -319,6 +318,7 @@
 		if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
 		rectZone.drag();
 		drawing_path = rectZone;
+		ShapeResizer.apply_resize(paper, rectZone);
 		canDraw = false;
 		pathIsClosed = true;
 	});
@@ -351,8 +351,8 @@
 		var pathData =pathInfos[0];
 
 		/* deal with path nomalization x = ImageWith/MaxXBound*/
-		var xRatio = paper.node.clientWidth / viewBoxBounds.X;
-		var yRatio = paper.node.clientHeight / viewBoxBounds.Y;
+		var xRatio = mainImage.width() / viewBoxBounds.X;
+		var yRatio = mainImage.height() / viewBoxBounds.Y;
 		
 		if(isNaN(xRatio) || isNaN(yRatio)) {
 			new Error('Ratio should be a number.');
@@ -433,9 +433,8 @@
 			}
 		}
 
-		var xRatio = viewBoxBounds.X / paper.node.clientWidth;
-		var yRatio = viewBoxBounds.Y / paper.node.clientHeight;
-		
+		var xRatio = viewBoxBounds.X / mainImage.width();
+		var yRatio = viewBoxBounds.Y / mainImage.height();
 		if(isNaN(xRatio) || isNaN(yRatio)) {
 			new Error('ratio should be a number.');
 		}
@@ -460,7 +459,7 @@
 
 	init: function(config) {
 
-		var mainImage = jQuery(config.wrapperId).find('img').eq(0);
+		mainImage = jQuery(config.wrapperId).find('img').eq(0);
 		var cutCanvas = jQuery(config.wrapperId).find('.cut-canvas').eq(0);
 		var path = jQuery(config.wrapperId).find('.image-path').eq(0);
 		

--- a/src/iconolab/static/iconolab/js/dist/bundle.js	Fri Jun 17 19:01:09 2016 +0200
+++ b/src/iconolab/static/iconolab/js/dist/bundle.js	Mon Jun 20 15:05:23 2016 +0200
@@ -70,8 +70,7 @@
 
 	
 	var Snap = __webpack_require__(2);
-	resizer = __webpack_require__(8);
-	console.log(resizer);
+	ShapeResizer = __webpack_require__(10);
 
 	/* custom plugin */
 	Snap.plugin(function (Snap, Element, Paper, glob) {
@@ -136,7 +135,7 @@
 		drawing_path.drag();
 		canDraw = false;
 		pathIsClosed = true;
-		resizer.apply_resize(paper, drawing_path);
+		ShapeResizer.apply_resize(paper, drawing_path);
 	};
 
 
@@ -389,6 +388,7 @@
 			if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
 			rectZone.drag();
 			drawing_path = rectZone;
+			ShapeResizer.apply_resize(paper, rectZone);
 			canDraw = false;
 			pathIsClosed = true;
 		});
@@ -421,8 +421,8 @@
 			var pathData =pathInfos[0];
 
 			/* deal with path nomalization x = ImageWith/MaxXBound*/
-			var xRatio = paper.node.clientWidth / viewBoxBounds.X;
-			var yRatio = paper.node.clientHeight / viewBoxBounds.Y;
+			var xRatio = mainImage.width() / viewBoxBounds.X;
+			var yRatio = mainImage.height() / viewBoxBounds.Y;
 			
 			if(isNaN(xRatio) || isNaN(yRatio)) {
 				new Error('Ratio should be a number.');
@@ -503,9 +503,8 @@
 				}
 			}
 
-			var xRatio = viewBoxBounds.X / paper.node.clientWidth;
-			var yRatio = viewBoxBounds.Y / paper.node.clientHeight;
-			
+			var xRatio = viewBoxBounds.X / mainImage.width();
+			var yRatio = viewBoxBounds.Y / mainImage.height();
 			if(isNaN(xRatio) || isNaN(yRatio)) {
 				new Error('ratio should be a number.');
 			}
@@ -530,7 +529,7 @@
 
 		init: function(config) {
 
-			var mainImage = jQuery(config.wrapperId).find('img').eq(0);
+			mainImage = jQuery(config.wrapperId).find('img').eq(0);
 			var cutCanvas = jQuery(config.wrapperId).find('.cut-canvas').eq(0);
 			var path = jQuery(config.wrapperId).find('.image-path').eq(0);
 			
@@ -582,7 +581,7 @@
 /* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;/*** IMPORTS FROM imports-loader ***/
+	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*** IMPORTS FROM imports-loader ***/
 	(function() {
 	var fix = module.exports=0;
 
@@ -28735,50 +28734,87 @@
 
 
 /***/ },
-/* 8 */
+/* 8 */,
+/* 9 */,
+/* 10 */
 /***/ function(module, exports) {
 
-	/* Enabling us to resize a shape width a handler 
-		#http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types
-	*/
-
-
-	var Resizer = function (paper, shape) {
-		this.paper = paper;
-		this.shape = shape;
-
-		this.HANDLER_SIZE = 6;
-		this.states = {};
-		this.init();
-	}
-
-	var api = Resizer.prototype = {
-
-		init: function () {
-			alert(" radical - blaze ");
-			this.showHandlers();
-			this.bindEvents();
-		},
-
-		showHandlers: function () {
-			/* show handler here */
-			var bbox = this.shape.getBBox();
-			var handleX = bbox.x - this.HANDLER_SIZE/2;
-			var handleY = bbox.y - this.HANDLER_SIZE/2;
-			handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'});
-		},
-
-		bindEvents: function () {
-			this.shape.click(function () { alert("radical ..."); });
-			this.shape.drag();
-		}
-	}
-
-	module.exports = {
-
-		apply_resize : function (paper, rect) {
-			new Resizer(paper, rect);
-		}
+	/* Enabling us to resize a shape width a handler 
+		#http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types
+	*/
+
+
+	var ShapeResizer = function (paper, shape) {
+		this.paper = paper;
+		this.shape = shape;
+		this.handlers = [];
+
+		this.HANDLER_SIZE = 6;
+		this.states = {};
+		this.init();
+	}
+
+	var api = ShapeResizer.prototype = {
+
+		init: function () {
+			this.showHandlers();
+		},
+
+		showHandlers: function () {
+			/* show handler here */
+			var bbox = this.shape.getBBox();
+			var handleX = bbox.x - this.HANDLER_SIZE/2;
+			var handleY = bbox.y - this.HANDLER_SIZE/2;
+			handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'});
+			var handlerInfos = {position: "t_r", handler: handler};
+			this.handlers.push(handlerInfos);
+			this.attachHandlerEvents();
+		},
+
+		/*one handlers */
+		updateShapePositions: function () {
+
+		},
+
+		dragEvents: {
+			onStart: function (handlerData, dx, dy, posX, posY, e) {
+				console.log(e);
+				this.startPosition = {x: e.offsetX, y: e.offsetY};
+				this.currentPosition = {};
+				handlerData.handler.data("origTransform", handlerData.handler.transform().local);
+
+			},
+
+			onMove: function (handlerData, dx, dy, e) {
+				this.currentPosition.x = e.offsetX;
+				this.currentPosition.y = e.offsetY;
+				console.log(this.currentPosition);
+				console.log("arguments", arguments);
+				
+			},
+
+			onStop: function () {
+				this.startPosition = {};
+				this.currentPosition = {};
+			}
+		},
+
+		attachHandlerEvents: function () {
+			var self = this;
+			this.handlers.map(function (handlerData) {
+				handlerData.handler.drag(
+					self.dragEvents.onStart.bind(self, handlerData),
+				 	self.dragEvents.onMove.bind(self, handlerData),
+					self.dragEvents.onStop.bind(self, handlerData));
+			});
+		},
+	}
+
+	module.exports = {
+
+		apply_resize : function (paper, rect) {
+			new ShapeResizer(paper, rect);
+		}
 	}
 
 /***/ }