-# globals
-$svg = null #jquery object for svg element
-selected = null
-
-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
+# settings
+width = 800
+height = 600
+supply_height = 96
+CLICK_FUZ = 10 # this far away from things is close enough to be "clicked on"
+PROX_MAX = CLICK_FUZ * CLICK_FUZ
+
+# constants
+STYLE_NORMAL = 0
+STYLE_SELECTED = 1
+STYLE_HOVER = 2
+STYLE_EDITING = 3
+STYLE_DRAGGING = 4
+
+# 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) ->
+ @style = STYLE_NORMAL
+ @x = args?.x ? 1
+ @y = args?.y ? 1
+ @width = args?.width ? 50
+ @height = args?.height ? 34
+ clone: ->
+ return new Widget @
+ move: (args) ->
+ @x = args.x
+ @y = args.y
+ proximity: (xy) -> # return the square of the distance to your visible bits
+ return PROX_MAX + 1
+ set_style: (style) ->
+ return if @style is style
+ if style is STYLE_NORMAL
+ @el.setAttribute 'style', 'filter: url(#crayon)'
+ else
+ if @style is STYLE_NORMAL
+ @el.setAttribute 'style', ''
+ switch style
+ when STYLE_NORMAL
+ @el.setAttribute 'class', "#{@css_class}"
+ when STYLE_SELECTED
+ @el.setAttribute 'class', "#{@css_class} selected"
+ when STYLE_HOVER
+ @el.setAttribute 'class', "#{@css_class} hover"
+ when STYLE_DRAGGING
+ @el.setAttribute 'class', "#{@css_class} dragging"
+ # FIXME when STYLE_EDITING
+ @style = style
+ controls: -> # create controls, return them
+ return []
+ hide_controls: ->
+
+class RectWidget extends Widget
+ constructor: (args) ->
+ super args
+ @css_class = 'box'
+ @el = json_to_svg rect:
+ x: @x + 1
+ y: @x + 1
+ width: @width - 2
+ height: @height - 2
+ class: 'box'
+ style: 'filter: url(#crayon)'
+ clone: ->
+ return new RectWidget @
+ move: (args) ->
+ super args
+ @el.setAttribute 'x', @x + 1
+ @el.setAttribute 'y', @y + 1
+ proximity: (xy) -> # return the square of the distance to your visible bits
+ x = xy.x
+ y = xy.y
+ prox = PROX_MAX + 1
+ in_x = false
+ in_y = false
+ if x > @x - CLICK_FUZ and x < @x + @width + CLICK_FUZ
+ in_x = true
+ if y < @y + @height / 2
+ new_prox = @y - y
+ else
+ new_prox = @y + @height - y
+ new_prox *= new_prox
+ if new_prox < prox
+ prox = new_prox
+ if y > @y - CLICK_FUZ and y < @y + @height + CLICK_FUZ
+ in_y = true
+ if x < @x + @width / 2
+ new_prox = @x - x
+ else
+ new_prox = @x + @width - x
+ new_prox *= new_prox
+ if new_prox < prox
+ prox = new_prox
+ if in_x and in_y and prox > PROX_MAX
+ prox = PROX_MAX - 1
+ return prox
+ controls: -> # create controls, return them
+ return []
+ hide_controls: ->
# called automatically on domcontentloaded
init = ->
+ svg_offset = null
$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
+
+ # editor state
+ on_canvas = []
+ selected = []
+ editing = [] # has controls
+ dragging = false
+ dragging_offset = x: 0, y: 0 # from mouse x,y -> widget x,y
+
+ # todo ask widgets
+ closest_widget = (widgets, xy) ->
+ prox = PROX_MAX + 1
+ closest = null
+ for w in widgets
+ new_prox = w.proximity xy
+ if new_prox < prox
+ prox = new_prox
+ closest = w
+ if prox < PROX_MAX
+ return [prox, closest]
+ return null
+ svg_event_to_xy = (e) ->
+ unless svg_offset?
+ svg_offset = $svg.offset()
+ return {
+ x: Math.round(e.pageX - svg_offset.left)
+ y: Math.round(e.pageY - svg_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
+ if closest?
+ closest[1] = closest[1].clone()
+ svg.appendChild closest[1].el
+ else
+ closest = closest_widget on_canvas, xy
+ if closest?
+ selected = [closest[1]]
+ closest[1].set_style STYLE_DRAGGING
+ dragging = true
+ dragging_offset.x = closest[1].x - xy.x
+ dragging_offset.y = closest[1].y - xy.y
+ 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) ->
+ xy = svg_event_to_xy e
+ if dragging
+ xy.x += dragging_offset.x
+ xy.y += dragging_offset.y
+ selected[0].move xy
+ else
+ closest = closest_widget on_canvas, xy
+ if closest?
+ hover = closest[1]
+ else
+ hover = null
+ for w in on_canvas
+ if w is hover
+ w.set_style STYLE_HOVER
+ else
+ w.set_style STYLE_NORMAL
+ return false
+ $svg.mousemove mousemove
+ #($ document).keydown (e) ->
$ init