diff --git a/app/src/lib/graph-interface/graph-manager.svelte.ts b/app/src/lib/graph-interface/graph-manager.svelte.ts index 5d18e90..da0f928 100644 --- a/app/src/lib/graph-interface/graph-manager.svelte.ts +++ b/app/src/lib/graph-interface/graph-manager.svelte.ts @@ -486,7 +486,7 @@ export class GraphManager extends EventEmitter<{ getNodeType(node: NodeInstance) { if (!node) { - console.trace('failed to get node type'); + console.trace('failed to get node type', { node }); return; } @@ -685,9 +685,18 @@ export class GraphManager extends EventEmitter<{ exitGroup(): { camera: [number, number, number]; nodeId: number } | false { if (!this.graphStack.length) return false; - const { savedNodes, savedEdges, outerGraph, groupId, nodeId, cameraPosition } = this.graphStack.pop()!; + const { savedNodes, savedEdges, outerGraph, groupId, nodeId, cameraPosition } = this.graphStack + .pop()!; const internalState = this.serialize(); + // Clear stale DOM/mesh refs so the remounting components register fresh ones. + // The $effect guards in NodeHTML/Node only set these when undefined, so without + // this clear they'd keep pointing to the detached elements from before group entry. + for (const node of savedNodes.values()) { + node.state.ref = undefined; + node.state.mesh = undefined; + } + // Restore live reactive nodes and edges so drag-reactivity is preserved this.nodes.clear(); for (const [id, node] of savedNodes) { diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte index f1bad0b..6653166 100644 --- a/app/src/lib/graph-interface/graph/Graph.svelte +++ b/app/src/lib/graph-interface/graph/Graph.svelte @@ -97,7 +97,6 @@ function getSocketType(node: NodeInstance, index: number | string): string { const nodeType = graph.getNodeType(node); - console.log({ nodeType, index }); if (typeof index === 'string') { return nodeType?.inputs?.[index].type || 'unknown'; } diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte index 6090fe1..4e7f102 100644 --- a/app/src/lib/graph-interface/node/Node.svelte +++ b/app/src/lib/graph-interface/node/Node.svelte @@ -19,7 +19,7 @@ }; let { node = $bindable(), inView }: Props = $props(); - const nodeType = $derived(graph.getNodeType(node)!); + const nodeType = $derived(node ? graph.getNodeType(node) : undefined); const isActive = $derived(graphState.activeNodeId === node.id); const isSelected = $derived(graphState.selectedNodes.has(node.id)); @@ -33,10 +33,12 @@ ); const sectionHeights = $derived( - Object - .keys(nodeType?.inputs || {}) - .map(key => getParameterHeight(nodeType, key) / 10) - .filter(b => !!b) + nodeType + ? Object + .keys(nodeType?.inputs || {}) + .map(key => getParameterHeight(nodeType, key) / 10) + .filter(b => !!b) + : [5] ); let meshRef: Mesh | undefined = $state();