6 $svg = null # jquery object for svg element
7 svg = null # dom object for svg element
8 $tool_options = null # jquery object for tool options line
10 svg_ns = 'http://www.w3.org/2000/svg'
12 mouse = x: 0, y: 0, buttons: [0,0,0]
15 constructor: (args) ->
18 @button.addClass 'disabled'
19 @tool_options = args.tool_options
25 @button.removeClass 'disabled'
28 class TutorialTool extends Tool
29 constructor: (args) ->
33 [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
34 [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
35 [[173,107],[169,159],[180,137],[189,133],[193,160]],
36 [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
37 [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
38 [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
39 [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
40 [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
41 [[160,207],[191,205]],
42 [[176,184],[174,228],[180,238]],
43 [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
44 [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
45 [[247,187],[249,241],[254,243]]
48 path = data: c, element: document.createElementNS svg_ns, "path"
49 update_path path, close: c[c.length - 1][2] is 'z'
50 svg.appendChild path.element
52 @tip = $ "<span> </span>"
53 @tool_options.append @tip
57 svg.removeChild p.element
59 class DrawTool extends Tool
60 constructor: (args) ->
62 @tool_options.append $ "<span>Draw tool helpers:</span>"
63 @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
64 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
65 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
66 @tool_options.append @stop_button
67 @tool_options.append @stop_close_button
68 @tool_options.append @cancel_button
69 @stop_button.click @stop_drawing.bind @
70 @stop_close_button.click @stop_close_drawing.bind @
71 @cancel_button.click @cancel_drawing.bind @
72 @update_helper_buttons()
74 if selection? and not selection.drawing?
77 path = document.createElementNS svg_ns, "path"
78 selection = data: [], element: path, drawing: true
80 selection.data.push [x, y]
82 @update_helper_buttons()
83 update_helper_buttons: ->
84 if selection?.drawing? and selection?.data.length > 0
85 @cancel_button.removeClass 'disabled'
87 @cancel_button.addClass 'disabled'
88 if selection?.drawing? and selection?.data.length > 1
89 @stop_button.removeClass 'disabled'
91 @stop_button.addClass 'disabled'
92 if selection?.drawing? and selection?.data.length > 2
93 @stop_close_button.removeClass 'disabled'
95 @stop_close_button.addClass 'disabled'
97 if selection?.drawing?
98 svg.removeChild selection.element
100 @update_helper_buttons()
103 if selection?.drawing?
104 if selection?.data.length < 2
105 return @cancel_drawing()
106 update_path selection
108 @update_helper_buttons()
110 stop_close_drawing: ->
111 if selection?.drawing?
112 if selection?.data.length < 3
113 return @stop_drawing()
114 update_path selection, close: true
116 @update_helper_buttons()
121 if selection?.drawing?
122 update_path selection, to_mouse: true
123 keydown: (keycode) ->
125 when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
126 return @stop_close_drawing()
127 when (' '.charCodeAt 0), 13, 10
128 return @stop_drawing()
130 return @cancel_drawing()
134 if selection?.drawing?
135 delete selection.drawing
137 class EditTool extends Tool
138 constructor: (args) ->
140 toolbar.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
142 class DeleteTool extends Tool
143 constructor: (args) ->
145 toolbar.append $ "<span>Oops, the delete isn't implemented yet</span>"
147 update_path = (path, flags) ->
150 for loc, i in path.data
151 d += "#{sep} #{loc[0]} #{loc[1]}"
154 d += "#{sep} #{mouse.x} #{mouse.y}"
157 path.element.setAttribute "d", d
159 switch_to_tool = (tool_class) ->
161 # called automatically on domcontentloaded
164 draw: button_text: 'draw', factory: DrawTool
165 edit: button_text: 'edit', factory: EditTool
166 delete: button_text: 'delete', factory: DeleteTool
167 $container = $ '.crayon_mockup'
168 $toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
169 for k, t of tool_buttons
170 t.element = $ "<span class=\"button\"></span>"
171 t.element.text t.button_text
172 $toolbar.append t.element
177 ($toolbar.find '.button').removeClass 'disabled'
178 $tool_options.empty()
179 cur_tool = new t.factory button: t.element, tool_options: $tool_options
180 $tool_options = $ '<div class="tool_options"></div>'
181 $container.append $toolbar
182 $container.append $tool_options
183 svg = document.createElementNS svg_ns, 'svg'
184 svg.setAttribute 'width', width
185 svg.setAttribute 'height', height
186 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
188 $container.append $svg
189 cur_tool = new TutorialTool tool_options: $tool_options
190 $svg.mousedown (e) ->
191 offset = $svg.offset()
193 return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
194 $svg.mousemove (e) ->
195 offset = $svg.offset()
197 return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
198 ($ document).keydown (e) ->
200 return cur_tool.keydown e.keyCode