From 66aa0d37b7b803d2cb54436aa4b92adaef7dd0f6 Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Thu, 19 Mar 2015 22:39:32 -0700 Subject: [PATCH 1/7] Reinvened the way the tool-set is initialized --- js/main.js | 38 ++++++++++++-------------------------- js/toolset.js | 31 +++++++++++++++++++++++++++++++ main.html | 3 +++ 3 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 js/toolset.js diff --git a/js/main.js b/js/main.js index 5b27b22..f6e2f5e 100644 --- a/js/main.js +++ b/js/main.js @@ -17,35 +17,20 @@ 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 +86,10 @@ $(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, + '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) diff --git a/js/toolset.js b/js/toolset.js new file mode 100644 index 0000000..cf1430b --- /dev/null +++ b/js/toolset.js @@ -0,0 +1,31 @@ + +ToolSet = function(nameTypeMap) +{ + var toolSet = this; + function makeHandler(name, newTool) + { + return function() + { + toolSet.selectedTool = newTool; + }; + } + + for( var name in nameTypeMap ) + { + var newTool = new nameTypeMap[name](); + this[name] = newTool; + $('button.' + name).on( 'mousedown', + makeHandler(name, newTool) ); + } + + this.selectedTool = this['poly']; + this.tempTool = null; +}; + +ToolSet.prototype.currentTool = function() +{ + return this.tempTool || this.selectedTool; +} + + + diff --git a/main.html b/main.html index 73554c8..74688b9 100644 --- a/main.html +++ b/main.html @@ -12,10 +12,13 @@ + + + From e36c7906a36d3409c8edf88ac572e40cfe160e51 Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Fri, 20 Mar 2015 06:48:32 -0700 Subject: [PATCH 2/7] Added beziertool class andbutton --- js/main.js | 1 + main.html | 2 ++ 2 files changed, 3 insertions(+) diff --git a/js/main.js b/js/main.js index f6e2f5e..91e37c8 100644 --- a/js/main.js +++ b/js/main.js @@ -88,6 +88,7 @@ $(document).ready(function () toolSet = new ToolSet( {'poly': PolygonTool, + 'bezier': BezierTool, 'hand': HandTool, 'edit': EditTool} ); diff --git a/main.html b/main.html index 74688b9..5402698 100644 --- a/main.html +++ b/main.html @@ -17,6 +17,7 @@ + @@ -27,6 +28,7 @@
+ From 0faf372601da247ff4643e0637e92d7a5a9f2c1b Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Sun, 22 Mar 2015 16:58:17 -0700 Subject: [PATCH 3/7] progress --- js/math.js | 13 +++++++++++++ js/polygon.js | 27 ++++++++++++++++++++++++--- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/js/math.js b/js/math.js index c168447..8d0e17f 100644 --- a/js/math.js +++ b/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 diff --git a/js/polygon.js b/js/polygon.js index cf1d1c4..4486db4 100644 --- a/js/polygon.js +++ b/js/polygon.js @@ -2,6 +2,7 @@ Polygon = function() { this.vertices = []; + this.bezier = []; this.handles = []; this.closed = false; } @@ -18,17 +19,26 @@ Polygon.prototype.draw = function(ctx, info) var v = convert(matrix4.transformPoint2(info.matrix, this.vertices[0])); ctx.moveTo(v[0], v[1]); + var last_x = v[0]; + var last_y = v[1]; - for ( var i=1; i 1 ) + { + var b = [0,0]; + var f = [0,0]; + this.bezier.push({back:b, front:f}); + this.handles.push(new Handle(b)); + this.handles.push(new Handle(f)); + } + } Polygon.prototype.close = function() { this.closed = true; + this.bezier.push({back:[0,0], front:[0,0]}); } From 4b07ee7a290d92b66fc1bb76bf5a025705b65efb Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Sun, 22 Mar 2015 19:19:40 -0700 Subject: [PATCH 4/7] adding neglected files --- js/beziertool.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 js/beziertool.js diff --git a/js/beziertool.js b/js/beziertool.js new file mode 100644 index 0000000..48e47f0 --- /dev/null +++ b/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"; +} + From 362d7f507adf0ce527373336bee208be90c50a76 Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Mon, 23 Mar 2015 10:33:08 -0700 Subject: [PATCH 5/7] More progress on bezier --- js/handle.js | 17 +++++++----- js/main.js | 1 - js/polygon.js | 66 +++++++++++++++++++++++------------------------ js/polygontool.js | 2 +- main.html | 3 ++- 5 files changed, 45 insertions(+), 44 deletions(-) diff --git a/js/handle.js b/js/handle.js index 09f25e1..3adfef1 100644 --- a/js/handle.js +++ b/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); } diff --git a/js/main.js b/js/main.js index 91e37c8..1436e49 100644 --- a/js/main.js +++ b/js/main.js @@ -22,7 +22,6 @@ var matrix4 = o3djs.math.matrix4; // Colors of things var gridColor = "hsla(0, 0%, 50%, 0.5)"; -var polygonStrokeColor = "rgba(0, 255, 50, 1.0)"; $(document).ready(function () diff --git a/js/polygon.js b/js/polygon.js index 4486db4..1f53d1d 100644 --- a/js/polygon.js +++ b/js/polygon.js @@ -1,12 +1,28 @@ + +var polygonStrokeColor = "rgba(0, 255, 50, 1.0)"; +var bezierHandleColor = "rgba(0, 100, 100, 1.0)"; + Polygon = function() { this.vertices = []; - this.bezier = []; 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; @@ -15,61 +31,43 @@ 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]); - var last_x = v[0]; - var last_y = v[1]; - var i = 1; - for ( ; i 1 ) - { - var b = [0,0]; - var f = [0,0]; - this.bezier.push({back:b, front:f}); - this.handles.push(new Handle(b)); - this.handles.push(new Handle(f)); - } + 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() { this.closed = true; - this.bezier.push({back:[0,0], front:[0,0]}); } diff --git a/js/polygontool.js b/js/polygontool.js index 8942c70..11d11c1 100644 --- a/js/polygontool.js +++ b/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] ) ) { diff --git a/main.html b/main.html index 5402698..533cb18 100644 --- a/main.html +++ b/main.html @@ -12,13 +12,14 @@ + - + From d0d6eb4df0a8cc59f5f4db7f3f8469fb3312cb97 Mon Sep 17 00:00:00 2001 From: Peterson Trethewey Date: Mon, 23 Mar 2015 10:33:24 -0700 Subject: [PATCH 6/7] Added bezierhandle.js --- js/bezierhandle.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 js/bezierhandle.js diff --git a/js/bezierhandle.js b/js/bezierhandle.js new file mode 100644 index 0000000..d9e9806 --- /dev/null +++ b/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(); +} + From 764b1af54e2ae7ad679a4ca1869ff5ed459ec297 Mon Sep 17 00:00:00 2001 From: samgreen Date: Tue, 7 Apr 2015 19:04:53 -0700 Subject: [PATCH 7/7] Update main for dragon integration --- main.html | 42 ++++++++++++++++++++---------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/main.html b/main.html index 533cb18..e927a0f 100644 --- a/main.html +++ b/main.html @@ -2,29 +2,27 @@ Poly Trace - - + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +