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(); +} + 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"; +} + 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 5b27b22..1436e49 100644 --- a/js/main.js +++ b/js/main.js @@ -17,25 +17,12 @@ 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 () { @@ -43,9 +30,6 @@ $(document).ready(function () 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) 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..1f53d1d 100644 --- a/js/polygon.js +++ b/js/polygon.js @@ -1,4 +1,8 @@ + +var polygonStrokeColor = "rgba(0, 255, 50, 1.0)"; +var bezierHandleColor = "rgba(0, 100, 100, 1.0)"; + Polygon = function() { this.vertices = []; @@ -6,6 +10,19 @@ Polygon = function() 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 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/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..e927a0f 100644 --- a/main.html +++ b/main.html @@ -2,28 +2,32 @@ Poly Trace - - + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
+