diff --git a/js/constants.js b/js/constants.js new file mode 100644 index 0000000..dd4ca34 --- /dev/null +++ b/js/constants.js @@ -0,0 +1,101 @@ +var KEYS = { + BACKSPACE: 8, + TAB: 9, + ENTER: 13, + SHIFT: 16, + CTRL: 17, + ALT: 18, + PAUSE: 19, + CAPS_LOCK: 20, + ESCAPE: 27, + SPACE: 32, + PAGE_UP: 33, + PAGE_DOWN: 34, + END: 35, + HOME: 36, + LEFT_ARROW: 37, + UP_ARROW: 38, + RIGHT_ARROW: 39, + DOWN_ARROW: 40, + INSERT: 45, + DELETE: 46, + KEY_0: 48, + KEY_1: 49, + KEY_2: 50, + KEY_3: 51, + KEY_4: 52, + KEY_5: 53, + KEY_6: 54, + KEY_7: 55, + KEY_8: 56, + KEY_9: 57, + KEY_A: 65, + KEY_B: 66, + KEY_C: 67, + KEY_D: 68, + KEY_E: 69, + KEY_F: 70, + KEY_G: 71, + KEY_H: 72, + KEY_I: 73, + KEY_J: 74, + KEY_K: 75, + KEY_L: 76, + KEY_M: 77, + KEY_N: 78, + KEY_O: 79, + KEY_P: 80, + KEY_Q: 81, + KEY_R: 82, + KEY_S: 83, + KEY_T: 84, + KEY_U: 85, + KEY_V: 86, + KEY_W: 87, + KEY_X: 88, + KEY_Y: 89, + KEY_Z: 90, + LEFT_META: 91, + RIGHT_META: 92, + SELECT: 93, + NUMPAD_0: 96, + NUMPAD_1: 97, + NUMPAD_2: 98, + NUMPAD_3: 99, + NUMPAD_4: 100, + NUMPAD_5: 101, + NUMPAD_6: 102, + NUMPAD_7: 103, + NUMPAD_8: 104, + NUMPAD_9: 105, + MULTIPLY: 106, + ADD: 107, + SUBTRACT: 109, + DECIMAL: 110, + DIVIDE: 111, + F1: 112, + F2: 113, + F3: 114, + F4: 115, + F5: 116, + F6: 117, + F7: 118, + F8: 119, + F9: 120, + F10: 121, + F11: 122, + F12: 123, + NUM_LOCK: 144, + SCROLL_LOCK: 145, + SEMICOLON: 186, + EQUALS: 187, + COMMA: 188, + DASH: 189, + PERIOD: 190, + FORWARD_SLASH: 191, + GRAVE_ACCENT: 192, + OPEN_BRACKET: 219, + BACK_SLASH: 220, + CLOSE_BRACKET: 221, + SINGLE_QUOTE: 222 +}; \ No newline at end of file diff --git a/js/handle.js b/js/handle.js index 35a8e35..09f25e1 100644 --- a/js/handle.js +++ b/js/handle.js @@ -29,6 +29,7 @@ Handle.prototype.draw = function(ctx, info) var y = v[1]; var w = Handle.HANDLE_RADIUS; var h = Handle.HANDLE_RADIUS; + ctx.fillStyle = polygonStrokeColor; ctx.strokeStyle = polygonStrokeColor; ctx.strokeRect(x-w, y-w, 2*w, 2*h); diff --git a/js/main.js b/js/main.js index 48123da..5b27b22 100644 --- a/js/main.js +++ b/js/main.js @@ -8,11 +8,10 @@ var undoButton; var redoButton; var exportWindow = null; -var lastEvent; var heldKeys = {}; var view = new Node(); -var undoManager = new UndoManager(); +var undoManager = new UndoManager(drawScreen); var polyTraceDocument = new PolyTraceDocument(); var LOOP_ID = null; @@ -38,10 +37,10 @@ function currentTool() var gridColor = "hsla(0, 0%, 50%, 0.5)"; var polygonStrokeColor = "rgba(0, 255, 50, 1.0)"; -$(document).ready(function documentReady () +$(document).ready(function () { body = $('body'); - canvas = $("#canvas"); + canvas = $('#canvas'); exportButton = $('button.export'); polyButton = $('button.poly'); @@ -50,16 +49,19 @@ $(document).ready(function documentReady () undoButton = $('button.undo'); redoButton = $('button.redo'); - window.onkeydown = keyDown; - window.onkeyup = keyUp; - canvas.on("mousedown", mouseDown); canvas.on("mouseup", mouseUp); canvas.on("mousemove", mouseMove); canvas.on("dblclick", doubleClick); canvas.on("mousewheel", mouseWheel); + // Redraw screen for these events + canvas.on("mousedown mouseup mousemove dblclick mousewheel", drawScreen); $(window).on("resize", resize); + $(window).on("keydown", keyDown); + $(window).on("keyup", keyUp); + // Redraw screen for these events + $(window).on("resize keydown keyup", drawScreen); if( canvas[0].getContext ) { @@ -75,11 +77,13 @@ $(document).ready(function documentReady () canvas.on('dragover', function(e){ e.stopPropagation(); e.preventDefault(); + return false; }); canvas.on('dragenter', function(e){ e.stopPropagation(); e.preventDefault(); + return false; }); canvas.on('drop', function(e){ @@ -89,6 +93,8 @@ $(document).ready(function documentReady () e.stopPropagation(); loadImage(e.originalEvent.dataTransfer.files[0]); + + return false; } } }); @@ -99,8 +105,8 @@ $(document).ready(function documentReady () handButton.on('mousedown', function() {selectedTool = handTool;}); editButton.on('mousedown', function() {selectedTool = editTool;} ); - undoButton.on('mousedown', function() {undoManager.undo(); drawScreen();}); - redoButton.on('mousedown', function() {undoManager.redo(); drawScreen();}); + undoButton.on('mousedown', function() {undoManager.undo();}); + redoButton.on('mousedown', function() {undoManager.redo();}); }); function loadImage(file) @@ -194,7 +200,8 @@ function titleScreenLoop(t) ctx.restore(); ctx.fillStyle = "#555"; - ctx.font = (20*Math.atan(Math.PI*t/1000)+40)+"px Arial"; + var fontSizeBasedOnTime = (20 * Math.atan(Math.PI * t / 1000) + 40); + ctx.font = fontSizeBasedOnTime + "px Arial"; ctx.fillText("A tool for drawing a polygon path over an image.", 0,200); ctx.restore(); @@ -262,7 +269,6 @@ function drawGrid(cellSize) ctx.lineWidth = "1"; ctx.strokeStyle = gridColor; - // draw 'vertical' lines for( var i = 1; i <= columns; i++ ) { @@ -320,8 +326,6 @@ function resize(event) { canvas.attr('width', window.innerWidth); canvas.attr('height', window.innerHeight); - - drawScreen(); } function mouseDown(event) @@ -350,8 +354,6 @@ function mouseDown(event) else if( APP_STATE == 'end' ) { } - - drawScreen(); } function doubleClick() @@ -362,8 +364,6 @@ function doubleClick() polyTraceDocument : polyTraceDocument, event : event}); } - - drawScreen(); } function preserveCenterDo(obj, modifier, args) @@ -403,100 +403,96 @@ function mouseMove(event) { var v = [event.offsetX, event.offsetY]; - currentTool().mouseMove({ + var params = { polyTraceDocument : polyTraceDocument, worldLocation : canvasToWorld(v), - event : event}); - - drawScreen(); + event : event + }; + currentTool().mouseMove(params); } function mouseUp(event) { var v = [event.offsetX, event.offsetY]; - currentTool().mouseUp({ + var params = { polyTraceDocument : polyTraceDocument, worldLocation : canvasToWorld(v), - event : event}); + event : event + }; + currentTool().mouseUp(params); tempTool = null; - drawScreen(); } -function keyDown(event) +function keyDown(theEvent) { - if (lastEvent && lastEvent.which == event.which) - { - return; - } + var result = true; - switch( event.which ) + switch( theEvent.which ) { - case 16: // shift - case 17: // ctrl - case 18: // alt - return; - - case 187: // = + case KEYS.EQUALS: zoom(1.1); break; - case 189: // - - zoom(1.0/1.1); + case KEYS.DASH: + zoom(1.0 / 1.1); break; - case 37: // left + case KEYS.LEFT_ARROW: view.position[0] -= 30; break; - case 38: // up + + case KEYS.UP_ARROW: view.position[1] -= 30; break; - case 39: // right + + case KEYS.RIGHT_ARROW: view.position[0] += 30; break; - case 40: // down + + case KEYS.DOWN_ARROW: view.position[1] += 30; break; - case 190: //. + case KEYS.PERIOD: rotate(Math.PI / 12); break; - case 188: //, + case KEYS.COMMA: rotate(-Math.PI / 12); break; } - lastEvent = event; - heldKeys[event.which] = true; - - drawScreen(); -} + var isMetaDown = (heldKeys[KEYS.LEFT_META] > 0 || heldKeys[KEYS.RIGHT_META] > 0); + var isShiftDown = (heldKeys[KEYS.SHIFT] > 0); -function keyUp() -{ - lastEvent = null; - - if (lastEvent && lastEvent.which == event.which) + if( isMetaDown && theEvent.which === KEYS.KEY_Z ) { - return; + if( isShiftDown ) + { + undoManager.redo(); + } + else + { + undoManager.undo(); + } + theEvent.stopPropagation(); + result = false; } - // These will probably be useful later. - switch( event.which ) + if( theEvent.which === KEYS.KEY_H ) { - case 16: // shift - case 17: // ctrl - case 18: // alt - case 37: // left - case 38: // up - case 39: // right - case 40: // down - case 32: // space - return; + undoManager.redo(); } - delete(heldKeys[event.keyCode]); // Why is this keyCode and not which? + heldKeys[theEvent.which] = (heldKeys[theEvent.which]++) || 1; + + return result; +} + +function keyUp() +{ + heldKeys[event.which]--; } diff --git a/js/undomanager.js b/js/undomanager.js index 61b9aa0..55abd50 100644 --- a/js/undomanager.js +++ b/js/undomanager.js @@ -1,8 +1,9 @@ -function UndoManager() +function UndoManager(drawScreen) { this.head = -1; this.undoList = []; + this.drawScreen = drawScreen; } UndoManager.prototype.undo = function() @@ -13,6 +14,8 @@ UndoManager.prototype.undo = function() info.undoFunction.apply(info.undoThis, info.undoArgList); this.head--; } + + this.drawScreen(); } UndoManager.prototype.redo = function() @@ -23,6 +26,8 @@ UndoManager.prototype.redo = function() var info = this.undoList[this.head]; info.redoFunction.apply(info.redoThis, info.redoArgList); } + + this.drawScreen(); } UndoManager.prototype.push = function(undoFunction, undoThis, undoArgList, redoFunction, redoThis, redoArgList) diff --git a/js/utils.js b/js/utils.js index cb73924..da3938e 100644 --- a/js/utils.js +++ b/js/utils.js @@ -1,4 +1,3 @@ - // requestAnimationFrame and cancelAnimationFrame polyfill by Erik Möller // see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating (function() { diff --git a/main.html b/main.html index 948d75e..73554c8 100644 --- a/main.html +++ b/main.html @@ -18,6 +18,7 @@ +