lots of things, most importantly (de)serialization

3 files changed, 199 insertions, 44 deletions

diff --git a/grapher/script.js b/grapher/script.js
index 50d1055..a9ec156 100644
--- a/grapher/script.js
+++ b/grapher/script.js
@@ -1,3 +1,39 @@
+/*
+Serialization format:
+
+{
+	"chips": [
+		{
+			"GUID": String,
+			"pos": {
+				"x":    Number,
+				"y":    Number
+			},
+			"to": {
+				<See the 'chip.currentOverrides' property>
+			}
+		}
+	],
+
+	"connections": [
+		{
+			"i": {
+				"chipidx": Number,
+				"portidx": Number
+			},
+
+			o: {
+				"chipidx": Number,
+				"portidx": Number
+			}
+		}
+	]
+}
+
+
+*/
+
+
 var v2data;
 var graph;
 var searcher;
@@ -8,8 +44,8 @@ const chips = [];
 /*
 [
 	{
-		i: func() -> {x:Number, y:Number} | <div>,
-		o: func() -> {x:Number, y:Number} | <div>
+		i: {x:Number, y:Number} | <div>,
+		o: {x:Number, y:Number} | <div>
 	}
 ]
 */
@@ -65,13 +101,14 @@ function appendTypeUI(chip) {
 	for(const key of Object.keys(chip.typeInfo)) {
 		data.push(`${key}: `);
 		let m = newEl('select', 'typeSelect');
+		m.classList.add(key);
 		m.addEventListener('change', e => {
 			if (e.target.value) chip.currentOverrides[key] = e.target.value;
 			else delete chip.currentOverrides[key]
 
-			delConnections(chip.el.children[0].children[0]);
-			chip.el.children[0].children[0].remove();
-			chip.el.children[0].prepend(generateChipHTML(chip.nd, chip.currentOverrides));
+			delConnections(chip.el.querySelector('.chip'));
+			chip.el.querySelector('.chip').remove();
+			chip.el.querySelector('.selUI').prepend(generateChipHTML(chip.nd, chip.currentOverrides));
 		});
 
 		for(const type of chip.typeInfo[key]) {
@@ -97,6 +134,139 @@ function delConnections(el) {
 	connections.push(...tmp);
 }
 
+function newChip(GUID) {
+	const types = {};
+	const typeParams = v2data.Nodes[GUID].NodeDescs[0].ReadonlyTypeParams;
+	for (const desc of Object.keys(typeParams))
+		types[desc] = [
+			`${desc}: ${typeParams[desc]}`,
+			...(typeParams[desc] == 'any' ? allTypes : typeParams[desc].match(/^\((.+)\)$/)[1].split(' | '))
+		];
+			
+	const ne = newEl('div', 'chipbox');
+	const chipcontainer = newEl('div', 'selUI');
+	chipcontainer.append(generateChipHTML(v2data.Nodes[GUID].NodeDescs));
+	ne.append(chipcontainer);
+	graph.append(ne);
+	
+	let newchipx = -graphPos.x + (graph.getClientRects()[0].width  / 2) - (ne.getClientRects()[0].width  / 2);
+	let newchipy = -graphPos.y + (graph.getClientRects()[0].height / 2) - (ne.getClientRects()[0].height / 2);
+	ne.style.setProperty('--chipOffsetX', newchipx);
+	ne.style.setProperty('--chipOffsetY', newchipy);
+
+	const chip = {
+		el: ne,
+		typeInfo: types,
+		currentOverrides: {},
+		nd: v2data.Nodes[GUID].NodeDescs,
+		GUID: GUID,
+	};
+	
+	appendTypeUI(chip);
+	chips.push(chip);
+
+	return chip;
+}
+function newChipHandler({GUID}) {
+	newChip(GUID);
+}
+
+function serializeGraph() {
+	const ret = {
+		chips: [],
+		connections: []
+	};
+
+	for (const chip of chips) {
+		let x = Number(chip.el.style.getPropertyValue('--chipOffsetX'));
+		let y = Number(chip.el.style.getPropertyValue('--chipOffsetY'));
+		
+		ret.chips.push({
+			GUID: chip.GUID,
+			pos: {
+				x: isNaN(x) ? 0 : x,
+				y: isNaN(y) ? 0 : y
+			},
+			to: chip.currentOverrides
+		})
+	}
+
+	for(const con of connections) {
+		if ((con.i instanceof Node) && (con.o instanceof Node)) {
+			const sCon = {
+				i: {
+					chipidx: -1,
+					portidx: -1
+				},
+
+				o: {
+					chipidx: -1,
+					portidx: -1
+				}
+			}
+			for (const key of Object.keys(chips)) {
+				if (chips[key].el.contains(con.i)) {
+					sCon.i.chipidx = Number(key);
+					sCon.i.portidx = Array.from(chips[key].el.querySelector('.input').children).indexOf(con.i) / 2
+				}
+				if (chips[key].el.contains(con.o)) {
+					sCon.o.chipidx = Number(key);
+					sCon.o.portidx = Array.from(chips[key].el.querySelector('.output').children).indexOf(con.o) / 2
+				}
+			}
+			ret.connections.push(sCon);
+		}
+	}
+	return ret;
+}
+
+function deserializeGraph(graph) {
+	chips.length = 0;
+	for (const chip of graph.chips) {
+		const newchip = newChip(chip.GUID);
+
+		newchip.el.style.setProperty('--chipOffsetX', chip.pos.x);
+		newchip.el.style.setProperty('--chipOffsetY', chip.pos.y);
+
+		newchip.currentOverrides = chip.to;
+
+		for (const ov of Object.entries(chip.to)) {
+			const selector = newchip.el.querySelector(`select.${ov[0]}`);
+			if (!selector) {console.warn(`unused type override in deserialization ${ov[0]}: ${ov[1]}`); continue;}
+			if (![...selector.options].map(opt => opt.value).includes(ov[1])) {console.warn(`invalid type override in deserialization ${ov[0]}: ${ov[1]}`); continue;}
+			selector.value = ov[1];
+		}
+
+		newchip.el.querySelector('.chip').remove();
+		newchip.el.querySelector('.selUI').prepend(generateChipHTML(newchip.nd, newchip.currentOverrides));
+	}
+
+	for (const con of graph.connections) {
+		const inputschip = chips[con.i.chipidx];
+		if(!inputschip) {console.warn(`invalid connection ${JSON.stringify(con)}`); continue;}
+		const input = inputschip.el.querySelector('.input').children[con.i.portidx * 2];
+		if(!input) {console.warn(`invalid connection ${JSON.stringify(con)}`); continue;}
+
+		const outputschip = chips[con.o.chipidx];
+		if(!outputschip) {console.warn(`invalid connection ${JSON.stringify(con)}`); continue;}
+		const output = outputschip.el.querySelector('.output').children[con.o.portidx * 2];
+		if(!output) {console.warn(`invalid connection ${JSON.stringify(con)}`); continue;}
+
+		connections.push({
+			i: input,
+			o: output
+		});
+	}
+}
+
+var locked = false;
+
+function lockGraph() {
+	locked = true;
+	document.getElementById('searchbox').remove();
+	document.getElementById('helpbox')  .remove();
+}
+
 window.onload = async function() {
 	graph = document.getElementById("graph");
 	searcher = document.getElementById("searcher");
@@ -106,42 +276,22 @@ window.onload = async function() {
 	allTypes.push(...ListAllTypes(v2data.Nodes).sort((a,b) => (a.toLowerCase() > b.toLowerCase()) ? 1 : -1));
 
 	window.onmessage = function({data}) {
-		if (data.type == 'newChip') {
-			const types = {};
-			const typeParams = v2data.Nodes[data.GUID].NodeDescs[0].ReadonlyTypeParams;
-			for (const desc of Object.keys(typeParams))
-				types[desc] = [
-					`${desc}: ${typeParams[desc]}`,
-					...(typeParams[desc] == 'any' ? allTypes : typeParams[desc].match(/^\((.+)\)$/)[1].split(' | '))
-				];
-			
-			const ne = newEl('div', 'chipbox');
-			const chipcontainer = newEl('div', 'selUI');
-			chipcontainer.append(generateChipHTML(v2data.Nodes[data.GUID].NodeDescs));
-			ne.append(chipcontainer);
-			graph.append(ne);
-			
-			let newchipx = -graphPos.x + (graph.getClientRects()[0].width  / 2) - (ne.getClientRects()[0].width  / 2);
-			let newchipy = -graphPos.y + (graph.getClientRects()[0].height / 2) - (ne.getClientRects()[0].height / 2);
-			ne.style.setProperty('--chipOffsetX', newchipx);
-			ne.style.setProperty('--chipOffsetY', newchipy);
-
-
-			const chip = {
-				el: ne,
-				typeInfo: types,
-				currentOverrides: [],
-				nd: v2data.Nodes[data.GUID].NodeDescs
-			};
-			
-			appendTypeUI(chip);
-			chips.push(chip);
-			console.log(types);
+		switch(data.type) {
+		case 'newChip':
+			newChipHandler(data);
+			break;
+		case 'loadGraph':
+			loadGraphHandler(data);
+			break;
+		case 'lock':
+			lockGraph();
+			break;
 		}
+
 	}
 
 	graph.addEventListener('mousedown', function(e) {
-		if (e.buttons & 1) {
+		if ((e.buttons & 1) && !locked) {
 			start = performance.now();
 			targ = e.target;
 			if (e.target.parentElement.matches('.input')) {
@@ -177,7 +327,7 @@ window.onload = async function() {
 	});
 
 	rootel.addEventListener("mouseup", e => {
-		if (e.button == 0) {
+		if ((e.button == 0) && !locked) {
 			let newCon;
 			switch (mode) {
 			case 'wire_i-o':
@@ -195,7 +345,7 @@ window.onload = async function() {
 					connections.push(newCon);
 				break;
 			case 'drag':
-				if ((performance.now() - start) < 150 && !targ.children[0].matches('#selected')) {
+				if ((performance.now() - start) < 150 && !targ.querySelector('.selUI').matches('#selected')) {
 					switchID(targ.children[0], 'selected')
 				}
 				break;
@@ -251,6 +401,9 @@ window.onload = async function() {
 		case 'Delete':
 			deleteSel();
 			break;
+		case 'KeyS':
+			console.log(serializeGraph());
+			break;
 		}
 	});
 
diff --git a/grapher/style.css b/grapher/style.css
index 650faba..35fe3bb 100644
--- a/grapher/style.css
+++ b/grapher/style.css
@@ -41,18 +41,18 @@ iframe#searcher {
 }
 
 div#graph {
+	width:100vw;
 	--graphOffsetX: 0;
 	--graphOffsetY: 0;
 	grid-area: graph;
-	width: calc(100vw - 13cm);
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAA3SURBVDhPY2RgYPgPxBQDZhEZMM0EJqkIRg2kHIwaSDkYNZByMGog5YARWNJSpcSGASq7kIEBAL94Aos8Ra5sAAAAAElFTkSuQmCC");
 	background-repeat: repeat;
 	background-position-x: calc(var(--graphOffsetX) * 1px);
 	background-position-y: calc(var(--graphOffsetY) * 1px);
 }
 
-#searchbox:not([open]) + div#graph {
-	width:100vw !important;
+#searchbox[open] + div#graph {
+	width: calc(100vw - 13cm);
 }
 
 #searchbox:not([open]) > summary::marker {
@@ -90,6 +90,7 @@ div#graph {
 }
 
 div.chipbox {
+	z-index: 100;
 	--chipOffsetX: 0;
 	--chipOffsetY: 0;
 	position: absolute;
@@ -117,7 +118,7 @@ canvas {
 	bottom:0;
 	left:0;
 	right:0;
-	z-index: 100;
+	z-index: 10;
 
 	pointer-events: none;
 }
@@ -153,6 +154,7 @@ canvas {
 	right: 2rem;
 	background: #0000;
 	border-radius: 0;
+	z-index: 100;
 }
 
 #helpbox > div {
diff --git a/what.html b/what.html
index 29e4f7e..93575a7 100644
--- a/what.html
+++ b/what.html
@@ -81,6 +81,6 @@
 	</style>
 </head>
 <body>
-	<canvas id="canvas"></canvas>
+	<canvas id="canvas"></canvas>{
 </body>
 </html>
\ No newline at end of file