+# settings
+width = 500
+height = 500
+
# globals
-$svg = null #jquery object for svg element
-selected = null
-
-stop_drawing = ->
- selected = null
-click = (x, y) ->
- unless selected?
- selected = []
- if selected.length > 0
- last = selected[selected.length - 1]
- obj = document.createElementNS("http://www.w3.org/2000/svg", "path")
- obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}")
- $svg[0].appendChild(obj)
- selected.push [x, y]
- console.log selected
+$svg = null # jquery object for svg element
+svg = null # dom object for svg element
+$tool_options = null # jquery object for tool options line
+selection = []
+svg_ns = 'http://www.w3.org/2000/svg'
+cur_tool = null
+cur_tool_name = null
+mouse = x: 0, y: 0, buttons: [0,0,0]
+
+class EditableThing
+ constructor: ->
+ @el = null
+ click_proximity: (x, y) ->
+ return null
+ clicked: ->
+ update: ->
+ destructor: ->
+ if @el?
+ svg.removeChild @el
+ @el = null
+
+class PolyLine extends EditableThing
+ constructor: (args) ->
+ super args
+ @drawing = args?.drawing ? false
+ @el = document.createElementNS svg_ns, "path"
+ svg.appendChild @el
+ @points = args?.points ? []
+ @update()
+ update: (args) ->
+ if args?.drawing?
+ @drawing = args.drawing
+ d = ''
+ l = ''
+ sep = 'M'
+ for loc, i in @points
+ d += l = "#{sep} #{loc[0]} #{loc[1]}"
+ sep = ' L'
+ if args?.to_mouse?
+ d += l = "#{sep} #{args.mouse_x} #{args.mouse_y}"
+ if args?.close # FIXME ?remove
+ d += l = ' z'
+ if @points.length > 0
+ if l is " L #{@points[0][0]} #{@points[0][1]}"
+ d = d.substr 0, d.length - l.length
+ d += ' z'
+ @el.setAttribute "d", d
+ add_point: (x, y) ->
+ @points.push [x, y]
+ close_loop: ->
+ if @points.length > 2
+ @add_point @points[0][0], @points[0][1]
+
+class Tool
+ constructor: (args) ->
+ @button = args.button
+ if @button?
+ @button.addClass 'disabled'
+ @tool_options = args.tool_options
+ click: (x, y) ->
+ mousemove: (x, y) ->
+ keydown: (keycode) ->
+ disable: ->
+ if @button?
+ @button.removeClass 'disabled'
+ @tool_options.empty()
+
+class TutorialTool extends Tool
+ constructor: (args) ->
+ super args
+ @paths = []
+ choose = [
+ [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
+ [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]],
+ [[173,107],[169,159],[180,137],[189,133],[193,160]],
+ [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']],
+ [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']],
+ [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]],
+ [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]],
+ [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]],
+ [[160,207],[191,205]],
+ [[176,184],[174,228],[180,238]],
+ [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']],
+ [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']],
+ [[247,187],[249,241],[254,243]]
+ ]
+ for c in choose
+ path = data: c, element: document.createElementNS svg_ns, "path"
+ update_path path, close: c[c.length - 1][2] is 'z'
+ svg.appendChild path.element
+ @paths.push path
+ @tip = $ "<span> </span>"
+ @tool_options.append @tip
+ disable: ->
+ super()
+ for p in @paths
+ svg.removeChild p.element
+
+class DrawTool extends Tool
+ constructor: (args) ->
+ super args
+ @tool_options.append $ "<span>Draw tool helpers:</span>"
+ @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
+ @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
+ @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
+ @tool_options.append @stop_button
+ @tool_options.append @stop_close_button
+ @tool_options.append @cancel_button
+ @stop_button.click @stop_drawing.bind @
+ @stop_close_button.click @stop_close_drawing.bind @
+ @cancel_button.click @cancel_drawing.bind @
+ @update_helper_buttons()
+ click: (x, y) ->
+ if selection.length and not selection[0].drawing?
+ selection = []
+ unless selection.length
+ selection.push new PolyLine drawing: true
+ selection[0].add_point x, y
+ selection[0].update()
+ @update_helper_buttons()
+ update_helper_buttons: ->
+ if selection[0]?.drawing? and selection[0]?.points.length > 0
+ @cancel_button.removeClass 'disabled'
+ else
+ @cancel_button.addClass 'disabled'
+ if selection[0]?.drawing? and selection[0]?.points.length > 1
+ @stop_button.removeClass 'disabled'
+ else
+ @stop_button.addClass 'disabled'
+ if selection[0]?.drawing? and selection[0]?.points.length > 2
+ @stop_close_button.removeClass 'disabled'
+ else
+ @stop_close_button.addClass 'disabled'
+ cancel_drawing: ->
+ if selection[0]?.drawing?
+ selection[0].destructor()
+ selection = []
+ @update_helper_buttons()
+ return false
+ stop_drawing: ->
+ if selection[0]?.drawing?
+ if selection[0]?.points.length < 2
+ return @cancel_drawing()
+ if selection[0]?
+ selection[0].update()
+ selection = []
+ @update_helper_buttons()
+ return false
+ stop_close_drawing: ->
+ if selection[0]?.drawing?
+ if selection[0]?.points.length < 3
+ return @stop_drawing()
+ selection[0].close_loop()
+ selection[0].update drawing: false
+ selection = []
+ @update_helper_buttons()
+ return false
+ mousemove: (x, y) ->
+ mouse.x = x
+ mouse.y = y
+ if selection[0]?.drawing?
+ selection[0].update to_mouse: true, mouse_x: x, mouse_y: y
+ keydown: (keycode) ->
+ switch keycode
+ when ('O'.charCodeAt 0), ('0'.charCodeAt 0)
+ return @stop_close_drawing()
+ when (' '.charCodeAt 0), 13, 10
+ return @stop_drawing()
+ when 27
+ return @cancel_drawing()
+ disable: ->
+ super()
+ @stop_drawing()
+
+class EditTool extends Tool
+ constructor: (args) ->
+ super args
+ args.tool_options.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
+
+class DeleteTool extends Tool
+ constructor: (args) ->
+ super args
+ args.tool_options.append $ "<span>To delete: click on a line below</span>"
+ click: (x, y) ->
+ $svg.find('path:hover').remove()
+ return false
+
+update_path = (path, flags) ->
+ d = ''
+ sep = 'M'
+ for loc, i in path.data
+ d += "#{sep} #{loc[0]} #{loc[1]}"
+ sep = ' L'
+ if flags?.to_mouse?
+ d += "#{sep} #{mouse.x} #{mouse.y}"
+ if flags?.close
+ d += " z"
+ path.element.setAttribute "d", d
+
+switch_to_tool = (tool_class) ->
# called automatically on domcontentloaded
init = ->
$container = $ '.crayon_mockup'
- $stop_button = $ '<div class="button">[end current polyline]</div>'
- $tools = $ '<div class="toolbar"></div>'
- $tools.append $stop_button
- $stop_button.click stop_drawing
- $container.append $tools
- $svg = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
- #$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
- #$svg.append $test_path
+ $toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
+ $tool_options = $ '<div class="tool_options"></div>'
+ $container.append $toolbar
+ $container.append $tool_options
+ svg = document.createElementNS svg_ns, 'svg'
+ svg.setAttribute 'width', width
+ svg.setAttribute 'height', height
+ svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
+ $svg = $ svg
$container.append $svg
- console.log 'hi'
+ filter = document.createElementNS svg_ns, 'filter'
+ filter.setAttribute 'id', 'crayon'
+ filter.setAttribute 'filterUnits', 'userSpaceOnUse'
+ filter.setAttribute 'x', '-5%'
+ filter.setAttribute 'y', '-5%'
+ filter.setAttribute 'height', '110%'
+ filter.setAttribute 'width', '110%'
+ filter_inner = document.createElementNS svg_ns, 'feTurbulence'
+ filter_inner.setAttribute 'baseFrequency', '.3'
+ filter_inner.setAttribute 'numOctaves', '2'
+ filter_inner.setAttribute 'type', 'fractalNoise'
+ filter.appendChild filter_inner
+ filter_inner = document.createElementNS svg_ns, 'feDisplacementMap'
+ filter_inner.setAttribute 'scale', '6'
+ filter_inner.setAttribute 'xChannelSelector', 'R'
+ filter_inner.setAttribute 'in', 'SourceGraphic'
+ filter.appendChild filter_inner
+ svg.appendChild filter
+
+ tool_buttons =
+ tutorial: default: true, factory: TutorialTool
+ draw: button_text: 'draw', factory: DrawTool
+ edit: button_text: 'edit', factory: EditTool
+ delete: button_text: 'delete', factory: DeleteTool
+ for k, t of tool_buttons
+ if t.button_text?
+ t.button = $ "<span class=\"button\"></span>"
+ t.button.text t.button_text
+ $toolbar.append t.button
+ do (k, t) ->
+ activate = ->
+ if cur_tool?
+ cur_tool.disable()
+ $container.removeClass "#{cur_tool_name}_tool"
+ ($toolbar.find '.button').removeClass 'disabled'
+ cur_tool_name = k
+ $container.addClass "#{cur_tool_name}_tool"
+ $tool_options.empty()
+ cur_tool = new t.factory button: t.button, tool_options: $tool_options
+ if t.button?
+ t.button.click activate
+ if t.default
+ activate()
+
$svg.mousedown (e) ->
- console.log 'hi'
offset = $svg.offset()
- click e.pageX - offset.left, e.pageY - offset.top
+ if cur_tool?
+ mouse_x = Math.round(e.pageX - offset.left)
+ mouse_y = Math.round(e.pageY - offset.top)
+ return cur_tool.click mouse_x, mouse_y
+ $svg.mousemove (e) ->
+ offset = $svg.offset()
+ if cur_tool?
+ mouse_x = Math.round(e.pageX - offset.left)
+ mouse_y = Math.round(e.pageY - offset.top)
+ return cur_tool.mousemove mouse_x, mouse_y
+ ($ document).keydown (e) ->
+ if cur_tool?
+ return cur_tool.keydown e.keyCode
$ init
Got questions, comments, patches, etc.? Contact Jason Woofenden