# settings 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 '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' svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}" $svg = $ svg $container.append $svg 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) -> 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