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