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         move: (args) ->
  38                 super args
  39                 @el.setAttribute 'x', @x + 1
  40                 @el.setAttribute 'y', @y + 1
  41         clone: ->
  42                 return new RectWidget @
  43
  44 # called automatically on domcontentloaded
  45 init = ->
  46         offset = null
  47         selected = []
  48         on_canvas = []
  49         dragging = false
  50         $container = $ '.crayon_mockup'
  51         svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
  52         $svg = $ svg
  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%'
  57                 children: [
  58                         { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
  59                         { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
  60                 ]
  61
  62         # create canvas border
  63         svg.appendChild json_to_svg rect:
  64                 x: 1
  65                 y: supply_height + 1
  66                 width: width - 2
  67                 height: height - 2 - supply_height
  68                 class: 'canvas_border'
  69
  70         supply = [
  71                 new RectWidget()
  72                 new RectWidget width: 12, height: 50
  73                 new RectWidget width: 70, height: 12
  74         ]
  75         for widget, i in supply
  76                 widget.move {
  77                         x: 30 + i * 90 + (70 - widget.width) / 2
  78                         y: (supply_height - widget.height) / 2
  79                 }
  80                 svg.appendChild widget.el
  81
  82         # todo ask widgets
  83         closest_widget = (widgets, xy) ->
  84                 closest = [10000, null]
  85                 for w in widgets
  86                         x = w.x + w.width / 2 - xy.x
  87                         y = w.y + w.height / 2 - xy.y
  88                         dist2 = x * x + y * y
  89                         if dist2 < closest[0]
  90                                 closest = [dist2, w]
  91                 if closest[1]?
  92                         return closest
  93                 return null
  94         svg_event_to_xy = (e) ->
  95                 unless offset?
  96                         offset = $svg.offset()
  97                 return {
  98                         x: Math.round(e.pageX - offset.left)
  99                         y: Math.round(e.pageY - offset.top)
 100                 }
 101         $svg.mousedown (e) ->
 102                 xy = svg_event_to_xy e
 103                 if xy.y < supply_height
 104                         closest = closest_widget supply, xy
 105                         console.log closest
 106                         if closest?
 107                                 closest[1] = closest[1].clone()
 108                                 svg.appendChild closest[1].el
 109                 else
 110                         closest = closest_widget on_canvas, xy
 111                 if closest?
 112                         selected = [closest[1]]
 113                         dragging = true
 114                         mousemove e
 115                 return false
 116         $svg.mouseup (e) ->
 117                 mousemove e
 118                 dragging = false
 119                 if selected[0]?
 120                         if selected[0].y > supply_height
 121                                 on_canvas.push selected[0]
 122                         else
 123                                 svg.removeChild selected[0].el
 124                         selected = []
 125                 return false
 126         mousemove = (e) ->
 127                 if dragging
 128                         xy = svg_event_to_xy e
 129                         xy.x -= selected[0].width / 2
 130                         xy.y -= selected[0].height / 2
 131                         selected[0].move xy
 132                 return false
 133         $svg.mousemove mousemove
 134         #($ document).keydown (e) ->
 135
 136 $ init