6 $svg = null # jquery object for svg element
7 svg = null # dom object for svg element
9 svg_ns = 'http://www.w3.org/2000/svg'
12 update_path = (path, data, flags) ->
19 d += "#{loc[0]} #{loc[1]}"
21 d += "L #{mouse[0]} #{mouse[1]}"
24 path.setAttribute "d", d
28 svg.removeChild selection.element
33 update_path selection.element, selection.data
36 stop_close_drawing = ->
38 update_path selection.element, selection.data, close: true
43 path = document.createElementNS svg_ns, "path"
44 selection = data: [], element: path
46 selection.data.push [x, y]
47 update_path selection.element, selection.data
52 update_path selection.element, selection.data, to_mouse: true
54 keydown = (keycode) ->
56 when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
57 return stop_close_drawing()
58 when (' '.charCodeAt 0), 13, 10
61 return cancel_drawing()
63 # called automatically on domcontentloaded
65 $container = $ '.crayon_mockup'
66 $stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
67 $stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
68 $cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
69 $tools = $ '<div class="toolbar"></div>'
70 $tools.append $stop_button
71 $tools.append $stop_close_button
72 $tools.append $cancel_button
73 $stop_button.click stop_drawing
74 $stop_close_button.click stop_close_drawing
75 $cancel_button.click cancel_drawing
76 $container.append $tools
77 svg = document.createElementNS svg_ns, 'svg'
78 svg.setAttribute 'width', width
79 svg.setAttribute 'height', height
80 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
82 $container.append $svg
84 offset = $svg.offset()
85 click e.pageX - offset.left, e.pageY - offset.top
88 offset = $svg.offset()
89 mousemove e.pageX - offset.left, e.pageY - offset.top
90 ($ document).keydown (e) ->
91 return keydown e.keyCode