Improve data type organization

frontend/src/components/views/Graph.svelte

@@ -14,6 +14,21 @@
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
+	// These components will continue to be rendered in svelte after the first stage of native node graph rendering.
+	// - Import and export ports
+	// - Wires to import and export
+	// - Wire in progress
+	// - Add Node context menu
+	// - Toggle Layer context menu
+	// - Error dialog
+	// - Node/Input/Output Tooltips
+	// - Solo drag grip tooltip
+
+	// These elements will be not be rendered in svelte when rendering the native node graph. They are rendered below all other components
+	// - Dot grid background
+	// - Nodes/Layers
+	// - Wires between nodes/layers
+
 	const GRID_COLLAPSE_SPACING = 10;
 	const GRID_SIZE = 24;
 	const FADE_TRANSITION = { duration: 200, easing: cubicInOut };
@@ -618,11 +633,10 @@
 				{/each}
 				{#if $nodeGraph.wirePathInProgress}
 					<path
-						d={$nodeGraph.wirePathInProgress?.pathString}
+						d={$nodeGraph.wirePathInProgress?.wire}
 						style:--data-line-width={`${$nodeGraph.wirePathInProgress.thick ? 8 : 2}px`}
 						style:--data-color={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()})`}
 						style:--data-color-dim={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()}-dim)`}
-						style:--data-dasharray={`3,${$nodeGraph.wirePathInProgress.dashed ? 2 : 0}`}
 					/>
 				{/if}
 			</svg>
@@ -768,13 +782,13 @@
 </div>
 
 <!-- Box selection widget -->
-{#if $nodeGraph.box}
+{#if $nodeGraph.selectionBox}
 	<div
 		class="box-selection"
-		style:left={`${Math.min($nodeGraph.box.startX, $nodeGraph.box.endX)}px`}
-		style:top={`${Math.min($nodeGraph.box.startY, $nodeGraph.box.endY)}px`}
-		style:width={`${Math.abs($nodeGraph.box.startX - $nodeGraph.box.endX)}px`}
-		style:height={`${Math.abs($nodeGraph.box.startY - $nodeGraph.box.endY)}px`}
+		style:left={`${Math.min($nodeGraph.selectionBox.startX, $nodeGraph.selectionBox.endX)}px`}
+		style:top={`${Math.min($nodeGraph.selectionBox.startY, $nodeGraph.selectionBox.endY)}px`}
+		style:width={`${Math.abs($nodeGraph.selectionBox.startX - $nodeGraph.selectionBox.endX)}px`}
+		style:height={`${Math.abs($nodeGraph.selectionBox.startY - $nodeGraph.selectionBox.endY)}px`}
 	></div>
 {/if}
 

frontend/src/messages.ts

@@ -25,14 +25,24 @@ export type XY = { x: number; y: number };
 // for details about how to transform the JSON from wasm-bindgen into classes.
 // ============================================================================
 
-export class UpdateBox extends JsMessage {
-	readonly box!: Box | undefined;
-}
-
 export class UpdateClickTargets extends JsMessage {
 	readonly clickTargets!: FrontendClickTargets | undefined;
 }
 
+export class NodeGraphSelectionBox {
+	readonly startX!: number;
+
+	readonly startY!: number;
+
+	readonly endX!: number;
+
+	readonly endY!: number;
+}
+
+export class UpdateNodeGraphSelectionBox extends JsMessage {
+	readonly selectionBox!: NodeGraphSelectionBox | undefined;
+}
+
 export class UpdateImportsExports extends JsMessage {
 	readonly imports!: (FrontendGraphOutput | undefined)[];
 
@@ -138,8 +148,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 {
@@ -157,16 +173,6 @@ export class DocumentDetails {
 	readonly isSaved!: boolean;
 }
 
-export class Box {
-	readonly startX!: number;
-
-	readonly startY!: number;
-
-	readonly endX!: number;
-
-	readonly endY!: number;
-}
-
 export type FrontendClickTargets = {
 	readonly nodeClickTargets: string[];
 	readonly layerClickTargets: string[];
@@ -1694,7 +1700,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	TriggerSelectionWrite,
 	TriggerVisitLink,
 	UpdateActiveDocument,
-	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateDataPanelLayout,
@@ -1726,6 +1731,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateNodeGraphErrorDiagnostic,
 	UpdateNodeGraphNodes,
 	UpdateNodeGraphSelection,
+	UpdateNodeGraphSelectionBox,
 	UpdateNodeGraphTransform,
 	UpdateNodeGraphWires,
 	UpdateNodeThumbnail,

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

@@ -1,9 +1,8 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/editor";
-import type { NodeGraphError } from "@graphite/messages";
+import type { NodeGraphError, NodeGraphSelectionBox, WirePathInProgress } from "@graphite/messages";
 import {
-	type Box,
 	type FrontendClickTargets,
 	type ContextMenuInformation,
 	type FrontendNode,
@@ -11,7 +10,6 @@ import {
 	type WirePath,
 	ClearAllNodeGraphWires,
 	SendUIMetadata,
-	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
 	UpdateInSelectedNetwork,
@@ -27,14 +25,17 @@ import {
 	UpdateNodeThumbnail,
 	UpdateWirePathInProgress,
 	UpdateNodeGraphErrorDiagnostic,
+	UpdateNodeGraphSelectionBox,
 } from "@graphite/messages";
 
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
-		box: undefined as Box | undefined,
 		clickTargets: undefined as FrontendClickTargets | undefined,
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		error: undefined as NodeGraphError | undefined,
+		selectionBox: undefined as NodeGraphSelectionBox | undefined,
+		transform: { scale: 1, x: 0, y: 0 },
+		wirePathInProgress: undefined as WirePathInProgress | undefined,
 		layerWidths: new Map<bigint, number>(),
 		chainWidths: new Map<bigint, number>(),
 		hasLeftInputWire: new Map<bigint, boolean>(),
@@ -43,12 +44,10 @@ export function createNodeGraphState(editor: Editor) {
 		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>(),
 		selected: [] as bigint[],
-		transform: { scale: 1, x: 0, y: 0 },
 		inSelectedNetwork: true,
 		reorderImportIndex: undefined as number | undefined,
 		reorderExportIndex: undefined as number | undefined,
@@ -69,9 +68,9 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateBox, (data) => {
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelectionBox, (data) => {
 		update((state) => {
-			state.box = data.box;
+			state.selectionBox = data.selectionBox;
 			return state;
 		});
 	});
@@ -184,7 +183,7 @@ export function createNodeGraphState(editor: Editor) {
 	});
 	editor.subscriptions.subscribeJsMessage(UpdateWirePathInProgress, (data) => {
 		update((state) => {
-			state.wirePathInProgress = data.wirePath;
+			state.wirePathInProgress = data.wirePathInProgress;
 			return state;
 		});
 	});