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