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 TutorialTool extends Tool
  23         constructor: (toolbar) ->
  24                 super 'tutorial'
  25                 @paths = []
  26                 choose = [
  27                         [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
  28                         [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
  29                         [[173,107],[169,159],[180,137],[189,133],[193,160]],
  30                         [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
  31                         [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
  32                         [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
  33                         [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
  34                         [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
  35                         [[160,207],[191,205]],
  36                         [[176,184],[174,228],[180,238]],
  37                         [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
  38                         [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
  39                         [[247,187],[249,241],[254,243]]
  40                 ]
  41                 for c in choose
  42                         path = data: c, element: document.createElementNS svg_ns, "path"
  43                         update_path path, close: c[c.length - 1][2] is 'z'
  44                         svg.appendChild path.element
  45                         @paths.push path
  46                 @tip = $ "<span>&nbsp;</span>"
  47                 toolbar.append @tip
  48         disable: ->
  49                 @tip.remove()
  50                 for p in @paths
  51                         svg.removeChild p.element
  52
  53 class DrawTool extends Tool
  54         constructor: (toolbar) ->
  55                 super 'draw'
  56                 @stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
  57                 @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
  58                 @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
  59                 toolbar.append @stop_button
  60                 toolbar.append @stop_close_button
  61                 toolbar.append @cancel_button
  62                 @stop_button.click @stop_drawing.bind @
  63                 @stop_close_button.click @stop_close_drawing.bind @
  64                 @cancel_button.click @cancel_drawing.bind @
  65         click: (x, y) ->
  66                 if selection? and not selection.drawing?
  67                         selection = null
  68                 unless selection?
  69                         path = document.createElementNS svg_ns, "path"
  70                         selection = data: [], element: path, drawing: true
  71                         svg.appendChild path
  72                 selection.data.push [x, y]
  73                 update_path selection
  74         button_click: (button) ->
  75                 if @[button]
  76                         return @[button]()
  77         cancel_drawing: ->
  78                 if selection?
  79                         console.log selection.element
  80                         svg.removeChild selection.element
  81                 selection = null
  82                 return false
  83         stop_drawing: ->
  84                 if selection?
  85                         update_path selection
  86                 selection = null
  87                 return false
  88         stop_close_drawing: ->
  89                 if selection?
  90                         update_path selection, close: true
  91                 selection = null
  92                 return false
  93         mousemove: (x, y) ->
  94                 mouse.x = x
  95                 mouse.y = y
  96                 if selection?
  97                         update_path selection, to_mouse: true
  98         keydown: (keycode) ->
  99                 switch keycode
 100                         when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
 101                                 return @stop_close_drawing()
 102                         when (' '.charCodeAt 0), 13, 10
 103                                 return @stop_drawing()
 104                         when 27
 105                                 return @cancel_drawing()
 106         disable: ->
 107                 if selection?.drawing?
 108                         delete selection.drawing
 109                 @stop_button.remove()
 110                 @stop_close_button.remove()
 111                 @cancel_button.remove()
 112
 113 class EditTool extends Tool
 114         constructor: (toolbar) ->
 115                 super 'draw'
 116                 @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
 117                 toolbar.append @oops
 118         disable: ->
 119                 @oops.remove()
 120
 121 class DeleteTool extends Tool
 122         constructor: (toolbar) ->
 123                 super 'draw'
 124                 @oops = $ "<span>Oops, this tool isn't implemented yet</span>"
 125                 toolbar.append @oops
 126         disable: ->
 127                 @oops.remove()
 128
 129 update_path = (path, flags) ->
 130         d = ''
 131         sep = 'M'
 132         for loc, i in path.data
 133                 d += "#{sep} #{loc[0]} #{loc[1]}"
 134                 sep = ' L'
 135         if flags?.to_mouse?
 136                 d += "#{sep} #{mouse.x} #{mouse.y}"
 137         if flags?.close
 138                 d += " z"
 139         path.element.setAttribute "d", d
 140
 141 # called automatically on domcontentloaded
 142 init = ->
 143         $container = $ '.crayon_mockup'
 144         $toolbar = $ '<div class="toolbar">Tools: </div>'
 145         $draw_tool_button = $ '<span class="button">draw</span>'
 146         $edit_tool_button = $ '<span class="button">edit (coming soon)</span>'
 147         $delete_tool_button = $ '<span class="button">delete (coming soon)</span>'
 148         $toolbar.append $draw_tool_button
 149         $toolbar.append $edit_tool_button
 150         $toolbar.append $delete_tool_button
 151         $draw_tool_button.click ->
 152                 if cur_tool?
 153                         cur_tool.disable()
 154                 cur_tool = new DrawTool $tool_extra
 155         $edit_tool_button.click ->
 156                 if cur_tool?
 157                         cur_tool.disable()
 158                 cur_tool = new EditTool $tool_extra
 159         $delete_tool_button.click ->
 160                 if cur_tool?
 161                         cur_tool.disable()
 162                 cur_tool = new DeleteTool $tool_extra
 163         $tool_extra = $ '<div class="tool_extra"></div>'
 164         $container.append $toolbar
 165         $container.append $tool_extra
 166         svg = document.createElementNS svg_ns, 'svg'
 167         svg.setAttribute 'width', width
 168         svg.setAttribute 'height', height
 169         svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
 170         $svg = $ svg
 171         $container.append $svg
 172         cur_tool = new TutorialTool $tool_extra
 173         $svg.mousedown (e) ->
 174                 offset = $svg.offset()
 175                 if cur_tool?
 176                         return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
 177         $svg.mousemove (e) ->
 178                 offset = $svg.offset()
 179                 if cur_tool?
 180                         return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
 181         ($ document).keydown (e) ->
 182                 if cur_tool?
 183                         return cur_tool.keydown e.keyCode
 184
 185 $ init