Add dragon integration

js/bezierhandle.js

@@ -0,0 +1,48 @@
+
+var bezierHandleColor = "rgba(0, 100, 100, 1.0)";
+
+function BezierHandle(position, center)
+{
+    Draggable.call(this);
+    this.position = position;
+    this.center = center;
+}
+
+BezierHandle.prototype = inherit([Draggable]);
+
+BezierHandle.RADIUS = 4;
+
+BezierHandle.prototype.clickIn = function(screenloc)
+{
+    var canvasLoc = worldToCanvas(this.position);
+
+    var dx = screenloc[0] - canvasLoc[0];
+    var dy = screenloc[1] - canvasLoc[1];
+
+    return dx < BezierHandle.RADIUS && dx > -BezierHandle.RADIUS &&
+           dy < BezierHandle.RADIUS && dy > -BezierHandle.RADIUS;
+}
+
+BezierHandle.prototype.draw = function(ctx, info)
+{
+    var convert = info.convert;
+    var v = convert(matrix4.transformPoint2(info.matrix, this.position));
+    var c = convert(matrix4.transformPoint2(info.matrix, this.center));
+
+    var x = v[0]
+    var y = v[1];
+    var w = BezierHandle.RADIUS;
+    var h = BezierHandle.RADIUS;
+
+    ctx.fillStyle = bezierHandleColor;
+
+    ctx.strokeStyle = bezierHandleColor;
+    ctx.strokeRect(x-w, y-w, 2*w, 2*h);
+
+    ctx.beginPath();
+    ctx.strokeStyle = bezierHandleColor;
+    ctx.moveTo(c[0], c[1]);
+    ctx.lineTo(v[0], v[1]);
+    ctx.stroke();
+}
+

js/beziertool.js

@@ -0,0 +1,59 @@
+
+function BezierTool(traceDocument)
+{
+    this.draggable = null;
+    this.dragDiff = [0,0];
+}
+
+BezierTool.prototype.mouseDown = function(eventInfo)
+{
+    var event = eventInfo.event;
+    var screenloc = [event.offsetX, event.offsetY];
+
+    var draggables = eventInfo.polyTraceDocument.getDraggables();
+
+    for( var i = draggables.length-1; i >= 0 ; i-- )
+    {
+        if( draggables[i].clickIn(screenloc) )
+        {
+            this.draggable = draggables[i];
+            break;
+        }
+    }
+
+    if( this.draggable )
+    {
+        this.draggable.startDrag(event);
+    }
+}
+
+BezierTool.prototype.mouseMove = function(eventInfo)
+{
+    var event = eventInfo.event;
+
+    if( this.draggable )
+    {
+        this.draggable.drag(event);
+    }
+}
+
+BezierTool.prototype.doubleClick = function(eventInfo)
+{
+}
+
+BezierTool.prototype.mouseUp = function(eventInfo)
+{
+    var event = eventInfo.event;
+
+    if( this.draggable )
+    {
+        this.draggable.finishDrag(event);
+        this.draggable = null;
+    }
+}
+
+BezierTool.prototype.manageCursor = function()
+{
+    document.body.style.cursor = "auto";
+}
+

js/handle.js

@@ -1,4 +1,7 @@
 
+
+var handleColor = "rgba(0, 255, 50, 1.0)";
+
 function Handle(position)
 {
     Draggable.call(this);
@@ -7,7 +10,7 @@ function Handle(position)
 
 Handle.prototype = inherit([Draggable]);
 
-Handle.HANDLE_RADIUS = 4;
+Handle.RADIUS = 4;
 
 Handle.prototype.clickIn = function(screenloc)
 {
@@ -16,8 +19,8 @@ Handle.prototype.clickIn = function(screenloc)
     var dx = screenloc[0] - canvasLoc[0];
     var dy = screenloc[1] - canvasLoc[1];
 
-    return dx < Handle.HANDLE_RADIUS && dx > -Handle.HANDLE_RADIUS &&
-           dy < Handle.HANDLE_RADIUS && dy > -Handle.HANDLE_RADIUS;
+    return dx < Handle.RADIUS && dx > -Handle.RADIUS &&
+           dy < Handle.RADIUS && dy > -Handle.RADIUS;
 }
 
 Handle.prototype.draw = function(ctx, info)
@@ -27,11 +30,11 @@ Handle.prototype.draw = function(ctx, info)
 
     var x = v[0]
     var y = v[1];
-    var w = Handle.HANDLE_RADIUS;
-    var h = Handle.HANDLE_RADIUS;
+    var w = Handle.RADIUS;
+    var h = Handle.RADIUS;
 
-    ctx.fillStyle = polygonStrokeColor;
-    ctx.strokeStyle = polygonStrokeColor;
+    ctx.fillStyle = handleColor;
+    ctx.strokeStyle = handleColor;
     ctx.strokeRect(x-w, y-w, 2*w, 2*h);
 }
 

js/main.js

@@ -17,35 +17,19 @@ var polyTraceDocument = new PolyTraceDocument();
 var LOOP_ID = null;
 var APP_STATE = null;
 
-var polygonTool = new PolygonTool();
-var handTool = new HandTool();
-var editTool = new EditTool();
-
-var selectedTool = polygonTool;
-var tempTool = null;
-
 var math = o3djs.math;
 var matrix4 = o3djs.math.matrix4;
 
-
-function currentTool()
-{
-    return tempTool || selectedTool;
-}
-
 // Colors of things
 var gridColor = "hsla(0, 0%, 50%, 0.5)";
-var polygonStrokeColor = "rgba(0, 255, 50, 1.0)";
+
 
 $(document).ready(function ()
 {
     body = $('body');
     canvas = $('#canvas');
     exportButton = $('button.export');
 
-    polyButton = $('button.poly');
-    handButton = $('button.hand');
-    editButton = $('button.edit');
     undoButton = $('button.undo');
     redoButton = $('button.redo');
 
@@ -101,9 +85,11 @@ $(document).ready(function ()
 
     exportButton.on('mousedown', exportJSON);
 
-    polyButton.on('mousedown', function() {selectedTool = polygonTool;} );
-    handButton.on('mousedown', function() {selectedTool = handTool;});
-    editButton.on('mousedown', function() {selectedTool = editTool;} );
+    toolSet = new ToolSet(
+    {'poly': PolygonTool,
+     'bezier': BezierTool,
+     'hand': HandTool,
+     'edit': EditTool} );
 
     undoButton.on('mousedown', function() {undoManager.undo();});
     redoButton.on('mousedown', function() {undoManager.redo();});
@@ -310,7 +296,7 @@ function drawScreen()
 
 function manageCursor()
 {
-    var tool = currentTool();
+    var tool = toolSet.currentTool();
 
     if( APP_STATE == 'title' )
     {
@@ -342,10 +328,10 @@ function mouseDown(event)
 
         if( event.button == 1 )
         {
-            tempTool = handTool;
+            toolSet.tempTool = toolSet['hand'];
         }
 
-        currentTool().mouseDown({
+        toolSet.currentTool().mouseDown({
             polyTraceDocument : polyTraceDocument,
             worldLocation : canvasToWorld(v),
             event : event,
@@ -360,7 +346,7 @@ function doubleClick()
 {
     if( APP_STATE == 'mode' )
     {
-        currentTool().doubleClick({
+        toolSet.currentTool().doubleClick({
             polyTraceDocument : polyTraceDocument,
             event : event});
     }
@@ -408,7 +394,7 @@ function mouseMove(event)
         worldLocation : canvasToWorld(v),
         event : event
     };
-    currentTool().mouseMove(params);
+    toolSet.currentTool().mouseMove(params);
 }
 
 function mouseUp(event)
@@ -420,9 +406,9 @@ function mouseUp(event)
         worldLocation : canvasToWorld(v),
         event : event
     };
-    currentTool().mouseUp(params);
+    toolSet.currentTool().mouseUp(params);
 
-    tempTool = null;
+    toolSet.tempTool = null;
 }
 
 function keyDown(theEvent)

js/math.js

@@ -1638,6 +1638,19 @@ o3djs.math.matrix4.transformPoint2 = function(m, v) {
           (v0 * m0[1] + v1 * m1[1] + v2 * m2[1] + m3[1]) / d];
 };
 
+o3djs.math.matrix4.transformVector2 = function(m, v) {
+  var v0 = v[0];
+  var v1 = v[1];
+  var v2 = 0.0;
+  var m0 = m[0];
+  var m1 = m[1];
+  var m2 = m[2];
+  var m3 = m[3];
+
+  return [(v0 * m0[0] + v1 * m1[0]),
+           (v0 * m0[1] + v1 * m1[1])];
+};
+
 
 /**
  * Takes a 4-by-4 matrix and a vector with 4 entries, transforms that vector by

js/polygon.js

@@ -1,11 +1,28 @@
 
+
+var polygonStrokeColor = "rgba(0, 255, 50, 1.0)";
+var bezierHandleColor = "rgba(0, 100, 100, 1.0)";
+
 Polygon = function()
 {
     this.vertices = [];
     this.handles = [];
     this.closed = false;
 }
 
+Polygon.prototype.drawSegment = function(convert, info, i)
+{
+    var n = this.vertices.length;
+
+    var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[(i+1)%n].center));
+    var f = convert(matrix4.transformVector2(info.matrix, this.vertices[i].front));
+    var b = convert(matrix4.transformVector2(info.matrix, this.vertices[(i+1)%n].back));
+    ctx.bezierCurveTo(
+        f[0], f[1],
+        b[0], b[1],
+        v[0], v[1]);
+}
+
 Polygon.prototype.draw = function(ctx, info)
 {
     var convert = info.convert;
@@ -14,37 +31,39 @@ Polygon.prototype.draw = function(ctx, info)
     {
         ctx.beginPath();
         ctx.lineWidth = 2;
+        ctx.fillStyle = polygonStrokeColor;
         ctx.strokeStyle = polygonStrokeColor;
 
-        var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[0]));
+        var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[0].center));
         ctx.moveTo(v[0], v[1]);
 
-        for ( var i=1; i<this.vertices.length; i++ )
+        // for ( var i = 0; i < this.vertices.length - (this.closed ? 0 : 1); i++ )
+        for ( var i = 0; i < this.vertices.length - 1 ; i++ )
         {
-            var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[i]));
-            ctx.lineTo(v[0], v[1]);
-        }
-
-        if( this.closed )
-        {
-            var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[0]));
-            ctx.lineTo(v[0], v[1]);
+            this.drawSegment(convert, info, i);
         }
 
         ctx.stroke();
     }
 
-    for ( var i=0; i<this.vertices.length; i++ )
+    for ( var i=0; i<this.handles.length; i++ )
     {
         this.handles[i].draw(ctx, info);
     }
 }
 
-Polygon.prototype.add = function(newVertex)
+Polygon.prototype.add = function(v)
 {
-    var newVertexCopy = [newVertex[0], newVertex[1]];
-    this.vertices.push(newVertexCopy);
-    this.handles.push(new Handle(newVertexCopy));
+    var newv = {
+        center: [v[0], v[1]],
+        front: [v[0], v[1]],
+        back: [v[0], v[1]] };
+
+    this.vertices.push(newv);
+
+    this.handles.push(new Handle(newv.center));
+    this.handles.push(new BezierHandle(newv.back, newv.center));
+    this.handles.push(new BezierHandle(newv.front, newv.center));
 }
 
 Polygon.prototype.close = function()

js/polygontool.js

@@ -17,7 +17,7 @@ PolygonTool.prototype.mouseDown = function(eventInfo)
 
     if( this.currentPolygon.vertices.length > 0 )
     {
-        var lastp = this.currentPolygon.vertices[this.currentPolygon.vertices.length - 1];
+        var lastp = this.currentPolygon.vertices[this.currentPolygon.vertices.length - 1].center;
         if( ! (eventInfo.worldLocation[0] == lastp[0] &&
                eventInfo.worldLocation[1] == lastp[1] ) )
         {