Added rectangle handling at load time
authorveltr
Tue, 19 Mar 2013 13:26:31 +0100
changeset 96 de07c00bfa7e
parent 95 b4196fab7d01
child 97 8d86050b5b25
Added rectangle handling at load time
integration/js/cutout.js
src/egonomy/static/egonomy/js/cutout.js
--- a/integration/js/cutout.js	Tue Mar 19 13:19:59 2013 +0100
+++ b/integration/js/cutout.js	Tue Mar 19 13:26:31 2013 +0100
@@ -257,6 +257,16 @@
             closed = true;
         }
         
+        if (
+        	points.length === 4
+        	&& points[0].x === points[3].x
+        	&& points[0].y === points[1].y
+    		&& points[1].x === points[2].x
+            && points[2].y === points[3].y
+  		) {
+          	rectangleMode = true;
+		}
+        
         redrawPath();
     }
     
--- a/src/egonomy/static/egonomy/js/cutout.js	Tue Mar 19 13:19:59 2013 +0100
+++ b/src/egonomy/static/egonomy/js/cutout.js	Tue Mar 19 13:26:31 2013 +0100
@@ -37,6 +37,7 @@
                     }
                     redrawPath();
                     pathDragging = true;
+                    rectangleMode = true;
                 }
                 
                 var x = mx - offset.left,
@@ -56,6 +57,7 @@
         );
         
     function resetPoints() {
+    	rectangleMode = false;
         points.forEach(function(p) {
            p.handle.remove(); 
         });
@@ -70,6 +72,8 @@
                 y: Math.floor(y)
             }
         
+        var pointsWithSameX = [], pointsWithSameY = [];
+        
         var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE)
             .attr({
                 stroke: PATHCOLOR,
@@ -82,11 +86,27 @@
                     pointDragging = true;
                     point.x = dx + dragdeltax;
                     point.y = dy + dragdeltay;
+                    if (rectangleMode) {
+                    	pointsWithSameX.forEach(function(p) {
+                    		p.x = point.x;
+                    	});
+                    	pointsWithSameY.forEach(function(p) {
+                    		p.y = point.y;
+                    	});
+                    }
                     redrawPath();
                 },
                 function() {
                     dragdeltax = point.x;
                     dragdeltay = point.y;
+                    if (rectangleMode) {
+                    	pointsWithSameX = points.filter(function(p) {
+                    		return p !== point && p.x === point.x;
+                    	});
+                    	pointsWithSameY = points.filter(function(p) {
+                    		return p !== point && p.y === point.y;
+                    	});
+                    }
                 },
                 function() {
                     setTimeout(function() {
@@ -118,6 +138,10 @@
             return;
         }
         
+        if (rectangleMode) {
+        	resetPoints();
+        }
+        
         clearTimeout(closeTimeout);
         closed = false;
         
@@ -179,7 +203,7 @@
         var transd = "M"
             + points.map(function(p) { return (p.x / paper.width).toString().replace(/(\.\d{4})\d*/,"$1") + " " + (p.y / paper.height).toString().replace(/(\.\d{4})\d*/,"$1") }).join("L")
             + "Z";
-        $(".fragment-path").val(transd).change();
+        $(".fragment-path").val(transd);
     }
     
     var dragdeltax, dragdeltay, pathDragging;
@@ -233,6 +257,16 @@
             closed = true;
         }
         
+        if (
+        	points.length === 4
+        	&& points[0].x === points[3].x
+        	&& points[0].y === points[1].y
+    		&& points[1].x === points[2].x
+            && points[2].y === points[3].y
+  		) {
+          	rectangleMode = true;
+		}
+        
         redrawPath();
     }