clean up tool button handling and appearance

diff --git a/.git-ftp-include b/.git-ftp-include
index 3d4c4c2..9568e94 100644 (file)
--- a/.git-ftp-include
+++ b/.git-ftp-include
@@ -1 +1,2 @@
 auto.js:auto.coffee
 auto.js:auto.coffee

+style.css:style.styl

diff --git a/.gitignore b/.gitignore
index 31c8cde..5e5f776 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /auto.js
 /auto.js

+/style.css

diff --git a/Makefile b/Makefile
index cc4e070..907e445 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,12 @@
-objects= auto.js
+objects= auto.js style.css

 
 all: $(objects)
 
 clean:
        rm -f $(objects)
 
 
 all: $(objects)
 
 clean:
        rm -f $(objects)
 

+style.css: styl.styl
+       stylus -c -p $< > $@
+

 %.js: %.coffee
        coffee -c $<
 %.js: %.coffee
        coffee -c $<

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
 # 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
 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'
 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
                @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 @[button]
                        return @[button]()
        cancel_drawing: ->

-               if selection?
-                       console.log selection.element
+               if selection?.drawing?

                        svg.removeChild selection.element
                selection = null
                return false
        stop_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: ->
                        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
                        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
                        update_path selection, to_mouse: true
        keydown: (keycode) ->
                switch keycode

@@ -104,27 +104,19 @@ class DrawTool extends Tool
                        when 27
                                return @cancel_drawing()
        disable: ->
                        when 27
                                return @cancel_drawing()
        disable: ->

+               @stop_drawing()

                if selection?.drawing?
                        delete selection.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'
 
 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'
 
 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 = ''
 
 update_path = (path, flags) ->
        d = ''

@@ -138,38 +130,38 @@ update_path = (path, flags) ->
                d += " z"
        path.element.setAttribute "d", d
 
                d += " z"
        path.element.setAttribute "d", d
 

+switch_to_tool = (tool_class) ->
+

 # called automatically on domcontentloaded
 init = ->
 # 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>'
        $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 $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
        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?
        $svg.mousedown (e) ->
                offset = $svg.offset()
                if cur_tool?

diff --git a/index.html b/index.html
index bc46e2a..69f0a61 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,33 +4,7 @@
        <title>Crayon Mockup (working title)</title>
        <script src="/javascript/jquery/jquery.min.js"></script>
        <script src="auto.js"></script>
        <title>Crayon Mockup (working title)</title>
        <script src="/javascript/jquery/jquery.min.js"></script>
        <script src="auto.js"></script>

-       <style>
-               .crayon_mockup svg {
-                       border: 1px dotted #aaa;
-               }
-               .crayon_mockup svg path {
-                       fill: none;
-                       stroke: #8c8c8c;
-                       stroke-width: 2;
-                       stroke-linecap: butt;
-                       stroke-linejoin: round;
-                       stroke-miterlimit: 4;
-                       stroke-opacity: 1;
-                       stroke-dasharray: none;
-               }
-               .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 {
-                       margin-left: 14px;
-               }
-               .crayon_mockup .toolbar, .crayon_mockup .tool_extra {
-                       padding-bottom: 5px;
-               }
-       </style>
+       <link rel="stylesheet" href="style.css">

 </head>
 <body>
        <h1>Crayon Mockup (working title)</h1>
 </head>
 <body>
        <h1>Crayon Mockup (working title)</h1>

diff --git a/styl.styl b/styl.styl
new file mode 100644 (file)
index 0000000..b83e8d5
--- /dev/null
+++ b/styl.styl
@@ -0,0 +1,30 @@
+.crayon_mockup
+       svg
+               border: 1px dotted #aaa
+       svg path
+               fill: none
+               stroke: #8c8c8c
+               stroke-width: 2
+               stroke-linecap: butt
+               stroke-linejoin: round
+               stroke-miterlimit: 4
+               stroke-opacity: 1
+               stroke-dasharray: none
+       .button
+               display: inline-block
+               border-radius: 4px
+               background: white
+               box-shadow: 1px 1px 4px rgba(0,0,0,0.5)
+               padding: 1px 2px
+               cursor: pointer
+               &:hover
+                       background-color: #f9f9f9
+       .button.disabled
+               color: #777
+               background-color: #f3f3f3
+               cursor: default
+       .button + .button
+               margin-left: 14px
+
+       .toolbar, .tool_options
+               padding-bottom: 5px