wrap draw tool in an object

diff --git a/auto.coffee b/auto.coffee
index e705421..b4b8d98 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -7,72 +7,91 @@ $svg = null # jquery object for svg element
 svg = null # dom object for svg element
 selection = null
 svg_ns = 'http://www.w3.org/2000/svg'
 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 = ''
        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?
        if flags?.to_mouse?

-               d += "L #{mouse[0]} #{mouse[1]}"
+               d += "#{sep} #{mouse.x} #{mouse.y}"

        if flags?.close?
                d += " z"
        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'
 
 # 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 = $ '<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
        $container.append $tools
        svg = document.createElementNS svg_ns, 'svg'
        svg.setAttribute 'width', width

@@ -80,14 +99,17 @@ init = ->
        svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg
        svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg

+       cur_tool = new DrawTool $tools

        $svg.mousedown (e) ->
                offset = $svg.offset()
        $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()
        $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) ->
        ($ document).keydown (e) ->

-               return keydown e.keyCode
+               if cur_tool?
+                       return cur_tool.keydown e.keyCode

 
 $ init
 
 $ init

diff --git a/index.html b/index.html
index 3da2eda..4cce9fe 100644 (file)
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
                .crayon_mockup .button {
                        display: inline-block;
                        border-radius: 4px;
                .crayon_mockup .button {
                        display: inline-block;
                        border-radius: 4px;

+                       background: white;

                        box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
                }
                .crayon_mockup .button + .button {
                        box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
                }
                .crayon_mockup .button + .button {