6 # json (compiled to javascript and minified) is ~8% smaller than the resulting xml
7 json_to_svg = (json) ->
9 el = document.createElementNS 'http://www.w3.org/2000/svg', tag
13 el.appendChild json_to_svg child
18 # public vars: x, y, width, height, el
20 constructor: (args) ->
23 @width = args?.width ? 50
24 @height = args?.height ? 34
28 class RectWidget extends Widget
29 constructor: (args) ->
31 @el = json_to_svg rect:
39 @el.setAttribute 'x', @x + 1
40 @el.setAttribute 'y', @y + 1
42 return new RectWidget @
44 # called automatically on domcontentloaded
50 $container = $ '.crayon_mockup'
51 svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
53 $container.append $svg
54 svg.appendChild json_to_svg filter:
55 id: 'crayon', filterUnits: 'userSpaceOnUse'
56 x: '-5%', y: '-5%', height: '110%', width: '110%'
58 { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
59 { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
62 # create canvas border
63 svg.appendChild json_to_svg rect:
67 height: height - 2 - supply_height
68 class: 'canvas_border'
72 new RectWidget width: 12, height: 50
73 new RectWidget width: 70, height: 12
75 for widget, i in supply
77 x: 30 + i * 90 + (70 - widget.width) / 2
78 y: (supply_height - widget.height) / 2
80 svg.appendChild widget.el
83 closest_widget = (widgets, xy) ->
84 closest = [10000, null]
86 x = w.x + w.width / 2 - xy.x
87 y = w.y + w.height / 2 - xy.y
94 svg_event_to_xy = (e) ->
96 offset = $svg.offset()
98 x: Math.round(e.pageX - offset.left)
99 y: Math.round(e.pageY - offset.top)
101 $svg.mousedown (e) ->
102 xy = svg_event_to_xy e
103 if xy.y < supply_height
104 closest = closest_widget supply, xy
107 closest[1] = closest[1].clone()
108 svg.appendChild closest[1].el
110 closest = closest_widget on_canvas, xy
112 selected = [closest[1]]
120 if selected[0].y > supply_height
121 on_canvas.push selected[0]
123 svg.removeChild selected[0].el
128 xy = svg_event_to_xy e
129 xy.x -= selected[0].width / 2
130 xy.y -= selected[0].height / 2
133 $svg.mousemove mousemove
134 #($ document).keydown (e) ->