auto.coffee

   1 # settings
   2 width = 800
   3 height = 600
   4 supply_height = 96
   5
   6 # json (compiled to javascript and minified) is ~8% smaller than the resulting xml
   7 json_to_svg = (json) ->
   8         for tag, attrs of json
   9                 el = document.createElementNS 'http://www.w3.org/2000/svg', tag
  10                 for k, v of attrs
  11                         if k is 'children'
  12                                 for child in v
  13                                         el.appendChild json_to_svg child
  14                         else
  15                                 el.setAttribute k, v
  16         return el
  17
  18 # public vars: x, y, width, height, el
  19 class Widget
  20         constructor: (args) ->
  21                 @x = args?.x ? 1
  22                 @y = args?.y ? 1
  23                 @width = args?.width ? 50
  24                 @height = args?.height ? 34
  25         move: (args) ->
  26                 @x = args.x
  27                 @y = args.y
  28 class RectWidget extends Widget
  29         constructor: (args) ->
  30                 super args
  31                 @el = json_to_svg rect:
  32                         x: @x + 1
  33                         y: @x + 1
  34                         width: @width - 2
  35                         height: @height - 2
  36                         class: 'box'
  37                         style: 'filter: url(#crayon)'
  38         move: (args) ->
  39                 super args
  40                 @el.setAttribute 'x', @x + 1
  41                 @el.setAttribute 'y', @y + 1
  42         clone: ->
  43                 return new RectWidget @
  44
  45 # called automatically on domcontentloaded
  46 init = ->
  47         offset = null
  48         selected = []
  49         on_canvas = []
  50         dragging = false
  51         $container = $ '.crayon_mockup'
  52         svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
  53         $svg = $ svg
  54         $container.append $svg
  55         svg.appendChild json_to_svg filter:
  56                 id: 'crayon', filterUnits: 'userSpaceOnUse'
  57                 x: '-5%', y: '-5%', height: '110%', width: '110%'
  58                 children: [
  59                         { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
  60                         { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
  61                 ]
  62
  63         # create canvas border
  64         svg.appendChild json_to_svg rect:
  65                 x: 1
  66                 y: supply_height + 1
  67                 width: width - 2
  68                 height: height - 2 - supply_height
  69                 class: 'canvas_border'
  70
  71         supply = [
  72                 new RectWidget()
  73                 new RectWidget width: 12, height: 50
  74                 new RectWidget width: 70, height: 12
  75         ]
  76         for widget, i in supply
  77                 widget.move {
  78                         x: 30 + i * 90 + (70 - widget.width) / 2
  79                         y: (supply_height - widget.height) / 2
  80                 }
  81                 svg.appendChild widget.el
  82
  83         # todo ask widgets
  84         closest_widget = (widgets, xy) ->
  85                 closest = [10000, null]
  86                 for w in widgets
  87                         x = w.x + w.width / 2 - xy.x
  88                         y = w.y + w.height / 2 - xy.y
  89                         dist2 = x * x + y * y
  90                         if dist2 < closest[0]
  91                                 closest = [dist2, w]
  92                 if closest[1]?
  93                         return closest
  94                 return null
  95         svg_event_to_xy = (e) ->
  96                 unless offset?
  97                         offset = $svg.offset()
  98                 return {
  99                         x: Math.round(e.pageX - offset.left)
 100                         y: Math.round(e.pageY - offset.top)
 101                 }
 102         $svg.mousedown (e) ->
 103                 xy = svg_event_to_xy e
 104                 if xy.y < supply_height
 105                         closest = closest_widget supply, xy
 106                         console.log closest
 107                         if closest?
 108                                 closest[1] = closest[1].clone()
 109                                 svg.appendChild closest[1].el
 110                 else
 111                         closest = closest_widget on_canvas, xy
 112                 if closest?
 113                         selected = [closest[1]]
 114                         dragging = true
 115                         mousemove e
 116                 return false
 117         $svg.mouseup (e) ->
 118                 mousemove e
 119                 dragging = false
 120                 if selected[0]?
 121                         if selected[0].y > supply_height
 122                                 on_canvas.push selected[0]
 123                         else
 124                                 svg.removeChild selected[0].el
 125                         selected = []
 126                 return false
 127         mousemove = (e) ->
 128                 if dragging
 129                         xy = svg_event_to_xy e
 130                         xy.x -= selected[0].width / 2
 131                         xy.y -= selected[0].height / 2
 132                         selected[0].move xy
 133                 return false
 134         $svg.mousemove mousemove
 135         #($ document).keydown (e) ->
 136
 137 $ init