add keybindings

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index 7a55b2a..bfd84af 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -1,36 +1,83 @@
+# 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
 
 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
+                       return stop_close_drawing()
+               when (' '.charCodeAt 0), 13, 10, 27
+                       return stop_drawing()
 
 # called automatically on domcontentloaded
 init = ->
        $container = $ '.crayon_mockup'
-       $stop_button = $ '<div class="button">[end current polyline]</div>'
+       $stop_button = $ '<span class="button">stop drawing</span>'
+       $stop_close_button = $ '<span class="button">stop drawing, close loop</span>'
        $tools = $ '<div class="toolbar"></div>'
        $tools.append $stop_button
+       $tools.append $stop_close_button
        $stop_button.click stop_drawing
+       $stop_close_button.click stop_close_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