implement delete tool, clean up tool init

diff --git a/auto.coffee b/auto.coffee
index 9fc709f..6d391e8 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -9,6 +9,7 @@ $tool_options = null # jquery object for tool options line
 selection = null
 svg_ns = 'http://www.w3.org/2000/svg'
 cur_tool = null
+cur_tool_name = null
 mouse = x: 0, y: 0, buttons: [0,0,0]
 
 class Tool
@@ -137,12 +138,15 @@ class DrawTool extends Tool
 class EditTool extends Tool
        constructor: (args) ->
                super args
-               toolbar.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
+               args.tool_options.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
 
 class DeleteTool extends Tool
        constructor: (args) ->
                super args
-               toolbar.append $ "<span>Oops, the delete isn't implemented yet</span>"
+               args.tool_options.append $ "<span>To delete: click on a line below</span>"
+       click: (x, y) ->
+               $svg.find('path:hover').remove()
+               return false
 
 update_path = (path, flags) ->
        d = ''
@@ -160,23 +164,8 @@ 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"><span>Tools:</span></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 button: t.element, tool_options: $tool_options
        $tool_options = $ '<div class="tool_options"></div>'
        $container.append $toolbar
        $container.append $tool_options
@@ -186,7 +175,32 @@ init = ->
        svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg
-       cur_tool = new TutorialTool tool_options: $tool_options
+
+       tool_buttons =
+               tutorial: default: true, factory: TutorialTool
+               draw: button_text: 'draw', factory: DrawTool
+               edit: button_text: 'edit', factory: EditTool
+               delete: button_text: 'delete', factory: DeleteTool
+       for k, t of tool_buttons
+               if t.button_text?
+                       t.button = $ "<span class=\"button\"></span>"
+                       t.button.text t.button_text
+                       $toolbar.append t.button
+               do (k, t) ->
+                       activate = ->
+                               if cur_tool?
+                                       cur_tool.disable()
+                                       $container.removeClass "#{cur_tool_name}_tool"
+                                       ($toolbar.find '.button').removeClass 'disabled'
+                               cur_tool_name = k
+                               $container.addClass "#{cur_tool_name}_tool"
+                               $tool_options.empty()
+                               cur_tool = new t.factory button: t.button, tool_options: $tool_options
+                       if t.button?
+                               t.button.click activate
+                       if t.default
+                               activate()
+
        $svg.mousedown (e) ->
                offset = $svg.offset()
                if cur_tool?

diff --git a/styl.styl b/styl.styl
index 1f6fd72..fcb82cc 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -1,6 +1,8 @@
 .crayon_mockup
        svg
                border: 1px dotted #aaa
+               /.crayon_mockup.delete_tool svg
+                       cursor: crosshair
        svg path
                fill: none
                stroke: #8c8c8c
@@ -10,6 +12,9 @@
                stroke-miterlimit: 4
                stroke-opacity: 1
                stroke-dasharray: none
+               /.crayon_mockup.delete_tool svg path:hover
+                       stroke-width: 5
+                       stroke: #f00
        .button
                display: inline-block
                border-radius: 4px