Port node graph wires to the backend and improve graph UI performance (#2795)

* Improve node graph performance

* Fix wire bugs, add type default for properties.

* Grid aligned wire paths

* remove type source

* node from exposed input

* Refresh wires on preference change

* merge fixes

* Code review

* Fix names

* Code review

* Fix wires on redo/undo

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Adam Gerhant
2025-07-04 22:53:37 -07:00
committed by GitHub
co-authored by Keavon Chambers
parent 354a68911e
commit f57163c795
24 changed files with 2098 additions and 2019 deletions
+24 -48
View File
@@ -96,16 +96,21 @@ export class UpdateLayerWidths extends JsMessage {
readonly hasLeftInputWire!: Map<bigint, boolean>;
}
export class UpdateNodeGraph extends JsMessage {
export class UpdateNodeGraphNodes extends JsMessage {
@Type(() => FrontendNode)
readonly nodes!: FrontendNode[];
@Type(() => FrontendNodeWire)
readonly wires!: FrontendNodeWire[];
readonly wiresDirectNotGridAligned!: boolean;
}
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;
}
@@ -219,7 +224,7 @@ export class FrontendGraphInput {
readonly description!: string;
readonly resolvedType!: string | undefined;
readonly resolvedType!: string;
readonly validTypes!: string[];
@@ -252,7 +257,7 @@ export class FrontendGraphOutput {
readonly description!: string;
readonly resolvedType!: string | undefined;
readonly resolvedType!: string;
@CreateInputConnectorArray
connectedTo!: Node[];
@@ -297,44 +302,6 @@ export class FrontendNode {
readonly uiOnly!: boolean;
}
const CreateOutputConnector = Transform(({ obj }) => {
if (obj.wireStart.export !== undefined) {
return { index: obj.wireStart.export };
} else if (obj.wireStart.import !== undefined) {
return { index: obj.wireStart.import };
} else {
if (obj.wireStart.node.inputIndex !== undefined) {
return { nodeId: obj.wireStart.node.nodeId, index: obj.wireStart.node.inputIndex };
} else {
return { nodeId: obj.wireStart.node.nodeId, index: obj.wireStart.node.outputIndex };
}
}
});
const CreateInputConnector = Transform(({ obj }) => {
if (obj.wireEnd.export !== undefined) {
return { index: obj.wireEnd.export };
} else if (obj.wireEnd.import !== undefined) {
return { index: obj.wireEnd.import };
} else {
if (obj.wireEnd.node.inputIndex !== undefined) {
return { nodeId: obj.wireEnd.node.nodeId, index: obj.wireEnd.node.inputIndex };
} else {
return { nodeId: obj.wireEnd.node.nodeId, index: obj.wireEnd.node.outputIndex };
}
}
});
export class FrontendNodeWire {
@CreateOutputConnector
readonly wireStart!: Node;
@CreateInputConnector
readonly wireEnd!: Node;
readonly dashed!: boolean;
}
export class FrontendNodeType {
readonly name!: string;
@@ -356,6 +323,12 @@ export class WirePath {
readonly dashed!: boolean;
}
export class WireUpdate {
readonly id!: bigint;
readonly inputIndex!: number;
readonly wirePathUpdate!: WirePath | undefined;
}
export class IndexedDbDocumentDetails extends DocumentDetails {
@Transform(({ value }: { value: bigint }) => value.toString())
id!: string;
@@ -1645,6 +1618,7 @@ type JSMessageFactory = (data: any, wasm: WebAssembly.Memory, handle: EditorHand
type MessageMaker = typeof JsMessage | JSMessageFactory;
export const messageMakers: Record<string, MessageMaker> = {
ClearAllNodeGraphWires,
DisplayDialog,
DisplayDialogDismiss,
DisplayDialogPanic,
@@ -1700,10 +1674,12 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateLayerWidths,
UpdateMenuBarLayout,
UpdateMouseCursor,
UpdateNodeGraph,
UpdateNodeGraphNodes,
UpdateVisibleNodes,
UpdateNodeGraphWires,
UpdateNodeGraphTransform,
UpdateNodeGraphControlBarLayout,
UpdateNodeGraphSelection,
UpdateNodeGraphTransform,
UpdateNodeThumbnail,
UpdateOpenDocumentsList,
UpdatePropertyPanelSectionsLayout,