# globals
$svg = null # jquery object for svg element
svg = null # dom object for svg element
+$tool_options = null # jquery object for tool options line
selection = null
svg_ns = 'http://www.w3.org/2000/svg'
cur_tool = null
mouse = x: 0, y: 0, buttons: [0,0,0]
class Tool
- constructor: (name) ->
- @name = name
+ constructor: (args) ->
+ @button = args.button
+ if @button?
+ @button.addClass 'disabled'
+ @tool_options = args.tool_options
click: (x, y) ->
- button_click: (button) ->
mousemove: (x, y) ->
keydown: (keycode) ->
disable: ->
+ if @button?
+ @button.removeClass 'disabled'
+ @tool_options.empty()
+
+class TutorialTool extends Tool
+ constructor: (args) ->
+ super args
+ @paths = []
+ choose = [
+ [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
+ [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
+ [[173,107],[169,159],[180,137],[189,133],[193,160]],
+ [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
+ [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
+ [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
+ [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
+ [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
+ [[160,207],[191,205]],
+ [[176,184],[174,228],[180,238]],
+ [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
+ [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
+ [[247,187],[249,241],[254,243]]
+ ]
+ for c in choose
+ path = data: c, element: document.createElementNS svg_ns, "path"
+ update_path path, close: c[c.length - 1][2] is 'z'
+ svg.appendChild path.element
+ @paths.push path
+ @tip = $ "<span> </span>"
+ @tool_options.append @tip
+ disable: ->
+ super()
+ for p in @paths
+ svg.removeChild p.element
class DrawTool extends Tool
- constructor: (toolbar) ->
- super 'draw'
- @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
- @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
+ constructor: (args) ->
+ super args
+ @tool_options.append $ "<span>Draw tool helpers:</span>"
+ @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
+ @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
@cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
- toolbar.append @stop_button
- toolbar.append @stop_close_button
- toolbar.append @cancel_button
+ @tool_options.append @stop_button
+ @tool_options.append @stop_close_button
+ @tool_options.append @cancel_button
@stop_button.click @stop_drawing.bind @
@stop_close_button.click @stop_close_drawing.bind @
@cancel_button.click @cancel_drawing.bind @
+ @update_helper_buttons()
click: (x, y) ->
if selection? and not selection.drawing?
selection = null
svg.appendChild path
selection.data.push [x, y]
update_path selection
- button_click: (button) ->
- if @[button]
- return @[button]()
+ @update_helper_buttons()
+ update_helper_buttons: ->
+ if selection?.drawing? and selection?.data.length > 0
+ @cancel_button.removeClass 'disabled'
+ else
+ @cancel_button.addClass 'disabled'
+ if selection?.drawing? and selection?.data.length > 1
+ @stop_button.removeClass 'disabled'
+ else
+ @stop_button.addClass 'disabled'
+ if selection?.drawing? and selection?.data.length > 2
+ @stop_close_button.removeClass 'disabled'
+ else
+ @stop_close_button.addClass 'disabled'
cancel_drawing: ->
- if selection?
- console.log selection.element
+ if selection?.drawing?
svg.removeChild selection.element
selection = null
+ @update_helper_buttons()
return false
stop_drawing: ->
- if selection?
+ if selection?.drawing?
+ if selection?.data.length < 2
+ return @cancel_drawing()
update_path selection
selection = null
+ @update_helper_buttons()
return false
stop_close_drawing: ->
- if selection?
+ if selection?.drawing?
+ if selection?.data.length < 3
+ return @stop_drawing()
update_path selection, close: true
selection = null
+ @update_helper_buttons()
return false
mousemove: (x, y) ->
mouse.x = x
mouse.y = y
- if selection?
+ if selection?.drawing?
update_path selection, to_mouse: true
keydown: (keycode) ->
switch keycode
when 27
return @cancel_drawing()
disable: ->
+ super()
+ @stop_drawing()
if selection?.drawing?
delete selection.drawing
+class EditTool extends Tool
+ constructor: (args) ->
+ super args
+ toolbar.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
+
+class DeleteTool extends Tool
+ constructor: (args) ->
+ super args
+ toolbar.append $ "<span>Oops, the delete isn't implemented yet</span>"
+
update_path = (path, flags) ->
d = ''
sep = 'M'
sep = ' L'
if flags?.to_mouse?
d += "#{sep} #{mouse.x} #{mouse.y}"
- if flags?.close?
+ if flags?.close
d += " z"
path.element.setAttribute "d", d
+switch_to_tool = (tool_class) ->
+
# called automatically on domcontentloaded
init = ->
+ tool_buttons =
+ draw: button_text: 'draw', factory: DrawTool
+ edit: button_text: 'edit', factory: EditTool
+ delete: button_text: 'delete', factory: DeleteTool
$container = $ '.crayon_mockup'
- $tools = $ '<div class="toolbar"></div>'
- $container.append $tools
+ $toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
+ for k, t of tool_buttons
+ t.element = $ "<span class=\"button\"></span>"
+ t.element.text t.button_text
+ $toolbar.append t.element
+ do (t) ->
+ t.element.click ->
+ if cur_tool?
+ cur_tool.disable()
+ ($toolbar.find '.button').removeClass 'disabled'
+ $tool_options.empty()
+ cur_tool = new t.factory button: t.element, tool_options: $tool_options
+ $tool_options = $ '<div class="tool_options"></div>'
+ $container.append $toolbar
+ $container.append $tool_options
svg = document.createElementNS svg_ns, 'svg'
svg.setAttribute 'width', width
svg.setAttribute 'height', height
svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
$svg = $ svg
$container.append $svg
- cur_tool = new DrawTool $tools
+ cur_tool = new TutorialTool tool_options: $tool_options
$svg.mousedown (e) ->
offset = $svg.offset()
if cur_tool?