Changeset 65

Timestamp:

04/20/07 20:16:55 (21 months ago)

Author:

steadicat

Message:

Some profiling and refactoring.
Feature: corners.

Location:

hacks/trunk/canvas

Files:

• default.js (modified) (6 diffs)
• index.xhtml (modified) (1 diff)

hacks/trunk/canvas/default.js

@@ -7 +7 @@
 
 function mouseDown(event) {
-    createPoint(event.clientX, event.clientY);
+    var point = new Point(event.clientX, event.clientY);
 }
 
 function mouseMove(event) {
-    if (editing) dragDot(editing, event.clientX, event.clientY);
+    if (editing) moveDot(editing, event.clientX, event.clientY);
 }
 
@@ -18 +18 @@
 }
 
+
+function Point(x, y) {
+
+    var point = dot(x, y, 10);
+    point.g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    addClass(point.g, "point");
+
+    point.handle1 = createHandle(point);
+    point.handle2 = createHandle(point);
+
+    point.handle1.linkedHandle = point.handle2;
+    point.handle2.linkedHandle = point.handle1;
+
+    editing = point.handle2;
+
+    if (!curve) {
+        startCurve(point);
+    } else {
+        extendCurve(point);
+    }
+
+    $(point.g).append(point);
+    $(curve.g).append(point.g);
+}
 
 function addClass(element, c) {
@@ -53 +77 @@
             editing = dot;
             addClass(dot, "editing");
+
+            // alt unlinks two handles
+            if (event.altKey && dot.linkedHandle) {
+                dot.linkedHandle.linkedHandle = null;
+                dot.linkedHandle = null;
+            }
         });
     $(dot).mouseup(function(event) {
@@ -105 +135 @@
     handle.line = document.createElementNS("http://www.w3.org/2000/svg", "path");
 
-    handle.line.pathSegList.appendItem(handle.line.createSVGPathSegMovetoAbs(handle.cx.baseVal.value, handle.cy.baseVal.value));
-    handle.line.pathSegList.appendItem(handle.line.createSVGPathSegLinetoAbs(point.cx.baseVal.value, point.cy.baseVal.value));
+    handle.moveTo = handle.line.createSVGPathSegMovetoAbs(handle.cx.baseVal.value, handle.cy.baseVal.value);
+    handle.lineTo = handle.line.createSVGPathSegLinetoAbs(point.cx.baseVal.value, point.cy.baseVal.value);
+    handle.line.pathSegList.appendItem(handle.moveTo);
+    handle.line.pathSegList.appendItem(handle.lineTo);
     $(point.g).append(handle.line);
     $(point.g).append(handle);
@@ -112 +144 @@
 }
 
-function createPoint(x, y) {
-
-    var point = dot(x, y, 10);
-    point.g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    addClass(point.g, "point");
-
-    point.handle1 = createHandle(point);
-    point.handle2 = createHandle(point);
-
-    point.handle1.linkedHandle = point.handle2;
-    point.handle2.linkedHandle = point.handle1;
-
-    editing = point.handle2;
-
-    if (!curve) {
-        startCurve(point);
+
+
+function moveDot(dot, x, y) {
+    if (dot.line) {
+        moveHandle(dot, x, y);
     } else {
-        extendCurve(point);
-    }
-
-    $(point.g).append(point);
-    $(curve.g).append(point.g);
-}
-
-
-function moveDot(dot, x, y) {
-
-    // move the dot itself
-    dot.cx.baseVal.value = x;
-    dot.cy.baseVal.value = y;
-
-    // move associated lines
-    if (dot.line) {
-        dot.line.pathSegList.getItem(0).x = x;
-        dot.line.pathSegList.getItem(0).y = y;
-        dot.line.pathSegList.getItem(1).x = dot.point.cx.baseVal.value;
-        dot.line.pathSegList.getItem(1).y = dot.point.cy.baseVal.value;
-    }
-
-    if (dot.leading) {
-        dot.leading.curveTo.x2 = x;
-        dot.leading.curveTo.y2 = y;
-    }
-    if (dot.trailing) {
-        dot.trailing.curveTo.x1 = x;
-        dot.trailing.curveTo.y1 = y;
-    }
-}
-
-function dragDot(dot, x, y) {
-
-    var dx = x - dot.cx.baseVal.value;
-    var dy = y - dot.cy.baseVal.value;
-
-    moveDot(dot, x, y);
+        movePoint(dot, x, y);
+    }
+}
+
+function movePoint(point, x, y) {
+    var dx = x - point.cx.baseVal.value;
+    var dy = y - point.cy.baseVal.value;
+
+    // move the point itself
+    point.cx.baseVal.value = x;
+    point.cy.baseVal.value = y;
 
     // move associated handles
-    if (dot.handle1) {
-        var hx = dot.handle1.cx.baseVal.value+dx;
-        var hy = dot.handle1.cy.baseVal.value+dy;
-        moveDot(dot.handle1, hx, hy);
-    }
-    if (dot.handle2) {
-        var hx = dot.handle2.cx.baseVal.value+dx;
-        var hy = dot.handle2.cy.baseVal.value+dy;
-        moveDot(dot.handle2, hx, hy);
-    }
-    if (dot.linkedHandle) {
-        var hx = dot.linkedHandle.cx.baseVal.value-dx;
-        var hy = dot.linkedHandle.cy.baseVal.value-dy;
-        moveDot(dot.linkedHandle, hx, hy);
+    if (point.handle1) {
+        var hx = point.handle1.cx.baseVal.value+dx;
+        var hy = point.handle1.cy.baseVal.value+dy;
+        moveHandle(point.handle1, hx, hy, true);
+        var hx = point.handle2.cx.baseVal.value+dx;
+        var hy = point.handle2.cy.baseVal.value+dy;
+        moveHandle(point.handle2, hx, hy, true);
     }
 
     // move curve
-    if (dot.curveTo) {
-        dot.curveTo.x = x;
-        dot.curveTo.y = y;
-    }
-}
+    if (point.curveTo) {
+        point.curveTo.x = x;
+        point.curveTo.y = y;
+    }
+}
+
+function moveHandle(handle, x, y, stop) {
+
+    // move linked handle
+    if ((!stop) && handle.linkedHandle) {
+        var hx = handle.linkedHandle.cx.baseVal.value- (x-handle.cx.baseVal.value);
+        var hy = handle.linkedHandle.cy.baseVal.value- (y-handle.cy.baseVal.value);
+        moveHandle(handle.linkedHandle, hx, hy, true);
+    }
+
+    // move the handle itself
+    handle.cx.baseVal.value = x;
+    handle.cy.baseVal.value = y;
+
+    // move associated line
+    handle.moveTo.x = x;
+    handle.moveTo.y = y;
+    handle.lineTo.x = handle.point.cx.baseVal.value;
+    handle.lineTo.y = handle.point.cy.baseVal.value;
+
+    // move curve
+    if (handle.leading) {
+        handle.leading.curveTo.x2 = x;
+        handle.leading.curveTo.y2 = y;
+    } else if (handle.trailing) {
+        handle.trailing.curveTo.x1 = x;
+        handle.trailing.curveTo.y1 = y;
+    }
+}
+
 
 // set up
@@ -202 +219 @@
         });
     });
-});
-
+
+

hacks/trunk/canvas/index.xhtml

@@ -20 +20 @@
   <body class="main">
 
-    <p class="instructions">Enter to close a path, Esc to interrupt it.</p>
+    <p class="instructions">Enter to close a path, Esc to interrupt
+    it. Hold down Alt while dragging a handle to create a corner.</p>
 
     <svg xmlns="http://www.w3.org/2000/svg"