auto.coffee

   1 # settings
   2 width = 500
   3 height = 500
   4
   5 # globals
   6 $svg = null # jquery object for svg element
   7 svg = null # dom object for svg element
   8 selection = null
   9 svg_ns = 'http://www.w3.org/2000/svg'
  10 cur_tool = null
  11 mouse = x: 0, y: 0, buttons: [0,0,0]
  12
  13 class Tool
  14         constructor: (name) ->
  15                 @name = name
  16         click: (x, y) ->
  17         button_click: (button) ->
  18         mousemove: (x, y) ->
  19         keydown: (keycode) ->
  20         disable: ->
  21
  22 class DrawTool extends Tool
  23         constructor: (toolbar) ->
  24                 super 'draw'
  25                 @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
  26                 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
  27                 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
  28                 toolbar.append @stop_button
  29                 toolbar.append @stop_close_button
  30                 toolbar.append @cancel_button
  31                 @stop_button.click @stop_drawing.bind @
  32                 @stop_close_button.click @stop_close_drawing.bind @
  33                 @cancel_button.click @cancel_drawing.bind @
  34         click: (x, y) ->
  35                 if selection? and not selection.drawing?
  36                         selection = null
  37                 unless selection?
  38                         path = document.createElementNS svg_ns, "path"
  39                         selection = data: [], element: path, drawing: true
  40                         svg.appendChild path
  41                 selection.data.push [x, y]
  42                 update_path selection
  43         button_click: (button) ->
  44                 if @[button]
  45                         return @[button]()
  46         cancel_drawing: ->
  47                 if selection?
  48                         console.log selection.element
  49                         svg.removeChild selection.element
  50                 selection = null
  51                 return false
  52         stop_drawing: ->
  53                 if selection?
  54                         update_path selection
  55                 selection = null
  56                 return false
  57         stop_close_drawing: ->
  58                 if selection?
  59                         update_path selection, close: true
  60                 selection = null
  61                 return false
  62         mousemove: (x, y) ->
  63                 mouse.x = x
  64                 mouse.y = y
  65                 if selection?
  66                         update_path selection, to_mouse: true
  67         keydown: (keycode) ->
  68                 switch keycode
  69                         when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
  70                                 return @stop_close_drawing()
  71                         when (' '.charCodeAt 0), 13, 10
  72                                 return @stop_drawing()
  73                         when 27
  74                                 return @cancel_drawing()
  75         disable: ->
  76                 if selection?.drawing?
  77                         delete selection.drawing
  78
  79 update_path = (path, flags) ->
  80         d = ''
  81         sep = 'M'
  82         for loc, i in path.data
  83                 d += "#{sep} #{loc[0]} #{loc[1]}"
  84                 sep = ' L'
  85         if flags?.to_mouse?
  86                 d += "#{sep} #{mouse.x} #{mouse.y}"
  87         if flags?.close?
  88                 d += " z"
  89         path.element.setAttribute "d", d
  90
  91 # called automatically on domcontentloaded
  92 init = ->
  93         $container = $ '.crayon_mockup'
  94         $tools = $ '<div class="toolbar"></div>'
  95         $container.append $tools
  96         svg = document.createElementNS svg_ns, 'svg'
  97         svg.setAttribute 'width', width
  98         svg.setAttribute 'height', height
  99         svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
 100         $svg = $ svg
 101         $container.append $svg
 102         cur_tool = new DrawTool $tools
 103         $svg.mousedown (e) ->
 104                 offset = $svg.offset()
 105                 if cur_tool?
 106                         return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
 107         $svg.mousemove (e) ->
 108                 offset = $svg.offset()
 109                 if cur_tool?
 110                         return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
 111         ($ document).keydown (e) ->
 112                 if cur_tool?
 113                         return cur_tool.keydown e.keyCode
 114
 115 $ init