clean up tool button handling and appearance

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index a929f5e..480fbbe 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -5,6 +5,7 @@ height = 500
 # 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
@@ -53,8 +54,8 @@ class TutorialTool extends Tool
 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
@@ -75,25 +76,24 @@ class DrawTool extends Tool
                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
@@ -104,27 +104,19 @@ class DrawTool extends Tool
                        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 = ''
@@ -138,38 +130,38 @@ update_path = (path, flags) ->
                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?