Undo redo keyboard

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
+};

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);

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]--;
 }