switch to dragging interface

diff --git a/auto.coffee b/auto.coffee
index b8b2256..e36132f 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -1,213 +1,12 @@
 # settings
-width = 500
-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 = []
-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 EditableThing
-       constructor: ->
-               @el = null
-       click_proximity: (x, y) ->
-               return null
-       clicked: ->
-       update: ->
-       destructor: ->
-               if @el?
-                       svg.removeChild @el
-                       @el = null
-
-class PolyLine extends EditableThing
-       constructor: (args) ->
-               super args
-               @drawing = args?.drawing ? false
-               @el = document.createElementNS svg_ns, "path"
-               svg.appendChild @el
-               @points = args?.points ? []
-               @update()
-       update: (args) ->
-               if args?.drawing?
-                       @drawing = args.drawing
-               d = ''
-               l = ''
-               sep = 'M'
-               for loc, i in @points
-                       d += l = "#{sep} #{loc[0]} #{loc[1]}"
-                       sep = ' L'
-               if args?.to_mouse?
-                       d += l = "#{sep} #{args.mouse_x} #{args.mouse_y}"
-               if args?.close # FIXME ?remove
-                       d += l = ' z'
-               if @points.length > 0
-                       if l is " L #{@points[0][0]} #{@points[0][1]}"
-                               d = d.substr 0, d.length - l.length
-                               d += ' z'
-               @el.setAttribute "d", d
-       add_point: (x, y) ->
-               @points.push [x, y]
-       close_loop: ->
-               if @points.length > 2
-                       @add_point @points[0][0], @points[0][1]
-
-class Tool
-       constructor: (args) ->
-               @button = args.button
-               if @button?
-                       @button.addClass 'disabled'
-               @tool_options = args.tool_options
-       click: (x, y) ->
-       mousemove: (x, y) ->
-       keydown: (keycode) ->
-       disable: ->
-               if @button?
-                       @button.removeClass 'disabled'
-               @tool_options.empty()
-
-class TutorialTool extends Tool
-       constructor: (args) ->
-               super args
-               @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>"
-               @tool_options.append @tip
-       disable: ->
-               super()
-               for p in @paths
-                       svg.removeChild p.element
-
-class DrawTool extends Tool
-       constructor: (args) ->
-               super args
-               @tool_options.append $ "<span>Draw tool helpers:</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>'
-               @tool_options.append @stop_button
-               @tool_options.append @stop_close_button
-               @tool_options.append @cancel_button
-               @stop_button.click @stop_drawing.bind @
-               @stop_close_button.click @stop_close_drawing.bind @
-               @cancel_button.click @cancel_drawing.bind @
-               @update_helper_buttons()
-       click: (x, y) ->
-               if selection.length and not selection[0].drawing?
-                       selection = []
-               unless selection.length
-                       selection.push new PolyLine drawing: true
-               selection[0].add_point x, y
-               selection[0].update()
-               @update_helper_buttons()
-       update_helper_buttons: ->
-               if selection[0]?.drawing? and selection[0]?.points.length > 0
-                       @cancel_button.removeClass 'disabled'
-               else
-                       @cancel_button.addClass 'disabled'
-               if selection[0]?.drawing? and selection[0]?.points.length > 1
-                       @stop_button.removeClass 'disabled'
-               else
-                       @stop_button.addClass 'disabled'
-               if selection[0]?.drawing? and selection[0]?.points.length > 2
-                       @stop_close_button.removeClass 'disabled'
-               else
-                       @stop_close_button.addClass 'disabled'
-       cancel_drawing: ->
-               if selection[0]?.drawing?
-                       selection[0].destructor()
-               selection = []
-               @update_helper_buttons()
-               return false
-       stop_drawing: ->
-               if selection[0]?.drawing?
-                       if selection[0]?.points.length < 2
-                               return @cancel_drawing()
-                       if selection[0]?
-                               selection[0].update()
-               selection = []
-               @update_helper_buttons()
-               return false
-       stop_close_drawing: ->
-               if selection[0]?.drawing?
-                       if selection[0]?.points.length < 3
-                               return @stop_drawing()
-                       selection[0].close_loop()
-                       selection[0].update drawing: false
-               selection = []
-               @update_helper_buttons()
-               return false
-       mousemove: (x, y) ->
-               mouse.x = x
-               mouse.y = y
-               if selection[0]?.drawing?
-                       selection[0].update to_mouse: true, mouse_x: x, mouse_y: y
-       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: ->
-               super()
-               @stop_drawing()
-
-class EditTool extends Tool
-       constructor: (args) ->
-               super args
-               args.tool_options.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
-
-class DeleteTool extends Tool
-       constructor: (args) ->
-               super args
-               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 = ''
-       sep = 'M'
-       for loc, i in path.data
-               d += "#{sep} #{loc[0]} #{loc[1]}"
-               sep = ' L'
-       if flags?.to_mouse?
-               d += "#{sep} #{mouse.x} #{mouse.y}"
-       if flags?.close
-               d += " z"
-       path.element.setAttribute "d", d
-
-switch_to_tool = (tool_class) ->
+width = 800
+height = 600
+supply_height = 96
 
 # json (compiled to javascript and minified) is ~8% smaller than the resulting xml
 json_to_svg = (json) ->
        for tag, attrs of json
-               el = document.createElementNS svg_ns, tag
+               el = document.createElementNS 'http://www.w3.org/2000/svg', tag
                for k, v of attrs
                        if k is 'children'
                                for child in v
@@ -216,13 +15,39 @@ json_to_svg = (json) ->
                                el.setAttribute k, v
        return el
 
+# public vars: x, y, width, height, el
+class Widget
+       constructor: (args) ->
+               @x = args?.x ? 1
+               @y = args?.y ? 1
+               @width = args?.width ? 50
+               @height = args?.height ? 34
+       move: (args) ->
+               @x = args.x
+               @y = args.y
+class RectWidget extends Widget
+       constructor: (args) ->
+               super args
+               @el = json_to_svg rect:
+                       x: @x + 1
+                       y: @x + 1
+                       width: @width - 2
+                       height: @height - 2
+                       class: 'box'
+       move: (args) ->
+               super args
+               @el.setAttribute 'x', @x + 1
+               @el.setAttribute 'y', @y + 1
+       clone: ->
+               return new RectWidget @
+
 # called automatically on domcontentloaded
 init = ->
+       offset = null
+       selected = []
+       on_canvas = []
+       dragging = false
        $container = $ '.crayon_mockup'
-       $toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
-       $tool_options = $ '<div class="tool_options"></div>'
-       $container.append $toolbar
-       $container.append $tool_options
        svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg
@@ -234,45 +59,78 @@ init = ->
                        { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
                ]
 
-       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()
-
+       # create canvas border
+       svg.appendChild json_to_svg rect:
+               x: 1
+               y: supply_height + 1
+               width: width - 2
+               height: height - 2 - supply_height
+               class: 'canvas_border'
+       
+       supply = [
+               new RectWidget()
+               new RectWidget width: 12, height: 50
+               new RectWidget width: 70, height: 12
+       ]
+       for widget, i in supply
+               widget.move {
+                       x: 30 + i * 90 + (70 - widget.width) / 2
+                       y: (supply_height - widget.height) / 2
+               }
+               svg.appendChild widget.el
+       
+       # todo ask widgets
+       closest_widget = (widgets, xy) ->
+               closest = [10000, null]
+               for w in widgets
+                       x = w.x + w.width / 2 - xy.x
+                       y = w.y + w.height / 2 - xy.y
+                       dist2 = x * x + y * y
+                       if dist2 < closest[0]
+                               closest = [dist2, w]
+               if closest[1]?
+                       return closest
+               return null
+       svg_event_to_xy = (e) ->
+               unless offset?
+                       offset = $svg.offset()
+               return {
+                       x: Math.round(e.pageX - offset.left)
+                       y: Math.round(e.pageY - offset.top)
+               }
        $svg.mousedown (e) ->
-               offset = $svg.offset()
-               if cur_tool?
-                       mouse_x = Math.round(e.pageX - offset.left)
-                       mouse_y = Math.round(e.pageY - offset.top)
-                       return cur_tool.click mouse_x, mouse_y
-       $svg.mousemove (e) ->
-               offset = $svg.offset()
-               if cur_tool?
-                       mouse_x = Math.round(e.pageX - offset.left)
-                       mouse_y = Math.round(e.pageY - offset.top)
-                       return cur_tool.mousemove mouse_x, mouse_y
-       ($ document).keydown (e) ->
-               if cur_tool?
-                       return cur_tool.keydown e.keyCode
+               xy = svg_event_to_xy e
+               if xy.y < supply_height
+                       closest = closest_widget supply, xy
+                       console.log closest
+                       if closest?
+                               closest[1] = closest[1].clone()
+                               svg.appendChild closest[1].el
+               else
+                       closest = closest_widget on_canvas, xy
+               if closest?
+                       selected = [closest[1]]
+                       dragging = true
+                       mousemove e
+               return false
+       $svg.mouseup (e) ->
+               mousemove e
+               dragging = false
+               if selected[0]?
+                       if selected[0].y > supply_height
+                               on_canvas.push selected[0]
+                       else
+                               svg.removeChild selected[0].el
+                       selected = []
+               return false
+       mousemove = (e) ->
+               if dragging
+                       xy = svg_event_to_xy e
+                       xy.x -= selected[0].width / 2
+                       xy.y -= selected[0].height / 2
+                       selected[0].move xy
+               return false
+       $svg.mousemove mousemove
+       #($ document).keydown (e) ->
 
 $ init

diff --git a/index.html b/index.html
index 69f0a61..65d2753 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,9 +7,8 @@
        <link rel="stylesheet" href="style.css">
 </head>
 <body>
-       <h1>Crayon Mockup (working title)</h1>
-       <p>Instructions: click in multiple different places in the box below to draw.</p>
-       <p>Tip: hover over buttons below to see keyboard shortcuts</p>
+       <h1>Crayon Mockup</h1>
+       <p>Instructions: drag stuff into the outlined area, drag around, drag back up to delete</p>
        <div class="crayon_mockup"></div>
 </body>
 </html>

diff --git a/styl.styl b/styl.styl
index 367744b..bccabd4 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -1,36 +1,42 @@
+body
+       margin: 0px
+       padding: 10px
+       font: 15 Arimo, Arial, sans-serif
+h1
+       font-size: 28px
+       margin: 0
+p
+       margin: 0
+* p
+       margin-top: 10px
+               
 .crayon_mockup
+       
        svg
-               border: 1px dotted #aaa
-               /.crayon_mockup.delete_tool svg
-                       cursor: crosshair
-       svg path
-               fill: none
-               stroke: #8c8c8c
-               stroke-width: 5
-               stroke-linecap: butt
-               stroke-linejoin: round
-               stroke-miterlimit: 4
-               stroke-opacity: 1
-               stroke-dasharray: none
-               filter: url(#crayon)
-               /.crayon_mockup.delete_tool svg path:hover
-                       stroke-width: 7
-                       stroke: #f00
-       .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
-               margin: 0 4px
-               * + &
-                       margin-left: 8px
-       .button.disabled
-               color: #777
-               background-color: #f3f3f3
-               cursor: default
-       .toolbar, .tool_options
-               padding-bottom: 5px
+               path
+                       fill: none
+                       stroke: #8c8c8c
+                       stroke-width: 5
+                       stroke-linecap: butt
+                       stroke-linejoin: round
+                       stroke-miterlimit: 4
+                       stroke-opacity: 1
+                       stroke-dasharray: none
+                       filter: url(#crayon)
+               rect
+                       fill: none
+               rect.canvas_border
+                       overflow: hidden;
+                       stroke: #ccc;
+                       stroke-width: 2;
+                       stroke-linecap: butt;
+                       stroke-linejoin:miter;
+                       stroke-dasharray:2 4;
+                       stroke-dashoffset:1;
+                       //stroke-opacity:1;marker:none;enable-background:accumulate
+               rect.box
+                       stroke: #8c8c8c;
+                       stroke-width: 4;
+                       stroke-linecap: butt;
+                       stroke-linejoin:miter;
+                       filter: url(#crayon);