src_js/iconolab-bundle/src/components/cutout/svgboard.js
changeset 205 24e4aba394bf
parent 164 44ced96727f7
child 209 b4b24c5eeb3e
--- a/src_js/iconolab-bundle/src/components/cutout/svgboard.js	Tue Sep 20 15:57:42 2016 +0200
+++ b/src_js/iconolab-bundle/src/components/cutout/svgboard.js	Wed Sep 21 11:58:24 2016 +0200
@@ -293,8 +293,9 @@
 	paper.mousedown(function (e) {
 
 		if (drawingMode === FREE_MODE || pathIsClosed) { return; }
-		startPosition.x = e.offsetX;
-		startPosition.y = e.offsetY;
+		var offset = computeOffset(e)
+		startPosition.x = offset.x;
+		startPosition.y = offset.y;
 		canDraw = true;
 	});
 
@@ -302,8 +303,9 @@
 		if (drawingMode === FREE_MODE) { return; }
 		if (!canDraw) { return; }
 		var x, y;
-		currentPosition.x = e.offsetX;
-		currentPosition.y = e.offsetY;
+		var offset = computeOffset(e)
+		currentPosition.x = offset.x;
+		currentPosition.y = offset.y;
 		
 		if (rectZone) {
 			rectZone.remove();
@@ -375,9 +377,9 @@
 	var computeOffset = function (e) {
 		var target = e.target || e.srcElement;
 		var rect = target.getBoundingClientRect();
-        var offsetX = e.clientX - rect.left;
-        var offsetY  = e.clientY - rect.top;
-        return {x: offsetX, y: offsetX};
+        var offsetX = (e.clientX - rect.left) / Math.min(zoomFactor.x, zoomFactor.y);
+        var offsetY  = (e.clientY - rect.top) / Math.min(zoomFactor.x, zoomFactor.y);
+        return {x: offsetX, y: offsetY};
 	}
 
 	var clickHandler = function (offsetX, offsetY) {
@@ -395,8 +397,11 @@
 
 	paper.click(function (e) {
 		if (clickTimeout) { return; }
-		var offsetX = e.offsetX;
-		var offsetY = e.offsetY;
+		if (!jQuery(e.target).is(mainImage)) { return; }
+		var offset = computeOffset(e)
+		var offsetX = offset.x;
+		var offsetY = offset.y;
+		console.log(zoomFactor)
 		clickTimeout = setTimeout(clickHandler.bind(this, offsetX, offsetY), 190);	
 	});
 
@@ -559,7 +564,7 @@
 		
 		path += type;
 
-
+		console.log(path)
 		return path;
 	}
 };
@@ -586,8 +591,6 @@
 			cutCanvas.append(mainImage);
 		}
 
-		
-
 		cutCanvas.css({
 			marginLeft: 'auto',
 			marginRight: 'auto',