+# settings
+width = 500
+height = 500
+
# globals
-$svg = null #jquery object for svg element
-selected = null
+$svg = null # jquery object for svg element
+svg = null # dom object for svg element
+selection = null
+svg_ns = 'http://www.w3.org/2000/svg'
+mouse = [0,0]
+
+update_path = (path, data, flags) ->
+ d = ''
+ for loc, i in data
+ if i is 0
+ d += 'M '
+ else
+ d += ' L '
+ d += "#{loc[0]} #{loc[1]}"
+ if flags?.to_mouse?
+ d += "L #{mouse[0]} #{mouse[1]}"
+ if flags?.close?
+ d += " z"
+ path.setAttribute "d", d
+cancel_drawing = ->
+ if selection?
+ svg.removeChild selection.element
+ selection = null
+ return false
stop_drawing = ->
- selected = null
+ 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 selected?
- selected = []
- if selected.length > 0
- last = selected[selected.length - 1]
- obj = document.createElementNS("http://www.w3.org/2000/svg", "path")
- obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}")
- $svg[0].appendChild(obj)
- selected.push [x, y]
- console.log selected
+ 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()
# called automatically on domcontentloaded
init = ->
$container = $ '.crayon_mockup'
- $stop_button = $ '<div class="button">[end current polyline]</div>'
+ $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 = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
- #$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
- #$svg.append $test_path
+ 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
- console.log 'hi'
$svg.mousedown (e) ->
- console.log 'hi'
offset = $svg.offset()
click e.pageX - offset.left, e.pageY - offset.top
+ return false
+ $svg.mousemove (e) ->
+ offset = $svg.offset()
+ mousemove e.pageX - offset.left, e.pageY - offset.top
+ ($ document).keydown (e) ->
+ return keydown e.keyCode
$ init