diff --git a/src/pages/people/relationships/components/RelationshipGalaxyThreeCanvas.vue b/src/pages/people/relationships/components/RelationshipGalaxyThreeCanvas.vue index 98fffbed..e8fcf075 100644 --- a/src/pages/people/relationships/components/RelationshipGalaxyThreeCanvas.vue +++ b/src/pages/people/relationships/components/RelationshipGalaxyThreeCanvas.vue @@ -68,7 +68,9 @@ const emit = defineEmits<{ const canvasRoot = ref(null) const labels = shallowRef([]) const hoveredKey = ref(null) -const sceneModel = shallowRef(buildRelationshipGalaxy3DScene(props.graph)) +const sceneModel = shallowRef( + buildRelationshipGalaxy3DScene(props.graph, { selectedKey: props.selectedKey }) +) const selectedVisibleLabelKeys = shallowRef | null>(null) let renderer: THREE.WebGLRenderer | null = null @@ -117,7 +119,7 @@ function scenePosition(node: RelationshipGalaxy3DNode, model: RelationshipGalaxy function renderGraph(shouldFit = false) { if (!scene || !camera || !renderer) return - const model = buildRelationshipGalaxy3DScene(props.graph) + const model = buildRelationshipGalaxy3DScene(props.graph, { selectedKey: props.selectedKey }) sceneModel.value = model updateSelectedVisibleLabelKeys() clearGroup(edgeGroup) @@ -778,9 +780,7 @@ watch( watch( () => props.selectedKey, () => { - updateSelectedVisibleLabelKeys() - labelFrame = 1 - updateLabels() + renderGraph(false) }, { flush: 'post' } ) diff --git a/src/pages/people/relationships/relationship-galaxy-3d-canvas-source.test.ts b/src/pages/people/relationships/relationship-galaxy-3d-canvas-source.test.ts new file mode 100644 index 00000000..c06a2eb4 --- /dev/null +++ b/src/pages/people/relationships/relationship-galaxy-3d-canvas-source.test.ts @@ -0,0 +1,47 @@ +/** + * Run: pnpm test -- src/pages/people/relationships/relationship-galaxy-3d-canvas-source.test.ts + */ + +import assert from 'node:assert/strict' +import { readFileSync } from 'node:fs' +import { describe, it } from 'node:test' + +function readCanvasSource(): string { + return readFileSync(new URL('./components/RelationshipGalaxyThreeCanvas.vue', import.meta.url), 'utf8') +} + +describe('RelationshipGalaxyThreeCanvas scene wiring', () => { + it('passes the selected node into 3D scene construction', () => { + const source = readCanvasSource() + const initialSceneModel = source.slice( + source.indexOf('const sceneModel'), + source.indexOf('const selectedVisibleLabelKeys') + ) + const renderGraph = source.slice( + source.indexOf('function renderGraph'), + source.indexOf('function updateSelectedVisibleLabelKeys') + ) + + assert.ok( + initialSceneModel.includes('buildRelationshipGalaxy3DScene(props.graph, { selectedKey: props.selectedKey })'), + 'initial 3D scene must respect selectedKey when the canvas is mounted with an active selection' + ) + assert.ok( + renderGraph.includes('buildRelationshipGalaxy3DScene(props.graph, { selectedKey: props.selectedKey })'), + '3D canvas must rebuild scene topology with selectedKey so focused neighborhoods are centered and filtered' + ) + }) + + it('rebuilds the 3D scene when selectedKey changes', () => { + const source = readCanvasSource() + const selectedKeyWatcher = source.slice( + source.indexOf('watch(\n () => props.selectedKey'), + source.indexOf('watch(\n () => props.privacyMode') + ) + + assert.ok( + selectedKeyWatcher.includes('renderGraph(false)'), + 'selectedKey changes affect 3D topology and must not be handled as a label-only update' + ) + }) +})