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 mouse = [0,0]
  11
  12 update_path = (path, data, flags) ->
  13         d = ''
  14         for loc, i in data
  15                 if i is 0
  16                         d += 'M '
  17                 else
  18                         d += ' L '
  19                 d += "#{loc[0]} #{loc[1]}"
  20         if flags?.to_mouse?
  21                 d += "L #{mouse[0]} #{mouse[1]}"
  22         if flags?.close?
  23                 d += " z"
  24         path.setAttribute "d", d
  25
  26 cancel_drawing = ->
  27         if selection?
  28                 svg.removeChild selection.element
  29         selection = null
  30         return false
  31 stop_drawing = ->
  32         if selection?
  33                 update_path selection.element, selection.data
  34         selection = null
  35         return false
  36 stop_close_drawing = ->
  37         if selection?
  38                 update_path selection.element, selection.data, close: true
  39         selection = null
  40         return false
  41 click = (x, y) ->
  42         unless selection?
  43                 path = document.createElementNS svg_ns, "path"
  44                 selection = data: [], element: path
  45                 svg.appendChild path
  46         selection.data.push [x, y]
  47         update_path selection.element, selection.data
  48 mousemove = (x, y) ->
  49         mouse[0] = x
  50         mouse[1] = y
  51         if selection?
  52                 update_path selection.element, selection.data, to_mouse: true
  53
  54 keydown = (keycode) ->
  55         switch keycode
  56                 when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
  57                         return stop_close_drawing()
  58                 when (' '.charCodeAt 0), 13, 10
  59                         return stop_drawing()
  60                 when 27
  61                         return cancel_drawing()
  62
  63 # called automatically on domcontentloaded
  64 init = ->
  65         $container = $ '.crayon_mockup'
  66         $stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
  67         $stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
  68         $cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
  69         $tools = $ '<div class="toolbar"></div>'
  70         $tools.append $stop_button
  71         $tools.append $stop_close_button
  72         $tools.append $cancel_button
  73         $stop_button.click stop_drawing
  74         $stop_close_button.click stop_close_drawing
  75         $cancel_button.click cancel_drawing
  76         $container.append $tools
  77         svg = document.createElementNS svg_ns, 'svg'
  78         svg.setAttribute 'width', width
  79         svg.setAttribute 'height', height
  80         svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
  81         $svg = $ svg
  82         $container.append $svg
  83         $svg.mousedown (e) ->
  84                 offset = $svg.offset()
  85                 click e.pageX - offset.left, e.pageY - offset.top
  86                 return false
  87         $svg.mousemove (e) ->
  88                 offset = $svg.offset()
  89                 mousemove e.pageX - offset.left, e.pageY - offset.top
  90         ($ document).keydown (e) ->
  91                 return keydown e.keyCode
  92
  93 $ init