cleanup instructions, add esc/cancel

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index c4cd5b4..e705421 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -23,6 +23,11 @@ update_path = (path, data, flags) ->
                d += " z"
        path.setAttribute "d", d
 
+cancel_drawing = ->
+       if selection?
+               svg.removeChild selection.element
+       selection = null
+       return false
 stop_drawing = ->
        if selection?
                update_path selection.element, selection.data
@@ -46,16 +51,28 @@ mousemove = (x, y) ->
        if selection?
                update_path selection.element, selection.data, to_mouse: true
 
+keydown = (keycode) ->
+       switch keycode
+               when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
+                       return stop_close_drawing()
+               when (' '.charCodeAt 0), 13, 10
+                       return stop_drawing()
+               when 27
+                       return cancel_drawing()
+
 # called automatically on domcontentloaded
 init = ->
        $container = $ '.crayon_mockup'
-       $stop_button = $ '<span class="button">stop drawing</span>'
-       $stop_close_button = $ '<span class="button">stop drawing, close loop</span>'
+       $stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
+       $stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
+       $cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
        $tools = $ '<div class="toolbar"></div>'
        $tools.append $stop_button
        $tools.append $stop_close_button
+       $tools.append $cancel_button
        $stop_button.click stop_drawing
        $stop_close_button.click stop_close_drawing
+       $cancel_button.click cancel_drawing
        $container.append $tools
        svg = document.createElementNS svg_ns, 'svg'
        svg.setAttribute 'width', width
@@ -70,5 +87,7 @@ init = ->
        $svg.mousemove (e) ->
                offset = $svg.offset()
                mousemove e.pageX - offset.left, e.pageY - offset.top
+       ($ document).keydown (e) ->
+               return keydown e.keyCode
 
 $ init