From: Jason Woofenden Date: Sun, 24 May 2015 18:02:34 +0000 (-0400) Subject: cleanup instructions, add esc/cancel X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=33a4ce2992c7345ee0791caf9f3560d04c075b7d;ds=sidebyside cleanup instructions, add esc/cancel --- diff --git a/auto.coffee b/auto.coffee index bfd84af..e705421 100644 --- 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 @@ -48,21 +53,26 @@ mousemove = (x, y) -> 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 = $ 'stop drawing' - $stop_close_button = $ 'stop drawing, close loop' + $stop_button = $ 'stop line' + $stop_close_button = $ 'stop line, close loop' + $cancel_button = $ 'cancel line' $tools = $ '' $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 diff --git a/index.html b/index.html index 4326c81..3da2eda 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@

Crayon Mockup (working title)

Instructions: click in multiple different places in the box below to draw.

Tip: press space to stop drawing, or o to stop and close the loop.

Tip: hover over buttons below to see keyboard shortcuts