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 TutorialTool extends Tool
23 constructor: (toolbar) ->
27 [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
28 [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
29 [[173,107],[169,159],[180,137],[189,133],[193,160]],
30 [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
31 [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
32 [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
33 [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
34 [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
35 [[160,207],[191,205]],
36 [[176,184],[174,228],[180,238]],
37 [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
38 [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
39 [[247,187],[249,241],[254,243]]
42 path = data: c, element: document.createElementNS svg_ns, "path"
43 update_path path, close: c[c.length - 1][2] is 'z'
44 svg.appendChild path.element
46 @tip = $ "<span> </span>"
51 svg.removeChild p.element
53 class DrawTool extends Tool
54 constructor: (toolbar) ->
56 @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
57 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
58 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
59 toolbar.append @stop_button
60 toolbar.append @stop_close_button
61 toolbar.append @cancel_button
62 @stop_button.click @stop_drawing.bind @
63 @stop_close_button.click @stop_close_drawing.bind @
64 @cancel_button.click @cancel_drawing.bind @
66 if selection? and not selection.drawing?
69 path = document.createElementNS svg_ns, "path"
70 selection = data: [], element: path, drawing: true
72 selection.data.push [x, y]
74 button_click: (button) ->
79 console.log selection.element
80 svg.removeChild selection.element
88 stop_close_drawing: ->
90 update_path selection, close: true
97 update_path selection, to_mouse: true
100 when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
101 return @stop_close_drawing()
102 when (' '.charCodeAt 0), 13, 10
103 return @stop_drawing()
105 return @cancel_drawing()
107 if selection?.drawing?
108 delete selection.drawing
109 @stop_button.remove()
110 @stop_close_button.remove()
111 @cancel_button.remove()
113 class EditTool extends Tool
114 constructor: (toolbar) ->
116 @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
121 class DeleteTool extends Tool
122 constructor: (toolbar) ->
124 @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
129 update_path = (path, flags) ->
132 for loc, i in path.data
133 d += "#{sep} #{loc[0]} #{loc[1]}"
136 d += "#{sep} #{mouse.x} #{mouse.y}"
139 path.element.setAttribute "d", d
141 # called automatically on domcontentloaded
143 $container = $ '.crayon_mockup'
144 $toolbar = $ '<div class="toolbar">Tools: </div>'
145 $draw_tool_button = $ '<span class="button">draw</span>'
146 $edit_tool_button = $ '<span class="button">edit (coming soon)</span>'
147 $delete_tool_button = $ '<span class="button">delete (coming soon)</span>'
148 $toolbar.append $draw_tool_button
149 $toolbar.append $edit_tool_button
150 $toolbar.append $delete_tool_button
151 $draw_tool_button.click ->
154 cur_tool = new DrawTool $tool_extra
155 $edit_tool_button.click ->
158 cur_tool = new EditTool $tool_extra
159 $delete_tool_button.click ->
162 cur_tool = new DeleteTool $tool_extra
163 $tool_extra = $ '<div class="tool_extra"></div>'
164 $container.append $toolbar
165 $container.append $tool_extra
166 svg = document.createElementNS svg_ns, 'svg'
167 svg.setAttribute 'width', width
168 svg.setAttribute 'height', height
169 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
171 $container.append $svg
172 cur_tool = new TutorialTool $tool_extra
173 $svg.mousedown (e) ->
174 offset = $svg.offset()
176 return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
177 $svg.mousemove (e) ->
178 offset = $svg.offset()
180 return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
181 ($ document).keydown (e) ->
183 return cur_tool.keydown e.keyCode