add tutorial tool, stub edit/delete

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index b4b8d98..a929f5e 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -19,6 +19,37 @@ class Tool
        keydown: (keycode) ->
        disable: ->
 
        keydown: (keycode) ->
        disable: ->
 

+class TutorialTool extends Tool
+       constructor: (toolbar) ->
+               super 'tutorial'
+               @paths = []
+               choose = [
+                       [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
+                       [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
+                       [[173,107],[169,159],[180,137],[189,133],[193,160]],
+                       [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
+                       [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
+                       [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
+                       [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
+                       [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
+                       [[160,207],[191,205]],
+                       [[176,184],[174,228],[180,238]],
+                       [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
+                       [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
+                       [[247,187],[249,241],[254,243]]
+               ]
+               for c in choose
+                       path = data: c, element: document.createElementNS svg_ns, "path"
+                       update_path path, close: c[c.length - 1][2] is 'z'
+                       svg.appendChild path.element
+                       @paths.push path
+               @tip = $ "<span>&nbsp;</span>"
+               toolbar.append @tip
+       disable: ->
+               @tip.remove()
+               for p in @paths
+                       svg.removeChild p.element
+

 class DrawTool extends Tool
        constructor: (toolbar) ->
                super 'draw'
 class DrawTool extends Tool
        constructor: (toolbar) ->
                super 'draw'

@@ -75,6 +106,25 @@ class DrawTool extends Tool
        disable: ->
                if selection?.drawing?
                        delete selection.drawing
        disable: ->
                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()
+
+class DeleteTool extends Tool
+       constructor: (toolbar) ->
+               super 'draw'
+               @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
+               toolbar.append @oops
+       disable: ->
+               @oops.remove()

 
 update_path = (path, flags) ->
        d = ''
 
 update_path = (path, flags) ->
        d = ''

@@ -84,22 +134,42 @@ update_path = (path, flags) ->
                sep = ' L'
        if flags?.to_mouse?
                d += "#{sep} #{mouse.x} #{mouse.y}"
                sep = ' L'
        if flags?.to_mouse?
                d += "#{sep} #{mouse.x} #{mouse.y}"

-       if flags?.close?
+       if flags?.close

                d += " z"
        path.element.setAttribute "d", d
 
 # called automatically on domcontentloaded
 init = ->
        $container = $ '.crayon_mockup'
                d += " z"
        path.element.setAttribute "d", d
 
 # called automatically on domcontentloaded
 init = ->
        $container = $ '.crayon_mockup'

-       $tools = $ '<div class="toolbar"></div>'
-       $container.append $tools
+       $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>'
+       $container.append $toolbar
+       $container.append $tool_extra

        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
        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 DrawTool $tools
+       cur_tool = new TutorialTool $tool_extra

        $svg.mousedown (e) ->
                offset = $svg.offset()
                if cur_tool?
        $svg.mousedown (e) ->
                offset = $svg.offset()
                if cur_tool?