+ 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)
+ }