X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=main.coffee;h=a1c09c5a1f29903ade7c7de81c65fd8f6b7aa3b3;hp=3ed08db238cf25e350972065ca6660d996341d05;hb=d7d9898f16c11d98423ff35278a123813cf8393e;hpb=67a786e6d0b589a4ae7e2833d3f1d5d1963a5edc

diff --git a/main.coffee b/main.coffee
index 3ed08db..a1c09c5 100644
--- a/main.coffee
+++ b/main.coffee
@@ -29,8 +29,6 @@ STATES = {
 	DRAGGING: { txt: 'dragging' }
 	EDITING:  { txt: 'editing' }
 }
-TYPE_WIDGET = 1
-TYPE_CONTROL = 2
 
 # json (compiled to javascript and minified) is ~8% smaller than the resulting xml
 json_to_svg = (json) ->
@@ -46,6 +44,53 @@ json_to_svg = (json) ->
 				el.setAttribute k, v
 	return el
 
+resizer_nw = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width - dxy.x, h: widget.height - dxy.y
+		widget.move x: widget.x + dxy.x, y: widget.y + dxy.y
+resizer_n = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width, h: widget.height - dxy.y
+		widget.move x: widget.x, y: widget.y + dxy.y
+resizer_ne = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width + dxy.x, h: widget.height - dxy.y
+		widget.move x: widget.x, y: widget.y + dxy.y
+resizer_e = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width + dxy.x, h: widget.height
+resizer_se = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width + dxy.x, h: widget.height + dxy.y
+resizer_s = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width, h: widget.height + dxy.y
+resizer_sw = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width - dxy.x, h: widget.height + dxy.y
+		widget.move x: widget.x + dxy.x, y: widget.y
+resizer_w = (widget) ->
+	return (dxy) ->
+		widget.resize w: widget.width - dxy.x, h: widget.height
+		widget.move x: widget.x + dxy.x, y: widget.y
+resizers = [
+	resizer_nw
+	resizer_n
+	resizer_ne
+	resizer_e
+	resizer_se
+	resizer_s
+	resizer_sw
+	resizer_w
+]
+resizer_shapes = [
+	-> return "M#{@x - 5} #{@y - 5}h6l-2 2 4 4 2 -2v6h-6l2-2-4-4-2 2z"
+	-> return "M #{@x},#{@y - 7} l 4,4 -2.5,0 0,5 2.5,0 -4,4 -4,-4 2.5,0 0,-5 -2.5,0 z"
+	-> return "M#{@x + 5} #{@y - 5}v6l-2-2-4 4 2 2h-6v-6l2 2 4-4-2-2z"
+	-> return "M #{@x - 7},#{@y} l 4,-4 0,2.5 5,0 0,-2.5 4,4 -4,4 0,-2.5 -5,0 0,2.5 z"
+]
+shape_node_move = -> "M#{@x} #{@y - 9}l-2.5 4.5h2v2.404a2.156 2.156 0 0 0-1.596 1.596h-2.404v-2l-4.5 2.5 4.5 2.5v-2h2.404a2.156 2.156 0 0 0 1.596 1.596v2.404h-2l2.5 4.5 2.5-4.5h-2v-2.404a2.156 2.156 0 0 0 1.596-1.596h2.404v2l4.5-2.5-4.5-2.5v2h-2.404a2.156 2.156 0 0 0-1.596-1.596v-2.404h2l-2.5-4.5z"
+
 next_widget_id = 0
 # public vars: x, y, width, height, el
 class Visible
@@ -66,9 +111,9 @@ class Visible
 		if @hover
 			css_class += " hover"
 		@el.setAttribute 'class', css_class
-	set_hover: (tf) ->
-		if tf != @hover
-			@hover = tf
+	set_hover: (bool) ->
+		if bool != @hover
+			@hover = bool
 			@update_class()
 	move: (xy) -> # just move
 		@x = xy.x
@@ -83,7 +128,6 @@ class Visible
 class Control extends Visible
 	constructor: (args) ->
 		super args
-		@type = TYPE_CONTROL
 		@on_drag = args.drag
 		@on_destruct = args.done ? null
 	destruct: ->
@@ -96,15 +140,13 @@ class Control extends Visible
 		dx = xy.x - @x
 		dy = xy.y - @y
 		return dx * dx + dy * dy
-
-class ControlPoint extends Control
+class ControlPath extends Control
 	constructor: (args) ->
 		super args
 		@css_class = 'control_point'
-		@el = json_to_svg circle:
-			cx: @x + 1
-			cy: @y + 1
-			r: 6
+		@make_path = args.shape
+		@el = json_to_svg path:
+			d: @make_path()
 			class: 'control_point normal'
 		@svg.appendChild @el
 	destruct: ->
@@ -113,15 +155,13 @@ class ControlPoint extends Control
 			@svg.removeChild @el
 	move: (args) ->
 		super args
-		@el.setAttribute 'cx', @x
-		@el.setAttribute 'cy', @y
+		@el.setAttribute 'd', @make_path()
 
 class Widget extends Visible
 	#sub-classes are expected to implement all of these:
 	constructor: (args) ->
 		super args
 		@controls = []
-		@type = TYPE_WIDGET
 	destruct: ->
 		@kill_controls()
 	clone: ->
@@ -129,7 +169,6 @@ class Widget extends Visible
 	make_controls: -> # create controls, return them
 		return []
 	kill_controls: ->
-		console.log 'kill_controls'
 		for c in @controls
 			c.destruct()
 		@controls = []
@@ -163,6 +202,14 @@ class RectWidget extends Widget
 			@svg.removeChild @el
 	clone: ->
 		return new RectWidget @
+	as_array: ->
+		return [@x, @y, @width, @height]
+	from_array: (args, a) ->
+		args.x = a[0]
+		args.y = a[1]
+		args.width = a[2]
+		args.height = a[3]
+		return new RectWidget args
 	set_state: (state) ->
 		super state
 		@update_class()
@@ -170,6 +217,7 @@ class RectWidget extends Widget
 		super args
 		@el.setAttribute 'x', @x + 1
 		@el.setAttribute 'y', @y + 1
+		@reposition_controls()
 	proximity: (xy) -> # return the square of the distance to your visible bits
 		x = xy.x
 		y = xy.y
@@ -194,31 +242,202 @@ class RectWidget extends Widget
 			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
+		# "hit" anything inside
+		#if in_x and in_y and prox > PROX_MAX
+		#	prox = PROX_MAX - 1
 		return prox
 	resize: (wh) ->
+		dw = wh.w - @width
+		dh = wh.h - @height
 		@width = wh.w
-		@el.setAttribute 'width', @width
+		@el.setAttribute 'width', @width - 2
 		@height = wh.h
-		@el.setAttribute 'height', @height
+		@el.setAttribute 'height', @height - 2
+		@reposition_controls()
+	reposition_controls: ->
 		if @controls.length > 1
-			@controls[1].move x: @x + @width, y: @y + @height
+			positions = @control_positions()
+			for i in [0...positions.length]
+				@controls[i].move x: positions[i].x, y: positions[i].y
+	control_positions: ->
+		gap = 7
+		mgap = 9
+		w2p = Math.floor(@width / 2) + 0.5
+		h2p = Math.floor(@height / 2) + 0.5
+		return [
+			{ x: @x - gap, y: @y - gap }
+			{ x: @x + w2p, y: @y - mgap }
+			{ x: @x + @width + gap, y: @y - gap }
+			{ x: @x + @width + mgap, y: @y + h2p }
+			{ x: @x + @width + gap, y: @y + @height + gap }
+			{ x: @x + w2p, y: @y + @height + mgap }
+			{ x: @x - gap, y: @y + @height + gap }
+			{ x: @x - mgap, y: @y + h2p }
+		]
 	make_controls: (args) -> # create controls, return them
-		console.log 'make_controls'
 		if @controls.length > 0
-			console.log "warning: re-adding controls"
+			if console?.log?
+				console.log "warning: re-adding controls"
 			@kill_controls()
-		w = @
-		@controls = [
-			new ControlPoint svg: @svg, x: @x, y: @y, done: args.done, drag: (dxy) ->
-				w.resize w: w.width - dxy.x, h: w.height - dxy.y
-				w.move x: w.x + dxy.x, y: w.y + dxy.y
-			new ControlPoint svg: @svg, x: @x + @width, y: @y + @height, done: args.done, drag: (dxy) ->
-				w.resize w: w.width + dxy.x, h: w.height + dxy.y
-		]
+		positions = @control_positions()
+		for i in [0...positions.length]
+			@controls.push new ControlPath {
+				svg: @svg
+				x: positions[i].x
+				y: positions[i].y
+				done: args.done
+				drag: resizers[i] @
+				shape: resizer_shapes[i % resizer_shapes.length]
+			}
+		return @controls
+
+class PolylineWidget extends Widget
+	constructor: (args) ->
+		super args
+		@css_class = 'polyline'
+		@nodes = []
+		for n in args.nodes
+			@nodes.push x: n.x, y: n.y
+		@el = json_to_svg path:
+			d: @my_path_d()
+			class: 'polyline normal'
+		@svg.appendChild @el
+	destruct: ->
+		super()
+		if @el?
+			@svg.removeChild @el
+	as_array: ->
+		ret = []
+		for n in @nodes
+			ret.push @x + n.x
+			ret.push @y + n.y
+		return ret
+	from_array: (args, a) ->
+		args.x = a[0]
+		args.y = a[1]
+		args.nodes = []
+		while a.length
+			xy = {}
+			xy.x = a.shift() - args.x
+			xy.y = a.shift() - args.y
+			args.nodes.push xy
+		return new PolylineWidget args
+	clone: ->
+		return new PolylineWidget @
+	my_path_d: ->
+		ret = ''
+		for n in @nodes
+			if ret is ''
+				ret += 'M'
+			else
+				ret += 'L'
+			ret += n.x + @x
+			ret += ' '
+			ret += n.y + @y
+		return ret
+	set_state: (state) ->
+		super state
+		@update_class()
+	move: (args) ->
+		super args
+		@el.setAttribute 'd', @my_path_d()
+		@reposition_controls()
+	proximity: (xy) -> # return the square of the distance to your visible bits
+		prox = PROX_TOO_FAR
+		for n, i in @nodes
+			dx = @x + n.x - xy.x
+			dy = @y + n.y - xy.y
+			p = dx * dx + dy * dy
+			if p < prox
+				prox = p
+			if i > 0
+				l1x = @x + @nodes[i-1].x
+				l1y = @y + @nodes[i-1].y
+				l2x = @x + @nodes[i].x
+				l2y = @y + @nodes[i].y
+				ldx = l2x - l1x
+				ldy = l2y - l1y
+				if ldx is 0 # vertical line
+					if (xy.y < l1y) is (xy.y < l2y)
+						continue
+					dx = l1x - xy.x
+					p = dx * dx
+				else if ldy is 0 # horizontal line
+					if (xy.x < l1x) is (xy.x < l2x)
+						continue
+					dy = l1y - xy.y
+					p = dy * dy
+				else # slanty line
+					# https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line
+					a = ldy
+					b = -1 * ldx
+					c = l2x * l1y - l2y * l1x
+					y_on_line = (a * (a * xy.y - b * xy.x) - b * c) / (a * a + b * b)
+					if (y_on_line < l1y) is (y_on_line < l2y)
+						continue
+					p = (a * xy.x + b * xy.y + c) / Math.sqrt(a * a + b * b)
+					p *= p
+
+				if p < prox
+					prox = p
+		return prox
+	resize: (wh) ->
+		# FIXME (apply to more than just 2nd node)
+		@nodes[1].x = wh.w
+		@nodes[1].y = wh.h
+		@width = wh.w
+		@height = wh.h
+		@el.setAttribute 'd', @my_path_d()
+		@reposition_controls()
+		return
+	node_dragger: (i) ->
+		if i is 0
+			return (dxy) =>
+				for j in [1...@nodes.length]
+					@nodes[j].x -= dxy.x
+					@nodes[j].y -= dxy.y
+				@move x: @x + dxy.x, y: @y + dxy.y
+		return (dxy) =>
+			@nodes[i].x += dxy.x
+			@nodes[i].y += dxy.y
+			@el.setAttribute 'd', @my_path_d()
+			@reposition_controls()
+	reposition_controls: ->
+		if @controls.length > 1
+			positions = @control_positions()
+			for i in [0...positions.length]
+				@controls[i].move x: positions[i].x, y: positions[i].y
+		return
+	control_positions: ->
+		ret = []
+		for n in @nodes
+			ret.push x: @x + n.x, y: @y + n.y
+		return ret
+	make_controls: (args) -> # create controls, return them
+		if @controls.length > 0
+			if console?.log?
+				console.log "warning: re-adding line controls"
+			@kill_controls()
+		positions = @control_positions()
+		for i in [0...positions.length]
+			@controls.push new ControlPath {
+				svg: @svg
+				x: positions[i].x
+				y: positions[i].y
+				done: args.done
+				drag: @node_dragger i
+				shape: shape_node_move
+			}
 		return @controls
 
+CSS_CLASS_TO_PICKLE_TYPE = {
+	box: '0'
+	polyline: '1'
+}
+PICKLE_TYPE_TO_WIDGET_CLASS = [
+	RectWidget
+	PolylineWidget
+]
 # called automatically on domcontentloaded
 init = ->
 	svg_offset = null
@@ -235,7 +454,7 @@ init = ->
 		]
 	svg.appendChild json_to_svg style:
 		type: 'text/css'
-		contents: '.box.normal,.box.selected{filter: url(#crayon)}'
+		contents: '.box.normal,.polyline.normal{filter: url(#crayon)}'
 
 	# create canvas border
 	svg.appendChild json_to_svg rect:
@@ -246,19 +465,21 @@ init = ->
 		class: 'canvas_border'
 
 	supply = {}
-	for args, i in [
-		{ width: 40, height: 40 }
-		{ width: 12, height: 50 }
-		{ width: 70, height: 12 }
-	]
-		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
-		}
-		supply[widget.id] = widget
+	supply_count = 0
+	supply_add = (type, args) ->
+		args.x ?= 0
+		args.y ?= 0
+		args.x += 30 + supply_count * 90
+		args.y += (supply_height - 50) / 2
+		args.svg = svg
+		w = new type args
+		supply[w.id] = w
+		supply_count += 1
+	supply_add RectWidget, width: 50, height: 50
+	supply_add PolylineWidget, y: 25, nodes: [{x: 0, y: 0}, {x: 50, y: 0}]
+	supply_add PolylineWidget, x: 25, nodes: [{x: 0, y: 0}, {x: 0, y: 50}]
+	supply_add PolylineWidget, x: 10, nodes: [{x: 0, y: 0}, {x: 15, y: 50}, {x: 30, y: 0}]
+	supply_add PolylineWidget, y: 50, nodes: [{x: 0, y: 0}, {x: 17, y: -50}, {x: 33, y: 0}, {x: 50, y: -50}]
 
 	# editor state
 	controls_layer = { all: {}, selected: {} }
@@ -270,6 +491,65 @@ init = ->
 	drag_from = x: 0, y: 0 # mouse was here at last frame of drag
 	shift_key_down = false
 
+	lc = "abcdefghijklmnopqrstuvwxyz"
+	uc = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+	cc_lca = lc.charCodeAt 0
+	cc_lcz = lc.charCodeAt 25
+	cc_uca = uc.charCodeAt 0
+	cc_ucz = uc.charCodeAt 25
+	cc_0 = '0'.charCodeAt 0
+	cc_9 = '9'.charCodeAt 0
+	# takes an array of positive integers, and encodes it as a string
+	pickle = (a) ->
+		ret = ''
+		for i in a
+			cs = lc
+			r = ''
+			while i > 0 or r is ''
+				digit = i % cs.length
+				i -= digit
+				i /= cs.length
+				r = cs.charAt(digit) + r
+				cs = uc
+			ret += r
+		return ret
+	pickle_widgets = ->
+		ret = '0' # version of this encoding scheme
+		for id, w of widget_layer.all
+			if CSS_CLASS_TO_PICKLE_TYPE[w.css_class]?
+				ret += CSS_CLASS_TO_PICKLE_TYPE[w.css_class]
+				ret += pickle w.as_array()
+		return ret
+	save = ->
+		window.location.hash = pickle_widgets()
+	load = (str) ->
+		return if str.charAt(1) isnt '0'
+		wtype = null
+		args = []
+		ii = 0
+		load_1 = (next_type) ->
+			unless wtype?
+				if next_type?
+					wtype = next_type
+				return
+			w = PICKLE_TYPE_TO_WIDGET_CLASS[wtype]::from_array svg: svg, args
+			widget_layer.all[w.id] = w
+			wtype = next_type
+			args = []
+			ii = 0
+		for i in [2...str.length]
+			c = str.charCodeAt(i)
+			if cc_0 <= c <= cc_9
+				load_1 c - cc_0
+			else if cc_lca <= c <= cc_lcz
+				ii *= lc.length
+				ii += c - cc_lca
+				args.push ii
+				ii = 0
+			else if cc_uca <= c <= cc_ucz
+				ii *= lc.length
+				ii += c - cc_uca
+		load_1 null
 	stop_editing = ->
 		if widget_layer.editing
 			widget_layer.editing.kill_controls()
@@ -359,11 +639,11 @@ init = ->
 			dragging = true
 			drag_layer = hit.layer
 			drag_from = xy
-			console.log hit
 		else
 			deselect_all widget_layer
 		return
 	mouseup = (e) ->
+		save()
 		mousemove e
 		if dragging
 			selected_count = 0
@@ -397,10 +677,9 @@ init = ->
 				w.drag x: rel_x, y: rel_y
 		else
 			hit = closest_in_layers xy
-			return unless hit?
-			return if hit.s is hovered
-			if hovered
+			if hovered and hovered isnt hit?.s
 				hovered.set_hover false
+			return unless hit?
 			hovered = hit.s
 			hovered.set_hover true
 		return
@@ -418,4 +697,7 @@ init = ->
 		return true
 	#($ document).keydown (e) ->
 
+	if window.location.hash
+		load window.location.hash
+
 $ init