$svg = null # jquery object for svg element
svg = null # dom object for svg element
$tool_options = null # jquery object for tool options line
-selection = null
+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
@cancel_button.click @cancel_drawing.bind @
@update_helper_buttons()
click: (x, y) ->
- if selection? and not selection.drawing?
- selection = null
- unless selection?
- path = document.createElementNS svg_ns, "path"
- selection = data: [], element: path, drawing: true
- svg.appendChild path
- selection.data.push [x, y]
- update_path selection
+ 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?.drawing? and selection?.data.length > 0
+ if selection[0]?.drawing? and selection[0]?.points.length > 0
@cancel_button.removeClass 'disabled'
else
@cancel_button.addClass 'disabled'
- if selection?.drawing? and selection?.data.length > 1
+ if selection[0]?.drawing? and selection[0]?.points.length > 1
@stop_button.removeClass 'disabled'
else
@stop_button.addClass 'disabled'
- if selection?.drawing? and selection?.data.length > 2
+ 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?.drawing?
- svg.removeChild selection.element
- selection = null
+ if selection[0]?.drawing?
+ selection[0].destructor()
+ selection = []
@update_helper_buttons()
return false
stop_drawing: ->
- if selection?.drawing?
- if selection?.data.length < 2
+ if selection[0]?.drawing?
+ if selection[0]?.points.length < 2
return @cancel_drawing()
- update_path selection
- selection = null
+ if selection[0]?
+ selection[0].update()
+ selection = []
@update_helper_buttons()
return false
stop_close_drawing: ->
- if selection?.drawing?
- if selection?.data.length < 3
+ if selection[0]?.drawing?
+ if selection[0]?.points.length < 3
return @stop_drawing()
- update_path selection, close: true
- selection = null
+ 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?.drawing?
- update_path selection, to_mouse: true
+ 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)
disable: ->
super()
@stop_drawing()
- if selection?.drawing?
- delete selection.drawing
class EditTool extends Tool
constructor: (args) ->
switch_to_tool = (tool_class) ->
+# json (compiled to javascript and minified) is ~8% smaller than the resulting xml
+json_to_svg = (json) ->
+ for tag, attrs of json
+ el = document.createElementNS svg_ns, tag
+ for k, v of attrs
+ if k is 'children'
+ for child in v
+ el.appendChild json_to_svg child
+ else
+ el.setAttribute k, v
+ return el
+
# called automatically on domcontentloaded
init = ->
$container = $ '.crayon_mockup'
$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 = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
$svg = $ svg
$container.append $svg
+ svg.appendChild json_to_svg filter:
+ id: 'crayon', filterUnits: 'userSpaceOnUse'
+ x: '-5%', y: '-5%', height: '110%', width: '110%'
+ children: [
+ { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
+ { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
+ ]
tool_buttons =
tutorial: default: true, factory: TutorialTool
$svg.mousedown (e) ->
offset = $svg.offset()
if cur_tool?
- return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
+ 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?
- return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
+ 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
Got questions, comments, patches, etc.? Contact Jason Woofenden