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

diff --git a/auto.coffee b/auto.coffee
index 6d391e8..63870d5 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -1,216 +1,255 @@
 # settings
-width = 500
-height = 500
+width = 800
+height = 600
+supply_height = 96
+CLICK_FUZ = 10 # this far away from things is close enough to be "clicked on"
+PROX_MAX = CLICK_FUZ * CLICK_FUZ
 
-# globals
-$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
-svg_ns = 'http://www.w3.org/2000/svg'
-cur_tool = null
-cur_tool_name = null
-mouse = x: 0, y: 0, buttons: [0,0,0]
+# constants
+STYLE_NORMAL = 0
+STYLE_SELECTED = 1
+STYLE_HOVER = 2
+STYLE_EDITING = 3
+STYLE_DRAGGING = 4
 
-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>&nbsp;</span>"
-		@tool_options.append @tip
-	disable: ->
-		super()
-		for p in @paths
-			svg.removeChild p.element
+# 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 'http://www.w3.org/2000/svg', 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
 
-class DrawTool extends Tool
+next_widget_id = 0
+# public vars: x, y, width, height, el
+class Widget
+	# required args: svg
 	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? 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
-		@update_helper_buttons()
-	update_helper_buttons: ->
-		if selection?.drawing? and selection?.data.length > 0
-			@cancel_button.removeClass 'disabled'
+		@id = next_widget_id
+		next_widget_id += 1
+		@svg = args.svg
+		@style = args.style ? STYLE_NORMAL
+		@x = args.x ? 1
+		@y = args.y ? 1
+		@width = args.width ? 50
+		@height = args.height ? 34
+	destruct: ->
+	clone: ->
+		return new Widget @
+	move: (args) ->
+		@x = args.x
+		@y = args.y
+	proximity: (xy) -> # return the square of the distance to your visible bits
+		return PROX_MAX + 1
+	set_style: (style) ->
+		return if @style is style
+		if style is STYLE_NORMAL
+			@el.setAttribute 'style', 'filter: url(#crayon)'
 		else
-			@cancel_button.addClass 'disabled'
-		if selection?.drawing? and selection?.data.length > 1
-			@stop_button.removeClass 'disabled'
-		else
-			@stop_button.addClass 'disabled'
-		if selection?.drawing? and selection?.data.length > 2
-			@stop_close_button.removeClass 'disabled'
-		else
-			@stop_close_button.addClass 'disabled'
-	cancel_drawing: ->
-		if selection?.drawing?
-			svg.removeChild selection.element
-		selection = null
-		@update_helper_buttons()
-		return false
-	stop_drawing: ->
-		if selection?.drawing?
-			if selection?.data.length < 2
-				return @cancel_drawing()
-			update_path selection
-		selection = null
-		@update_helper_buttons()
-		return false
-	stop_close_drawing: ->
-		if selection?.drawing?
-			if selection?.data.length < 3
-				return @stop_drawing()
-			update_path selection, close: true
-		selection = null
-		@update_helper_buttons()
-		return false
-	mousemove: (x, y) ->
-		mouse.x = x
-		mouse.y = y
-		if selection?.drawing?
-			update_path selection, to_mouse: true
-	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()
-		if selection?.drawing?
-			delete selection.drawing
+			if @style is STYLE_NORMAL
+				@el.setAttribute 'style', ''
+		switch style
+			when STYLE_NORMAL
+				@el.setAttribute 'class', "#{@css_class}"
+			when STYLE_SELECTED
+				@el.setAttribute 'class', "#{@css_class} selected"
+			when STYLE_HOVER
+				@el.setAttribute 'class', "#{@css_class} hover"
+			when STYLE_DRAGGING
+				@el.setAttribute 'class', "#{@css_class} dragging"
+			# FIXME when STYLE_EDITING
+		@style = style
+	controls: -> # create controls, return them
+		return []
+	hide_controls: ->
 
-class EditTool extends Tool
+class RectWidget extends Widget
 	constructor: (args) ->
 		super args
-		args.tool_options.append $ "<span>Oops, the edit tool isn't implemented yet</span>"
-
-class DeleteTool extends Tool
-	constructor: (args) ->
+		@css_class = 'box'
+		@el = json_to_svg rect:
+			x: @x + 1
+			y: @y + 1
+			width: @width - 2
+			height: @height - 2
+			class: 'box'
+			style: if @style is STYLE_NORMAL then 'filter: url(#crayon)' else ''
+		@svg.appendChild @el
+	destruct: ->
+		if @el?
+			@svg.removeChild @el
+	clone: ->
+		return new RectWidget @
+	move: (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) ->
+		@el.setAttribute 'x', @x + 1
+		@el.setAttribute 'y', @y + 1
+	proximity: (xy) -> # return the square of the distance to your visible bits
+		x = xy.x
+		y = xy.y
+		prox = PROX_MAX + 1
+		in_x = false
+		in_y = false
+		if x > @x - CLICK_FUZ and x < @x + @width + CLICK_FUZ
+			in_x = true
+			if y < @y + @height / 2
+				new_prox = @y - y
+			else
+				new_prox = @y + @height - y
+			new_prox *= new_prox
+			if new_prox < prox
+				prox = new_prox
+		if y > @y - CLICK_FUZ and y < @y + @height + CLICK_FUZ
+			in_y = true
+			if x < @x + @width / 2
+				new_prox = @x - x
+			else
+				new_prox = @x + @width - x
+			new_prox *= new_prox
+			if new_prox < prox
+				prox = new_prox
+		if in_x and in_y and prox > PROX_MAX
+			prox = PROX_MAX - 1
+		return prox
+	controls: -> # create controls, return them
+		return []
+	hide_controls: ->
 
 # called automatically on domcontentloaded
 init = ->
+	svg_offset = null
 	$container = $ '.crayon_mockup'
-	$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 = 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
-		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()
+	# create canvas border
+	svg.appendChild json_to_svg rect:
+		x: 1
+		y: supply_height + 1
+		width: width - 2
+		height: height - 2 - supply_height
+		class: 'canvas_border'
+	
+	supply = [
+		new RectWidget svg: svg
+		new RectWidget svg: svg, width: 12, height: 50
+		new RectWidget svg: svg, width: 70, height: 12
+	]
+	for widget, i in supply
+		widget.move {
+			x: 30 + i * 90 + (70 - widget.width) / 2
+			y: (supply_height - widget.height) / 2
+		}
+	
+	# editor state
+	on_canvas = []
+	selected = []
+	editing = [] # has controls
+	dragging = false
+	dragging_offset = x: 0, y: 0 # from mouse x,y -> widget x,y
 
-	$svg.mousedown (e) ->
-		offset = $svg.offset()
-		if cur_tool?
-			return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
-	$svg.mousemove (e) ->
-		offset = $svg.offset()
-		if cur_tool?
-			return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
-	($ document).keydown (e) ->
-		if cur_tool?
-			return cur_tool.keydown e.keyCode
+	deselect_all = (args) ->
+		except = args?.except ? null
+		found = false
+		for w in selected
+			if w is except
+				found = true
+			else
+				w.set_style STYLE_NORMAL
+		if found
+			selected = [except]
+		else
+			selected = []
+	closest_widget = (widgets, xy) ->
+		prox = PROX_MAX + 1
+		closest = null
+		for w in widgets
+			new_prox = w.proximity xy
+			if new_prox < prox
+				prox = new_prox
+				closest = w
+		if prox < PROX_MAX
+			return closest
+		return null
+	svg_event_to_xy = (e) ->
+		unless svg_offset?
+			svg_offset = $svg.offset()
+		return {
+			x: Math.round(e.pageX - svg_offset.left)
+			y: Math.round(e.pageY - svg_offset.top)
+		}
+	mousedown = (e) ->
+		mousemove e
+		if dragging # two mousedowns in a row?! it happens
+			return mouseup e
+		xy = svg_event_to_xy e
+		if xy.y < supply_height
+			closest = closest_widget supply, xy
+			if closest?
+				closest = closest.clone()
+				on_canvas.push closest
+		else
+			closest = closest_widget on_canvas, xy
+		if closest?
+			deselect_all except: closest
+			selected = [closest]
+			closest.set_style STYLE_DRAGGING
+			dragging = true
+			dragging_offset.x = closest.x - xy.x
+			dragging_offset.y = closest.y - xy.y
+		else
+			deselect_all()
+		return false
+	mouseup = (e) ->
+		mousemove e
+		if dragging
+			for w in selected
+				if w.y < supply_height
+					w.destruct()
+				else
+					w.set_style STYLE_SELECTED
+		dragging = false
+		return false
+	prev_hover = null
+	mousemove = (e) ->
+		xy = svg_event_to_xy e
+		if dragging
+			xy.x += dragging_offset.x
+			xy.y += dragging_offset.y
+			selected[0].move xy
+		else
+			hover = closest_widget on_canvas, xy
+			unless hover?
+				hover = closest_widget supply, xy
+			if hover != prev_hover
+				prev_hover = hover
+				for w in selected
+					if w.style is STYLE_HOVER and w isnt hover
+						w.set_style STYLE_SELECTED
+				for w in supply
+					if w.style is STYLE_HOVER and w isnt hover
+						w.set_style STYLE_NORMAL
+				for w in on_canvas
+					if w.style is STYLE_HOVER and w isnt hover
+						w.set_style STYLE_NORMAL
+				if hover
+					hover.set_style STYLE_HOVER
+		return false
+	$svg.mousedown mousedown
+	$svg.mouseup mouseup
+	$svg.mousemove mousemove
+	#($ document).keydown (e) ->
 
 $ init