# 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
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>'
+ @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
if @[button]
return @[button]()
cancel_drawing: ->
- if selection?
- console.log selection.element
+ if selection?.drawing?
svg.removeChild selection.element
selection = null
return false
stop_drawing: ->
- if selection?
+ if selection?.drawing?
update_path selection
selection = null
return false
stop_close_drawing: ->
- if selection?
+ if selection?.drawing?
update_path selection, close: true
selection = null
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: ->
+ @stop_drawing()
if selection?.drawing?
delete selection.drawing
- @stop_button.remove()
- @stop_close_button.remove()
- @cancel_button.remove()
class EditTool extends Tool
constructor: (toolbar) ->
super 'draw'
- @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
- toolbar.append @oops
- disable: ->
- @oops.remove()
+ toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
class DeleteTool extends Tool
constructor: (toolbar) ->
super 'draw'
- @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
- toolbar.append @oops
- disable: ->
- @oops.remove()
+ toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
update_path = (path, flags) ->
d = ''
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'
$toolbar = $ '<div class="toolbar">Tools: </div>'
- $draw_tool_button = $ '<span class="button">draw</span>'
- $edit_tool_button = $ '<span class="button">edit (coming soon)</span>'
- $delete_tool_button = $ '<span class="button">delete (coming soon)</span>'
- $toolbar.append $draw_tool_button
- $toolbar.append $edit_tool_button
- $toolbar.append $delete_tool_button
- $draw_tool_button.click ->
- if cur_tool?
- cur_tool.disable()
- cur_tool = new DrawTool $tool_extra
- $edit_tool_button.click ->
- if cur_tool?
- cur_tool.disable()
- cur_tool = new EditTool $tool_extra
- $delete_tool_button.click ->
- if cur_tool?
- cur_tool.disable()
- cur_tool = new DeleteTool $tool_extra
- $tool_extra = $ '<div class="tool_extra"></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 $tool_options
+ t.element.addClass 'disabled'
+ $tool_options = $ '<div class="tool_options"></div>'
$container.append $toolbar
- $container.append $tool_extra
+ $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 TutorialTool $tool_extra
+ cur_tool = new TutorialTool $tool_options
$svg.mousedown (e) ->
offset = $svg.offset()
if cur_tool?