X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=e36132fc7e84050175b7e999bde4a32433b5dd94;hp=7a55b2acd8975fb03fdd541bf869eaaeced48842;hb=6d6869ff1aab602f79d966aa852985662d2f519a;hpb=c8077c7a5c9ce3610d8f926b7fdf8969974728c8

diff --git a/auto.coffee b/auto.coffee
index 7a55b2a..e36132f 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -1,36 +1,136 @@
-# globals
-$svg = null #jquery object for svg element
-selected = null
+# settings
+width = 800
+height = 600
+supply_height = 96
 
-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
+# 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
+
+# public vars: x, y, width, height, el
+class Widget
+	constructor: (args) ->
+		@x = args?.x ? 1
+		@y = args?.y ? 1
+		@width = args?.width ? 50
+		@height = args?.height ? 34
+	move: (args) ->
+		@x = args.x
+		@y = args.y
+class RectWidget extends Widget
+	constructor: (args) ->
+		super args
+		@el = json_to_svg rect:
+			x: @x + 1
+			y: @x + 1
+			width: @width - 2
+			height: @height - 2
+			class: 'box'
+	move: (args) ->
+		super args
+		@el.setAttribute 'x', @x + 1
+		@el.setAttribute 'y', @y + 1
+	clone: ->
+		return new RectWidget @
 
 # called automatically on domcontentloaded
 init = ->
+	offset = null
+	selected = []
+	on_canvas = []
+	dragging = false
 	$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
+	svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
+	$svg = $ svg
 	$container.append $svg
-	console.log 'hi'
+	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' }
+		]
+
+	# 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()
+		new RectWidget width: 12, height: 50
+		new RectWidget 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
+		}
+		svg.appendChild widget.el
+	
+	# todo ask widgets
+	closest_widget = (widgets, xy) ->
+		closest = [10000, null]
+		for w in widgets
+			x = w.x + w.width / 2 - xy.x
+			y = w.y + w.height / 2 - xy.y
+			dist2 = x * x + y * y
+			if dist2 < closest[0]
+				closest = [dist2, w]
+		if closest[1]?
+			return closest
+		return null
+	svg_event_to_xy = (e) ->
+		unless offset?
+			offset = $svg.offset()
+		return {
+			x: Math.round(e.pageX - offset.left)
+			y: Math.round(e.pageY - offset.top)
+		}
 	$svg.mousedown (e) ->
-		console.log 'hi'
-		offset = $svg.offset()
-		click e.pageX - offset.left, e.pageY - offset.top
+		xy = svg_event_to_xy e
+		if xy.y < supply_height
+			closest = closest_widget supply, xy
+			console.log closest
+			if closest?
+				closest[1] = closest[1].clone()
+				svg.appendChild closest[1].el
+		else
+			closest = closest_widget on_canvas, xy
+		if closest?
+			selected = [closest[1]]
+			dragging = true
+			mousemove e
+		return false
+	$svg.mouseup (e) ->
+		mousemove e
+		dragging = false
+		if selected[0]?
+			if selected[0].y > supply_height
+				on_canvas.push selected[0]
+			else
+				svg.removeChild selected[0].el
+			selected = []
+		return false
+	mousemove = (e) ->
+		if dragging
+			xy = svg_event_to_xy e
+			xy.x -= selected[0].width / 2
+			xy.y -= selected[0].height / 2
+			selected[0].move xy
+		return false
+	$svg.mousemove mousemove
+	#($ document).keydown (e) ->
 
 $ init