switch to dragging interface

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index 7a55b2a..e36132f 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -1,36 +1,136 @@
-# globals
-$svg = null #jquery object for svg element
-selected = null
+# settings
+width = 800
+height = 600
+supply_height = 96
 
-stop_drawing = ->
-       selected = null
-click = (x, y) ->
-       unless selected?
-               selected = []
-       if selected.length > 0
-               last = selected[selected.length - 1]
-               obj = document.createElementNS("http://www.w3.org/2000/svg", "path")
-               obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}")
-               $svg[0].appendChild(obj)
-       selected.push [x, y]
-       console.log selected
+# 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 'http://www.w3.org/2000/svg', tag
+               for k, v of attrs
+                       if k is 'children'
+                               for child in v
+                                       el.appendChild json_to_svg child
+                       else
+                               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'
-       $stop_button = $ '<div class="button">[end current polyline]</div>'
-       $tools = $ '<div class="toolbar"></div>'
-       $tools.append $stop_button
-       $stop_button.click stop_drawing
-       $container.append $tools
-       $svg = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
-       #$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
-       #$svg.append $test_path
+       svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
+       $svg = $ svg
        $container.append $svg
-       console.log 'hi'
+       svg.appendChild json_to_svg filter:
+               id: 'crayon', filterUnits: 'userSpaceOnUse'
+               x: '-5%', y: '-5%', height: '110%', width: '110%'
+               children: [
+                       { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
+                       { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
+               ]
+
+       # 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) ->
-               console.log 'hi'
-               offset = $svg.offset()
-               click e.pageX - offset.left, e.pageY - offset.top
+               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