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: (name) ->
18 button_click: (button) ->
23 class TutorialTool extends Tool
24 constructor: (toolbar) ->
28 [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
29 [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
30 [[173,107],[169,159],[180,137],[189,133],[193,160]],
31 [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
32 [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
33 [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
34 [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
35 [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
36 [[160,207],[191,205]],
37 [[176,184],[174,228],[180,238]],
38 [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
39 [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
40 [[247,187],[249,241],[254,243]]
43 path = data: c, element: document.createElementNS svg_ns, "path"
44 update_path path, close: c[c.length - 1][2] is 'z'
45 svg.appendChild path.element
47 @tip = $ "<span> </span>"
52 svg.removeChild p.element
54 class DrawTool extends Tool
55 constructor: (toolbar) ->
57 @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
58 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
59 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
60 toolbar.append @stop_button
61 toolbar.append @stop_close_button
62 toolbar.append @cancel_button
63 @stop_button.click @stop_drawing.bind @
64 @stop_close_button.click @stop_close_drawing.bind @
65 @cancel_button.click @cancel_drawing.bind @
67 if selection? and not selection.drawing?
70 path = document.createElementNS svg_ns, "path"
71 selection = data: [], element: path, drawing: true
73 selection.data.push [x, y]
75 button_click: (button) ->
79 if selection?.drawing?
80 svg.removeChild selection.element
84 if selection?.drawing?
88 stop_close_drawing: ->
89 if selection?.drawing?
90 update_path selection, close: true
96 if selection?.drawing?
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()
108 if selection?.drawing?
109 delete selection.drawing
111 class EditTool extends Tool
112 constructor: (toolbar) ->
114 toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
116 class DeleteTool extends Tool
117 constructor: (toolbar) ->
119 toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
121 update_path = (path, flags) ->
124 for loc, i in path.data
125 d += "#{sep} #{loc[0]} #{loc[1]}"
128 d += "#{sep} #{mouse.x} #{mouse.y}"
131 path.element.setAttribute "d", d
133 switch_to_tool = (tool_class) ->
135 # called automatically on domcontentloaded
138 draw: button_text: 'draw', factory: DrawTool
139 edit: button_text: 'edit', factory: EditTool
140 delete: button_text: 'delete', factory: DeleteTool
141 $container = $ '.crayon_mockup'
142 $toolbar = $ '<div class="toolbar">Tools: </div>'
143 for k, t of tool_buttons
144 t.element = $ "<span class=\"button\"></span>"
145 t.element.text t.button_text
146 $toolbar.append t.element
151 ($toolbar.find '.button').removeClass 'disabled'
152 $tool_options.empty()
153 cur_tool = new t.factory $tool_options
154 t.element.addClass 'disabled'
155 $tool_options = $ '<div class="tool_options"></div>'
156 $container.append $toolbar
157 $container.append $tool_options
158 svg = document.createElementNS svg_ns, 'svg'
159 svg.setAttribute 'width', width
160 svg.setAttribute 'height', height
161 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
163 $container.append $svg
164 cur_tool = new TutorialTool $tool_options
165 $svg.mousedown (e) ->
166 offset = $svg.offset()
168 return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
169 $svg.mousemove (e) ->
170 offset = $svg.offset()
172 return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
173 ($ document).keydown (e) ->
175 return cur_tool.keydown e.keyCode