Node network subgraph editing (#1750)

* Breadcrumb visualization, nested network consistency, create definitions for Merge internal nodes

* Add index to network inputs, remove imports usage from flatten network

* Replace NodeOutput with NodeInput::Node

* Fully remove imports field, remove unnecessary identity nodes, move Output node to encapsulating network

* Replace previous_outputs with root_node, fix adding artboard/layer to empty network

* Import/Export UI nodes

* Display input/output types dynamically from compiled network

* Add LayerNodeIdentifer::ROOT_PARENT

* Prevent .to_node() on ROOT_PARENT

* Separate NodeGraphMessage and GraphOperationMessage

* General bug fixes with nested networks

* Change layer color, various bug fixes and improvements

* Fix disconnect and set node input for proto nodes and UI export node

* Dashed line to export for previewed node

* Fix deleting proto nodes and nodes that feed into export

* Allow modifications to nodes outside of nested network

* Get network from Node Id parameter

* Change root_node to previous_root_node

* Get TaggedValue from proto node implementation type when disconnecting

* Improve preview functionality and state

* Artboard position and delete children fix

* Name inputs/outputs based on DocumentNodeDefinition or type, fix new artboard/layer insertion

* replace "Link" with "Wire", adjust previewing

* Various bug fixes and improvements

* Modify Sample and Poisson-Disk points, fix incorrect input index and deleting currently viewed node

* Open demo artwork

* Fix opening already upgraded documents and refactor FrontendGraphDataType usages

* Fix deleting within network and other bugs

* Get default node input from compiled network when copying, fix previews, tests, demo artwork

* Code cleanup

* Hide EditorApi and add a comment describing unresolved Import node input types

* Code review

* Replace placeholder ROOT_PARENT NodeId with std::u64::MAX

* Breadcrumb padding

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/Editor.svelte

@@ -107,14 +107,14 @@
 
 		--color-data-general: #c5c5c5;
 		--color-data-general-dim: #767676;
-		--color-data-number: #cbbab4;
-		--color-data-number-dim: #87736b;
 		--color-data-raster: #e4bb72;
 		--color-data-raster-dim: #8b7752;
-		--color-data-vector: #65bbe5;
-		--color-data-vector-dim: #4b778c;
-		--color-data-color: #dce472;
-		--color-data-color-dim: #898d55;
+		--color-data-vectordata: #65bbe5;
+		--color-data-vectordata-dim: #4b778c;
+		--color-data-number: #cbbab4;
+		--color-data-number-dim: #87736b;
+		--color-data-graphic: #6b84e8;
+		--color-data-graphic-dim: #4a557b;
 		--color-data-artboard: #70a898;
 		--color-data-artboard-dim: #3a6156;
 

frontend/src/components/panels/Document.svelte

@@ -614,7 +614,7 @@
 								}
 
 								.color-vector {
-									fill: var(--color-data-vector);
+									fill: var(--color-data-vectordata);
 								}
 
 								.color-raster {

frontend/src/components/panels/Layers.svelte

@@ -129,8 +129,8 @@
 		return currentFolder;
 	}
 
-	function toggleNodeVisibility(id: bigint) {
-		editor.handle.toggleNodeVisibility(id);
+	function toggleNodeVisibilityLayerPanel(id: bigint) {
+		editor.handle.toggleNodeVisibilityLayerPanel(id);
 	}
 
 	function toggleLayerLock(id: bigint) {
@@ -430,7 +430,7 @@
 					<IconButton
 						class={"status-toggle"}
 						classes={{ inactive: !listing.entry.parentsVisible }}
-						action={(e) => (toggleNodeVisibility(listing.entry.id), e?.stopPropagation())}
+						action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
 						size={24}
 						icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
 						hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}

frontend/src/components/views/Graph.svelte

@@ -6,17 +6,17 @@
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import type { IconName } from "@graphite/utility-functions/icons";
 	import type { Editor } from "@graphite/wasm-communication/editor";
-	import type { FrontendNodeLink, FrontendNodeType, FrontendNode, FrontendGraphInput, FrontendGraphOutput } from "@graphite/wasm-communication/messages";
+	import type { FrontendNodeWire, FrontendNodeType, FrontendNode, FrontendGraphInput, FrontendGraphOutput, FrontendGraphDataType } from "@graphite/wasm-communication/messages";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import RadioInput from "@graphite/components/widgets/inputs/RadioInput.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-
 	const WHEEL_RATE = (1 / 600) * 3;
 	const GRID_COLLAPSE_SPACING = 10;
 	const GRID_SIZE = 24;
@@ -26,7 +26,7 @@
 	const editor = getContext<Editor>("editor");
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
-	type LinkPath = { pathString: string; dataType: string; thick: boolean };
+	type WirePath = { pathString: string; dataType: FrontendGraphDataType; thick: boolean; dashed: boolean };
 
 	let graph: HTMLDivElement | undefined;
 	let nodesContainer: HTMLDivElement | undefined;
@@ -41,13 +41,13 @@
 	let boxSelection: Box | undefined = undefined;
 	let previousSelection: bigint[] = [];
 	let selectIfNotDragged: undefined | bigint = undefined;
-	let linkInProgressFromConnector: SVGSVGElement | undefined = undefined;
-	let linkInProgressToConnector: SVGSVGElement | DOMRect | undefined = undefined;
+	let wireInProgressFromConnector: SVGSVGElement | undefined = undefined;
+	let wireInProgressToConnector: SVGSVGElement | DOMRect | undefined = undefined;
 	// TODO: Using this not-complete code, or another better approach, make it so the dragged in-progress connector correctly handles showing/hiding the SVG shape of the connector caps
-	// let linkInProgressFromLayerTop: bigint | undefined = undefined;
-	// let linkInProgressFromLayerBottom: bigint | undefined = undefined;
-	let disconnecting: { nodeId: bigint; inputIndex: number; linkIndex: number } | undefined = undefined;
-	let nodeLinkPaths: LinkPath[] = [];
+	// let wireInProgressFromLayerTop: bigint | undefined = undefined;
+	// let wireInProgressFromLayerBottom: bigint | undefined = undefined;
+	let disconnecting: { nodeId: bigint; inputIndex: number; wireIndex: number } | undefined = undefined;
+	let nodeWirePaths: WirePath[] = [];
 	let searchTerm = "";
 	let contextMenuOpenCoordinates: { x: number; y: number } | undefined = undefined;
 	let toggleDisplayAsLayerNodeId: bigint | undefined = undefined;
@@ -77,8 +77,8 @@
 		appearAboveMouse = contextMenuY > height - ADD_NODE_MENU_HEIGHT;
 	})();
 
-	$: linkPathInProgress = createLinkPathInProgress(linkInProgressFromConnector, linkInProgressToConnector);
-	$: linkPaths = createLinkPaths(linkPathInProgress, nodeLinkPaths);
+	$: wirePathInProgress = createWirePathInProgress(wireInProgressFromConnector, wireInProgressToConnector);
+	$: wirePaths = createWirePaths(wirePathInProgress, nodeWirePaths);
 
 	function calculateGridSpacing(scale: number): number {
 		const dense = scale * GRID_SIZE;
@@ -129,21 +129,21 @@
 		return Array.from(categories);
 	}
 
-	function createLinkPathInProgress(linkInProgressFromConnector?: SVGSVGElement, linkInProgressToConnector?: SVGSVGElement | DOMRect): LinkPath | undefined {
-		if (linkInProgressFromConnector && linkInProgressToConnector && nodesContainer) {
-			const from = connectorToNodeIndex(linkInProgressFromConnector);
-			const to = linkInProgressToConnector instanceof SVGSVGElement ? connectorToNodeIndex(linkInProgressToConnector) : undefined;
+	function createWirePathInProgress(wireInProgressFromConnector?: SVGSVGElement, wireInProgressToConnector?: SVGSVGElement | DOMRect): WirePath | undefined {
+		if (wireInProgressFromConnector && wireInProgressToConnector && nodesContainer) {
+			const from = connectorToNodeIndex(wireInProgressFromConnector);
+			const to = wireInProgressToConnector instanceof SVGSVGElement ? connectorToNodeIndex(wireInProgressToConnector) : undefined;
 
-			const linkStart = $nodeGraph.nodes.find((n) => n.id === from?.nodeId)?.isLayer || false;
-			const linkEnd = ($nodeGraph.nodes.find((n) => n.id === to?.nodeId)?.isLayer && to?.index == 0) || false;
-			return createWirePath(linkInProgressFromConnector, linkInProgressToConnector, linkStart, linkEnd);
+			const wireStart = $nodeGraph.nodes.find((n) => n.id === from?.nodeId)?.isLayer || false;
+			const wireEnd = ($nodeGraph.nodes.find((n) => n.id === to?.nodeId)?.isLayer && to?.index == 0) || false;
+			return createWirePath(wireInProgressFromConnector, wireInProgressToConnector, wireStart, wireEnd, false);
 		}
 		return undefined;
 	}
 
-	function createLinkPaths(linkPathInProgress: LinkPath | undefined, nodeLinkPaths: LinkPath[]): LinkPath[] {
-		const maybeLinkPathInProgress = linkPathInProgress ? [linkPathInProgress] : [];
-		return [...maybeLinkPathInProgress, ...nodeLinkPaths];
+	function createWirePaths(wirePathInProgress: WirePath | undefined, nodeWirePaths: WirePath[]): WirePath[] {
+		const maybeWirePathInProgress = wirePathInProgress ? [wirePathInProgress] : [];
+		return [...maybeWirePathInProgress, ...nodeWirePaths];
 	}
 
 	async function watchNodes(nodes: FrontendNode[]) {
@@ -152,38 +152,38 @@
 			if (!outputs[index]) outputs[index] = [];
 		});
 
-		await refreshLinks();
+		await refreshWires();
 	}
 
-	function resolveLink(link: FrontendNodeLink): { nodeOutput: SVGSVGElement | undefined; nodeInput: SVGSVGElement | undefined } {
-		const outputIndex = Number(link.linkStartOutputIndex);
-		const inputIndex = Number(link.linkEndInputIndex);
+	function resolveWire(wire: FrontendNodeWire): { nodeOutput: SVGSVGElement | undefined; nodeInput: SVGSVGElement | undefined } {
+		const outputIndex = Number(wire.wireStartOutputIndex);
+		const inputIndex = Number(wire.wireEndInputIndex);
 
-		const nodeOutputConnectors = outputs[$nodeGraph.nodes.findIndex((n) => n.id === link.linkStart)];
-		const nodeInputConnectors = inputs[$nodeGraph.nodes.findIndex((n) => n.id === link.linkEnd)] || undefined;
+		const nodeOutputConnectors = outputs[$nodeGraph.nodes.findIndex((n) => n.id === wire.wireStart)];
+		const nodeInputConnectors = inputs[$nodeGraph.nodes.findIndex((n) => n.id === wire.wireEnd)] || undefined;
 
 		const nodeOutput = nodeOutputConnectors?.[outputIndex] as SVGSVGElement | undefined;
 		const nodeInput = nodeInputConnectors?.[inputIndex] as SVGSVGElement | undefined;
 		return { nodeOutput, nodeInput };
 	}
 
-	async function refreshLinks() {
+	async function refreshWires() {
 		await tick();
 
-		const links = $nodeGraph.links;
-		nodeLinkPaths = links.flatMap((link, index) => {
-			const { nodeInput, nodeOutput } = resolveLink(link);
+		const wires = $nodeGraph.wires;
+		nodeWirePaths = wires.flatMap((wire, index) => {
+			const { nodeInput, nodeOutput } = resolveWire(wire);
 			if (!nodeInput || !nodeOutput) return [];
-			if (disconnecting?.linkIndex === index) return [];
+			if (disconnecting?.wireIndex === index) return [];
 
-			const linkStart = $nodeGraph.nodes.find((n) => n.id === link.linkStart)?.isLayer || false;
-			const linkEnd = ($nodeGraph.nodes.find((n) => n.id === link.linkEnd)?.isLayer && Number(link.linkEndInputIndex) == 0) || false;
+			const wireStart = $nodeGraph.nodes.find((n) => n.id === wire.wireStart)?.isLayer || false;
+			const wireEnd = ($nodeGraph.nodes.find((n) => n.id === wire.wireEnd)?.isLayer && Number(wire.wireEndInputIndex) == 0) || false;
 
-			return [createWirePath(nodeOutput, nodeInput.getBoundingClientRect(), linkStart, linkEnd)];
+			return [createWirePath(nodeOutput, nodeInput.getBoundingClientRect(), wireStart, wireEnd, wire.dashed)];
 		});
 	}
 
-	onMount(refreshLinks);
+	onMount(refreshWires);
 
 	function nodeIcon(nodeName: string): IconName {
 		const iconMap: Record<string, IconName> = {
@@ -195,24 +195,24 @@
 	function buildWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] {
 		if (!nodesContainer) return [];
 
-		const VERTICAL_LINK_OVERLAP_ON_SHAPED_CAP = 1;
+		const VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP = 1;
 
 		const containerBounds = nodesContainer.getBoundingClientRect();
 
 		const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + outputBounds.width - 1;
-		const outY = verticalOut ? outputBounds.y + VERTICAL_LINK_OVERLAP_ON_SHAPED_CAP : outputBounds.y + outputBounds.height / 2;
+		const outY = verticalOut ? outputBounds.y + VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : outputBounds.y + outputBounds.height / 2;
 		const outConnectorX = (outX - containerBounds.x) / transform.scale;
 		const outConnectorY = (outY - containerBounds.y) / transform.scale;
 
 		const inX = verticalIn ? inputBounds.x + inputBounds.width / 2 : inputBounds.x + 1;
-		const inY = verticalIn ? inputBounds.y + inputBounds.height - VERTICAL_LINK_OVERLAP_ON_SHAPED_CAP : inputBounds.y + inputBounds.height / 2;
+		const inY = verticalIn ? inputBounds.y + inputBounds.height - VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : inputBounds.y + inputBounds.height / 2;
 		const inConnectorX = (inX - containerBounds.x) / transform.scale;
 		const inConnectorY = (inY - containerBounds.y) / transform.scale;
 		const horizontalGap = Math.abs(outConnectorX - inConnectorX);
 		const verticalGap = Math.abs(outConnectorY - inConnectorY);
 
 		// TODO: Finish this commented out code replacement for the code below it based on this diagram: <https://files.keavon.com/-/InsubstantialElegantQueenant/capture.png>
-		// // Straight: stacking lines which are always straight, or a straight horizontal link between two aligned nodes
+		// // Straight: stacking lines which are always straight, or a straight horizontal wire between two aligned nodes
 		// if ((verticalOut && verticalIn) || (!verticalOut && !verticalIn && verticalGap === 0)) {
 		// 	return [
 		// 		{ x: outConnectorX, y: outConnectorY },
@@ -259,14 +259,14 @@
 			.join(" ");
 	}
 
-	function createWirePath(outputPort: SVGSVGElement, inputPort: SVGSVGElement | DOMRect, verticalOut: boolean, verticalIn: boolean): LinkPath {
+	function createWirePath(outputPort: SVGSVGElement, inputPort: SVGSVGElement | DOMRect, verticalOut: boolean, verticalIn: boolean, dashed: boolean): WirePath {
 		const inputPortRect = inputPort instanceof DOMRect ? inputPort : inputPort.getBoundingClientRect();
 		const outputPortRect = outputPort.getBoundingClientRect();
 
 		const pathString = buildWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn);
-		const dataType = outputPort.getAttribute("data-datatype") || "general";
+		const dataType = (outputPort.getAttribute("data-datatype") as FrontendGraphDataType) || "General";
 
-		return { pathString, dataType, thick: verticalIn && verticalOut };
+		return { pathString, dataType, thick: verticalIn && verticalOut, dashed };
 	}
 
 	function scroll(e: WheelEvent) {
@@ -321,9 +321,9 @@
 		if (e.key.toLowerCase() === "escape") {
 			contextMenuOpenCoordinates = undefined;
 			document.removeEventListener("keydown", keydown);
-			linkInProgressFromConnector = undefined;
-			// linkInProgressFromLayerTop = undefined;
-			// linkInProgressFromLayerBottom = undefined;
+			wireInProgressFromConnector = undefined;
+			// wireInProgressFromLayerTop = undefined;
+			// wireInProgressFromLayerBottom = undefined;
 		}
 	}
 
@@ -374,10 +374,10 @@
 		// Since the user is clicking elsewhere in the graph, ensure the add nodes list is closed
 		if (lmb) {
 			contextMenuOpenCoordinates = undefined;
-			linkInProgressFromConnector = undefined;
+			wireInProgressFromConnector = undefined;
 			toggleDisplayAsLayerNodeId = undefined;
-			// linkInProgressFromLayerTop = undefined;
-			// linkInProgressFromLayerBottom = undefined;
+			// wireInProgressFromLayerTop = undefined;
+			// wireInProgressFromLayerBottom = undefined;
 		}
 
 		// Alt-click sets the clicked node as previewed
@@ -390,39 +390,36 @@
 			const isOutput = Boolean(port.getAttribute("data-port") === "output");
 			const frontendNode = (nodeId !== undefined && $nodeGraph.nodes.find((n) => n.id === nodeId)) || undefined;
 
-			// Output: Begin dragging out a new link
+			// Output: Begin dragging out a new wire
 			if (isOutput) {
-				// Disallow creating additional vertical output links from an already-connected layer
-				if (frontendNode?.isLayer && frontendNode.primaryOutput?.connected !== undefined) return;
+				// Disallow creating additional vertical output wires from an already-connected layer
+				if (frontendNode?.isLayer && frontendNode.primaryOutput && frontendNode.primaryOutput.connected.length > 0) return;
 
-				linkInProgressFromConnector = port;
-				// // Since we are just beginning to drag out a link from the top, we know the in-progress link exists from this layer's top and has no connection to any other layer bottom yet
-				// linkInProgressFromLayerTop = nodeId !== undefined && frontendNode?.isLayer ? nodeId : undefined;
-				// linkInProgressFromLayerBottom = undefined;
+				wireInProgressFromConnector = port;
+				// // Since we are just beginning to drag out a wire from the top, we know the in-progress wire exists from this layer's top and has no connection to any other layer bottom yet
+				// wireInProgressFromLayerTop = nodeId !== undefined && frontendNode?.isLayer ? nodeId : undefined;
+				// wireInProgressFromLayerBottom = undefined;
 			}
-			// Input: Begin moving an existing link
+			// Input: Begin moving an existing wire
 			else {
 				const inputNodeInPorts = Array.from(node.querySelectorAll(`[data-port="input"]`));
 				const inputNodeConnectionIndexSearch = inputNodeInPorts.indexOf(port);
-				// const isLayerBottomConnector = frontendNode?.isLayer && inputNodeConnectionIndexSearch === 1;
 				const inputIndex = inputNodeConnectionIndexSearch > -1 ? inputNodeConnectionIndexSearch : undefined;
 				if (inputIndex === undefined || nodeId === undefined) return;
 
-				// Set the link to draw from the input that a previous link was on
+				// Set the wire to draw from the input that a previous wire was on
 
-				const linkIndex = $nodeGraph.links.findIndex((value) => value.linkEnd === nodeId && value.linkEndInputIndex === BigInt(inputIndex));
-				if (linkIndex === -1) return;
+				const wireIndex = $nodeGraph.wires.filter((wire) => !wire.dashed).findIndex((value) => value.wireEnd === nodeId && value.wireEndInputIndex === BigInt(inputIndex));
+				if (wireIndex === -1) return;
 
-				const nodeOutputConnectors = nodesContainer?.querySelectorAll(`[data-node="${String($nodeGraph.links[linkIndex].linkStart)}"] [data-port="output"]`) || undefined;
-				linkInProgressFromConnector = nodeOutputConnectors?.[Number($nodeGraph.links[linkIndex].linkStartOutputIndex)] as SVGSVGElement | undefined;
-				// linkInProgressFromLayerBottom = isLayerBottomConnector ? frontendNode.exposedInputs[0].connected : undefined;
+				const nodeOutputConnectors = nodesContainer?.querySelectorAll(`[data-node="${String($nodeGraph.wires[wireIndex].wireStart)}"] [data-port="output"]`) || undefined;
+				wireInProgressFromConnector = nodeOutputConnectors?.[Number($nodeGraph.wires[wireIndex].wireStartOutputIndex)] as SVGSVGElement | undefined;
 
-				const nodeInputConnectors = nodesContainer?.querySelectorAll(`[data-node="${String($nodeGraph.links[linkIndex].linkEnd)}"] [data-port="input"]`) || undefined;
-				linkInProgressToConnector = nodeInputConnectors?.[Number($nodeGraph.links[linkIndex].linkEndInputIndex)] as SVGSVGElement | undefined;
-				// linkInProgressFromLayerTop = undefined;
+				const nodeInputConnectors = nodesContainer?.querySelectorAll(`[data-node="${String($nodeGraph.wires[wireIndex].wireEnd)}"] [data-port="input"]`) || undefined;
+				wireInProgressToConnector = nodeInputConnectors?.[Number($nodeGraph.wires[wireIndex].wireEndInputIndex)] as SVGSVGElement | undefined;
 
-				disconnecting = { nodeId: nodeId, inputIndex, linkIndex };
-				refreshLinks();
+				disconnecting = { nodeId: nodeId, inputIndex, wireIndex };
+				refreshWires();
 			}
 
 			return;
@@ -480,26 +477,28 @@
 		panning = true;
 	}
 
-	function doubleClick(_e: MouseEvent) {
-		// const node = (e.target as HTMLElement).closest("[data-node]") as HTMLElement | undefined;
-		// const nodeId = node?.getAttribute("data-node") || undefined;
-		// if (nodeId !== undefined) {
-		// 	const id = BigInt(nodeId);
-		// 	editor.handle.enterNestedNetwork(id);
-		// }
+	function doubleClick(e: MouseEvent) {
+		if ((e.target as HTMLElement).closest("[data-visibility-button]")) return;
+
+		const node = (e.target as HTMLElement).closest("[data-node]") as HTMLElement | undefined;
+		const nodeId = node?.getAttribute("data-node") || undefined;
+		if (nodeId !== undefined && !e.altKey) {
+			const id = BigInt(nodeId);
+			editor.handle.enterNestedNetwork(id);
+		}
 	}
 
 	function pointerMove(e: PointerEvent) {
 		if (panning) {
 			transform.x += e.movementX / transform.scale;
 			transform.y += e.movementY / transform.scale;
-		} else if (linkInProgressFromConnector && !contextMenuOpenCoordinates) {
+		} else if (wireInProgressFromConnector && !contextMenuOpenCoordinates) {
 			const target = e.target as Element | undefined;
 			const dot = (target?.closest(`[data-port="input"]`) || undefined) as SVGSVGElement | undefined;
 			if (dot) {
-				linkInProgressToConnector = dot;
+				wireInProgressToConnector = dot;
 			} else {
-				linkInProgressToConnector = new DOMRect(e.x, e.y);
+				wireInProgressToConnector = new DOMRect(e.x, e.y);
 			}
 		} else if (draggingNodes) {
 			const deltaX = Math.round((e.x - draggingNodes.startX) / transform.scale / GRID_SIZE);
@@ -510,7 +509,7 @@
 
 				let stop = false;
 				const refresh = () => {
-					if (!stop) refreshLinks();
+					if (!stop) refreshWires();
 					requestAnimationFrame(refresh);
 				};
 				refresh();
@@ -560,8 +559,8 @@
 		return selected.includes(node) || intersetNodeAABB(boxSelect, nodeIndex);
 	}
 
-	function toggleNodeVisibility(id: bigint) {
-		editor.handle.toggleNodeVisibility(id);
+	function toggleNodeVisibilityGraph(id: bigint) {
+		editor.handle.toggleNodeVisibilityGraph(id);
 	}
 
 	function toggleLayerDisplay(displayAsLayer: boolean) {
@@ -602,7 +601,7 @@
 		const selectedNode = nodesContainer?.querySelector(`[data-node="${String(selectedNodeId)}"]`) || undefined;
 
 		// Check that neither the primary input or output of the selected node are already connected.
-		const notConnected = $nodeGraph.links.findIndex((link) => link.linkStart === selectedNodeId || (link.linkEnd === selectedNodeId && link.linkEndInputIndex === BigInt(0))) === -1;
+		const notConnected = $nodeGraph.wires.findIndex((wire) => wire.wireStart === selectedNodeId || (wire.wireEnd === selectedNodeId && wire.wireEndInputIndex === BigInt(0))) === -1;
 		const input = selectedNode?.querySelector(`[data-port="input"]`) || undefined;
 		const output = selectedNode?.querySelector(`[data-port="output"]`) || undefined;
 
@@ -612,9 +611,9 @@
 		// Fixes typing for some reason?
 		const theNodesContainer = nodesContainer;
 
-		// Find the link that the node has been dragged on top of
-		const link = $nodeGraph.links.find((link) => {
-			const { nodeInput, nodeOutput } = resolveLink(link);
+		// Find the wire that the node has been dragged on top of
+		const wire = $nodeGraph.wires.find((wire) => {
+			const { nodeInput, nodeOutput } = resolveWire(wire);
 			if (!nodeInput || !nodeOutput) return false;
 
 			const wireCurveLocations = buildWirePathLocations(nodeOutput.getBoundingClientRect(), nodeInput.getBoundingClientRect(), false, false);
@@ -623,7 +622,7 @@
 			const containerBoundsBounds = theNodesContainer.getBoundingClientRect();
 
 			return (
-				link.linkEnd != selectedNodeId &&
+				wire.wireEnd != selectedNodeId &&
 				editor.handle.rectangleIntersects(
 					new Float64Array(wireCurveLocations.map((loc) => loc.x)),
 					new Float64Array(wireCurveLocations.map((loc) => loc.y)),
@@ -635,11 +634,10 @@
 			);
 		});
 
-		// If the node has been dragged on top of the link then connect it into the middle.
-		if (link) {
+		// If the node has been dragged on top of the wire then connect it into the middle.
+		if (wire) {
 			const isLayer = $nodeGraph.nodes.find((n) => n.id === selectedNodeId)?.isLayer;
-
-			editor.handle.insertNodeBetween(link.linkEnd, Number(link.linkEndInputIndex), 0, selectedNodeId, 0, Number(link.linkStartOutputIndex), link.linkStart);
+			editor.handle.insertNodeBetween(wire.wireEnd, Number(wire.wireEndInputIndex), 0, selectedNodeId, 0, Number(wire.wireStartOutputIndex), wire.wireStart);
 			if (!isLayer) editor.handle.shiftNode(selectedNodeId);
 		}
 	}
@@ -653,16 +651,16 @@
 		}
 		disconnecting = undefined;
 
-		if (linkInProgressToConnector instanceof SVGSVGElement && linkInProgressFromConnector) {
-			const from = connectorToNodeIndex(linkInProgressFromConnector);
-			const to = connectorToNodeIndex(linkInProgressToConnector);
+		if (wireInProgressToConnector instanceof SVGSVGElement && wireInProgressFromConnector) {
+			const from = connectorToNodeIndex(wireInProgressFromConnector);
+			const to = connectorToNodeIndex(wireInProgressToConnector);
 
 			if (from !== undefined && to !== undefined) {
 				const { nodeId: outputConnectedNodeID, index: outputNodeConnectionIndex } = from;
 				const { nodeId: inputConnectedNodeID, index: inputNodeConnectionIndex } = to;
-				editor.handle.connectNodesByLink(outputConnectedNodeID, outputNodeConnectionIndex, inputConnectedNodeID, inputNodeConnectionIndex);
+				editor.handle.connectNodesByWire(outputConnectedNodeID, outputNodeConnectionIndex, inputConnectedNodeID, inputNodeConnectionIndex);
 			}
-		} else if (linkInProgressFromConnector && !initialDisconnecting) {
+		} else if (wireInProgressFromConnector && !initialDisconnecting) {
 			// If the add node menu is already open, we don't want to open it again
 			if (contextMenuOpenCoordinates) return;
 
@@ -674,7 +672,7 @@
 			if (!contextMenuOpenCoordinates) return;
 			let contextMenuLocation2: { x: number; y: number } = contextMenuOpenCoordinates;
 
-			linkInProgressToConnector = new DOMRect((contextMenuLocation2.x + transform.x) * transform.scale + graphBounds.x, (contextMenuLocation2.y + transform.y) * transform.scale + graphBounds.y);
+			wireInProgressToConnector = new DOMRect((contextMenuLocation2.x + transform.x) * transform.scale + graphBounds.x, (contextMenuLocation2.y + transform.y) * transform.scale + graphBounds.y);
 
 			return;
 		} else if (draggingNodes) {
@@ -695,8 +693,8 @@
 			boxSelection = undefined;
 		}
 
-		linkInProgressFromConnector = undefined;
-		linkInProgressToConnector = undefined;
+		wireInProgressFromConnector = undefined;
+		wireInProgressToConnector = undefined;
 	}
 
 	function createNode(nodeType: string) {
@@ -708,15 +706,15 @@
 		const inputConnectedNodeID = editor.handle.createNode(nodeType, x, y);
 		contextMenuOpenCoordinates = undefined;
 
-		if (!linkInProgressFromConnector) return;
-		const from = connectorToNodeIndex(linkInProgressFromConnector);
+		if (!wireInProgressFromConnector) return;
+		const from = connectorToNodeIndex(wireInProgressFromConnector);
 
 		if (from !== undefined) {
 			const { nodeId: outputConnectedNodeID, index: outputNodeConnectionIndex } = from;
-			editor.handle.connectNodesByLink(outputConnectedNodeID, outputNodeConnectionIndex, inputConnectedNodeID, inputNodeConnectionIndex);
+			editor.handle.connectNodesByWire(outputConnectedNodeID, outputNodeConnectionIndex, inputConnectedNodeID, inputNodeConnectionIndex);
 		}
 
-		linkInProgressFromConnector = undefined;
+		wireInProgressFromConnector = undefined;
 	}
 
 	function nodeBorderMask(nodeWidth: number, primaryInputExists: boolean, parameters: number, primaryOutputExists: boolean, exposedOutputs: number): string {
@@ -766,8 +764,15 @@
 	}
 
 	function dataTypeTooltip(value: FrontendGraphInput | FrontendGraphOutput): string {
-		const dataTypeCapitalized = `${value.dataType[0].toUpperCase()}${value.dataType.slice(1)}`;
-		return value.resolvedType ? `Resolved Data: ${value.resolvedType}` : `Unresolved Data: ${dataTypeCapitalized}`;
+		return value.resolvedType ? `Resolved Data: ${value.resolvedType}` : `Unresolved Data: ${value.dataType}`;
+	}
+
+	function connectedToText(output: FrontendGraphOutput): string {
+		if (output.connected.length === 0) {
+			return "Connected to nothing";
+		} else {
+			return output.connected.map((nodeId, index) => `Connected to ${nodeId}, port index ${output.connectedIndex[index]}`).join("\n");
+		}
 	}
 </script>
 
@@ -784,6 +789,7 @@
 	style:--grid-offset-y={`${transform.y * transform.scale}px`}
 	style:--dot-radius={`${dotRadius}px`}
 >
+	<BreadcrumbTrailButtons labels={["Document"].concat($nodeGraph.subgraphPath)} action={(index) => editor.handle.exitNestedNetwork($nodeGraph.subgraphPath?.length - index)} />
 	<!-- Right click menu for adding nodes -->
 	{#if contextMenuOpenCoordinates}
 		<LayoutCol
@@ -844,11 +850,17 @@
 			{/if}
 		</LayoutCol>
 	{/if}
-	<!-- Node connection links -->
+	<!-- Node connection wires -->
 	<div class="wires" style:transform={`scale(${transform.scale}) translate(${transform.x}px, ${transform.y}px)`} style:transform-origin={`0 0`}>
 		<svg>
-			{#each linkPaths as { pathString, dataType, thick }}
-				<path d={pathString} style:--data-line-width={`${thick ? 8 : 2}px`} style:--data-color={`var(--color-data-${dataType})`} style:--data-color-dim={`var(--color-data-${dataType}-dim)`} />
+			{#each wirePaths as { pathString, dataType, thick, dashed }}
+				<path
+					d={pathString}
+					style:--data-line-width={`${thick ? 8 : 2}px`}
+					style:--data-color={`var(--color-data-${dataType.toLowerCase()})`}
+					style:--data-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
+					style:--data-dasharray={`3,${dashed ? 2 : 0}`}
+				/>
 			{/each}
 		</svg>
 	</div>
@@ -868,8 +880,8 @@
 				style:--offset-left={(node.position?.x || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
-				style:--data-color={`var(--color-data-${node.primaryOutput?.dataType || "general"})`}
-				style:--data-color-dim={`var(--color-data-${node.primaryOutput?.dataType || "general"}-dim)`}
+				style:--data-color={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()})`}
+				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
 				style:--label-width={labelWidthGridCells}
 				style:--node-chain-area-left-extension={node.exposedInputs.length === 0 ? 0 : 1.5}
 				data-node={node.id}
@@ -891,14 +903,14 @@
 							class="port top"
 							data-port="output"
 							data-datatype={node.primaryOutput.dataType}
-							style:--data-color={`var(--color-data-${node.primaryOutput.dataType})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType}-dim)`}
+							style:--data-color={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()}-dim)`}
 							bind:this={outputs[nodeIndex][0]}
 						>
-							<title>{`${dataTypeTooltip(node.primaryOutput)}\nConnected to ${`${node.primaryOutput.connected}, port index ${node.primaryOutput.connectedIndex}` || "nothing"}`}</title>
-							{#if node.primaryOutput.connected}
+							<title>{`${dataTypeTooltip(node.primaryOutput)}\n${connectedToText(node.primaryOutput)}`}</title>
+							{#if node.primaryOutput.connected.length > 0}
 								<path d="M0,6.953l2.521,-1.694a2.649,2.649,0,0,1,2.959,0l2.52,1.694v5.047h-8z" fill="var(--data-color)" />
-								{#if Number(node.primaryOutput?.connectedIndex) === 0 && $nodeGraph.nodes.find((n) => n.id === node.primaryOutput?.connected)?.isLayer}
+								{#if Number(node.primaryOutput?.connectedIndex) === 0 && $nodeGraph.nodes.find((n) => node.primaryOutput?.connected.includes(n.id))?.isLayer}
 									<path d="M0,-3.5h8v8l-2.521,-1.681a2.666,2.666,0,0,0,-2.959,0l-2.52,1.681z" fill="var(--data-color-dim)" />
 								{/if}
 							{:else}
@@ -913,14 +925,14 @@
 						class="port bottom"
 						data-port="input"
 						data-datatype={node.primaryInput?.dataType}
-						style:--data-color={`var(--color-data-${node.primaryInput?.dataType})`}
-						style:--data-color-dim={`var(--color-data-${node.primaryInput?.dataType}-dim)`}
+						style:--data-color={`var(--color-data-${(node.primaryInput?.dataType || "General").toLowerCase()})`}
+						style:--data-color-dim={`var(--color-data-${(node.primaryInput?.dataType || "General").toLowerCase()}-dim)`}
 						bind:this={inputs[nodeIndex][0]}
 					>
 						{#if node.primaryInput}
-							<title>{`${dataTypeTooltip(node.primaryInput)}\nConnected to ${node.primaryInput?.connected || "nothing"}`}</title>
+							<title>{`${dataTypeTooltip(node.primaryInput)}\nConnected to ${node.primaryInput?.connected !== undefined ? node.primaryInput.connected : "nothing"}`}</title>
 						{/if}
-						{#if node.primaryInput?.connected}
+						{#if node.primaryInput?.connected !== undefined}
 							<path d="M0,0H8V8L5.479,6.319a2.666,2.666,0,0,0-2.959,0L0,8Z" fill="var(--data-color)" />
 							{#if $nodeGraph.nodes.find((n) => n.id === node.primaryInput?.connected)?.isLayer}
 								<path d="M0,10.95l2.52,-1.69c0.89,-0.6,2.06,-0.6,2.96,0l2.52,1.69v5.05h-8v-5.05z" fill="var(--data-color-dim)" />
@@ -939,12 +951,12 @@
 							class="port"
 							data-port="input"
 							data-datatype={stackDataInput.dataType}
-							style:--data-color={`var(--color-data-${stackDataInput.dataType})`}
-							style:--data-color-dim={`var(--color-data-${stackDataInput.dataType}-dim)`}
+							style:--data-color={`var(--color-data-${stackDataInput.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${stackDataInput.dataType.toLowerCase()}-dim)`}
 							bind:this={inputs[nodeIndex][1]}
 						>
-							<title>{`${dataTypeTooltip(stackDataInput)}\nConnected to ${stackDataInput.connected || "nothing"}`}</title>
-							{#if stackDataInput.connected}
+							<title>{`${dataTypeTooltip(stackDataInput)}\nConnected to ${stackDataInput.connected !== undefined ? stackDataInput.connected : "nothing"}`}</title>
+							{#if stackDataInput.connected !== undefined}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 							{:else}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -960,7 +972,8 @@
 				</div>
 				<IconButton
 					class={"visibility"}
-					action={(e) => (toggleNodeVisibility(node.id), e?.stopPropagation())}
+					data-visibility-button
+					action={(e) => (toggleNodeVisibilityGraph(node.id), e?.stopPropagation())}
 					size={24}
 					icon={node.visible ? "EyeVisible" : "EyeHidden"}
 					tooltip={node.visible ? "Visible" : "Hidden"}
@@ -991,8 +1004,8 @@
 				style:--offset-left={(node.position?.x || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
-				style:--data-color={`var(--color-data-${node.primaryOutput?.dataType || "general"})`}
-				style:--data-color-dim={`var(--color-data-${node.primaryOutput?.dataType || "general"}-dim)`}
+				style:--data-color={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()})`}
+				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
 				data-node={node.id}
 				bind:this={nodeElements[nodeIndex]}
 			>
@@ -1025,12 +1038,12 @@
 							class="port primary-port"
 							data-port="input"
 							data-datatype={node.primaryInput?.dataType}
-							style:--data-color={`var(--color-data-${node.primaryInput?.dataType})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryInput?.dataType}-dim)`}
+							style:--data-color={`var(--color-data-${node.primaryInput.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${node.primaryInput.dataType.toLowerCase()}-dim)`}
 							bind:this={inputs[nodeIndex][0]}
 						>
-							<title>{`${dataTypeTooltip(node.primaryInput)}\nConnected to ${node.primaryInput.connected || "nothing"}`}</title>
-							{#if node.primaryInput.connected}
+							<title>{`${dataTypeTooltip(node.primaryInput)}\nConnected to ${node.primaryInput.connected !== undefined ? node.primaryInput.connected : "nothing"}`}</title>
+							{#if node.primaryInput.connected !== undefined}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 							{:else}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -1045,12 +1058,12 @@
 								class="port"
 								data-port="input"
 								data-datatype={parameter.dataType}
-								style:--data-color={`var(--color-data-${parameter.dataType})`}
-								style:--data-color-dim={`var(--color-data-${parameter.dataType}-dim)`}
+								style:--data-color={`var(--color-data-${parameter.dataType.toLowerCase()})`}
+								style:--data-color-dim={`var(--color-data-${parameter.dataType.toLowerCase()}-dim)`}
 								bind:this={inputs[nodeIndex][index + (node.primaryInput ? 1 : 0)]}
 							>
-								<title>{`${dataTypeTooltip(parameter)}\nConnected to ${parameter.connected || "nothing"}`}</title>
-								{#if parameter.connected}
+								<title>{`${dataTypeTooltip(parameter)}\nConnected to ${parameter.connected !== undefined ? parameter.connected : "nothing"}`}</title>
+								{#if parameter.connected !== undefined}
 									<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 								{:else}
 									<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -1068,12 +1081,12 @@
 							class="port primary-port"
 							data-port="output"
 							data-datatype={node.primaryOutput.dataType}
-							style:--data-color={`var(--color-data-${node.primaryOutput.dataType})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType}-dim)`}
+							style:--data-color={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()}-dim)`}
 							bind:this={outputs[nodeIndex][0]}
 						>
-							<title>{`${dataTypeTooltip(node.primaryOutput)}\nConnected to ${`${node.primaryOutput.connected}, port index ${node.primaryOutput.connectedIndex}` || "nothing"}`}</title>
-							{#if node.primaryOutput.connected}
+							<title>{`${dataTypeTooltip(node.primaryOutput)}\n${connectedToText(node.primaryOutput)}`}</title>
+							{#if node.primaryOutput.connected !== undefined}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 							{:else}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -1087,12 +1100,12 @@
 							class="port"
 							data-port="output"
 							data-datatype={parameter.dataType}
-							style:--data-color={`var(--color-data-${parameter.dataType})`}
-							style:--data-color-dim={`var(--color-data-${parameter.dataType}-dim)`}
+							style:--data-color={`var(--color-data-${parameter.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${parameter.dataType.toLowerCase()}-dim)`}
 							bind:this={outputs[nodeIndex][outputIndex + (node.primaryOutput ? 1 : 0)]}
 						>
-							<title>{`${dataTypeTooltip(parameter)}\nConnected to ${`${parameter.connected}, port index ${parameter.connectedIndex}` || "nothing"}`}</title>
-							{#if parameter.connected}
+							<title>{`${dataTypeTooltip(parameter)}\n${connectedToText(parameter)}`}</title>
+							{#if parameter.connected !== undefined}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 							{:else}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -1134,11 +1147,6 @@
 		flex-direction: row;
 		flex-grow: 1;
 
-		> img {
-			position: absolute;
-			bottom: 0;
-		}
-
 		// We're displaying the dotted grid in a pseudo-element because `image-rendering` is an inherited property and we don't want it to apply to child elements
 		&::before {
 			content: "";
@@ -1147,11 +1155,23 @@
 			height: 100%;
 			background-size: var(--grid-spacing) var(--grid-spacing);
 			background-position: calc(var(--grid-offset-x) - var(--dot-radius)) calc(var(--grid-offset-y) - var(--dot-radius));
-			background-image: radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-3-darkgray) var(--dot-radius), transparent 0);
+			background-image: radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-f-white) var(--dot-radius), transparent 0),
+				radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-3-darkgray) var(--dot-radius), transparent 0);
+			background-repeat: no-repeat, repeat;
 			image-rendering: pixelated;
 			mix-blend-mode: screen;
 		}
 
+		> img {
+			position: absolute;
+			bottom: 0;
+		}
+
+		.breadcrumb-trail-buttons {
+			margin-top: 8px;
+			margin-left: 8px;
+		}
+
 		.context-menu {
 			width: max-content;
 			position: absolute;
@@ -1235,6 +1255,7 @@
 					fill: none;
 					stroke: var(--data-color-dim);
 					stroke-width: var(--data-line-width);
+					stroke-dasharray: var(--data-dasharray);
 				}
 			}
 		}

frontend/src/components/widgets/WidgetSection.svelte

@@ -41,7 +41,7 @@
 			hoverIcon={widgetData.visible ? "EyeHide" : "EyeShow"}
 			size={24}
 			action={(e) => {
-				editor.handle.toggleNodeVisibility(widgetData.id);
+				editor.handle.toggleNodeVisibilityLayerPanel(widgetData.id);
 				e?.stopPropagation();
 			}}
 			class={widgetData.visible ? "show-only-on-hover" : ""}

frontend/src/components/widgets/buttons/ParameterExposeButton.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
+	import type { FrontendGraphDataType } from "@graphite/wasm-communication/messages";
+
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
 	export let exposed: boolean;
-	export let dataType: string;
+	export let dataType: FrontendGraphDataType;
 	export let tooltip: string | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 </script>
 
 <LayoutRow class="parameter-expose-button">
-	<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} style:--data-type-color-dim={`var(--color-data-${dataType}-dim)`} on:click={action} title={tooltip} tabindex="-1">
+	<button
+		class:exposed
+		style:--data-type-color={`var(--color-data-${dataType.toLowerCase()})`}
+		style:--data-type-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`}
+		on:click={action}
+		title={tooltip}
+		tabindex="-1"
+	>
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
 			<path class="interior" d="M0,7.882c0,1.832,1.325,2.63,2.945,1.772L8.785,6.56c1.62-.858,1.62-2.262,0-3.12L2.945.345C1.325-.512,0,.285,0,2.118Z" />
 			<path

frontend/src/state-providers/node-graph.ts

@@ -3,38 +3,39 @@ import { writable } from "svelte/store";
 import { type Editor } from "@graphite/wasm-communication/editor";
 import {
 	type FrontendNode,
-	type FrontendNodeLink,
+	type FrontendNodeWire as FrontendNodeWire,
 	type FrontendNodeType,
 	UpdateNodeGraph,
+	UpdateNodeGraphSelection,
 	UpdateNodeTypes,
 	UpdateNodeThumbnail,
+	UpdateSubgraphPath,
 	UpdateZoomWithScroll,
-	UpdateNodeGraphSelection,
 } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
 		nodes: [] as FrontendNode[],
-		links: [] as FrontendNodeLink[],
+		wires: [] as FrontendNodeWire[],
 		nodeTypes: [] as FrontendNodeType[],
 		zoomWithScroll: false as boolean,
 		thumbnails: new Map<bigint, string>(),
 		selected: [] as bigint[],
+		subgraphPath: [] as string[],
 	});
 
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraph, (updateNodeGraph) => {
 		update((state) => {
 			state.nodes = updateNodeGraph.nodes;
-			state.links = updateNodeGraph.links;
-			const newThumbnails = new Map<bigint, string>();
-			// Transfer over any preexisting thumbnails from itself
-			state.nodes.forEach((node) => {
-				const thumbnail = state.thumbnails.get(node.id);
-				if (thumbnail) newThumbnails.set(node.id, thumbnail);
-			});
-			state.thumbnails = newThumbnails;
+			state.wires = updateNodeGraph.wires;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelection, (updateNodeGraphSelection) => {
+		update((state) => {
+			state.selected = updateNodeGraphSelection.selected;
 			return state;
 		});
 	});
@@ -50,15 +51,15 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateZoomWithScroll, (updateZoomWithScroll) => {
+	editor.subscriptions.subscribeJsMessage(UpdateSubgraphPath, (UpdateSubgraphPath) => {
 		update((state) => {
-			state.zoomWithScroll = updateZoomWithScroll.zoomWithScroll;
+			state.subgraphPath = UpdateSubgraphPath.subgraphPath;
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelection, (updateNodeGraphSelection) => {
+	editor.subscriptions.subscribeJsMessage(UpdateZoomWithScroll, (updateZoomWithScroll) => {
 		update((state) => {
-			state.selected = updateNodeGraphSelection.selected;
+			state.zoomWithScroll = updateZoomWithScroll.zoomWithScroll;
 			return state;
 		});
 	});

frontend/src/wasm-communication/messages.ts

@@ -29,8 +29,8 @@ export class UpdateNodeGraph extends JsMessage {
 	@Type(() => FrontendNode)
 	readonly nodes!: FrontendNode[];
 
-	@Type(() => FrontendNodeLink)
-	readonly links!: FrontendNodeLink[];
+	@Type(() => FrontendNodeWire)
+	readonly wires!: FrontendNodeWire[];
 }
 
 export class UpdateNodeTypes extends JsMessage {
@@ -54,6 +54,10 @@ export class UpdateOpenDocumentsList extends JsMessage {
 	readonly openDocuments!: FrontendDocumentDetails[];
 }
 
+export class UpdateSubgraphPath extends JsMessage {
+	readonly subgraphPath!: string[];
+}
+
 export class UpdateZoomWithScroll extends JsMessage {
 	readonly zoomWithScroll!: boolean;
 }
@@ -80,7 +84,7 @@ export class FrontendDocumentDetails extends DocumentDetails {
 	readonly id!: bigint;
 }
 
-export type FrontendGraphDataType = "general" | "number" | "raster" | "vector" | "color" | "artboard";
+export type FrontendGraphDataType = "General" | "Raster" | "VectorData" | "Number" | "Graphic" | "Artboard";
 
 export class FrontendGraphInput {
 	readonly dataType!: FrontendGraphDataType;
@@ -99,9 +103,9 @@ export class FrontendGraphOutput {
 
 	readonly resolvedType!: string | undefined;
 
-	readonly connected!: bigint | undefined;
+	readonly connected!: bigint[];
 
-	readonly connectedIndex!: bigint | undefined;
+	readonly connectedIndex!: bigint[];
 }
 
 export class FrontendNode {
@@ -133,16 +137,20 @@ export class FrontendNode {
 	readonly unlocked!: boolean;
 
 	readonly errors!: string | undefined;
+
+	readonly uiOnly!: boolean;
 }
 
-export class FrontendNodeLink {
-	readonly linkStart!: bigint;
+export class FrontendNodeWire {
+	readonly wireStart!: bigint;
 
-	readonly linkStartOutputIndex!: bigint;
+	readonly wireStartOutputIndex!: bigint;
 
-	readonly linkEnd!: bigint;
+	readonly wireEnd!: bigint;
 
-	readonly linkEndInputIndex!: bigint;
+	readonly wireEndInputIndex!: bigint;
+
+	readonly dashed!: boolean;
 }
 
 export class FrontendNodeType {
@@ -935,7 +943,7 @@ export class TextAreaInput extends WidgetProps {
 export class ParameterExposeButton extends WidgetProps {
 	exposed!: boolean;
 
-	dataType!: string;
+	dataType!: FrontendGraphDataType;
 
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;
@@ -1335,6 +1343,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelOptionsLayout,
 	UpdatePropertyPanelSectionsLayout,
+	UpdateSubgraphPath,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
 	UpdateWorkingColorsLayout,