svg = null # dom object for svg element
selection = null
svg_ns = 'http://www.w3.org/2000/svg'
-mouse = [0,0]
+cur_tool = null
+mouse = x: 0, y: 0, buttons: [0,0,0]
-update_path = (path, data, flags) ->
+class Tool
+ constructor: (name) ->
+ @name = name
+ click: (x, y) ->
+ button_click: (button) ->
+ mousemove: (x, y) ->
+ keydown: (keycode) ->
+ disable: ->
+
+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>'
+ @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
+ @stop_button.click @stop_drawing.bind @
+ @stop_close_button.click @stop_close_drawing.bind @
+ @cancel_button.click @cancel_drawing.bind @
+ click: (x, y) ->
+ if selection? and not selection.drawing?
+ selection = null
+ unless selection?
+ path = document.createElementNS svg_ns, "path"
+ selection = data: [], element: path, drawing: true
+ svg.appendChild path
+ selection.data.push [x, y]
+ update_path selection
+ button_click: (button) ->
+ if @[button]
+ return @[button]()
+ cancel_drawing: ->
+ if selection?
+ console.log selection.element
+ svg.removeChild selection.element
+ selection = null
+ return false
+ stop_drawing: ->
+ if selection?
+ update_path selection
+ selection = null
+ return false
+ stop_close_drawing: ->
+ if selection?
+ update_path selection, close: true
+ selection = null
+ return false
+ mousemove: (x, y) ->
+ mouse.x = x
+ mouse.y = y
+ if selection?
+ update_path selection, to_mouse: true
+ keydown: (keycode) ->
+ switch keycode
+ when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
+ return @stop_close_drawing()
+ when (' '.charCodeAt 0), 13, 10
+ return @stop_drawing()
+ when 27
+ return @cancel_drawing()
+ disable: ->
+ if selection?.drawing?
+ delete selection.drawing
+
+update_path = (path, flags) ->
d = ''
- for loc, i in data
- if i is 0
- d += 'M '
- else
- d += ' L '
- d += "#{loc[0]} #{loc[1]}"
+ sep = 'M'
+ for loc, i in path.data
+ d += "#{sep} #{loc[0]} #{loc[1]}"
+ sep = ' L'
if flags?.to_mouse?
- d += "L #{mouse[0]} #{mouse[1]}"
+ d += "#{sep} #{mouse.x} #{mouse.y}"
if flags?.close?
d += " z"
- path.setAttribute "d", d
-
-cancel_drawing = ->
- if selection?
- svg.removeChild selection.element
- selection = null
- return false
-stop_drawing = ->
- if selection?
- update_path selection.element, selection.data
- selection = null
- return false
-stop_close_drawing = ->
- if selection?
- update_path selection.element, selection.data, close: true
- selection = null
- return false
-click = (x, y) ->
- unless selection?
- path = document.createElementNS svg_ns, "path"
- selection = data: [], element: path
- svg.appendChild path
- selection.data.push [x, y]
- update_path selection.element, selection.data
-mousemove = (x, y) ->
- mouse[0] = x
- mouse[1] = y
- if selection?
- update_path selection.element, selection.data, to_mouse: true
-
-keydown = (keycode) ->
- switch keycode
- when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
- return stop_close_drawing()
- when (' '.charCodeAt 0), 13, 10
- return stop_drawing()
- when 27
- return cancel_drawing()
+ path.element.setAttribute "d", d
# called automatically on domcontentloaded
init = ->
$container = $ '.crayon_mockup'
- $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>'
- $cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
$tools = $ '<div class="toolbar"></div>'
- $tools.append $stop_button
- $tools.append $stop_close_button
- $tools.append $cancel_button
- $stop_button.click stop_drawing
- $stop_close_button.click stop_close_drawing
- $cancel_button.click cancel_drawing
$container.append $tools
svg = document.createElementNS svg_ns, 'svg'
svg.setAttribute 'width', width
svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
$svg = $ svg
$container.append $svg
+ cur_tool = new DrawTool $tools
$svg.mousedown (e) ->
offset = $svg.offset()
- click e.pageX - offset.left, e.pageY - offset.top
- return false
+ if cur_tool?
+ return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
$svg.mousemove (e) ->
offset = $svg.offset()
- mousemove e.pageX - offset.left, e.pageY - offset.top
+ if cur_tool?
+ return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
($ document).keydown (e) ->
- return keydown e.keyCode
+ if cur_tool?
+ return cur_tool.keydown e.keyCode
$ init