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'
11 mouse = x: 0, y: 0, buttons: [0,0,0]
14 constructor: (name) ->
17 button_click: (button) ->
22 class DrawTool extends Tool
23 constructor: (toolbar) ->
25 @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
26 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
27 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
28 toolbar.append @stop_button
29 toolbar.append @stop_close_button
30 toolbar.append @cancel_button
31 @stop_button.click @stop_drawing.bind @
32 @stop_close_button.click @stop_close_drawing.bind @
33 @cancel_button.click @cancel_drawing.bind @
35 if selection? and not selection.drawing?
38 path = document.createElementNS svg_ns, "path"
39 selection = data: [], element: path, drawing: true
41 selection.data.push [x, y]
43 button_click: (button) ->
48 console.log selection.element
49 svg.removeChild selection.element
57 stop_close_drawing: ->
59 update_path selection, close: true
66 update_path selection, to_mouse: true
69 when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
70 return @stop_close_drawing()
71 when (' '.charCodeAt 0), 13, 10
72 return @stop_drawing()
74 return @cancel_drawing()
76 if selection?.drawing?
77 delete selection.drawing
79 update_path = (path, flags) ->
82 for loc, i in path.data
83 d += "#{sep} #{loc[0]} #{loc[1]}"
86 d += "#{sep} #{mouse.x} #{mouse.y}"
89 path.element.setAttribute "d", d
91 # called automatically on domcontentloaded
93 $container = $ '.crayon_mockup'
94 $tools = $ '<div class="toolbar"></div>'
95 $container.append $tools
96 svg = document.createElementNS svg_ns, 'svg'
97 svg.setAttribute 'width', width
98 svg.setAttribute 'height', height
99 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
101 $container.append $svg
102 cur_tool = new DrawTool $tools
103 $svg.mousedown (e) ->
104 offset = $svg.offset()
106 return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
107 $svg.mousemove (e) ->
108 offset = $svg.offset()
110 return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
111 ($ document).keydown (e) ->
113 return cur_tool.keydown e.keyCode