# HG changeset patch
# User Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
# Date 1465315028 -7200
# Node ID 3945ec6dfbf136ed4ebd513d13fb130ce1aa2f3b
# Parent  174ded7d131908e5e399695a089b248fe521b4a5
drawing component

diff -r 174ded7d1319 -r 3945ec6dfbf1 src/iconolab/templates/iconolab/fragment_draw.html
--- a/src/iconolab/templates/iconolab/fragment_draw.html	Tue Jun 07 11:43:56 2016 +0200
+++ b/src/iconolab/templates/iconolab/fragment_draw.html	Tue Jun 07 17:57:08 2016 +0200
@@ -13,10 +13,9 @@
 	<div id="drawing-zone" style="padding-top: 10px">
 
 		<p class="pullright"><a href='javascript:;'>Retour</a></p>
-		
 		<div class='col-md-2'>
 			<ul class='form-drawing-wrapper list-inline'>
-				<p class='form-drawing pullright'><strong>Formes</strong></p>
+				<p class='form-drawing pullright'><strong>Sélection</strong></p>
 				<li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
 				<li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
 			</ul>
@@ -52,43 +51,49 @@
 	<script>
 		var drawingVue = new Vue({
 			el: '#drawing-zone',
-			MODE_RECT: 'RECTANGLE',
-			MODE_FREE: 'FREE',
-			
+			MODE_RECT: 'RECT',
+			MODE_FREE: 'FREE', 
+
 			data: {
-				mode: this.MODE_RECT,
+				mode:"",
 				isRect: true,
 			},
 
 			init: function () {
+				this.mode = this.$options.MODE_RECT;
+				this.drawingComponent = iconolab.initCutoutComponent({ 
+					wrapperId: '#iconolab-image-wrapper',
+ 					actionWrapper: '#action-wrapper' 
+				}); 
+				
+				console.log("mode", this.mode);
 
+				this.drawingComponent.setMode(this.mode);
 			},
 
 			methods: {
 				
 				setRectangleMode: function () {
-					this.mode = this.MODE_RECT;
+					this.mode = this.$options.MODE_RECT;
 					this.isRect = true;
+					this.drawingComponent.setMode(this.mode);
+					console.log("mode", this.mode);
 				},
 
 				setFreeMode:  function () {
-					this.mode = this.MODE_FREE;
+					this.mode = this.$options.MODE_FREE;
 					this.isRect = false;
+					this.drawingComponent.setMode(this.mode);
 				},
 
 				save: function () {
-					alert("...save the drawing...");
+					console.log('drawingPath', this.drawingComponent.getPath());
 				},
 
 				clear: function () {
-					alert('res');
+					this.drawingComponent.clear();
 				}
 			}
 		}); 
-
-		iconolab.initCutoutComponent({ 
-			wrapperId: '#iconolab-image-wrapper',
-		 	actionWrapper: '#action-wrapper' 
-		});
 	</script>
 {% endblock %}
\ No newline at end of file
diff -r 174ded7d1319 -r 3945ec6dfbf1 src/static/iconolab/js/components/cutout/index.js
--- a/src/static/iconolab/js/components/cutout/index.js	Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/components/cutout/index.js	Tue Jun 07 17:57:08 2016 +0200
@@ -19,6 +19,8 @@
 var config = null;
 var startPoint = null;
 var drawing_path = null;
+var canDraw = false;
+var rectZone = null;
 var PATH_COLOR = "#ff00ff";
 var SELECTED_COLOR = "#ffff00";
 var FIRST_NODE_COLOR = "#FF0000";
@@ -27,7 +29,9 @@
 var enablePoint = true;
 var pathIsClosed = false;
 var ENABLE_NEW_NODE = true;
-var mode = "rect"; //free
+var RECT_MODE ='RECT';
+var drawingMode = RECT_MODE; //free
+var FREE_MODE = 'FREE';
 
 var getId = (function () {
 		var cpt = 0;
@@ -102,9 +106,6 @@
 	jQuery("#action-wrapper").show();
 };
 
-var drawRectangle = function () {
-	//draw rectangle point and draw	
-}
 
 var onClickOnHandler = function (point, p, e) {
 	//close path
@@ -186,14 +187,9 @@
 	return point;
 }
 
-var setPath = function () {
-
-}
-
 //create paper
 var createPoint = function (paper, x, y, pointData) {
 
-	console.log("... Inside createPoint ... ");
 	var point = {x:x, y:y, id: getId()};
 	
 	/**/
@@ -206,42 +202,34 @@
 		enablePoint = true;
 		return false;
 	}
-	
+
 	point = createPointHandler(paper, point);
 	pointData.push(point);
 	updatePath(paper);
 };
 
-var createFragment = function () {
 
-}
-
-/* remove previous points */
-var reset = function () {
-	console.log(pathIsClosed);
-	console.log("radical blaze");
-}
-var attachEvents = function (paper) {
+var attachRectEvents = function (paper) {
 	var startPosition = {};
 	var currentPosition = {};
-	var zone = null;
-	var canDraw = false;
+	/* add resizer */
 
 	paper.mousedown(function (e) {
+		if (drawingMode === FREE_MODE || pathIsClosed) { return; }
 		startPosition.x = e.offsetX;
 		startPosition.y = e.offsetY;
 		canDraw = true;
-		var startPoint = paper.rect(currentPosition.x, currentPosition.y, 6, 6);
-		startPoint.attr({stroke:'yellow'});
 	});
 
 	paper.mousemove(function (e) {
+		if (drawingMode === FREE_MODE) { return; }
+		if (!canDraw) { return; }
+		var x, y;
 		currentPosition.x = e.offsetX;
 		currentPosition.y = e.offsetY;
-		if (!canDraw) { return; }
 		
-		if (zone) {
-			zone.remove();
+		if (rectZone) {
+			rectZone.remove();
 		}
 
 		/* bas -> droite */
@@ -270,18 +258,76 @@
 			x = currentPosition.x
 			y = currentPosition.y - height;
 		}
-
-		zone = paper.rect(x, y, width, height);
-		zone.attr({opacity: 0.4});
-		zone.drag();
+		if(!x || !y) { return; }		
+		rectZone = paper.rect(x, y, width, height);
+		rectZone.attr({opacity: 0.4});
 	});
 
 
 	paper.mouseup(function () {
+		if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
+		rectZone.drag();
 		canDraw = false;
+		pathIsClosed = true;
+	});
+};
+
+var attachPointEvents = function (paper) {
+
+	paper.click( function(e) {
+		if (drawingMode === RECT_MODE) {
+			return true;
+		}
+
+		if (!ENABLE_NEW_NODE) { return true; }
+		createPoint(paper, e.offsetX, e.offsetY, pointData);
 	});
-}
+};
+
+var API = {
+	
+	setMode: function (mode) {
+		var availableMode = ['RECT', 'FREE'];
+		console.log("undefined", mode);
+		if (availableMode.indexOf(mode) !== -1) {
+			drawingMode = mode;
+		}
+		this.clear();
+	},
+	
+	clear: function () {
+		/* clear previous path, point, handler */
+		pointData.map(function (point) {
+			if (point.handler) {
+				point.handler.remove();
+			}
+		});
 
+		/*clear path is exists*/
+		 if (drawing_path) {
+		 	drawing_path.remove();
+		 }
+
+		 if (rectZone) {
+		 	rectZone.remove();
+		 }
+
+		pointData = [];
+		startPoint = null;
+		drawing_path = null;
+		isDragged = false;
+		enablePoint = true;
+		pathIsClosed = false;
+		ENABLE_NEW_NODE = true;
+		/* clear path */
+
+	},
+
+	getPath: function () {
+		/* retourne le chemin */
+		console.log();
+	}
+};
 
 module.exports = {
 
@@ -316,17 +362,10 @@
 
 		paper = new Snap(cutCanvas.get(0));
 
-		/* handleEvents */
-		jQuery(config.actionWrapper).on("click", ".create", function () { alert("Kotew te ye...");});
-		jQuery(config.actionWrapper).on("click", ".delete", function () { alert("delete..."); });
+		/* handle drawin here */
+		attachPointEvents(paper);
+		attachRectEvents(paper);
 
-		/* show path, init the drawing module*/
-		paper.click( function(e) {
-			if (!ENABLE_NEW_NODE) { return true; }
-			createPoint(paper, e.offsetX, e.offsetY, pointData);
-		});
-
-		/* handle drawin here */
-		attachEvents(paper);
+		return API;
 	},
 };
\ No newline at end of file
diff -r 174ded7d1319 -r 3945ec6dfbf1 src/static/iconolab/js/components/cutout/save.js
--- a/src/static/iconolab/js/components/cutout/save.js	Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/components/cutout/save.js	Tue Jun 07 17:57:08 2016 +0200
@@ -196,9 +196,6 @@
 	return point;
 }
 
-var setPath = function () {
-
-}
 
 //create paper
 var createPoint = function (paper, x, y, pointData) {
@@ -222,13 +219,8 @@
 	updatePath(paper);
 };
 
-var createFragment = function () {
-
-}
 
 /* remove previous points */
-
-
 module.exports = {
 
 	init: function(config) {
diff -r 174ded7d1319 -r 3945ec6dfbf1 src/static/iconolab/js/dist/bundle.js
--- a/src/static/iconolab/js/dist/bundle.js	Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/dist/bundle.js	Tue Jun 07 17:57:08 2016 +0200
@@ -89,6 +89,8 @@
 	var config = null;
 	var startPoint = null;
 	var drawing_path = null;
+	var canDraw = false;
+	var rectZone = null;
 	var PATH_COLOR = "#ff00ff";
 	var SELECTED_COLOR = "#ffff00";
 	var FIRST_NODE_COLOR = "#FF0000";
@@ -97,7 +99,9 @@
 	var enablePoint = true;
 	var pathIsClosed = false;
 	var ENABLE_NEW_NODE = true;
-	var mode = "rect"; //free
+	var RECT_MODE ='RECT';
+	var drawingMode = RECT_MODE; //free
+	var FREE_MODE = 'FREE';
 
 	var getId = (function () {
 			var cpt = 0;
@@ -172,9 +176,6 @@
 		jQuery("#action-wrapper").show();
 	};
 
-	var drawRectangle = function () {
-		//draw rectangle point and draw	
-	}
 
 	var onClickOnHandler = function (point, p, e) {
 		//close path
@@ -256,14 +257,9 @@
 		return point;
 	}
 
-	var setPath = function () {
-
-	}
-
 	//create paper
 	var createPoint = function (paper, x, y, pointData) {
 
-		console.log("... Inside createPoint ... ");
 		var point = {x:x, y:y, id: getId()};
 		
 		/**/
@@ -276,42 +272,34 @@
 			enablePoint = true;
 			return false;
 		}
-		
+
 		point = createPointHandler(paper, point);
 		pointData.push(point);
 		updatePath(paper);
 	};
 
-	var createFragment = function () {
-
-	}
-
-	/* remove previous points */
-	var reset = function () {
-		console.log(pathIsClosed);
-		console.log("radical blaze");
-	}
-	var attachEvents = function (paper) {
+
+	var attachRectEvents = function (paper) {
 		var startPosition = {};
 		var currentPosition = {};
-		var zone = null;
-		var canDraw = false;
+		/* add resizer */
 
 		paper.mousedown(function (e) {
+			if (drawingMode === FREE_MODE || pathIsClosed) { return; }
 			startPosition.x = e.offsetX;
 			startPosition.y = e.offsetY;
 			canDraw = true;
-			var startPoint = paper.rect(currentPosition.x, currentPosition.y, 6, 6);
-			startPoint.attr({stroke:'yellow'});
 		});
 
 		paper.mousemove(function (e) {
+			if (drawingMode === FREE_MODE) { return; }
+			if (!canDraw) { return; }
+			var x, y;
 			currentPosition.x = e.offsetX;
 			currentPosition.y = e.offsetY;
-			if (!canDraw) { return; }
 			
-			if (zone) {
-				zone.remove();
+			if (rectZone) {
+				rectZone.remove();
 			}
 
 			/* bas -> droite */
@@ -340,18 +328,76 @@
 				x = currentPosition.x
 				y = currentPosition.y - height;
 			}
-
-			zone = paper.rect(x, y, width, height);
-			zone.attr({opacity: 0.4});
-			zone.drag();
+			if(!x || !y) { return; }		
+			rectZone = paper.rect(x, y, width, height);
+			rectZone.attr({opacity: 0.4});
 		});
 
 
 		paper.mouseup(function () {
+			if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
+			rectZone.drag();
 			canDraw = false;
+			pathIsClosed = true;
+		});
+	};
+
+	var attachPointEvents = function (paper) {
+
+		paper.click( function(e) {
+			if (drawingMode === RECT_MODE) {
+				return true;
+			}
+
+			if (!ENABLE_NEW_NODE) { return true; }
+			createPoint(paper, e.offsetX, e.offsetY, pointData);
 		});
-	}
-
+	};
+
+	var API = {
+		
+		setMode: function (mode) {
+			var availableMode = ['RECT', 'FREE'];
+			console.log("undefined", mode);
+			if (availableMode.indexOf(mode) !== -1) {
+				drawingMode = mode;
+			}
+			this.clear();
+		},
+		
+		clear: function () {
+			/* clear previous path, point, handler */
+			pointData.map(function (point) {
+				if (point.handler) {
+					point.handler.remove();
+				}
+			});
+
+			/*clear path is exists*/
+			 if (drawing_path) {
+			 	drawing_path.remove();
+			 }
+
+			 if (rectZone) {
+			 	rectZone.remove();
+			 }
+
+			pointData = [];
+			startPoint = null;
+			drawing_path = null;
+			isDragged = false;
+			enablePoint = true;
+			pathIsClosed = false;
+			ENABLE_NEW_NODE = true;
+			/* clear path */
+
+		},
+
+		getPath: function () {
+			/* retourne le chemin */
+			console.log();
+		}
+	};
 
 	module.exports = {
 
@@ -386,18 +432,11 @@
 
 			paper = new Snap(cutCanvas.get(0));
 
-			/* handleEvents */
-			jQuery(config.actionWrapper).on("click", ".create", function () { alert("Kotew te ye...");});
-			jQuery(config.actionWrapper).on("click", ".delete", function () { alert("delete..."); });
-
-			/* show path, init the drawing module*/
-			paper.click( function(e) {
-				if (!ENABLE_NEW_NODE) { return true; }
-				createPoint(paper, e.offsetX, e.offsetY, pointData);
-			});
-
 			/* handle drawin here */
-			attachEvents(paper);
+			attachPointEvents(paper);
+			attachRectEvents(paper);
+
+			return API;
 		},
 	};