Rewrite FrontendNode

frontend/src/components/views/Graph.svelte

@@ -117,10 +117,11 @@
 
 	function toggleLayerDisplay(displayAsLayer: boolean, toggleId: bigint) {
 		editor.handle.setToNodeOrLayer(toggleId, displayAsLayer);
+		editor.handle.setToNodeOrLayer(toggleId, displayAsLayer);
 	}
 
 	function canBeToggledBetweenNodeAndLayer(toggleDisplayAsLayerNodeId: bigint) {
-		return $nodeGraph.nodesToRender.get(toggleDisplayAsLayerNodeId)?.canBeLayer || false;
+		return $nodeGraph.nodesToRender.get(toggleDisplayAsLayerNodeId)?.metadata.canBeLayer || false;
 	}
 
 	function createNode(nodeType: string) {
@@ -199,7 +200,7 @@
 	}
 
 	function inputConnectedToText(input: FrontendGraphInput): string {
-		return `Connected to:\n${input.connectedTo}`;
+		return `Connected to:\n${input.connectedToString}`;
 	}
 
 	function zipWithUndefined(arr1: FrontendGraphInput[], arr2: FrontendGraphOutput[]) {

frontend/src/messages.ts

@@ -175,13 +175,15 @@ export type FrontendGraphDataType = "General" | "Number" | "Artboard" | "Graphic
 export class FrontendGraphInput {
 	readonly dataType!: FrontendGraphDataType;
 
+	readonly resolvedType!: string;
+
 	readonly name!: string;
 
 	readonly description!: string;
 
-	readonly resolvedType!: string;
+	readonly connectedToString!: string;
 
-	readonly connectedTo!: string;
+	readonly connectedToNode!: bigint | undefined;
 }
 
 export class FrontendGraphOutput {
@@ -196,26 +198,42 @@ export class FrontendGraphOutput {
 	readonly connectedTo!: string[];
 }
 
-export class FrontendNode {
-	readonly id!: bigint;
-
-	readonly isLayer!: boolean;
-
+export class FrontendNodeMetadata {
 	readonly canBeLayer!: boolean;
 
+	readonly displayName!: string;
+
 	readonly selected!: boolean;
 
 	readonly reference!: string | undefined;
 
-	readonly displayName!: string;
+	readonly visible!: boolean;
 
-	readonly primaryInput!: FrontendGraphInput | undefined;
+	// readonly wires!: (string | undefined)[];
 
-	readonly exposedInputs!: FrontendGraphInput[];
+	readonly errors!: string | undefined;
+}
 
-	readonly primaryOutput!: FrontendGraphOutput | undefined;
+export class FrontendNode {
+	// readonly position!: FrontendNodePosition;
+	readonly position!: XY;
 
-	readonly exposedOutputs!: FrontendGraphOutput[];
+	readonly inputs!: (FrontendGraphInput | undefined)[];
+
+	readonly outputs!: (FrontendGraphOutput | undefined)[];
+}
+
+export class FrontendLayer {
+	// readonly position!: FrontendLayerPosition;
+	readonly position!: XY;
+
+	readonly bottomInput!: FrontendGraphInput;
+
+	readonly sideInput!: FrontendGraphInput | undefined;
+
+	readonly output!: FrontendGraphOutput;
+
+	readonly locked!: boolean;
 
 	readonly chainWidth!: number;
 
@@ -224,19 +242,27 @@ export class FrontendNode {
 	readonly primaryInputConnectedToLayer!: boolean;
 
 	readonly primaryOutputConnectedToLayer!: boolean;
+}
 
-	@TupleToVec2
-	readonly position!: XY;
+export class FrontendNodePosition {
+	readonly absolute!: XY | undefined;
+	readonly chain!: boolean | undefined;
+}
 
-	// TODO: Store field for the width of the left node chain
+export class FrontendLayerPosition {
+	readonly absolute!: XY | undefined;
+	readonly stack!: number | undefined;
+}
 
-	readonly previewed!: boolean;
+export class FrontendNodeOrLayer {
+	readonly metadata!: FrontendNodeMetadata;
+	readonly node!: FrontendNode | undefined;
+	readonly layer!: FrontendLayer | undefined;
+}
 
-	readonly visible!: boolean;
-
-	readonly unlocked!: boolean;
-
-	readonly errors!: string | undefined;
+export class UpdateCentralNodeGraph extends JsMessage {
+	readonly nodeOrLayer!: FrontendNodeOrLayer[];
+	readonly inSelectedNetwork!: boolean;
 }
 
 export class FrontendNodeType {

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

@@ -1,11 +1,11 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
+import type { FrontendNodeOrLayer } from "@graphite/messages";
 import {
 	type Box,
 	type FrontendClickTargets,
 	type ContextMenuInformation,
-	type FrontendNode,
 	type FrontendNodeType,
 	type WirePath,
 	ClearAllNodeGraphWires,
@@ -32,8 +32,7 @@ export function createNodeGraphState(editor: Editor) {
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		layerWidths: new Map<bigint, number>(),
 		updateImportsExports: undefined as UpdateImportsExports | undefined,
-		nodesToRender: new Map<bigint, FrontendNode>(),
-
+		nodesToRender: new Map<bigint, FrontendNodeToRender>(),
 		visibleNodes: new Set<bigint>(),
 		/// The index is the exposed input index. The exports have a first key value of u32::MAX.
 		wires: new Map<bigint, Map<number, WirePath>>(),
@@ -92,6 +91,7 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeJsMessage(UpdateLayerWidths, (updateLayerWidths) => {
 		update((state) => {
 			state.layerWidths = updateLayerWidths.layerWidths;