Complete separating node rendering from imports/exports

2026-09-21 22:48:12 +08:00 · 2025-09-08 19:19:27 -07:00
parent e2c45195ef
commit 1ab681da8c
14 changed files with 1001 additions and 1193 deletions
@@ -564,8 +564,9 @@
 							</canvas>
 						{/if}
 					</div>
-
-					<Graph />
+					<div class="graph-view" class:open={$document.graphViewOverlayOpen} data-graph>
+						<Graph />
+					</div>
 				</LayoutCol>
 				<LayoutCol class="ruler-or-scrollbar right-scrollbar">
 					<ScrollbarInput
@@ -823,6 +824,18 @@
 						}
 					}

+					.graph-view {
+						pointer-events: none;
+						transition: opacity 0.2s;
+						opacity: 0;
+
+						&.open {
+							cursor: auto;
+							pointer-events: auto;
+							opacity: 1;
+						}
+					}
+
 					.fade-artwork,
 					.graph {
 						position: absolute;
@@ -26,13 +26,37 @@ export type XY = { x: number; y: number };
 // ============================================================================

 export class UpdateBox extends JsMessage {
-	readonly box!: Box | undefined;
+	readonly box!: FrontendSelectionBox | undefined;
+}
+
+export class FrontendClickTargets {
+	readonly nodeClickTargets!: string[];
+	readonly layerClickTargets!: string[];
+	readonly connectorClickTargets!: string[];
+	readonly iconClickTargets!: string[];
+	readonly allNodesBoundingBox!: string;
+	readonly importExportsBoundingBox!: string;
+	readonly modifyImportExport!: string[];
 }

 export class UpdateClickTargets extends JsMessage {
 	readonly clickTargets!: FrontendClickTargets | undefined;
 }

+export class FrontendSelectionBox {
+	readonly startX!: number;
+
+	readonly startY!: number;
+
+	readonly endX!: number;
+
+	readonly endY!: number;
+}
+
+export class UpdateNodeGraphSelectionBox extends JsMessage {
+	readonly box!: FrontendSelectionBox | undefined;
+}
+
 const ContextTupleToVec2 = Transform((data) => {
 	if (data.obj.contextMenuInformation === undefined) return undefined;
 	const contextMenuCoordinates = { x: data.obj.contextMenuInformation.contextMenuCoordinates[0], y: data.obj.contextMenuInformation.contextMenuCoordinates[1] };
@@ -45,15 +69,20 @@ const ContextTupleToVec2 = Transform((data) => {
 	return { contextMenuCoordinates, contextMenuData };
 });

+export class ContextMenuInformation {
+	readonly contextMenuCoordinates!: XY;
+	readonly contextMenuData!: "CreateNode" | { type: "CreateNode"; compatibleType: string } | { nodeId: bigint; currentlyIsNode: boolean };
+}
+
 export class UpdateContextMenuInformation extends JsMessage {
 	@ContextTupleToVec2
 	readonly contextMenuInformation!: ContextMenuInformation | undefined;
 }

 export class UpdateImportsExports extends JsMessage {
-	readonly imports!: (FrontendGraphOutput | undefined)[];
+	readonly imports!: (FrontendImport | undefined)[];

-	readonly exports!: (FrontendGraphInput | undefined)[];
+	readonly exports!: FrontendExports;

 	readonly importPosition!: XY;

@@ -93,12 +122,6 @@ export class UpdateVisibleNodes extends JsMessage {
 	readonly nodes!: bigint[];
 }

-export class UpdateNodeGraphWires extends JsMessage {
-	readonly wires!: WireUpdate[];
-}
-
-export class ClearAllNodeGraphWires extends JsMessage {}
-
 export class UpdateNodeGraphTransform extends JsMessage {
 	readonly transform!: NodeGraphTransform;
 }
@@ -123,8 +146,14 @@ export class UpdateOpenDocumentsList extends JsMessage {
 	readonly openDocuments!: OpenDocument[];
 }

+export class WirePathInProgress {
+	readonly wire!: string;
+	readonly thick!: boolean;
+	readonly dataType!: FrontendGraphDataType;
+}
+
 export class UpdateWirePathInProgress extends JsMessage {
-	readonly wirePath!: WirePath | undefined;
+	readonly wirePathInProgress!: WirePathInProgress | undefined;
 }

 export class OpenDocument {
@@ -149,6 +178,7 @@ export class DocumentDetails {
 	}
 }

+<<<<<<< HEAD
 export class Box {
 	readonly startX!: number;

@@ -174,6 +204,12 @@ export type ContextMenuInformation = {
 	contextMenuData: "CreateNode" | { type: "CreateNode"; compatibleType: string } | { nodeId: bigint; currentlyIsNode: boolean };
 };

+=======
+export class FrontendDocumentDetails extends DocumentDetails {
+	readonly id!: bigint;
+}
+
+>>>>>>> 17a1a3d5 (Complete separating node rendering from imports/exports)
 export type FrontendGraphDataType = "General" | "Number" | "Artboard" | "Graphic" | "Raster" | "Vector" | "Color";

 export class FrontendGraphInput {
@@ -202,6 +238,21 @@ export class FrontendGraphOutput {
 	readonly connectedTo!: string[];
 }

+export class FrontendExport {
+	readonly port!: FrontendGraphInput;
+	readonly wire!: string | undefined;
+}
+
+export class FrontendExports {
+	readonly exports!: (FrontendExport | undefined)[];
+	readonly previewWire!: string | undefined;
+}
+
+export class FrontendImport {
+	readonly port!: FrontendGraphOutput;
+	readonly wires!: string[];
+}
+
 export class FrontendNodeMetadata {
 	readonly nodeId!: bigint;

@@ -268,6 +319,8 @@ export class FrontendNodeOrLayer {
 export class FrontendNodeToRender {
 	readonly metadata!: FrontendNodeMetadata;
 	readonly nodeOrLayer!: FrontendNodeOrLayer;
+	// TODO: Remove
+	readonly wires!: [string, boolean, FrontendGraphDataType][];
 }

 export class UpdateCentralNodeGraph extends JsMessage {
@@ -1647,7 +1700,6 @@ type JSMessageFactory = (data: any, wasm: WebAssembly.Memory, handle: EditorHand
 type MessageMaker = typeof JsMessage | JSMessageFactory;

 export const messageMakers: Record<string, MessageMaker> = {
-	ClearAllNodeGraphWires,
 	DisplayDialog,
 	DisplayDialogDismiss,
 	DisplayDialogPanic,
@@ -1676,7 +1728,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerTextCopy,
 	TriggerVisitLink,
 	UpdateActiveDocument,
-	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateDialogButtons,
@@ -1704,8 +1755,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateMouseCursor,
 	UpdateNodeGraphControlBarLayout,
 	UpdateNodeGraphRender,
+	UpdateNodeGraphSelectionBox,
 	UpdateNodeGraphTransform,
-	UpdateNodeGraphWires,
 	UpdateNodeThumbnail,
 	UpdateOpenDocumentsList,
 	UpdatePlatform,
@@ -2,15 +2,13 @@ import { writable } from "svelte/store";

 import { type Editor } from "@graphite/editor";
 import {
-	type Box,
+	type FrontendSelectionBox,
 	type FrontendClickTargets,
 	type ContextMenuInformation,
 	type FrontendNodeToRender,
 	type FrontendNodeType,
-	type WirePath,
-	ClearAllNodeGraphWires,
+	type WirePathInProgress,
 	SendUIMetadata,
-	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateImportReorderIndex,
@@ -19,35 +17,39 @@ import {
 	UpdateLayerWidths,
 	UpdateNodeGraphRender,
 	UpdateVisibleNodes,
-	UpdateNodeGraphWires,
 	UpdateNodeGraphTransform,
 	UpdateNodeThumbnail,
 	UpdateWirePathInProgress,
+	UpdateNodeGraphSelectionBox,
 } from "@graphite/messages";

 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
-		box: undefined as Box | undefined,
+		// Data that will continue to be rendered in Svelte for now
+		selectionBox: undefined as FrontendSelectionBox | undefined,
 		clickTargets: undefined as FrontendClickTargets | undefined,
-		contextMenuInformation: undefined as ContextMenuInformation | undefined,
-		layerWidths: new Map<bigint, number>(),
+		wirePathInProgress: undefined as WirePathInProgress | undefined,
 		updateImportsExports: undefined as UpdateImportsExports | undefined,
-		nodesToRender: new Map<bigint, FrontendNodeToRender>(),
-		open: false,
-		opacity: 0.8,
-
-		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>>(),
-		wirePathInProgress: undefined as WirePath | undefined,
-		nodeDescriptions: new Map<string, string>(),
-		nodeTypes: [] as FrontendNodeType[],
-		thumbnails: new Map<bigint, string>(),
-		transform: { scale: 1, x: 0, y: 0 },
-		inSelectedNetwork: true,
-		previewedNode: undefined as bigint | undefined,
 		reorderImportIndex: undefined as number | undefined,
 		reorderExportIndex: undefined as number | undefined,
+
+		contextMenuInformation: undefined as ContextMenuInformation | undefined,
+		nodeTypes: [] as FrontendNodeType[],
+		nodeDescriptions: new Map<string, string>(),
+
+		// Data that will be moved into the node graph to be rendered natively
+		nodesToRender: new Map<bigint, FrontendNodeToRender>(),
+		opacity: 0.8,
+		inSelectedNetwork: true,
+		previewedNode: undefined as bigint | undefined,
+
+		// TODO: Remove these fields
+		visibleNodes: new Set<bigint>(),
+		layerWidths: new Map<bigint, number>(),
+
+		// Data that will be passed in the context
+		thumbnails: new Map<bigint, string>(),
+		transform: { scale: 1, x: 0, y: 0 },
 	});

 	// Set up message subscriptions on creation
@@ -58,15 +60,21 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateBox, (updateBox) => {
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelectionBox, (updateBox) => {
 		update((state) => {
-			state.box = updateBox.box;
+			state.selectionBox = updateBox.box;
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateClickTargets, (UpdateClickTargets) => {
+	editor.subscriptions.subscribeJsMessage(UpdateClickTargets, (updateClickTargets) => {
 		update((state) => {
-			state.clickTargets = UpdateClickTargets.clickTargets;
+			state.clickTargets = updateClickTargets.clickTargets;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateWirePathInProgress, (updateWirePathInProgress) => {
+		update((state) => {
+			state.wirePathInProgress = updateWirePathInProgress.wirePathInProgress;
 			return state;
 		});
 	});
@@ -107,7 +115,6 @@ export function createNodeGraphState(editor: Editor) {
 			updateNodeGraphRender.nodesToRender.forEach((node) => {
 				state.nodesToRender.set(node.metadata.nodeId, node);
 			});
-			state.open = updateNodeGraphRender.open;
 			state.opacity = updateNodeGraphRender.opacity;
 			state.inSelectedNetwork = updateNodeGraphRender.inSelectedNetwork;
 			state.previewedNode = updateNodeGraphRender.previewedNode;
@@ -120,30 +127,6 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphWires, (updateNodeWires) => {
-		update((state) => {
-			updateNodeWires.wires.forEach((wireUpdate) => {
-				let inputMap = state.wires.get(wireUpdate.id);
-				// If it doesn't exist, create it and set it in the outer map
-				if (!inputMap) {
-					inputMap = new Map();
-					state.wires.set(wireUpdate.id, inputMap);
-				}
-				if (wireUpdate.wirePathUpdate !== undefined) {
-					inputMap.set(wireUpdate.inputIndex, wireUpdate.wirePathUpdate);
-				} else {
-					inputMap.delete(wireUpdate.inputIndex);
-				}
-			});
-			return state;
-		});
-	});
-	editor.subscriptions.subscribeJsMessage(ClearAllNodeGraphWires, (_) => {
-		update((state) => {
-			state.wires.clear();
-			return state;
-		});
-	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphTransform, (updateNodeGraphTransform) => {
 		update((state) => {
 			state.transform = updateNodeGraphTransform.transform;
@@ -158,7 +141,7 @@ export function createNodeGraphState(editor: Editor) {
 	});
 	editor.subscriptions.subscribeJsMessage(UpdateWirePathInProgress, (updateWirePathInProgress) => {
 		update((state) => {
-			state.wirePathInProgress = updateWirePathInProgress.wirePath;
+			state.wirePathInProgress = updateWirePathInProgress.wirePathInProgress;
 			return state;
 		});
 	});