X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=89dfb86fb41b6b69018983ce0364e85a01662b44;hp=c415d0b69fbf3d91849fb01385d5505aa5d63852;hb=af4cde3b88f14635f09f2faf00162b017a2ee7bc;hpb=0334684c7b92ea68acf4bd53b2e5d7378d3f3862

diff --git a/auto.coffee b/auto.coffee
index c415d0b..89dfb86 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -24,14 +24,20 @@ json_to_svg = (json) ->
 				el.setAttribute k, v
 	return el
 
+next_widget_id = 0
 # public vars: x, y, width, height, el
 class Widget
+	# required args: svg
 	constructor: (args) ->
-		@style = STYLE_NORMAL
-		@x = args?.x ? 1
-		@y = args?.y ? 1
-		@width = args?.width ? 50
-		@height = args?.height ? 34
+		@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) ->
@@ -67,11 +73,16 @@ class RectWidget extends Widget
 		@css_class = 'box'
 		@el = json_to_svg rect:
 			x: @x + 1
-			y: @x + 1
+			y: @y + 1
 			width: @width - 2
 			height: @height - 2
 			class: 'box'
-			style: 'filter: url(#crayon)'
+			style: if @style is STYLE_NORMAL then 'filter: url(#crayon)' else ''
+		@svg.appendChild @el
+	destruct: ->
+		super()
+		if @el?
+			@svg.removeChild @el
 	clone: ->
 		return new RectWidget @
 	move: (args) ->
@@ -131,37 +142,45 @@ init = ->
 		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
+
+	supply = {}
+	for args, i in [
+		{ width: 40, height: 40 }
+		{ width: 12, height: 50 }
+		{ 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
+		widget = new RectWidget {
+			width: args.width
+			height: args.height
+			x: 30 + i * 90 + (70 - args.width) / 2
+			y: (supply_height - args.height) / 2
+			svg: svg
 		}
-		svg.appendChild widget.el
-	
+		supply[widget.id] = widget
+
 	# editor state
-	on_canvas = []
-	selected = []
-	editing = [] # has controls
+	on_canvas = {}
+	selected = {}
+	editing = {} # has controls
 	dragging = false
-	dragging_offset = x: 0, y: 0 # from mouse x,y -> widget x,y
+	drag_from = x: 0, y: 0 # mouse was here at last frame of drag
+	shift_key_down = false
 
-	# todo ask widgets
+	deselect_all = (args) ->
+		except = args?.except ? null
+		for id, w of selected
+			w.set_style STYLE_NORMAL
+			delete selected[id]
 	closest_widget = (widgets, xy) ->
 		prox = PROX_MAX + 1
 		closest = null
-		for w in widgets
+		for id, w of widgets
 			new_prox = w.proximity xy
 			if new_prox < prox
 				prox = new_prox
 				closest = w
 		if prox < PROX_MAX
-			return [prox, closest]
+			return closest
 		return null
 	svg_event_to_xy = (e) ->
 		unless svg_offset?
@@ -170,52 +189,70 @@ init = ->
 			x: Math.round(e.pageX - svg_offset.left)
 			y: Math.round(e.pageY - svg_offset.top)
 		}
-	$svg.mousedown (e) ->
+	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[1] = closest[1].clone()
-				svg.appendChild closest[1].el
+				closest = closest.clone()
+				on_canvas[closest.id] = closest
 		else
 			closest = closest_widget on_canvas, xy
 		if closest?
-			selected = [closest[1]]
-			closest[1].set_style STYLE_DRAGGING
+			unless (shift_key_down or selected[closest.id]?)
+				deselect_all except: closest
+			selected[closest.id] = closest
+			closest.set_style STYLE_DRAGGING
 			dragging = true
-			dragging_offset.x = closest[1].x - xy.x
-			dragging_offset.y = closest[1].y - xy.y
-			mousemove e
+			drag_from = xy
+		else
+			deselect_all()
 		return false
-	$svg.mouseup (e) ->
+	mouseup = (e) ->
 		mousemove e
+		if dragging
+			for id, w of selected
+				if w.y < supply_height
+					w.destruct()
+					delete selected[id]
+				else
+					w.set_style STYLE_SELECTED
 		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
+	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
+			return if drag_from.x is xy.x and drag_from.y is xy.y
+			rel_x = xy.x - drag_from.x
+			rel_y = xy.y - drag_from.y
+			drag_from = xy
+			for id, w of selected
+				w.move x: w.x + rel_x, y: w.y + rel_y
 		else
-			closest = closest_widget on_canvas, xy
-			if closest?
-				hover = closest[1]
-			else
-				hover = null
-			for w in on_canvas
-				if w is hover
-					w.set_style STYLE_HOVER
-				else
-					w.set_style STYLE_NORMAL
+			hover = closest_widget on_canvas, xy
+			unless hover?
+				hover = closest_widget supply, xy
+			if hover != prev_hover
+				if prev_hover?
+					# FIXME
+					if selected[prev_hover.id]?
+						prev_hover.set_style STYLE_SELECTED
+					else
+						prev_hover.set_style STYLE_NORMAL
+				if hover?
+					hover.set_style STYLE_HOVER
+				prev_hover = hover
 		return false
+	$svg.mousedown mousedown
+	$svg.mouseup mouseup
 	$svg.mousemove mousemove
+	$(document).on 'keyup keydown', (e) ->
+		shift_key_down = e.shiftKey
+		return true
 	#($ document).keydown (e) ->
 
 $ init