diff --git a/packages/phoenix-event-display/src/managers/three-manager/index.ts b/packages/phoenix-event-display/src/managers/three-manager/index.ts index 484644bd..f587a872 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/index.ts @@ -1117,6 +1117,35 @@ export class ThreeManager { return this.sceneManager.addEventDataTypeGroup(typeName); } + /** + * Extend or reset track collection geometries to a specified radius. + * This method clears all selections before modifying track geometries to prevent + * stale outline helpers that reference old geometry data. + * + * @param collectionName Name of the track collection to extend. + * @param radius The radius to extend tracks to. + * @param enable Whether to enable extension (true) or reset to original (false). + */ + public extendCollectionTracks( + collectionName: string, + radius: number, + enable: boolean, + ) { + // Clear all selections before modifying geometries to prevent: + // 1. Stale EdgesGeometry in outline helpers (outlines showing old track length) + // 2. Visual desynchronization between track and its selection outline + // 3. Orphaned outline helpers referencing disposed geometry data + if (this.selectionManager) { + this.selectionManager.clearAllSelections(); + } + if (this.effectsManager) { + this.effectsManager.setHoverOutline(null); + } + + // Now safe to modify track geometries + this.sceneManager.extendCollectionTracks(collectionName, radius, enable); + } + /** * Sets the renderer to be used to render the event display on the overlayed canvas. * @param overlayCanvas An HTML canvas on which the overlay renderer is to be set. diff --git a/packages/phoenix-event-display/src/managers/ui-manager/dat-gui-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/dat-gui-ui.ts index 297dd3b9..fc4f8007 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/dat-gui-ui.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/dat-gui-ui.ts @@ -311,7 +311,7 @@ export class DatGUIMenuUI implements PhoenixUI { .name('Extend to radius') .onChange((value: boolean) => { const radius = this.guiParameters[collectionName].extendRadius; - this.sceneManager.extendCollectionTracks(collectionName, radius, value); + this.three.extendCollectionTracks(collectionName, radius, value); }); collFolder .add(this.guiParameters[collectionName], 'extendRadius', 100, 5000) @@ -319,7 +319,7 @@ export class DatGUIMenuUI implements PhoenixUI { .onFinishChange((value: number) => { const enabled = this.guiParameters[collectionName].extendTracks; if (enabled) { - this.sceneManager.extendCollectionTracks(collectionName, value, true); + this.three.extendCollectionTracks(collectionName, value, true); } }); collFolder diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts index 2eaeaf7a..e6857dc0 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts @@ -376,7 +376,7 @@ export class PhoenixMenuUI implements PhoenixUI { onChange: (value: boolean) => { this.collectionExtendState[collectionName].enabled = value; const radius = this.collectionExtendState[collectionName].radius; - this.sceneManager.extendCollectionTracks(collectionName, radius, value); + this.three.extendCollectionTracks(collectionName, radius, value); }, }); @@ -390,7 +390,7 @@ export class PhoenixMenuUI implements PhoenixUI { onChange: (value: number) => { this.collectionExtendState[collectionName].radius = value; if (this.collectionExtendState[collectionName].enabled) { - this.sceneManager.extendCollectionTracks(collectionName, value, true); + this.three.extendCollectionTracks(collectionName, value, true); } }, });