X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=b8b225624019f05b1d8db5a26657486297ff6a09;hp=6d391e8b87da9cafbb93b92c73ed809ac132725d;hb=859e7c640bf3ab834df5c65f75b3b439e7167116;hpb=f5cf60eac3cbdb1eb1fe12833509418f33fe9b83

diff --git a/auto.coffee b/auto.coffee
index 6d391e8..b8b2256 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -6,12 +6,56 @@ height = 500
 $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
@@ -72,55 +116,55 @@ class DrawTool extends Tool
 		@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)
@@ -132,8 +176,6 @@ class DrawTool extends Tool
 	disable: ->
 		super()
 		@stop_drawing()
-		if selection?.drawing?
-			delete selection.drawing
 
 class EditTool extends Tool
 	constructor: (args) ->
@@ -162,6 +204,18 @@ update_path = (path, flags) ->
 
 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'
@@ -169,12 +223,16 @@ init = ->
 	$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
@@ -204,11 +262,15 @@ init = ->
 	$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