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
keydown = (keycode) ->
switch keycode
- when 'O'.charCodeAt 0
+ when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
return stop_close_drawing()
- when (' '.charCodeAt 0), 13, 10, 27
+ 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
<body>
<h1>Crayon Mockup (working title)</h1>
<p>Instructions: click in multiple different places in the box below to draw.</p>
- <p>Tip: press <code>space</code> to stop drawing, or <code>o</code> to stop and close the loop.</p>
+ <p>Tip: hover over buttons below to see keyboard shortcuts</p>
<div class="crayon_mockup"></div>
</body>
</html>
Got questions, comments, patches, etc.? Contact Jason Woofenden