From 491ad3ba88192d02ed41c7d7e7660acbcbf3b607 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Wed, 31 Jul 2024 13:44:24 +0200 Subject: [PATCH 01/33] Fixes for "Relative import paths need explicit file extensions in ECMAScript imports" error --- packages/phoenix-event-display/package.json | 5 +- packages/phoenix-event-display/src/browser.ts | 42 +++++------ .../src/event-display.ts | 34 ++++----- .../phoenix-event-display/src/helpers/file.ts | 7 +- .../src/helpers/rk-helper.ts | 4 +- packages/phoenix-event-display/src/index.ts | 74 +++++++++---------- .../src/lib/types/configuration.ts | 8 +- .../src/loaders/cms-loader.ts | 4 +- .../src/loaders/edm4hep-json-loader.ts | 2 +- .../src/loaders/event-data-loader.ts | 6 +- .../src/loaders/jivexml-loader.ts | 4 +- .../src/loaders/jsroot-event-loader.ts | 2 +- .../src/loaders/objects/cms-objects.ts | 2 +- .../src/loaders/objects/phoenix-objects.ts | 10 +-- .../src/loaders/phoenix-loader.ts | 26 +++---- .../src/loaders/script-loader.ts | 2 +- .../src/loaders/trackml-loader.ts | 2 +- .../src/managers/state-manager.ts | 8 +- .../three-manager/animations-manager.ts | 6 +- .../managers/three-manager/color-manager.ts | 2 +- .../three-manager/controls-manager.ts | 4 +- .../managers/three-manager/effects-manager.ts | 8 +- .../managers/three-manager/export-manager.ts | 6 +- .../managers/three-manager/import-manager.ts | 10 +-- .../src/managers/three-manager/index.ts | 43 +++++------ .../managers/three-manager/scene-manager.ts | 10 +-- .../three-manager/selection-manager.ts | 8 +- .../managers/three-manager/xr/ar-manager.ts | 4 +- .../managers/three-manager/xr/vr-manager.ts | 4 +- .../src/managers/ui-manager/color-options.ts | 6 +- .../src/managers/ui-manager/dat-gui-ui.ts | 8 +- .../src/managers/ui-manager/index.ts | 24 +++--- .../phoenix-menu/phoenix-menu-node.ts | 2 +- .../phoenix-menu/phoenix-menu-ui.ts | 14 ++-- .../src/managers/ui-manager/phoenix-ui.ts | 2 +- .../src/managers/url-options-manager.ts | 12 +-- packages/phoenix-event-display/tsconfig.json | 12 ++- packages/phoenix-ng/package.json | 2 +- .../phoenix-app/src/app/app.module.ts | 3 +- .../src/app/sections/atlas/atlas.component.ts | 7 +- .../phoenix-ui-components/package.json | 2 +- packages/phoenix-ng/tsconfig.json | 12 ++- yarn.lock | 34 ++++----- 43 files changed, 249 insertions(+), 238 deletions(-) diff --git a/packages/phoenix-event-display/package.json b/packages/phoenix-event-display/package.json index 67965c67c..3d770af45 100644 --- a/packages/phoenix-event-display/package.json +++ b/packages/phoenix-event-display/package.json @@ -4,6 +4,7 @@ "description": "API for web-based experiment independent event display.", "main": "dist/index", "types": "dist/index", + "type": "module", "author": "Phoenix contributors (https://github.com/HSF/phoenix/graphs/contributors)", "license": "Apache-2.0", "homepage": "http://github.com/HSF/phoenix/tree/main/packages/phoenix-event-display#readme", @@ -45,14 +46,14 @@ "jsroot": "^7.7.2", "jszip": "^3.10.1", "stats-js": "^1.0.1", - "three": "^0.165.0" + "three": "^0.167.0" }, "devDependencies": { "@babel/helper-string-parser": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@compodoc/compodoc": "^1.1.25", "@types/dat.gui": "^0.7.13", - "@types/three": "^0.165.0", + "@types/three": "^0.167.1", "esbuild-loader": "^4.2.2", "jest": "^29.7.0", "ts-jest": "~29.2.3", diff --git a/packages/phoenix-event-display/src/browser.ts b/packages/phoenix-event-display/src/browser.ts index e423e9ddc..0946ed214 100644 --- a/packages/phoenix-event-display/src/browser.ts +++ b/packages/phoenix-event-display/src/browser.ts @@ -1,25 +1,25 @@ import { LoadingManager } from 'three'; -import { EventDisplay } from './event-display'; -import { Cut } from './lib/models/cut.model'; -import { PresetView } from './lib/models/preset-view.model'; -import { PrettySymbols } from './helpers/pretty-symbols'; -import { RKHelper } from './helpers/rk-helper'; -import { RungeKutta } from './helpers/runge-kutta'; -import { InfoLogger } from './helpers/info-logger'; -import { CMSLoader } from './loaders/cms-loader'; -import { JiveXMLLoader } from './loaders/jivexml-loader'; -import { JSRootEventLoader } from './loaders/jsroot-event-loader'; -import { CMSObjects } from './loaders/objects/cms-objects'; -import { PhoenixObjects } from './loaders/objects/phoenix-objects'; -import { PhoenixLoader } from './loaders/phoenix-loader'; -import { Edm4hepJsonLoader } from './loaders/edm4hep-json-loader'; -import { ScriptLoader } from './loaders/script-loader'; -import { TrackmlLoader } from './loaders/trackml-loader'; -import { StateManager } from './managers/state-manager'; -import { URLOptionsManager } from './managers/url-options-manager'; -import { ThreeManager } from './managers/three-manager'; -import { UIManager } from './managers/ui-manager'; -import { PhoenixMenuNode } from './managers/ui-manager/phoenix-menu/phoenix-menu-node'; +import { EventDisplay } from './event-display.js'; +import { Cut } from './lib/models/cut.model.js'; +import { PresetView } from './lib/models/preset-view.model.js'; +import { PrettySymbols } from './helpers/pretty-symbols.js'; +import { RKHelper } from './helpers/rk-helper.js'; +import { RungeKutta } from './helpers/runge-kutta.js'; +import { InfoLogger } from './helpers/info-logger.js'; +import { CMSLoader } from './loaders/cms-loader.js'; +import { JiveXMLLoader } from './loaders/jivexml-loader.js'; +import { JSRootEventLoader } from './loaders/jsroot-event-loader.js'; +import { CMSObjects } from './loaders/objects/cms-objects.js'; +import { PhoenixObjects } from './loaders/objects/phoenix-objects.js'; +import { PhoenixLoader } from './loaders/phoenix-loader.js'; +import { Edm4hepJsonLoader } from './loaders/edm4hep-json-loader.js'; +import { ScriptLoader } from './loaders/script-loader.js'; +import { TrackmlLoader } from './loaders/trackml-loader.js'; +import { StateManager } from './managers/state-manager.js'; +import { URLOptionsManager } from './managers/url-options-manager.js'; +import { ThreeManager } from './managers/three-manager/index.js'; +import { UIManager } from './managers/ui-manager/index.js'; +import { PhoenixMenuNode } from './managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; if (typeof globalThis !== 'undefined') { // `globalThis` makes Phoenix modules available in the browser diff --git a/packages/phoenix-event-display/src/event-display.ts b/packages/phoenix-event-display/src/event-display.ts index d42ea11c2..d966dd309 100644 --- a/packages/phoenix-event-display/src/event-display.ts +++ b/packages/phoenix-event-display/src/event-display.ts @@ -1,19 +1,17 @@ -import { httpRequest } from 'jsroot'; +import { httpRequest, build, openFile } from 'jsroot'; import { settings as jsrootSettings } from 'jsroot'; -import { build } from 'jsroot/geom'; -import { openFile } from 'jsroot/io'; -import { ThreeManager } from './managers/three-manager'; -import { UIManager } from './managers/ui-manager'; -import { InfoLogger } from './helpers/info-logger'; -import { Configuration } from './lib/types/configuration'; -import { StateManager } from './managers/state-manager'; -import { LoadingManager } from './managers/loading-manager'; -import { URLOptionsManager } from './managers/url-options-manager'; -import { ActiveVariable } from './helpers/active-variable'; -import { AnimationPreset } from './managers/three-manager/animations-manager'; -import { XRSessionType } from './managers/three-manager/xr/xr-manager'; -import { getLabelTitle } from './helpers/labels'; -import { PhoenixLoader } from './loaders/phoenix-loader'; +import { ThreeManager } from './managers/three-manager/index.js'; +import { UIManager } from './managers/ui-manager/index.js'; +import { InfoLogger } from './helpers/info-logger.js'; +import type { Configuration } from './lib/types/configuration.js'; +import { StateManager } from './managers/state-manager.js'; +import { LoadingManager } from './managers/loading-manager.js'; +import { URLOptionsManager } from './managers/url-options-manager.js'; +import { ActiveVariable } from './helpers/active-variable.js'; +import type { AnimationPreset } from './managers/three-manager/animations-manager.js'; +import { XRSessionType } from './managers/three-manager/xr/xr-manager.js'; +import { getLabelTitle } from './helpers/labels.js'; +import { PhoenixLoader } from './loaders/phoenix-loader.js'; declare global { /** @@ -357,7 +355,7 @@ export class EventDisplay { */ public async loadGLTFGeometry( url: any, - name: string | undefined, + name: string, menuNodeName?: string, scale?: number, initiallyVisible: boolean = true, @@ -545,7 +543,7 @@ export class EventDisplay { * the callback on changes to the displayed event. * @param callback Callback to be added to the onDisplayedEventChange array. */ - public listenToDisplayedEventChange(callback: (event) => any) { + public listenToDisplayedEventChange(callback: (event: any) => any) { this.onDisplayedEventChange.push(callback); } @@ -554,7 +552,7 @@ export class EventDisplay { * the callback on changes to the events. * @param callback Callback to be added to the onEventsChange array. */ - public listenToLoadedEventsChange(callback: (events) => any) { + public listenToLoadedEventsChange(callback: (events: any) => any) { this.onEventsChange.push(callback); } diff --git a/packages/phoenix-event-display/src/helpers/file.ts b/packages/phoenix-event-display/src/helpers/file.ts index f02d2f1d1..d0dae0617 100644 --- a/packages/phoenix-event-display/src/helpers/file.ts +++ b/packages/phoenix-event-display/src/helpers/file.ts @@ -35,10 +35,11 @@ export const loadFile = ( const configFile = e.target?.files[0]; const reader = new FileReader(); reader.onload = (e) => { - onFileRead?.(e.target.result.toString()); - + if (e.target && e.target.result) { + onFileRead?.(e.target.result.toString()); + } inputFile.remove(); - inputFile = null; + inputFile = new HTMLInputElement(); }; reader.readAsText(configFile); }; diff --git a/packages/phoenix-event-display/src/helpers/rk-helper.ts b/packages/phoenix-event-display/src/helpers/rk-helper.ts index 0fee19b11..4134c7a62 100644 --- a/packages/phoenix-event-display/src/helpers/rk-helper.ts +++ b/packages/phoenix-event-display/src/helpers/rk-helper.ts @@ -1,6 +1,6 @@ -import { RungeKutta } from './runge-kutta'; +import { RungeKutta } from './runge-kutta.js'; import { Vector3 } from 'three'; -import { CoordinateHelper } from './coordinate-helper'; +import { CoordinateHelper } from './coordinate-helper.js'; /** * Helper methods for RungeKutta functions. diff --git a/packages/phoenix-event-display/src/index.ts b/packages/phoenix-event-display/src/index.ts index 5abe5dd16..b98107c3f 100644 --- a/packages/phoenix-event-display/src/index.ts +++ b/packages/phoenix-event-display/src/index.ts @@ -1,50 +1,50 @@ // Event display -export * from './event-display'; +export * from './event-display.js'; // Three -export * from './managers/three-manager/index'; -export * from './managers/three-manager/animations-manager'; -export * from './managers/three-manager/controls-manager'; -export * from './managers/three-manager/effects-manager'; -export * from './managers/three-manager/export-manager'; -export * from './managers/three-manager/import-manager'; -export * from './managers/three-manager/renderer-manager'; -export * from './managers/three-manager/scene-manager'; -export * from './managers/three-manager/selection-manager'; -export * from './managers/three-manager/xr/xr-manager'; -export * from './managers/three-manager/xr/vr-manager'; -export * from './managers/three-manager/xr/ar-manager'; +export * from './managers/three-manager/index.js'; +export * from './managers/three-manager/animations-manager.js'; +export * from './managers/three-manager/controls-manager.js'; +export * from './managers/three-manager/effects-manager.js'; +export * from './managers/three-manager/export-manager.js'; +export * from './managers/three-manager/import-manager.js'; +export * from './managers/three-manager/renderer-manager.js'; +export * from './managers/three-manager/scene-manager.js'; +export * from './managers/three-manager/selection-manager.js'; +export * from './managers/three-manager/xr/xr-manager.js'; +export * from './managers/three-manager/xr/vr-manager.js'; +export * from './managers/three-manager/xr/ar-manager.js'; // UI -export * from './managers/ui-manager/index'; -export * from './managers/ui-manager/phoenix-menu/phoenix-menu-node'; +export * from './managers/ui-manager/index.js'; +export * from './managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; // Extras -export * from './lib/types/configuration'; -export * from './lib/models/cut.model'; -export * from './lib/models/preset-view.model'; +export * from './lib/types/configuration.js'; +export * from './lib/models/cut.model.js'; +export * from './lib/models/preset-view.model.js'; // Helpers -export * from './helpers/info-logger'; -export * from './helpers/rk-helper'; -export * from './helpers/runge-kutta'; -export * from './helpers/pretty-symbols'; -export * from './helpers/active-variable'; -export * from './helpers/zip'; +export * from './helpers/info-logger.js'; +export * from './helpers/rk-helper.js'; +export * from './helpers/runge-kutta.js'; +export * from './helpers/pretty-symbols.js'; +export * from './helpers/active-variable.js'; +export * from './helpers/zip.js'; // Loaders -export * from './loaders/event-data-loader'; -export * from './loaders/cms-loader'; -export * from './loaders/jivexml-loader'; -export * from './loaders/jsroot-event-loader'; -export * from './loaders/phoenix-loader'; -export * from './loaders/edm4hep-json-loader'; -export * from './loaders/script-loader'; -export * from './loaders/trackml-loader'; -export * from './loaders/objects/cms-objects'; -export * from './loaders/objects/phoenix-objects'; +export * from './loaders/event-data-loader.js'; +export * from './loaders/cms-loader.js'; +export * from './loaders/jivexml-loader.js'; +export * from './loaders/jsroot-event-loader.js'; +export * from './loaders/phoenix-loader.js'; +export * from './loaders/edm4hep-json-loader.js'; +export * from './loaders/script-loader.js'; +export * from './loaders/trackml-loader.js'; +export * from './loaders/objects/cms-objects.js'; +export * from './loaders/objects/phoenix-objects.js'; // Managers -export * from './managers/state-manager'; -export * from './managers/loading-manager'; -export * from './managers/url-options-manager'; +export * from './managers/state-manager.js'; +export * from './managers/loading-manager.js'; +export * from './managers/url-options-manager.js'; diff --git a/packages/phoenix-event-display/src/lib/types/configuration.ts b/packages/phoenix-event-display/src/lib/types/configuration.ts index c7f21044b..bb8072d25 100644 --- a/packages/phoenix-event-display/src/lib/types/configuration.ts +++ b/packages/phoenix-event-display/src/lib/types/configuration.ts @@ -1,7 +1,7 @@ -import { PresetView } from '../models/preset-view.model'; -import { EventDataLoader } from '../../loaders/event-data-loader'; -import { PhoenixMenuNode } from '../../managers/ui-manager/phoenix-menu/phoenix-menu-node'; -import { AnimationPreset } from '../../managers/three-manager/animations-manager'; +import { PresetView } from '../models/preset-view.model.js'; +import { EventDataLoader } from '../../loaders/event-data-loader.js'; +import { PhoenixMenuNode } from '../../managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; +import { AnimationPreset } from '../../managers/three-manager/animations-manager.js'; import { DepthPackingStrategies } from 'three'; /** diff --git a/packages/phoenix-event-display/src/loaders/cms-loader.ts b/packages/phoenix-event-display/src/loaders/cms-loader.ts index 04112182e..d78736871 100644 --- a/packages/phoenix-event-display/src/loaders/cms-loader.ts +++ b/packages/phoenix-event-display/src/loaders/cms-loader.ts @@ -1,6 +1,6 @@ -import { PhoenixLoader } from './phoenix-loader'; +import { PhoenixLoader } from './phoenix-loader.js'; import { Vector3, QuadraticBezierCurve3 } from 'three'; -import { CMSObjects } from './objects/cms-objects'; +import { CMSObjects } from './objects/cms-objects.js'; import JSZip from 'jszip'; /** diff --git a/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts b/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts index 0ab69899b..f939f82eb 100644 --- a/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts +++ b/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts @@ -1,4 +1,4 @@ -import { PhoenixLoader } from './phoenix-loader'; +import { PhoenixLoader } from './phoenix-loader.js'; /** * Edm4hepJsonLoader for loading EDM4hep json dumps diff --git a/packages/phoenix-event-display/src/loaders/event-data-loader.ts b/packages/phoenix-event-display/src/loaders/event-data-loader.ts index dabf63882..a74603fdd 100644 --- a/packages/phoenix-event-display/src/loaders/event-data-loader.ts +++ b/packages/phoenix-event-display/src/loaders/event-data-loader.ts @@ -1,6 +1,6 @@ -import { ThreeManager } from '../managers/three-manager'; -import { UIManager } from '../managers/ui-manager'; -import { InfoLogger } from '../helpers/info-logger'; +import { ThreeManager } from '../managers/three-manager/index.js'; +import { UIManager } from '../managers/ui-manager/index.js'; +import { InfoLogger } from '../helpers/info-logger.js'; /** * Event data loader for implementing different event data loaders. diff --git a/packages/phoenix-event-display/src/loaders/jivexml-loader.ts b/packages/phoenix-event-display/src/loaders/jivexml-loader.ts index 14fe75a4c..6510b70cc 100644 --- a/packages/phoenix-event-display/src/loaders/jivexml-loader.ts +++ b/packages/phoenix-event-display/src/loaders/jivexml-loader.ts @@ -1,5 +1,5 @@ -import { PhoenixLoader } from './phoenix-loader'; -import { CoordinateHelper } from '../helpers/coordinate-helper'; +import { PhoenixLoader } from './phoenix-loader.js'; +import { CoordinateHelper } from '../helpers/coordinate-helper.js'; /** * PhoenixLoader for processing and loading an event from the JiveXML data format. diff --git a/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts b/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts index 0c93a0fdf..f3d398bec 100644 --- a/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts +++ b/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts @@ -1,4 +1,4 @@ -import { PhoenixLoader } from './phoenix-loader'; +import { PhoenixLoader } from './phoenix-loader.js'; import { openFile } from 'jsroot'; /** diff --git a/packages/phoenix-event-display/src/loaders/objects/cms-objects.ts b/packages/phoenix-event-display/src/loaders/objects/cms-objects.ts index 089684b4c..026acd76c 100644 --- a/packages/phoenix-event-display/src/loaders/objects/cms-objects.ts +++ b/packages/phoenix-event-display/src/loaders/objects/cms-objects.ts @@ -10,7 +10,7 @@ import { BufferGeometry, BufferAttribute, } from 'three'; -import { EVENT_DATA_TYPE_COLORS } from '../../helpers/constants'; +import { EVENT_DATA_TYPE_COLORS } from '../../helpers/constants.js'; /** * Physics objects that make up an event in CMS that are not a part of {@link PhoenixObjects}. diff --git a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts index 7ff2ee82c..9541881e1 100644 --- a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts +++ b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts @@ -24,12 +24,12 @@ import { CanvasTexture, } from 'three'; import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'; -import { EVENT_DATA_TYPE_COLORS } from '../../helpers/constants'; -import { RKHelper } from '../../helpers/rk-helper'; -import { CoordinateHelper } from '../../helpers/coordinate-helper'; +import { EVENT_DATA_TYPE_COLORS } from '../../helpers/constants.js'; +import { RKHelper } from '../../helpers/rk-helper.js'; +import { CoordinateHelper } from '../../helpers/coordinate-helper.js'; import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'; -import { TracksMaterial, TracksMesh } from './tracks'; -import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils'; +import { TracksMaterial, TracksMesh } from './tracks.js'; +import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'; /** * Physics objects that make up an event in Phoenix. diff --git a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts index 0f478bc99..79eb55fe9 100644 --- a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts +++ b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts @@ -1,18 +1,18 @@ import { Group, Object3D, Vector3 } from 'three'; import { GUI } from 'dat.gui'; -import { EventDataLoader } from './event-data-loader'; -import { UIManager } from '../managers/ui-manager'; -import { ThreeManager } from '../managers/three-manager'; -import { Cut } from '../lib/models/cut.model'; -import { PhoenixObjects } from './objects/phoenix-objects'; -import { InfoLogger } from '../helpers/info-logger'; -import { PhoenixMenuNode } from '../managers/ui-manager/phoenix-menu/phoenix-menu-node'; -import { LoadingManager } from '../managers/loading-manager'; -import { StateManager } from '../managers/state-manager'; -import { CoordinateHelper } from '../helpers/coordinate-helper'; -import { getLabelTitle } from '../helpers/labels'; -import { DatGUIMenuUI } from '../managers/ui-manager/dat-gui-ui'; -import { PhoenixMenuUI } from '../managers/ui-manager/phoenix-menu/phoenix-menu-ui'; +import { EventDataLoader } from './event-data-loader.js'; +import { UIManager } from '../managers/ui-manager/index.js'; +import { ThreeManager } from '../managers/three-manager/index.js'; +import { Cut } from '../lib/models/cut.model.js'; +import { PhoenixObjects } from './objects/phoenix-objects.js'; +import { InfoLogger } from '../helpers/info-logger.js'; +import { PhoenixMenuNode } from '../managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; +import { LoadingManager } from '../managers/loading-manager.js'; +import { StateManager } from '../managers/state-manager.js'; +import { CoordinateHelper } from '../helpers/coordinate-helper.js'; +import { getLabelTitle } from '../helpers/labels.js'; +import { DatGUIMenuUI } from '../managers/ui-manager/dat-gui-ui.js'; +import { PhoenixMenuUI } from '../managers/ui-manager/phoenix-menu/phoenix-menu-ui.js'; /** * Loader for processing and loading an event. diff --git a/packages/phoenix-event-display/src/loaders/script-loader.ts b/packages/phoenix-event-display/src/loaders/script-loader.ts index 32ef5eb12..2105d0e43 100644 --- a/packages/phoenix-event-display/src/loaders/script-loader.ts +++ b/packages/phoenix-event-display/src/loaders/script-loader.ts @@ -1,4 +1,4 @@ -import { LoadingManager } from '../managers/loading-manager'; +import { LoadingManager } from '../managers/loading-manager.js'; /** * Script loader for dynamically loading external scripts. diff --git a/packages/phoenix-event-display/src/loaders/trackml-loader.ts b/packages/phoenix-event-display/src/loaders/trackml-loader.ts index 01d904430..71d799549 100644 --- a/packages/phoenix-event-display/src/loaders/trackml-loader.ts +++ b/packages/phoenix-event-display/src/loaders/trackml-loader.ts @@ -1,4 +1,4 @@ -import { PhoenixLoader } from './phoenix-loader'; +import { PhoenixLoader } from './phoenix-loader.js'; /** * PhoenixLoader for processing and loading an event from TrackML. diff --git a/packages/phoenix-event-display/src/managers/state-manager.ts b/packages/phoenix-event-display/src/managers/state-manager.ts index 98a4e886a..be41dea8e 100644 --- a/packages/phoenix-event-display/src/managers/state-manager.ts +++ b/packages/phoenix-event-display/src/managers/state-manager.ts @@ -1,8 +1,8 @@ -import { EventDisplay } from '../event-display'; +import { EventDisplay } from '../event-display.js'; import { Camera } from 'three'; -import { PhoenixMenuNode } from './ui-manager/phoenix-menu/phoenix-menu-node'; -import { loadFile, saveFile } from '../helpers/file'; -import { ActiveVariable } from '../helpers/active-variable'; +import { PhoenixMenuNode } from './ui-manager/phoenix-menu/phoenix-menu-node.js'; +import { loadFile, saveFile } from '../helpers/file.js'; +import { ActiveVariable } from '../helpers/active-variable.js'; /** * A singleton manager for managing the scene's state. diff --git a/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts index f47e6d7d9..ac924badb 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts @@ -15,9 +15,9 @@ import { Plane, Group, } from 'three'; -import { SceneManager } from './scene-manager'; -import { RendererManager } from './renderer-manager'; -import { TracksMesh } from '../../loaders/objects/tracks'; +import { SceneManager } from './scene-manager.js'; +import { RendererManager } from './renderer-manager.js'; +import { TracksMesh } from '../../loaders/objects/tracks.js'; /** Type for animation preset. */ export interface AnimationPreset { diff --git a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts index 62a9ebd49..853eb4887 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts @@ -1,5 +1,5 @@ import { Color, MeshPhongMaterial } from 'three'; -import { SceneManager } from './scene-manager'; +import { SceneManager } from './scene-manager.js'; /** * Color manager for three.js functions related to coloring of objects. diff --git a/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts index f8e217f72..c1309e658 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts @@ -10,8 +10,8 @@ import { Mesh, TubeGeometry, } from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { RendererManager } from './renderer-manager'; +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +import { RendererManager } from './renderer-manager.js'; /** * Manager for managing event display controls. diff --git a/packages/phoenix-event-display/src/managers/three-manager/effects-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/effects-manager.ts index 914e9ac4e..de9ff3595 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/effects-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/effects-manager.ts @@ -1,8 +1,8 @@ -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; +import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { Camera, Scene, WebGLRenderer, Vector2, NormalBlending } from 'three'; -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; -import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; -import { Pass } from 'three/examples/jsm/postprocessing/Pass'; +import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; +import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'; +import { Pass } from 'three/examples/jsm/postprocessing/Pass.js'; /** * Manager for managing three.js event display effects like outline pass and unreal bloom. diff --git a/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts index c686a5c44..e3542ef97 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts @@ -1,7 +1,7 @@ -import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter'; +import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'; import { Scene, Object3D } from 'three'; -import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter'; -import { saveFile } from '../../helpers/file'; +import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'; +import { saveFile } from '../../helpers/file.js'; /** * Manager for managing event display's export related functionality. diff --git a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts index 1c3c8e966..127b5e4c9 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts @@ -14,11 +14,11 @@ import { Matrix4, REVISION, } from 'three'; -import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; -import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; -import { GeometryUIParameters } from '../../lib/types/geometry-ui-parameters'; -import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils'; +import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; +import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; +import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; +import type { GeometryUIParameters } from '../../lib/types/geometry-ui-parameters.js'; +import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'; import JSZip from 'jszip'; /** 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 4b3778930..e774bb79b 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/index.ts @@ -1,9 +1,9 @@ import { EventEmitter } from '@angular/core'; import { Tween, update as tweenUpdate } from '@tweenjs/tween.js'; +import type { Object3DEventMap, Intersection } from 'three'; import { Group, Object3D, - Object3DEventMap, Vector3, Plane, Quaternion, @@ -18,28 +18,29 @@ import { PerspectiveCamera, Vector2, Raycaster, - Intersection, - Event, } from 'three'; import html2canvas from 'html2canvas'; -import { Configuration } from '../../lib/types/configuration'; -import { ControlsManager } from './controls-manager'; -import { RendererManager } from './renderer-manager'; -import { ExportManager } from './export-manager'; -import { ImportManager } from './import-manager'; -import { SelectionManager } from './selection-manager'; -import { SceneManager } from './scene-manager'; -import { AnimationPreset, AnimationsManager } from './animations-manager'; -import { InfoLogger } from '../../helpers/info-logger'; -import { EffectsManager } from './effects-manager'; -import { StateManager } from '../state-manager'; -import { LoadingManager } from '../loading-manager'; -import { ActiveVariable } from '../../helpers/active-variable'; -import { ColorManager } from './color-manager'; -import { XRManager, XRSessionType } from './xr/xr-manager'; -import { VRManager } from './xr/vr-manager'; -import { ARManager } from './xr/ar-manager'; -import { GeometryUIParameters } from '../../lib/types/geometry-ui-parameters'; +import type { Configuration } from '../../lib/types/configuration.js'; +import { ControlsManager } from './controls-manager.js'; +import { RendererManager } from './renderer-manager.js'; +import { ExportManager } from './export-manager.js'; +import { ImportManager } from './import-manager.js'; +import { SelectionManager } from './selection-manager.js'; +import { SceneManager } from './scene-manager.js'; +import type { + AnimationPreset, + AnimationsManager, +} from './animations-manager.js'; +import { InfoLogger } from '../../helpers/info-logger.js'; +import { EffectsManager } from './effects-manager.js'; +import { StateManager } from '../state-manager.js'; +import { LoadingManager } from '../loading-manager.js'; +import { ActiveVariable } from '../../helpers/active-variable.js'; +import { ColorManager } from './color-manager.js'; +import { XRManager, XRSessionType } from './xr/xr-manager.js'; +import { VRManager } from './xr/vr-manager.js'; +import { ARManager } from './xr/ar-manager.js'; +import type { GeometryUIParameters } from '../../lib/types/geometry-ui-parameters.js'; (function () { const _updateMatrixWorld = Object3D.prototype.updateMatrixWorld; diff --git a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts index 163839011..2d674e795 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts @@ -18,11 +18,11 @@ import { DoubleSide, BoxGeometry, } from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'; -import { Font } from 'three/examples/jsm/loaders/FontLoader'; -import { Cut } from '../../lib/models/cut.model'; -import { CoordinateHelper } from '../../helpers/coordinate-helper'; +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; +import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'; +import { Font } from 'three/examples/jsm/loaders/FontLoader.js'; +import { Cut } from '../../lib/models/cut.model.js'; +import { CoordinateHelper } from '../../helpers/coordinate-helper.js'; import HelvetikerFont from './fonts/helvetiker_regular.typeface.json'; /** diff --git a/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts index 54b6859c7..e30c4cb93 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts @@ -9,10 +9,10 @@ import { AxesHelper, } from 'three'; import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'; -import { InfoLogger } from '../../helpers/info-logger'; -import { EffectsManager } from './effects-manager'; -import { PrettySymbols } from '../../helpers/pretty-symbols'; -import { ActiveVariable } from '../../helpers/active-variable'; +import { InfoLogger } from '../../helpers/info-logger.js'; +import { EffectsManager } from './effects-manager.js'; +import { PrettySymbols } from '../../helpers/pretty-symbols.js'; +import { ActiveVariable } from '../../helpers/active-variable.js'; /** * Manager for managing event display's selection related functions. diff --git a/packages/phoenix-event-display/src/managers/three-manager/xr/ar-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/xr/ar-manager.ts index a5bd5fb04..8b16909c3 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/xr/ar-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/xr/ar-manager.ts @@ -1,6 +1,6 @@ import { PerspectiveCamera, Scene } from 'three'; -import { SceneManager } from '../scene-manager'; -import { XRManager, XRSessionType } from './xr-manager'; +import { SceneManager } from '../scene-manager.js'; +import { XRManager, XRSessionType } from './xr-manager.js'; // NOTE: This was created on 28/06/2021 // It might become outdated given how WebXR is still a work in progress diff --git a/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts index c68c0374f..bb6f9f422 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts @@ -1,6 +1,6 @@ import { WebGLRenderer, Vector3, BufferGeometry, Line } from 'three'; -import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory'; -import { XRManager, XRSessionType } from './xr-manager'; +import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js'; +import { XRManager, XRSessionType } from './xr-manager.js'; // NOTE: This was created on 29/08/2020 // It might become outdated given how WebXR is still a work in progress diff --git a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts index 0677d91f5..b71d6d02b 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts @@ -1,7 +1,7 @@ import { Color } from 'three'; -import { PrettySymbols } from '../../helpers/pretty-symbols'; -import { ColorManager } from '../three-manager/color-manager'; -import { PhoenixMenuNode } from './phoenix-menu/phoenix-menu-node'; +import { PrettySymbols } from '../../helpers/pretty-symbols.js'; +import { ColorManager } from '../three-manager/color-manager.js'; +import { PhoenixMenuNode } from './phoenix-menu/phoenix-menu-node.js'; /** Keys for options available for coloring event data by. */ export enum ColorByOptionKeys { 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 e7c4587d7..516ab4ec6 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 @@ -6,10 +6,10 @@ import { MeshPhongMaterial, Object3D, } from 'three'; -import { ThreeManager } from '../three-manager'; -import { SceneManager } from '../three-manager/scene-manager'; -import { Cut } from '../../lib/models/cut.model'; -import { PhoenixUI } from './phoenix-ui'; +import { ThreeManager } from '../three-manager/index.js'; +import { SceneManager } from '../three-manager/scene-manager.js' +import { Cut } from '../../lib/models/cut.model.js'; +import { PhoenixUI } from './phoenix-ui.js'; /** * A wrapper class for dat.GUI menu to perform UI related operations. diff --git a/packages/phoenix-event-display/src/managers/ui-manager/index.ts b/packages/phoenix-event-display/src/managers/ui-manager/index.ts index c6a8f1f17..bdce58b67 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/index.ts @@ -1,23 +1,23 @@ import Stats from 'stats-js'; import { Color, Object3D, Vector3 } from 'three'; -import { ThreeManager } from '../three-manager'; -import { Configuration } from '../../lib/types/configuration'; +import { ThreeManager } from '../three-manager/index.js'; +import type { Configuration } from '../../lib/types/configuration.js'; import { PresetView, ClippingSetting, -} from '../../lib/models/preset-view.model'; -import { Cut } from '../../lib/models/cut.model'; -import { SceneManager } from '../three-manager/scene-manager'; -import { StateManager } from '../../managers/state-manager'; -import { loadFile, saveFile } from '../../helpers/file'; -import { DatGUIMenuUI } from './dat-gui-ui'; -import { PhoenixMenuUI } from './phoenix-menu/phoenix-menu-ui'; +} from '../../lib/models/preset-view.model.js'; +import { Cut } from '../../lib/models/cut.model.js'; +import { SceneManager } from '../three-manager/scene-manager.js'; +import { StateManager } from '../../managers/state-manager.js'; +import { loadFile, saveFile } from '../../helpers/file.js'; +import { DatGUIMenuUI } from './dat-gui-ui.js'; +import { PhoenixMenuUI } from './phoenix-menu/phoenix-menu-ui.js'; import { getFromLocalStorage, setToLocalStorage, -} from '../../helpers/browser-storage'; -import { PhoenixUI } from './phoenix-ui'; -import { AnimationPreset } from '../../managers/three-manager/animations-manager'; +} from '../../helpers/browser-storage.js'; +import { PhoenixUI } from './phoenix-ui.js'; +import { AnimationPreset } from '../../managers/three-manager/animations-manager.js'; /** If animation presets not passed in configuration, we will use this. */ const defaultAnimationPresets: AnimationPreset[] = [ diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index 6e566b908..4f853d66b 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -1,4 +1,4 @@ -import { PhoenixMenuConfigs } from './config-types'; +import { PhoenixMenuConfigs } from './config-types.js'; /** * A single node of phoenix menu item. 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 791a12672..224b638fc 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 @@ -5,13 +5,13 @@ import { MeshPhongMaterial, Object3D, } from 'three'; -import { SceneManager } from '../../three-manager/scene-manager'; -import { ThreeManager } from '../../three-manager'; -import { PhoenixMenuNode } from './phoenix-menu-node'; -import { Cut } from '../../../lib/models/cut.model'; -import { PrettySymbols } from '../../../helpers/pretty-symbols'; -import { ColorByOptionKeys, ColorOptions } from '../color-options'; -import { PhoenixUI } from '../phoenix-ui'; +import { SceneManager } from '../../three-manager/scene-manager.js'; +import { ThreeManager } from '../../three-manager/index.js'; +import { PhoenixMenuNode } from './phoenix-menu-node.js'; +import { Cut } from '../../../lib/models/cut.model.js'; +import { PrettySymbols } from '../../../helpers/pretty-symbols.js'; +import { ColorByOptionKeys, ColorOptions } from '../color-options.js'; +import type { PhoenixUI } from '../phoenix-ui.js'; /** * A wrapper class for Phoenix menu to perform UI related operations. diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts index 84379a27d..8faa97e7a 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts @@ -1,5 +1,5 @@ import { Color, Object3D } from 'three'; -import { Cut } from '../../lib/models/cut.model'; +import { Cut } from '../../lib/models/cut.model.js'; /** * Common interface for implement Phoenix UI menu. diff --git a/packages/phoenix-event-display/src/managers/url-options-manager.ts b/packages/phoenix-event-display/src/managers/url-options-manager.ts index 814f587be..99da0d9da 100644 --- a/packages/phoenix-event-display/src/managers/url-options-manager.ts +++ b/packages/phoenix-event-display/src/managers/url-options-manager.ts @@ -1,9 +1,9 @@ -import { JiveXMLLoader } from '../loaders/jivexml-loader'; -import { PhoenixLoader } from '../loaders/phoenix-loader'; -import { Configuration } from '../lib/types/configuration'; -import { EventDisplay } from '../event-display'; -import { StateManager } from './state-manager'; -import { readZipFile } from '../helpers/zip'; +import { JiveXMLLoader } from '../loaders/jivexml-loader.js'; +import { PhoenixLoader } from '../loaders/phoenix-loader.js'; +import { Configuration } from '../lib/types/configuration.js'; +import { EventDisplay } from '../event-display.js'; +import { StateManager } from './state-manager.js'; +import { readZipFile } from '../helpers/zip.js'; /** * Model for Phoenix URL options. diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index b17465c4f..b46cd9ec4 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -3,13 +3,17 @@ "baseUrl": "./", "rootDir": "src", "declaration": true, - "target": "es6", + "target": "es2020", "outDir": "dist", - "module": "esnext", - "moduleResolution": "node", + "module": "node16", + "moduleResolution": "node16", "sourceMap": true, + "declarationMap": true, "resolveJsonModule": true, - "esModuleInterop": true + "esModuleInterop": true, + "strict": true, + "strictPropertyInitialization": false, + "verbatimModuleSyntax": true }, "include": ["src"], "exclude": ["node_modules", "dist"] diff --git a/packages/phoenix-ng/package.json b/packages/phoenix-ng/package.json index 7a3ac973f..8dc2d2a75 100644 --- a/packages/phoenix-ng/package.json +++ b/packages/phoenix-ng/package.json @@ -41,7 +41,7 @@ "phoenix-ui-components": "^2.16.0", "qrcode": "1.5.3", "rxjs": "^7.8.1", - "three": "^0.165.0", + "three": "^0.167.0", "tslib": "^2.6.3", "typescript": "~5.4.5", "zone.js": "^0.14.8" diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts index e2d34c995..ae97db161 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts @@ -11,7 +11,8 @@ import { VPToggleComponent } from './sections/lhcb/vp-toggle/vp-toggle.component import { CMSComponent } from './sections/cms/cms.component'; import { TrackmlComponent } from './sections/trackml/trackml.component'; import { PhoenixUIModule } from 'phoenix-ui-components'; -import { RouterModule, Routes } from '@angular/router'; +import { RouterModule } from '@angular/router'; +import type { Routes } from '@angular/router'; import { PlaygroundComponent } from './sections/playground/playground.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { environment } from '../environments/environment'; diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts index 9ca41db5c..516cc2af9 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts @@ -1,16 +1,17 @@ -import { Component, OnInit } from '@angular/core'; -import { +import { Component } from '@angular/core'; +import type { OnInit } from '@angular/core'; +import type { EventDataFormat, EventDataImportOption, EventDisplayService, } from 'phoenix-ui-components'; import { - Configuration, PresetView, PhoenixMenuNode, PhoenixLoader, StateManager, } from 'phoenix-event-display'; +import type { Configuration } from 'phoenix-event-display'; import { environment } from '../../../environments/environment'; import eventConfig from '../../../../event-config.json'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/package.json b/packages/phoenix-ng/projects/phoenix-ui-components/package.json index 1812413d9..77502c76b 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/package.json +++ b/packages/phoenix-ng/projects/phoenix-ui-components/package.json @@ -33,7 +33,7 @@ "css-element-queries": "^1.2.3", "qrcode": "1.5.3", "rxjs": "^7.8.1", - "three": "^0.165.0", + "three": "^0.167.0", "tslib": "^2.6.3" }, "devDependencies": { diff --git a/packages/phoenix-ng/tsconfig.json b/packages/phoenix-ng/tsconfig.json index 6f3016861..c6274a1ef 100644 --- a/packages/phoenix-ng/tsconfig.json +++ b/packages/phoenix-ng/tsconfig.json @@ -6,19 +6,23 @@ "sourceMap": true, "declaration": false, "experimentalDecorators": true, - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "importHelpers": true, - "target": "es2022", - "module": "es2020", + "target": "esnext", + "module": "esnext", "lib": ["es2018", "dom"], "paths": { "phoenix-ui-components": [ "./projects/phoenix-ui-components/lib/public_api.ts" ] - } + }, + "noEmit": true, // or `emitDeclarationOnly` + "allowImportingTsExtensions": true, + "allowArbitraryExtensions": true, + "verbatimModuleSyntax": true, // or `isolatedModules` }, "angularCompilerOptions": { "strictTemplates": true, diff --git a/yarn.lock b/yarn.lock index 7581eb5ea..966e0f9d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6469,10 +6469,10 @@ __metadata: languageName: node linkType: hard -"@tweenjs/tween.js@npm:~23.1.1": - version: 23.1.1 - resolution: "@tweenjs/tween.js@npm:23.1.1" - checksum: a93b331f0c2dc2dd2fce2c08ab9e505cd71ce1b31a3e2218f31da4f2d2af84ac4c4eaab05f9929a7b7884c5e00c5d32e8fd1872e0a3e10e9cca20febc8d263b5 +"@tweenjs/tween.js@npm:~23.1.2": + version: 23.1.3 + resolution: "@tweenjs/tween.js@npm:23.1.3" + checksum: 2f8a908b275bb6729bde4b863c277bf7411d2e0302ceb0455369479077b89eaf8380cd9206b91ff574416418a95c6f06db4e1ddea732a286d0db0ba8e7c093d3 languageName: node linkType: hard @@ -6878,16 +6878,16 @@ __metadata: languageName: node linkType: hard -"@types/three@npm:^0.165.0": - version: 0.165.0 - resolution: "@types/three@npm:0.165.0" +"@types/three@npm:^0.167.1": + version: 0.167.1 + resolution: "@types/three@npm:0.167.1" dependencies: - "@tweenjs/tween.js": ~23.1.1 + "@tweenjs/tween.js": ~23.1.2 "@types/stats.js": "*" "@types/webxr": "*" fflate: ~0.8.2 meshoptimizer: ~0.18.1 - checksum: ed86979c5cee78070b9fe9fd94f6049d27c392eeb3061f10fc4b54b85daae2433b6f184c1a00407cbf856778c5bc113fdf46b8b87e778ed91a311e06b9ae938b + checksum: e7e60d6ff8d1f82725b1c879feef62171a81ab06955ecf0326452663e897d6902641a21deed10d68d89ecd891efba5fbfabac08ced3d9aca4ac40e6fc6d2898a languageName: node linkType: hard @@ -17071,7 +17071,7 @@ __metadata: "@compodoc/compodoc": ^1.1.25 "@tweenjs/tween.js": ^23.1.2 "@types/dat.gui": ^0.7.13 - "@types/three": ^0.165.0 + "@types/three": ^0.167.1 dat.gui: ^0.7.9 esbuild-loader: ^4.2.2 html2canvas: ^1.4.1 @@ -17079,7 +17079,7 @@ __metadata: jsroot: ^7.7.2 jszip: ^3.10.1 stats-js: ^1.0.1 - three: ^0.165.0 + three: ^0.167.0 ts-jest: ~29.2.3 typescript: ~5.4.5 webpack: ^5.93.0 @@ -17120,7 +17120,7 @@ __metadata: phoenix-ui-components: ^2.16.0 qrcode: 1.5.3 rxjs: ^7.8.1 - three: ^0.165.0 + three: ^0.167.0 ts-jest: ^29.2.3 tslib: ^2.6.3 typescript: ~5.4.5 @@ -17144,7 +17144,7 @@ __metadata: qrcode: 1.5.3 rimraf: ^5.0.9 rxjs: ^7.8.1 - three: ^0.165.0 + three: ^0.167.0 tslib: ^2.6.3 peerDependencies: "@angular/common": "*" @@ -19684,10 +19684,10 @@ __metadata: languageName: node linkType: hard -"three@npm:^0.165.0": - version: 0.165.0 - resolution: "three@npm:0.165.0" - checksum: 1dcfe9ef046a49036e527cf0f72e07475546a16ede694f24630330ece7635ab8ee5c3a3422d43c65c2d267a255e4859820ddb35381defadbd3515d91e2c2bd2e +"three@npm:^0.167.0": + version: 0.167.0 + resolution: "three@npm:0.167.0" + checksum: 0b60af6d2c443813dbed5ae305ffa22ab1c9066af20e27148db24f8b40e54d0988dd60201041bd93521871023c8d6ecf14b3dcf9fc190abcc5a71664372e27aa languageName: node linkType: hard From 29246a6c6d925aab5fb2ddee4943bfebb983f9be Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 11:37:49 +0200 Subject: [PATCH 02/33] Fix many compilation issues --- .../src/event-display.ts | 46 ++- .../src/helpers/runge-kutta.ts | 6 +- .../phoenix-event-display/src/helpers/zip.ts | 3 +- .../src/lib/types/configuration.ts | 7 +- .../src/loaders/cms-loader.ts | 56 +++- .../src/loaders/edm4hep-json-loader.ts | 16 +- .../src/loaders/jivexml-loader.ts | 62 ++-- .../src/loaders/jsroot-event-loader.ts | 3 +- .../src/loaders/objects/phoenix-objects.ts | 32 +- .../src/loaders/objects/tracks.ts | 5 +- .../src/loaders/phoenix-loader.ts | 15 +- .../src/loaders/trackml-loader.ts | 12 +- .../src/managers/state-manager.ts | 4 +- .../three-manager/animations-manager.ts | 39 ++- .../managers/three-manager/color-manager.ts | 64 ++-- .../three-manager/controls-manager.ts | 8 +- .../managers/three-manager/export-manager.ts | 8 +- .../managers/three-manager/import-manager.ts | 49 +-- .../src/managers/three-manager/index.ts | 304 ++++++++++-------- .../managers/three-manager/scene-manager.ts | 86 +++-- .../three-manager/selection-manager.ts | 33 +- .../src/managers/ui-manager/dat-gui-ui.ts | 9 +- .../src/managers/url-options-manager.ts | 12 +- .../src/app/sections/atlas/atlas.component.ts | 4 +- .../io-options/io-options.component.ts | 2 +- .../make-picture/make-picture.component.ts | 8 +- 26 files changed, 526 insertions(+), 367 deletions(-) diff --git a/packages/phoenix-event-display/src/event-display.ts b/packages/phoenix-event-display/src/event-display.ts index d966dd309..701a6dcbb 100644 --- a/packages/phoenix-event-display/src/event-display.ts +++ b/packages/phoenix-event-display/src/event-display.ts @@ -1,4 +1,4 @@ -import { httpRequest, build, openFile } from 'jsroot'; +import { httpRequest, build, openFile } from 'jsroot'; import { settings as jsrootSettings } from 'jsroot'; import { ThreeManager } from './managers/three-manager/index.js'; import { UIManager } from './managers/ui-manager/index.js'; @@ -144,12 +144,14 @@ export class EventDisplay { // Clearing existing event data this.graphicsLibrary.clearEventData(); // Build data and add to scene - this.configuration.eventDataLoader.buildEventData( - eventData, - this.graphicsLibrary, - this.ui, - this.infoLogger, - ); + if (this.configuration.eventDataLoader) { + this.configuration.eventDataLoader.buildEventData( + eventData, + this.graphicsLibrary, + this.ui, + this.infoLogger, + ); + } this.onDisplayedEventChange.forEach((callback) => callback(eventData)); // Reload the event data state in Phoenix menu this.ui.loadEventFolderPhoenixMenuState(); @@ -240,8 +242,8 @@ export class EventDisplay { filename: string, name: string, color: any, - menuNodeName?: string, - doubleSided?: boolean, + menuNodeName: string, + doubleSided: boolean, initiallyVisible: boolean = true, setFlat: boolean = true, ): Promise { @@ -356,8 +358,8 @@ export class EventDisplay { public async loadGLTFGeometry( url: any, name: string, - menuNodeName?: string, - scale?: number, + menuNodeName: string = '', + scale: number = 1.0, initiallyVisible: boolean = true, ): Promise { this.loadingManager.addLoadableItem(`gltf_geom_${name}`); @@ -527,7 +529,10 @@ export class EventDisplay { * @returns Object containing all physics objects from the desired collection. */ public getCollection(collectionName: string) { - return this.configuration.eventDataLoader.getCollection(collectionName); + if (this.configuration.eventDataLoader) { + return this.configuration.eventDataLoader.getCollection(collectionName); + } + return {}; } /** @@ -535,7 +540,10 @@ export class EventDisplay { * @returns List of strings, each representing a collection of the event displayed. */ public getCollections(): string[] { - return this.configuration.eventDataLoader.getCollections(); + if (this.configuration.eventDataLoader) { + return this.configuration.eventDataLoader.getCollections(); + } + return []; } /** @@ -561,7 +569,10 @@ export class EventDisplay { * @returns Metadata of the displayed event. */ public getEventMetadata(): any[] { - return this.configuration.eventDataLoader.getEventMetadata(); + if (this.configuration.eventDataLoader) { + return this.configuration.eventDataLoader.getEventMetadata(); + } + return []; } /** @@ -759,6 +770,10 @@ export class EventDisplay { indexInCollection: number, uuid: string, ) { + if (!this.configuration.eventDataLoader) { + return; + } + const labelId = this.configuration.eventDataLoader.addLabelToEventObject( label, collection, @@ -780,6 +795,9 @@ export class EventDisplay { */ public resetLabels() { // labelsObject[EventDataType][Collection][Index] + if (!this.configuration.eventDataLoader) { + return; + } const labelsObject = this.configuration.eventDataLoader.getLabelsObject(); for (const eventDataType in labelsObject) { for (const collection in labelsObject[eventDataType]) { diff --git a/packages/phoenix-event-display/src/helpers/runge-kutta.ts b/packages/phoenix-event-display/src/helpers/runge-kutta.ts index 3e9b5959b..ed8695854 100644 --- a/packages/phoenix-event-display/src/helpers/runge-kutta.ts +++ b/packages/phoenix-event-display/src/helpers/runge-kutta.ts @@ -18,9 +18,9 @@ export class RungeKutta { half_h: number, B_middle: Vector3, B_last: Vector3, - k2: Vector3, - k3: Vector3, - k4: Vector3; + k2: Vector3 = new Vector3(), + k3: Vector3 = new Vector3(), + k4: Vector3 = new Vector3(); // First Runge-Kutta point (at current position) const B_first: Vector3 = Field.get(state.pos); diff --git a/packages/phoenix-event-display/src/helpers/zip.ts b/packages/phoenix-event-display/src/helpers/zip.ts index fd5a00e13..6ac6c9074 100644 --- a/packages/phoenix-event-display/src/helpers/zip.ts +++ b/packages/phoenix-event-display/src/helpers/zip.ts @@ -12,7 +12,8 @@ export const readZipFile = async (file: File | ArrayBuffer) => { await archive.loadAsync(file); for (const filePath in archive.files) { - const fileData = await archive.file(filePath).async('string'); + const fileData = + (await archive.file(filePath)?.async('string')) ?? 'Unable to read file'; filesWithData[filePath] = fileData; } diff --git a/packages/phoenix-event-display/src/lib/types/configuration.ts b/packages/phoenix-event-display/src/lib/types/configuration.ts index bb8072d25..eb461a818 100644 --- a/packages/phoenix-event-display/src/lib/types/configuration.ts +++ b/packages/phoenix-event-display/src/lib/types/configuration.ts @@ -1,8 +1,7 @@ import { PresetView } from '../models/preset-view.model.js'; -import { EventDataLoader } from '../../loaders/event-data-loader.js'; -import { PhoenixMenuNode } from '../../managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; -import { AnimationPreset } from '../../managers/three-manager/animations-manager.js'; -import { DepthPackingStrategies } from 'three'; +import type { EventDataLoader } from '../../loaders/event-data-loader.js'; +import type { PhoenixMenuNode } from '../../managers/ui-manager/phoenix-menu/phoenix-menu-node.js'; +import type { AnimationPreset } from '../../managers/three-manager/animations-manager.js'; /** * Configuration of the event display. diff --git a/packages/phoenix-event-display/src/loaders/cms-loader.ts b/packages/phoenix-event-display/src/loaders/cms-loader.ts index d78736871..cc2e11e72 100644 --- a/packages/phoenix-event-display/src/loaders/cms-loader.ts +++ b/packages/phoenix-event-display/src/loaders/cms-loader.ts @@ -49,7 +49,7 @@ export class CMSLoader extends PhoenixLoader { ) { this.loadingManager.addLoadableItem('ig_archive'); const igArchive = new JSZip(); - const eventsDataInIg = []; + const eventsDataInIg: any[] = []; const readArchive = (res: File | ArrayBuffer) => { igArchive.loadAsync(res).then(() => { let allFilesPath = Object.keys(igArchive.files); @@ -64,7 +64,7 @@ export class CMSLoader extends PhoenixLoader { // If the files are in the "Events" folder then process them. if (filePathInIg.toLowerCase().startsWith('events')) { igArchive - .file(filePathInIg) + ?.file(filePathInIg)! .async('string') .then((singleEvent: string) => { // The data has some inconsistencies which need to be removed to properly parse JSON @@ -130,8 +130,18 @@ export class CMSLoader extends PhoenixLoader { */ public getEventData(): any { const eventInfo = this.data?.['Collections']?.['Event_V2']?.[0]; - - const eventData = { + const eventData: { + runNumber: any; + eventNumber: any; + ls: any; + time: any; + Hits: any; + Tracks: any; + Jets: any; + CaloClusters: any; + MuonChambers: any; + [key: string]: any; // Add index signature + } = { runNumber: eventInfo?.[0], eventNumber: eventInfo?.[1], ls: eventInfo?.[2], @@ -176,7 +186,7 @@ export class CMSLoader extends PhoenixLoader { * @returns An object containing event data for all events. */ public getAllEventsData(allEventsDataFromIg: any[]): any { - const allEventsData = {}; + const allEventsData: { [key: string]: any } = {}; for (const eventData of allEventsDataFromIg) { this.data = eventData; allEventsData[eventData.eventPath] = this.getEventData(); @@ -308,7 +318,7 @@ export class CMSLoader extends PhoenixLoader { processObject?: (objectParams: any) => void, cuts?: { attribute: string; min?: number; max?: number }[], ): any { - const ObjectType = {}; + const ObjectType: { [key: string]: any[] } = {}; // Filter to check if the provided collections are indeed inside the data collections = collections.filter((key) => this.data['Collections'][key]); @@ -319,11 +329,14 @@ export class CMSLoader extends PhoenixLoader { const objectAttributes = this.data['Types'][collection]; // Iterating a single object collection to process all objects for (const physicsObject of this.data['Collections'][collection]) { - const objectParams = {}; + const objectParams: { [key: string]: number } = {}; + // Filling object params using the given types - objectAttributes.forEach((attribute, attributeIndex) => { - objectParams[attribute[0]] = physicsObject[attributeIndex]; - }); + objectAttributes.forEach( + (attribute: (string | number)[], attributeIndex: string | number) => { + objectParams[attribute[0]] = physicsObject[attributeIndex]; + }, + ); // Applying cuts to object (if any) if (cuts) { @@ -366,7 +379,7 @@ export class CMSLoader extends PhoenixLoader { * @returns Tracks object containing all Tracks collections. */ private getTracks(): any { - const Tracks = {}; + const Tracks: { [key: string]: any[] } = {}; // All collections with tracks let tracksCollections = [ @@ -457,16 +470,29 @@ export class CMSLoader extends PhoenixLoader { const trackTypes = this.data['Types'][tracksCollection.collection]; // Variables to be used inside the loop - let ti, ei, p1, d1, p2, d2, distance, scale, cp1, cp2, curve, trackParams; + let ti, + ei, + p1, + d1, + p2, + d2, + distance, + scale, + cp1, + cp2, + curve, + trackParams: { [x: string]: any; pt?: any; color?: any; pos?: any }; for (let i = 0; i < assocs.length; i++) { // Current track info trackParams = {}; // Set properties/attributes of track - trackTypes.forEach((attribute, attributeIndex) => { - trackParams[attribute[0]] = tracks[i][attributeIndex]; - }); + trackTypes.forEach( + (attribute: (string | number)[], attributeIndex: string | number) => { + trackParams[attribute[0]] = tracks[i][attributeIndex]; + }, + ); // SKIPPING TRACKS WITH pt < min_pt if (trackParams.pt < tracksCollection.min_pt) { diff --git a/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts b/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts index f939f82eb..b02f2579e 100644 --- a/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts +++ b/packages/phoenix-event-display/src/loaders/edm4hep-json-loader.ts @@ -154,7 +154,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Return the vertices */ private getVertices(event: any) { - const allVertices: any[] = []; + const allVertices: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -203,7 +203,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Return tracks */ private getTracks(event: any) { - const allTracks: any[] = []; + const allTracks: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -304,7 +304,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Not implemented */ private getHits(event: any) { - const allHits: any[] = []; + const allHits: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -358,7 +358,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Returns the cells */ private getCells(event: any) { - const allCells: any[] = []; + const allCells: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -450,7 +450,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Return Calo clusters */ private getCaloClusters(event: any) { - const allClusters: any[] = []; + const allClusters: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -502,7 +502,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Return jets */ private getJets(event: any) { - const allJets: any[] = []; + const allJets: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -562,7 +562,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { /** Return missing energy */ private getMissingEnergy(event: any) { - const allMETs: any[] = []; + const allMETs: { [key: string]: any[] } = {}; for (const collName in event) { if (event[collName].constructor != Object) { @@ -635,7 +635,7 @@ export class Edm4hepJsonLoader extends PhoenixLoader { private convHSLtoHEX(h: number, s: number, l: number): string { l /= 100; const a = (s * Math.min(l, 1 - l)) / 100; - const f = (n) => { + const f = (n: number) => { const k = (n + h / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color) diff --git a/packages/phoenix-event-display/src/loaders/jivexml-loader.ts b/packages/phoenix-event-display/src/loaders/jivexml-loader.ts index 6510b70cc..b8fba0d18 100644 --- a/packages/phoenix-event-display/src/loaders/jivexml-loader.ts +++ b/packages/phoenix-event-display/src/loaders/jivexml-loader.ts @@ -137,7 +137,7 @@ export class JiveXMLLoader extends PhoenixLoader { * @returns [found, x, y, z]. */ private getPositionOfHit( - hitIdentifier, + hitIdentifier: number, eventData: { Hits: [[{ id: number; pos: any }]] }, ) { for (const hitcollection in eventData.Hits) { @@ -164,10 +164,11 @@ export class JiveXMLLoader extends PhoenixLoader { ): void { const tracksHTML = firstEvent.getElementsByTagName('Track'); const trackCollections = Array.from(tracksHTML); - const badTracks = {}; + const badTracks: { [key: string]: any } = {}; for (const collection of trackCollections) { - let trackCollectionName = collection.getAttribute('storeGateKey'); + let trackCollectionName = + collection.getAttribute('storeGateKey') ?? 'Unknown'; if (trackCollectionName === 'Tracks') { trackCollectionName = 'Tracks_'; //We have problems if the name of the collection is a type } @@ -180,8 +181,10 @@ export class JiveXMLLoader extends PhoenixLoader { // then convert to array of numbers const tmp = collection.getElementsByTagName('numPolyline'); - let polylineX, polylineY, polylineZ; - let numPolyline: number[]; + let polylineX: number[] = []; + let polylineY: number[] = []; + let polylineZ: number[] = []; + let numPolyline: number[] = []; if (tmp.length === 0) { console.log( 'WARNING the track collection ' + @@ -204,10 +207,10 @@ export class JiveXMLLoader extends PhoenixLoader { polylineZ = this.getNumberArrayFromHTML(collection, 'polylineZ'); } else { // unset numPolyline so check later is simple (it will all be zeros anyway) - numPolyline = null; - polylineX = null; - polylineY = null; - polylineZ = null; + numPolyline = []; + polylineX = []; + polylineY = []; + polylineZ = []; } } @@ -257,11 +260,11 @@ export class JiveXMLLoader extends PhoenixLoader { pT: 0.0, phi: 0.0, eta: 0.0, - pos: [], - dparams: [], + pos: [] as number[][], + dparams: [] as number[], // Explicitly define the type as number[] hits: {}, author: {}, - badtrack: [], + badtrack: [] as string[], }; if (chi2.length >= i) track.chi2 = chi2[i]; if (numDoF.length >= i) track.dof = numDoF[i]; @@ -354,7 +357,7 @@ export class JiveXMLLoader extends PhoenixLoader { // eslint-disable-next-line no-constant-condition false && numHits.length > 0 && - trackCollectionName.includes('Muon') + trackCollectionName?.includes('Muon') ) { // Disable for the moment. @@ -463,7 +466,7 @@ export class JiveXMLLoader extends PhoenixLoader { eventData.Hits.Pixel = []; for (let i = 0; i < numOfClusters; i++) { - const pixel = { pos: [], id: 0, energyLoss: 0 }; + const pixel = { pos: [] as number[], id: 0, energyLoss: 0 }; pixel.pos = [x0[i] * 10.0, y0[i] * 10.0, z0[i] * 10.0]; pixel.id = id[i]; pixel.energyLoss = eloss[i]; @@ -497,7 +500,7 @@ export class JiveXMLLoader extends PhoenixLoader { eventData.Hits.SCT = []; for (let i = 0; i < numOfSCTClusters; i++) { - const sct = { pos: [], id: 0, phiModule: 0, side: 0 }; + const sct = { pos: [] as number[], id: 0, phiModule: 0, side: 0 }; sct.pos = [x0[i] * 10.0, y0[i] * 10.0, z0[i] * 10.0]; sct.id = id[i]; sct.phiModule = phiModule[i]; @@ -536,7 +539,7 @@ export class JiveXMLLoader extends PhoenixLoader { // Hardcoding TRT size here. Could maybe think of generalising this? for (let i = 0; i < numOfDC; i++) { const trt = { - pos: [], + pos: [] as number[], id: 0, type: 'Line', driftR: 0.0, @@ -620,13 +623,12 @@ export class JiveXMLLoader extends PhoenixLoader { for (let i = 0; i < numOfDC; i++) { const muonHit = { - pos: [], + pos: this.getMuonLinePositions(i, x, y, z, length), id: id[i], type: 'Line', identifier: identifier[i], }; - muonHit.pos = this.getMuonLinePositions(i, x, y, z, length); eventData.Hits[name].push(muonHit); } } @@ -657,14 +659,13 @@ export class JiveXMLLoader extends PhoenixLoader { for (let i = 0; i < numOfDC; i++) { const rpcHit = { - pos: [], + pos: this.getMuonLinePositions(i, x, y, z, length), id: id[i], type: 'Line', identifier: identifier[i], width: width[i], }; - rpcHit.pos = this.getMuonLinePositions(i, x, y, z, length); //TODO - handle phi measurements eventData.Hits[name].push(rpcHit); } @@ -725,7 +726,8 @@ export class JiveXMLLoader extends PhoenixLoader { energy: energy[i] * 1000.0, }); } - eventData.Jets[jetColl.getAttribute('storeGateKey')] = temp; + const key = jetColl.getAttribute('storeGateKey'); + if (key) eventData.Jets[key] = temp; } } @@ -751,7 +753,8 @@ export class JiveXMLLoader extends PhoenixLoader { for (let i = 0; i < numOfClusters; i++) { temp.push({ phi: phi[i], eta: eta[i], energy: energy[i] * 1000.0 }); } - eventData.CaloClusters[clusterColl.getAttribute('storeGateKey')] = temp; + const key = clusterColl.getAttribute('storeGateKey'); + if (key) eventData.CaloClusters[key] = temp; // } } } @@ -944,7 +947,8 @@ export class JiveXMLLoader extends PhoenixLoader { linkedTrackCollection: sgkeyOfTracks[i], }); } - eventData.Vertices[vertexColl.getAttribute('storeGateKey')] = temp; + const key = vertexColl.getAttribute('storeGateKey'); + if (key) eventData.Vertices[key] = temp; } } @@ -976,7 +980,8 @@ export class JiveXMLLoader extends PhoenixLoader { pdgId: pdgId[i], }); } - eventData.Muons[collection.getAttribute('storeGateKey')] = temp; + const key = collection.getAttribute('storeGateKey'); + if (key) eventData.Muons[key] = temp; } } @@ -1008,7 +1013,8 @@ export class JiveXMLLoader extends PhoenixLoader { pdgId: pdgId[i], }); } - eventData.Electrons[collection.getAttribute('storeGateKey')] = temp; + const key = collection.getAttribute('storeGateKey'); + if (key) eventData.Electrons[key] = temp; } } @@ -1037,7 +1043,8 @@ export class JiveXMLLoader extends PhoenixLoader { pt: pt[i] * 1000, // JiveXML uses GeV }); } - eventData.Photons[collection.getAttribute('storeGateKey')] = temp; + const key = collection.getAttribute('storeGateKey'); + if (key) eventData.Photons[key] = temp; } } @@ -1066,7 +1073,8 @@ export class JiveXMLLoader extends PhoenixLoader { ety: ety[i], }); } - eventData.MissingEnergy[collection.getAttribute('storeGateKey')] = temp; + const key = collection.getAttribute('storeGateKey'); + if (key) eventData.MissingEnergy[key] = temp; } } } diff --git a/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts b/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts index f3d398bec..ee42d988c 100644 --- a/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts +++ b/packages/phoenix-event-display/src/loaders/jsroot-event-loader.ts @@ -145,8 +145,7 @@ export class JSRootEventLoader extends PhoenixLoader { private getTEveTrack(track: any): any { if (!track || track.fN <= 0) return false; - const trackObj = {}; - + const trackObj: { [key: string]: any } = {}; const positions = []; for (let i = 0; i < track.fN - 1; i++) { positions.push([ diff --git a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts index 9541881e1..18246a337 100644 --- a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts +++ b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts @@ -40,9 +40,9 @@ export class PhoenixObjects { * @param tracks Tracks params to construct tacks from. * @returns The object containing tracks. */ - public static getTracks(tracks): Object3D { + public static getTracks(tracks: any): Object3D { const tracksMesh = new TracksMesh(); - const tracksMaterial = new TracksMaterial({ lineWidth: 2 }); + const tracksMaterial = new TracksMaterial({ linewidth: 2 }); for (const track of tracks) { if (!(track.pos?.length > 2)) { @@ -73,7 +73,9 @@ export class PhoenixObjects { } } - const points = track.pos.map((p) => new Vector3(p[0], p[1], p[2])); + const points = track.pos.map( + (p: (number | undefined)[]) => new Vector3(p[0], p[1], p[2]), + ); const curve = new CatmullRomCurve3(points); const vertices = curve.getPoints(50); @@ -109,11 +111,12 @@ export class PhoenixObjects { } const positions = trackParams.pos; + const trackObject = new Group(); // Check again, in case there was an issue with the extrapolation. if (positions.length < 2) { console.log('Track too short, and extrapolation failed.'); - return; + return trackObject; } // For cuts etc we currently need to have the cut parameters on the track @@ -174,7 +177,6 @@ export class PhoenixObjects { lineObject.name = 'Track'; // Creating a group to add both the Tube curve and the Line - const trackObject = new Group(); trackObject.add(tubeObject); trackObject.add(lineObject); @@ -334,7 +336,7 @@ export class PhoenixObjects { ); default: console.log('ERROR: Unknown hit type!'); - return; + return new Object3D(); } } @@ -391,11 +393,13 @@ export class PhoenixObjects { canvas.width = 128; canvas.height = 128; const context = canvas.getContext('2d'); - context.clearRect(0, 0, 128, 128); - context.fillStyle = 'white'; - context.beginPath(); - context.arc(64, 64, 64, 0, 2 * Math.PI); - context.fill(); + if (context) { + context.clearRect(0, 0, 128, 128); + context.fillStyle = 'white'; + context.beginPath(); + context.arc(64, 64, 64, 0, 2 * Math.PI); + context.fill(); + } const texture = new CanvasTexture(canvas); const material = new PointsMaterial({ @@ -568,8 +572,8 @@ export class PhoenixObjects { // if radius is not part of clusterParams then set it to defaultRadius (if cylindrical is false), or radius+defaultZ otherwise const radius = cylindrical - ? (clusterParams.radius ?? defaultRadius + defaultZ) - : (clusterParams.radius ?? defaultRadius); + ? clusterParams.radius ?? defaultRadius + defaultZ + : clusterParams.radius ?? defaultRadius; const position = CoordinateHelper.sphericalToCartesian( radius, @@ -746,7 +750,7 @@ export class PhoenixObjects { public static getPlanarCaloCell(caloCells: any): Object3D { const position = caloCells.pos; if (!position) { - return; + return new Object3D(); } const length = caloCells.energy * 0.22; diff --git a/packages/phoenix-event-display/src/loaders/objects/tracks.ts b/packages/phoenix-event-display/src/loaders/objects/tracks.ts index 4c0998fb7..9853512e1 100644 --- a/packages/phoenix-event-display/src/loaders/objects/tracks.ts +++ b/packages/phoenix-event-display/src/loaders/objects/tracks.ts @@ -6,7 +6,8 @@ import { Vector2, Vector3, Color, - ColorRepresentation, + type ColorRepresentation, + type ShaderMaterialParameters, } from 'three'; /** @@ -233,7 +234,7 @@ export class TracksMaterial extends ShaderMaterial { * Create the tracks material. * @param params Params for creating the tracks material. */ - constructor(params) { + constructor(params: ShaderMaterialParameters) { super({ uniforms: Object.assign( {}, diff --git a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts index 79eb55fe9..78114c520 100644 --- a/packages/phoenix-event-display/src/loaders/phoenix-loader.ts +++ b/packages/phoenix-event-display/src/loaders/phoenix-loader.ts @@ -1,6 +1,6 @@ import { Group, Object3D, Vector3 } from 'three'; import { GUI } from 'dat.gui'; -import { EventDataLoader } from './event-data-loader.js'; +import type { EventDataLoader } from './event-data-loader.js'; import { UIManager } from '../managers/ui-manager/index.js'; import { ThreeManager } from '../managers/three-manager/index.js'; import { Cut } from '../lib/models/cut.model.js'; @@ -101,7 +101,7 @@ export class PhoenixLoader implements EventDataLoader { */ public getCollections(): string[] { if (!this.eventData) { - return null; + return []; } const collections = []; @@ -275,7 +275,7 @@ export class PhoenixLoader implements EventDataLoader { scalePlanarCaloCells, ); - const collections = {}; + const collections: { [key: string]: any } = {}; for (const collectionName in eventData.PlanarCaloCells) { const collection = eventData.PlanarCaloCells[collectionName]; const plane = collection['plane']; @@ -450,8 +450,8 @@ export class PhoenixLoader implements EventDataLoader { concatonateObjs: boolean = false, cuts?: Cut[], extendEventDataTypeUI?: ( - typeFolder?: GUI, - typeFolderPM?: PhoenixMenuNode, + typeFolder: GUI, + typeFolderPM: PhoenixMenuNode, ) => void, ) { const objectGroup = this.graphicsLibrary.addEventDataTypeGroup(typeName); @@ -509,7 +509,7 @@ export class PhoenixLoader implements EventDataLoader { private addCollection( objectCollection: any, collectionName: string, - getObject: (object: any) => Object3D, + getObject: (object: any, typeName: string) => Object3D, typeName: string, objectGroup: Group, concatonateObjs: boolean, @@ -688,7 +688,7 @@ export class PhoenixLoader implements EventDataLoader { // Iterating the group for (const eventDataPropGroup of eventDataPropGroups) { - const combinedProps = {}; + const combinedProps: { [key: string]: any } = {}; // Iterating the props inside a group for (const eventDataProp of eventDataPropGroup) { // Iterating each possible key of a prop @@ -740,6 +740,7 @@ export class PhoenixLoader implements EventDataLoader { return getLabelTitle(eventDataType, collection, indexInCollection); } } + return 'Unknown'; } /** diff --git a/packages/phoenix-event-display/src/loaders/trackml-loader.ts b/packages/phoenix-event-display/src/loaders/trackml-loader.ts index 71d799549..a9adc983c 100644 --- a/packages/phoenix-event-display/src/loaders/trackml-loader.ts +++ b/packages/phoenix-event-display/src/loaders/trackml-loader.ts @@ -102,13 +102,12 @@ export class TrackmlLoader extends PhoenixLoader { const eventData = { eventNumber: eventNum, runNumber: 0, - Hits: undefined, - Tracks: undefined, + Hits: { Reconstructed: [] as any[] }, + Tracks: { Particles: [] as any[] }, }; if (this.hitData) { - eventData.Hits = {}; - eventData.Hits.Reconstructed = []; + eventData.Hits.Reconstructed = [] as any[]; let mod = Math.round(this.hitData.length / 5000); if (mod < 1) { mod = 1; @@ -129,7 +128,6 @@ export class TrackmlLoader extends PhoenixLoader { ); if (this.truthData) { - eventData.Tracks = { Particles: [] }; if (this.particleData) { for (let i = 0; i < this.particleData.length; i++) { // Add the relevant data from particle, such as first hit position - we'll add the particle_id because we need it later. @@ -160,7 +158,7 @@ export class TrackmlLoader extends PhoenixLoader { } } if (i % stepSize === 0) { - document.getElementById('info').innerHTML = + document.getElementById('info')!.innerHTML = 'Processed ' + (100 * i) / this.truthData.length + '% of event data.'; @@ -176,7 +174,7 @@ export class TrackmlLoader extends PhoenixLoader { numParticleStubs++; } } - const events = {}; + const events: { [key: string]: any } = {}; events[eventNum] = eventData; return eventData; } diff --git a/packages/phoenix-event-display/src/managers/state-manager.ts b/packages/phoenix-event-display/src/managers/state-manager.ts index be41dea8e..b2c8d97c4 100644 --- a/packages/phoenix-event-display/src/managers/state-manager.ts +++ b/packages/phoenix-event-display/src/managers/state-manager.ts @@ -161,7 +161,7 @@ export class StateManager { * @returns The starting angle of clipping. */ getStartClippingAngle(): number { - return this.startClippingAngle.value; + return this.startClippingAngle.value ?? 0.0; } /** @@ -177,7 +177,7 @@ export class StateManager { * @returns The opening angle of clipping. */ getOpeningClippingAngle(): number { - return this.openingClippingAngle.value; + return this.openingClippingAngle.value ?? 0.0; } /** diff --git a/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts index ac924badb..3ecf2997e 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts @@ -156,7 +156,9 @@ export class AnimationsManager { tweenDuration *= 0.75; const eventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); - + if (!eventData) { + return; + } const animationSphere = new Sphere(new Vector3(), 0); const objectsToAnimateWithSphere: { eventObject: Object3D; @@ -225,14 +227,16 @@ export class AnimationsManager { tweenDuration, ); // Manually updating scale since we need to change position - scaleTween.onUpdate((updatedScale: Vector3) => { - const previousScale = eventObject.scale.x; - eventObject.scale.setScalar(updatedScale.x); - // Restoring to original position and then moving again with the current value - eventObject.position - .divideScalar(previousScale) - .multiplyScalar(updatedScale.x); - }); + scaleTween.onUpdate( + (updatedScale: { x: number; y: number; z: number }) => { + const previousScale = eventObject.scale.x; + eventObject.scale.setScalar(updatedScale.x); + // Restoring to original position and then moving again with the current value + eventObject.position + .divideScalar(previousScale) + .multiplyScalar(updatedScale.x); + }, + ); allTweens.push(scaleTween); } else { const hasPosition = !eventObject.position.equals( @@ -284,10 +288,7 @@ export class AnimationsManager { if (reachedHits.length > 0) { geometry.setAttribute( 'position', - new BufferAttribute( - new Float32Array([].concat(...reachedHits)), - 3, - ), + new BufferAttribute(new Float32Array([...reachedHits].flat()), 3), ); geometry.computeBoundingSphere(); } @@ -340,6 +341,9 @@ export class AnimationsManager { clippingConstant: number = 11000, ) { const allEventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if (!allEventData) { + return; + } // Sphere to get spherical set of clipping planes from const sphere = new SphereGeometry(1, 8, 8); @@ -480,7 +484,9 @@ export class AnimationsManager { onEnd?: () => void, ) { const allEventData = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); - + if (!allEventData) { + return; + } // Get the color of the first track to use for colliding particles const track = allEventData.getObjectByName('Track'); let trackColor: Color; @@ -556,7 +562,10 @@ export class AnimationsManager { if (animateEventAfterInterval && collisionDuration) { // Will be made visible after collision animation ends. - this.scene.getObjectByName(SceneManager.EVENT_DATA_ID).visible = false; + const object = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID); + if (object) { + object.visible = false; + } setTimeout(() => { this.animateEventWithCollision(collisionDuration); }, animateEventAfterInterval); diff --git a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts index 853eb4887..7216617e3 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts @@ -23,11 +23,13 @@ export class ColorManager { customCheck: (objectUserData: any) => boolean, ) { const objects = this.sceneManager.getScene().getObjectByName(objectsGroup); - objects.traverse((object: any) => { - if (object.material?.color && customCheck(object.userData)) { - object.material.color.set(color); - } - }); + if (objects) { + objects.traverse((object: any) => { + if (object.material?.color && customCheck(object.userData)) { + object.material.color.set(color); + } + }); + } } /** @@ -36,15 +38,17 @@ export class ColorManager { * @param color Hex value representing the color. */ public collectionColor(collectionName: string, color: any) { - const collection = this.sceneManager + const eventData = this.sceneManager .getScene() - .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(collectionName); + .getObjectByName(SceneManager.EVENT_DATA_ID); + const collection = eventData?.getObjectByName(collectionName); - for (const child of Object.values(collection.children)) { - child.traverse((object) => { - (object['material']?.color as Color)?.set(color); - }); + if (collection) { + for (const child of Object.values(collection.children)) { + child.traverse((object) => { + (object['material']?.color as Color)?.set(color); + }); + } } } @@ -53,15 +57,21 @@ export class ColorManager { * @param collectionName Name of the collection. */ public collectionColorRandom(collectionName: string) { - const collection = this.sceneManager - .getScene() - .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(collectionName); + if (!this.sceneManager || !this.sceneManager.getScene()) { + return; + } + const scene = this.sceneManager.getScene(); + if (scene) { + const eventData = scene.getObjectByName(SceneManager.EVENT_DATA_ID); + const collection = eventData?.getObjectByName(collectionName); - for (const child of Object.values(collection.children)) { - child.traverse((object) => { - (object['material']?.color as Color)?.set(Math.random() * 0xffffff); - }); + if (collection) { + for (const child of Object.values(collection.children)) { + child.traverse((object) => { + (object['material']?.color as Color)?.set(Math.random() * 0xffffff); + }); + } + } } } @@ -72,6 +82,9 @@ export class ColorManager { public colorTracksByVertex(collectionName: string) { const scene = this.sceneManager.getScene(); const vertices = scene.getObjectByName('Vertices'); + if (!vertices) { + return; + } vertices.traverse((object) => { const { linkedTrackCollection, linkedTracks } = object.userData; @@ -83,12 +96,13 @@ export class ColorManager { const colorForTracksVertex = (object['material'] as MeshPhongMaterial) .color; const trackCollection = scene.getObjectByName(linkedTrackCollection); - - linkedTracks.forEach((trackIndex: number) => { - trackCollection.children[trackIndex].traverse((trackObject) => { - trackObject?.['material']?.color?.set(colorForTracksVertex); + if (trackCollection) { + linkedTracks.forEach((trackIndex: number) => { + trackCollection.children[trackIndex].traverse((trackObject) => { + trackObject?.['material']?.color?.set(colorForTracksVertex); + }); }); - }); + } } }); } diff --git a/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts index c1309e658..bcc5ff06b 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/controls-manager.ts @@ -41,8 +41,8 @@ export class ControlsManager { defaultView: number[] = [0, 0, 200], ) { this.controls = []; - this.mainControls = null; - this.overlayControls = null; + // this.mainControls = new OrbitControls(); + // this.overlayControls = null; const rendererElement = rendererManager.getMainRenderer()?.domElement; @@ -106,7 +106,7 @@ export class ControlsManager { */ private setOrbitControls( camera: PerspectiveCamera | OrthographicCamera, - domElement?: HTMLElement, + domElement: HTMLElement, ): OrbitControls { const controls: OrbitControls = new OrbitControls(camera, domElement); controls.enableDamping = true; @@ -367,7 +367,7 @@ export class ControlsManager { return objectPosition; } else { - return undefined; + return new Vector3(); } } diff --git a/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts index e3542ef97..b1274f729 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/export-manager.ts @@ -40,7 +40,9 @@ export class ExportManager { const output = JSON.stringify(jsonResult, null, 2); saveFile(output, 'phoenix-scene.phnx', 'text/plain'); }, - null, + (error: ErrorEvent) => { + console.error('Error exporting scene:', error); + }, ); } @@ -64,7 +66,7 @@ export class ExportManager { * @param eventData Currently loaded event data. */ private saveEventDataConfiguration(eventData: any) { - const eventDataConfig = {}; + const eventDataConfig: { [key: string]: string[] } = {}; for (const objectType of eventData.children) { if (objectType.name) { eventDataConfig[objectType.name] = []; @@ -83,7 +85,7 @@ export class ExportManager { * @param geometries Currently loaded geometries. */ private saveGeometriesConfiguration(geometries: Object3D) { - const geometriesConfig = []; + const geometriesConfig: string[] = []; geometries.children.forEach((object) => { if (object.name !== 'EventData') { geometriesConfig.push(object.name); diff --git a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts index 127b5e4c9..0fd6bd14d 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts @@ -78,10 +78,9 @@ export class ImportManager { doubleSided, setFlat, ); - resolve({ object: processedObject }); }, - null, + () => {}, (error) => { reject(error); }, @@ -180,7 +179,7 @@ export class ImportManager { */ public parsePhnxScene( scene: any, - callback: (geometries: Object3D, eventData: Object3D) => void, + callback: (geometries?: Object3D, eventData?: Object3D) => void, ): Promise { const loader = new GLTFLoader(); @@ -236,15 +235,21 @@ export class ImportManager { try { JSZip.loadAsync(data).then((archive) => { const promises: Promise[] = []; - for (const filePath in archive.files) { - promises.push( - archive - .file(filePath) - .async('arraybuffer') - .then((fileData) => { - return callback(fileData, path, filePath.split('.')[0]); - }), - ); + if (archive) { + for (const filePath in archive.files) { + const file = archive.file(filePath); + if (file) { + promises.push( + file.async('arraybuffer').then((fileData) => { + return callback( + fileData, + path, + filePath.split('.')[0], + ); + }), + ); + } + } } let allGeometriesUIParameters: GeometryUIParameters[] = []; Promise.all(promises).then((geos) => { @@ -345,7 +350,13 @@ export class ImportManager { menuNodeName, ); - const materials = {}; + const materials: { + [key: string]: { + material: Material; + geoms: any[]; + renderOrder: number; + }; + } = {}; const findMeshes = ( node: Object3D, parentMatrix: Matrix4, @@ -376,7 +387,7 @@ export class ImportManager { for (const val of Object.values(materials)) { const mesh = new Mesh( BufferGeometryUtils.mergeGeometries((val as any).geoms), - (val as any).material, + (val as any).material[0], ); mesh.renderOrder = (val as any).renderOrder; scene.add(mesh); @@ -384,14 +395,14 @@ export class ImportManager { this.processGeometry( scene, - name ?? sceneName.name, + name ?? sceneName?.name, scale, true, // doublesided ); allGeometries.push({ object: scene, - menuNodeName: menuNodeName ?? sceneName.menuNodeName, + menuNodeName: menuNodeName ?? sceneName?.menuNodeName, }); } resolve(allGeometries); @@ -442,11 +453,11 @@ export class ImportManager { for (const scene of gltf.scenes) { scene.visible = scene.userData.visible; const sceneName = this.processGLTFSceneName(scene.name); - this.processGeometry(scene, sceneName.name ?? name); + this.processGeometry(scene, sceneName?.name ?? name); allGeometriesUIParameters.push({ object: scene, - menuNodeName: sceneName.menuNodeName, + menuNodeName: sceneName?.menuNodeName, }); } @@ -502,7 +513,7 @@ export class ImportManager { this.processGeometry(object, name, scale, doubleSided); resolve({ object }); }, - null, + undefined, (error) => { reject(error); }, 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 e774bb79b..63852145e 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/index.ts @@ -27,9 +27,9 @@ import { ExportManager } from './export-manager.js'; import { ImportManager } from './import-manager.js'; import { SelectionManager } from './selection-manager.js'; import { SceneManager } from './scene-manager.js'; -import type { - AnimationPreset, +import { AnimationsManager, + type AnimationPreset, } from './animations-manager.js'; import { InfoLogger } from '../../helpers/info-logger.js'; import { EffectsManager } from './effects-manager.js'; @@ -114,17 +114,17 @@ export class ThreeManager { /** Status of clipping intersection. */ private clipIntersection: boolean; /** Store the 3D coordinates of first point to find 3D Distance */ - private prev3DCoord: Vector3 = null; + private prev3DCoord: Vector3 = new Vector3(); /** Store the 2D coordinates of first point to find 3D Distance */ private prev2DCoord: Vector2; /** Store the name of the object of first intersect while finding 3D Distance */ - private prevIntersectName: string = null; + private prevIntersectName: string = ''; /** Canvas used for rendering the distance line */ - private distanceCanvas: HTMLCanvasElement = null; + private distanceCanvas: HTMLCanvasElement = new HTMLCanvasElement(); /** Color of the text to be displayed as per dark theme */ private displayColor: string = 'black'; /** Mousemove callback to draw dynamic distance line */ - private mousemoveCallback: (MouseEvent) => void; + private mousemoveCallback: (event: MouseEvent) => void; /** Emitting that a new 3D coordinate has been clicked upon */ originChanged = new EventEmitter(); /** Whether the shifting of the grid is enabled */ @@ -347,7 +347,9 @@ export class ThreeManager { /** * Returns the mainIntersect upon clicking a point */ - private getMainIntersect(event): Intersection> { + private getMainIntersect( + event: MouseEvent, + ): Intersection> | null { const camera = this.controlsManager.getMainCamera(); const scene = this.sceneManager.getScene(); const raycaster = new Raycaster(); @@ -457,8 +459,8 @@ export class ThreeManager { app?.appendChild(div); setTimeout(() => { - document.getElementById('3dcoordinates').remove(); - document.getElementById('circledDot').remove(); + document.getElementById('3dcoordinates')?.remove(); + document.getElementById('circledDot')?.remove(); }, 3000); } }; @@ -475,9 +477,9 @@ export class ThreeManager { * Show 3D Distance between any two clicked points */ public show3DDistance(show: boolean) { - this.prev3DCoord = null; - this.prev2DCoord = null; - this.prevIntersectName = null; + this.prev3DCoord = new Vector3(); + this.prev2DCoord = new Vector2(); + this.prevIntersectName = ''; this.filterRayIntersect(); if (this.show3DDistanceCallback == null) { @@ -485,7 +487,7 @@ export class ThreeManager { this.show3DDistanceCallback = (event) => { const mainIntersect = this.getMainIntersect(event); if (mainIntersect != null) { - if (this.prev3DCoord == null) { + if (!this.prevIntersectName) { this.prev3DCoord = mainIntersect.point; this.prev2DCoord = new Vector2(event.clientX, event.clientY); this.prevIntersectName = mainIntersect.object.name; @@ -503,15 +505,29 @@ export class ThreeManager { app?.appendChild(this.distanceCanvas); const ctx = this.distanceCanvas.getContext('2d'); - ctx.strokeStyle = this.displayColor; - ctx.lineWidth = 2; - ctx.fillStyle = this.displayColor; - ctx.beginPath(); - ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 7, 0, 2 * Math.PI); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 3, 0, 2 * Math.PI); - ctx.fill(); + if (ctx) { + ctx.strokeStyle = this.displayColor; + ctx.lineWidth = 2; + ctx.fillStyle = this.displayColor; + ctx.beginPath(); + ctx.arc( + this.prev2DCoord.x, + this.prev2DCoord.y, + 7, + 0, + 2 * Math.PI, + ); + ctx.stroke(); + ctx.beginPath(); + ctx.arc( + this.prev2DCoord.x, + this.prev2DCoord.y, + 3, + 0, + 2 * Math.PI, + ); + ctx.fill(); + } window.addEventListener('mousemove', this.mousemoveCallback); } else { @@ -522,68 +538,68 @@ export class ThreeManager { // draw distance line this.drawLine(event); const ctx = this.distanceCanvas.getContext('2d'); - ctx.beginPath(); - ctx.arc(event.clientX, event.clientY, 7, 0, 2 * Math.PI); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(event.clientX, event.clientY, 3, 0, 2 * Math.PI); - ctx.fill(); - - // render the distance and the names of initial and final intersect - ctx.font = '15px Arial'; - - let x1 = this.prev2DCoord.x, - x2 = event.clientX; - - const y1 = this.prev2DCoord.y, - y2 = event.clientY; - - const x_center = (x1 + x2) / 2, - y_center = (y1 + y2) / 2; - const d = 25; - const m = (x1 - x2) / (y2 - y1); - const delta_x = d / Math.sqrt(1 + m * m); - const delta_y = m * delta_x; - const x3 = x_center + delta_x; - const y3 = y_center + delta_y; - - if (this.prev2DCoord.x > event.clientX) { - x1 = this.prev2DCoord.x + 20; - x2 = - event.clientX - - ctx.measureText(mainIntersect.object.name).width - - 20; - } else { - x1 = - this.prev2DCoord.x - - ctx.measureText(this.prevIntersectName).width - - 20; - x2 = event.clientX + 20; - } - - ctx.fillText(this.prevIntersectName, x1, y1); - ctx.fillText(mainIntersect.object.name, x2, y2); - ctx.fillText(distance.toFixed(2).toString() + 'cm', x3, y3); - - // remove the canvas after some time - setTimeout(() => { - if (document.getElementById('3Ddistance') != null) { - document.getElementById('3Ddistance').remove(); + if (ctx) { + ctx.beginPath(); + ctx.arc(event.clientX, event.clientY, 7, 0, 2 * Math.PI); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(event.clientX, event.clientY, 3, 0, 2 * Math.PI); + ctx.fill(); + + // render the distance and the names of initial and final intersect + ctx.font = '15px Arial'; + + let x1 = this.prev2DCoord.x, + x2 = event.clientX; + + const y1 = this.prev2DCoord.y, + y2 = event.clientY; + + const x_center = (x1 + x2) / 2, + y_center = (y1 + y2) / 2; + const d = 25; + const m = (x1 - x2) / (y2 - y1); + const delta_x = d / Math.sqrt(1 + m * m); + const delta_y = m * delta_x; + const x3 = x_center + delta_x; + const y3 = y_center + delta_y; + + if (this.prev2DCoord.x > event.clientX) { + x1 = this.prev2DCoord.x + 20; + x2 = + event.clientX - + ctx.measureText(mainIntersect.object.name).width - + 20; + } else { + x1 = + this.prev2DCoord.x - + ctx.measureText(this.prevIntersectName).width - + 20; + x2 = event.clientX + 20; } - this.distanceCanvas - .getContext('2d') - .clearRect( - 0, - 0, - this.distanceCanvas.width, - this.distanceCanvas.height, - ); - }, 3000); - - // reset the parameters for the next pair of clicked points - this.prev3DCoord = null; - this.prev2DCoord = null; - this.prevIntersectName = null; + + ctx.fillText(this.prevIntersectName, x1, y1); + ctx.fillText(mainIntersect.object.name, x2, y2); + ctx.fillText(distance.toFixed(2).toString() + 'cm', x3, y3); + + // remove the canvas after some time + setTimeout(() => { + if (document.getElementById('3Ddistance') != null) { + document.getElementById('3Ddistance')?.remove(); + } + this.distanceCanvas + .getContext('2d') + ?.clearRect( + 0, + 0, + this.distanceCanvas.width, + this.distanceCanvas.height, + ); + }, 3000); + + // reset the parameters for the next pair of clicked points + this.prevIntersectName = ''; + } } } }; @@ -595,12 +611,12 @@ export class ThreeManager { window.removeEventListener('click', this.show3DDistanceCallback); window.removeEventListener('mousemove', this.mousemoveCallback); if (document.getElementById('3Ddistance') != null) { - document.getElementById('3Ddistance').remove(); + document.getElementById('3Ddistance')?.remove(); } if (this.distanceCanvas != null) { this.distanceCanvas .getContext('2d') - .clearRect( + ?.clearRect( 0, 0, this.distanceCanvas.width, @@ -615,17 +631,24 @@ export class ThreeManager { */ private drawLine(finalPoint: MouseEvent) { const ctx = this.distanceCanvas.getContext('2d'); - ctx.clearRect(0, 0, this.distanceCanvas.width, this.distanceCanvas.height); - ctx.beginPath(); - ctx.moveTo(this.prev2DCoord.x, this.prev2DCoord.y); - ctx.lineTo(finalPoint.clientX, finalPoint.clientY); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 7, 0, 2 * Math.PI); - ctx.stroke(); - ctx.beginPath(); - ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 3, 0, 2 * Math.PI); - ctx.fill(); + if (ctx) { + ctx.clearRect( + 0, + 0, + this.distanceCanvas.width, + this.distanceCanvas.height, + ); + ctx.beginPath(); + ctx.moveTo(this.prev2DCoord.x, this.prev2DCoord.y); + ctx.lineTo(finalPoint.clientX, finalPoint.clientY); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 7, 0, 2 * Math.PI); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(this.prev2DCoord.x, this.prev2DCoord.y, 3, 0, 2 * Math.PI); + ctx.fill(); + } } /** @@ -644,7 +667,7 @@ export class ThreeManager { }; } - const rightClickCallback = (_event) => { + const rightClickCallback = (_event: any) => { window.removeEventListener('click', this.shiftCartesianGridCallback); this.stopShifting.emit(true); this.shiftGrid = false; @@ -756,7 +779,7 @@ export class ThreeManager { filename: string, name: string, color: any, - doubleSided?: boolean, + doubleSided: boolean, initiallyVisible: boolean = true, setFlat: boolean = true, ): Promise { @@ -788,9 +811,9 @@ export class ThreeManager { public async loadGLTFGeometry( sceneUrl: any, name: string, - menuNodeName?: string, - scale?: number, - initiallyVisible?: boolean, + menuNodeName: string, + scale: number, + initiallyVisible: boolean, ): Promise { const geometries = this.sceneManager.getGeometries(); @@ -1207,7 +1230,7 @@ export class ThreeManager { const a = document.createElement('a'); document.body.appendChild(a); a.style.display = 'none'; - return function saveData(blob, fileName) { + return function saveData(blob: Blob | MediaSource, fileName: string) { const url = window.URL.createObjectURL(blob); a.href = url; a.download = fileName; @@ -1219,7 +1242,12 @@ export class ThreeManager { * crops the size of an image to fit the ratio of the given screen size * That way the final image won't be streched */ - private croppedSize(width, height, screenWidth, screenHeight) { + private croppedSize( + width: number, + height: number, + screenWidth: number, + screenHeight: number, + ) { let croppedHeight = height; let croppedWidth = width; if (screenWidth * height < screenHeight * width) { @@ -1306,26 +1334,29 @@ export class ThreeManager { outputCanvas.style.width = (width / scale).toString() + 'px'; outputCanvas.style.height = (height / scale).toString() + 'px'; const ctx = outputCanvas.getContext('2d'); - ctx.fillStyle = bkgColor; - ctx.fillRect(0, 0, width, height); - // draw main image on our output canvas, with right size - mainRenderer.setSize( - scaledSize.width / scale, - scaledSize.height / scale, - false, - ); - this.render(); - ctx.drawImage( - mainRenderer.domElement, - widthShift, - heightShift, - width, - height, - 0, - 0, - width, - height, - ); + if (ctx) { + ctx.fillStyle = bkgColor; + ctx.fillRect(0, 0, width, height); + // draw main image on our output canvas, with right size + mainRenderer.setSize( + scaledSize.width / scale, + scaledSize.height / scale, + false, + ); + this.render(); + ctx.drawImage( + mainRenderer.domElement, + widthShift, + heightShift, + width, + height, + 0, + 0, + width, + height, + ); + } + mainRenderer.setSize(originalSize.width, originalSize.height, false); this.render(); @@ -1340,15 +1371,17 @@ export class ThreeManager { // Add info panel to output. This is HTML, so first convert it to canvas, // and then draw to our output canvas - html2canvas(infoPanel, { + const h2c: any = html2canvas; + // See: https://github.com/niklasvh/html2canvas/issues/1977#issuecomment-529448710 for why this is needed + h2c(infoPanel, { backgroundColor: bkgColor, // avoid cloning canvas in the main page, this is useless and leads to // warnings in the javascript console similar to this : // "Unable to clone WebGL context as it has preserveDrawingBuffer=false" ignoreElements: (element: Element) => element.tagName == 'CANVAS', - }).then((canvas) => { + }).then((canvas: HTMLCanvasElement) => { canvas.toBlob((blob) => { - ctx.drawImage( + ctx?.drawImage( canvas, infoHeight / 6, infoHeight / 6, @@ -1357,13 +1390,15 @@ export class ThreeManager { ); // Finally save to png file outputCanvas.toBlob((blob) => { - const a = document.createElement('a'); - document.body.appendChild(a); - a.style.display = 'none'; - const url = window.URL.createObjectURL(blob); - a.href = url; - a.download = `screencapture.png`; - a.click(); + if (blob) { + const a = document.createElement('a'); + document.body.appendChild(a); + a.style.display = 'none'; + const url = window.URL.createObjectURL(blob); + a.href = url; + a.download = `screencapture.png`; + a.click(); + } }); }); }); @@ -1424,7 +1459,8 @@ export class ThreeManager { * @param objectName Name of the object in scene. */ public getObjectByName(objectName: string): Object3D { - return this.getSceneManager().getScene().getObjectByName(objectName); + const obj = this.getSceneManager().getScene().getObjectByName(objectName); + return obj ? obj : new Object3D(); } /** diff --git a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts index 2d674e795..7c73a6def 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts @@ -3,6 +3,7 @@ import { Object3D, Color, LineSegments, + Material, Mesh, MeshPhongMaterial, LineBasicMaterial, @@ -17,6 +18,7 @@ import { Quaternion, DoubleSide, BoxGeometry, + type Object3DEventMap, } from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'; @@ -79,7 +81,7 @@ export class SceneManager { constructor(ignoreList: string[], useCameraLight: boolean = true) { this.getScene(); this.ignoreList = ignoreList; - this.axis = null; + this.axis = new Object3D(); this.setLights(useCameraLight); } @@ -138,7 +140,7 @@ export class SceneManager { */ public getCleanScene(): Scene { const clearScene = this.scene.clone() as Scene; - const removeList = []; + const removeList: Object3D[] = []; clearScene.traverse((object: Object3D) => { if (this.ignoreList.includes(object.type)) { @@ -156,12 +158,20 @@ export class SceneManager { * @param object Object whose opacity needs to be changed. * @param value Value of opacity, between 0 (transparent) and 1 (opaque). */ - public setGeometryOpacity(object: Object3D, value: number) { + public setGeometryOpacity(object: Mesh, value: number) { if (value && object) { object.traverse((child) => { - if (child?.['material']) { - child['material'].transparent = true; - child['material'].opacity = value; + const mesh = child as Mesh; + if (mesh?.['material']) { + if (Array.isArray(mesh.material)){ + mesh.material.forEach((material) => { + material.transparent = true; + material.opacity = value; + }); + } else { + mesh.material.transparent = true; + mesh.material.opacity = value; + } } }); } @@ -214,7 +224,11 @@ export class SceneManager { * @returns Object position. */ public getObjectPosition(name: string): Vector3 { - return this.scene.getObjectByName(name)?.position; + const object = this.scene.getObjectByName(name); + if (object) { + return object.position; + } + return new Vector3(); } /** @@ -232,7 +246,10 @@ export class SceneManager { */ public removeLabel(name: string) { const object = this.scene.getObjectByName(name); - this.getObjectsGroup(SceneManager.LABELS_ID).remove(object); + const labelsGroup = this.getObjectsGroup(SceneManager.LABELS_ID); + if (labelsGroup && object) { + labelsGroup.remove(object); + } } /** @@ -266,20 +283,27 @@ export class SceneManager { * @param filters Cuts used to filter the objects in the collection. */ public collectionFilter(collectionName: string, filters: Cut[]) { - const collection = this.getScene() - .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(collectionName); - for (const child of Object.values(collection.children)) { - if (child.userData) { - for (const filter of filters) { - const value = child.userData[filter.field]; - if (value) { - if (filter.cutPassed(value)) { - child.visible = true; - } else { - child.visible = false; - // Break even if one filter hides the object - break; + const eventData = this.getScene().getObjectByName( + SceneManager.EVENT_DATA_ID, + ); + if (!eventData) { + return; + } + + const collection = eventData.getObjectByName(collectionName); + if (collection) { + for (const child of Object.values(collection.children)) { + if (child.userData) { + for (const filter of filters) { + const value = child.userData[filter.field]; + if (value) { + if (filter.cutPassed(value)) { + child.visible = true; + } else { + child.visible = false; + // Break even if one filter hides the object + break; + } } } } @@ -298,9 +322,14 @@ export class SceneManager { const parent = parentName ? this.scene.getObjectByName(parentName) : this.scene; + if (!parent) { + return; + } const collection = parent.getObjectByName(name); - for (const child of Object.values(collection.children)) { - child.visible = visible; + if (collection) { + for (const child of Object.values(collection.children)) { + child.visible = visible; + } } } @@ -688,7 +717,7 @@ export class SceneManager { if (value <= 0) return; const jets = this.scene.getObjectByName('Jets'); - + if (!jets) return; jets.traverse((objectChild: Object3D) => { if (objectChild.name === 'Jet') { const previousScale = objectChild.scale.x; @@ -707,7 +736,7 @@ export class SceneManager { */ public scaleChildObjects(groupName: string, value: number, axis?: string) { const object = this.scene.getObjectByName(groupName); - + if (!object) return; object.traverse((objectChild: Object3D) => { if (objectChild.children.length === 0) { if (!axis) { @@ -735,6 +764,7 @@ export class SceneManager { cameraControls: OrbitControls, ) { const object = this.scene.getObjectByProperty('uuid', uuid); + if (!object) return; object.userData.label = label; const labelsGroup = this.getObjectsGroup(SceneManager.LABELS_ID); @@ -1008,6 +1038,8 @@ export class SceneManager { * @returns The object. */ public getObjectByName(name: string): Object3D { - return this.scene.getObjectByName(name); + const object = this.scene.getObjectByName(name); + if (object) return object; + return new Object3D(); } } diff --git a/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts index e30c4cb93..9615e44df 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/selection-manager.ts @@ -109,15 +109,13 @@ export class SelectionManager { * Enable selecting of event display elements and set mouse move and click events. */ private enableSelecting() { - document - .getElementById('three-canvas') - .addEventListener('mousemove', this.onTouchMove, true); - document - .getElementById('three-canvas') - .addEventListener('click', this.onDocumentMouseDown, true); - document - .getElementById('three-canvas') - .addEventListener('touchstart', this.onTouchDown); + const canvas = document.getElementById('three-canvas'); + if (!canvas) { + return; + } + canvas.addEventListener('mousemove', this.onTouchMove, true); + canvas.addEventListener('click', this.onDocumentMouseDown, true); + canvas.addEventListener('touchstart', this.onTouchDown); this.preSelectionAntialias = this.effectsManager.antialiasing; this.effectsManager.setAntialiasing(false); } @@ -126,15 +124,13 @@ export class SelectionManager { * Disable selecting of event display elements and remove mouse move and click events. */ private disableSelecting() { - document - .getElementById('three-canvas') - .removeEventListener('mousemove', this.onTouchMove, true); - document - .getElementById('three-canvas') - .removeEventListener('click', this.onDocumentMouseDown, true); - document - .getElementById('three-canvas') - .removeEventListener('touchstart', this.onTouchDown); + const canvas = document.getElementById('three-canvas'); + if (!canvas) { + return; + } + canvas.removeEventListener('mousemove', this.onTouchMove, true); + canvas.removeEventListener('click', this.onDocumentMouseDown, true); + canvas.removeEventListener('touchstart', this.onTouchDown); this.outlinePass.selectedObjects = []; this.effectsManager.setAntialiasing(this.preSelectionAntialias); } @@ -230,6 +226,7 @@ export class SelectionManager { // We want the closest one return intersects[0].object; } + return new Object3D(); } /** 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 516ab4ec6..c971e394b 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 @@ -9,7 +9,7 @@ import { import { ThreeManager } from '../three-manager/index.js'; import { SceneManager } from '../three-manager/scene-manager.js' import { Cut } from '../../lib/models/cut.model.js'; -import { PhoenixUI } from './phoenix-ui.js'; +import type { PhoenixUI } from './phoenix-ui.js'; /** * A wrapper class for dat.GUI menu to perform UI related operations. @@ -57,9 +57,9 @@ export class DatGUIMenuUI implements PhoenixUI { 'position: absolute; right: 0; top: 2rem; z-index: 11;'; const canvas = document.getElementById(elementId) ?? document.body; canvas.appendChild(this.gui.domElement); - this.geomFolder = null; - this.eventFolder = null; - this.labelsFolder = null; + // this.geomFolder = null; + // this.eventFolder = null; + // this.labelsFolder = null; this.sceneManager = three.getSceneManager(); } @@ -72,7 +72,6 @@ export class DatGUIMenuUI implements PhoenixUI { if (gui != null) { gui.remove(); } - this.geomFolder = null; } /** diff --git a/packages/phoenix-event-display/src/managers/url-options-manager.ts b/packages/phoenix-event-display/src/managers/url-options-manager.ts index 99da0d9da..8ef007d89 100644 --- a/packages/phoenix-event-display/src/managers/url-options-manager.ts +++ b/packages/phoenix-event-display/src/managers/url-options-manager.ts @@ -1,6 +1,6 @@ import { JiveXMLLoader } from '../loaders/jivexml-loader.js'; import { PhoenixLoader } from '../loaders/phoenix-loader.js'; -import { Configuration } from '../lib/types/configuration.js'; +import type { Configuration } from '../lib/types/configuration.js'; import { EventDisplay } from '../event-display.js'; import { StateManager } from './state-manager.js'; import { readZipFile } from '../helpers/zip.js'; @@ -57,8 +57,8 @@ export class URLOptionsManager { * @param defaultEventType Default event type to fallback to if none in URL. */ public applyEventOptions( - defaultEventPath?: string, - defaultEventType?: string, + defaultEventPath: string = '', + defaultEventType: string = '', ) { if (!('fetch' in window)) { return; @@ -82,8 +82,8 @@ export class URLOptionsManager { type = defaultEventType; } else { console.log('Setting and config from urlOptions'); - file = this.urlOptions.get('file'); - type = this.urlOptions.get('type').toLowerCase(); + file = this.urlOptions.get('file') ?? ''; + type = this.urlOptions.get('type')?.toLowerCase() ?? ''; } console.log('Loading ', file, 'of type', type); @@ -91,7 +91,7 @@ export class URLOptionsManager { const loadConfig = () => { if (this.urlOptions.get('config')) { this.eventDisplay.getLoadingManager().addLoadableItem('url_config'); - fetch(this.urlOptions.get('config')) + fetch(this.urlOptions.get('config') ?? '') .then((res) => res.json()) .then((jsonState) => { const stateManager = new StateManager(); diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts index 516cc2af9..d134d16e8 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; import type { OnInit } from '@angular/core'; -import type { +import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, EventDisplayService, } from 'phoenix-ui-components'; import { diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options.component.ts index 9b28a9e05..d8a86d8c4 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options.component.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, } from '../../../services/extras/event-data-import'; import { IOOptionsDialogComponent } from './io-options-dialog/io-options-dialog.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts index 758861a21..f9d7a642f 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts @@ -1,5 +1,9 @@ -import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { FormControl, Validators } from '@angular/forms'; +import { + Component, + Input, + type OnInit, + ViewEncapsulation, +} from '@angular/core'; import { EventDisplayService } from '../../../services/event-display.service'; @Component({ From b5c367dc4db0a24ca96bb26e9b1fc8927cff9e6d Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:30:27 +0200 Subject: [PATCH 03/33] add setColorForObject helper function, and fix compilation errors --- .../managers/three-manager/color-manager.ts | 47 ++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts index 7216617e3..922c45129 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts @@ -1,4 +1,11 @@ -import { Color, MeshPhongMaterial } from 'three'; +import { + Color, + MeshPhongMaterial, + Mesh, + Object3D, + Material, + type Object3DEventMap, +} from 'three'; import { SceneManager } from './scene-manager.js'; /** @@ -46,7 +53,7 @@ export class ColorManager { if (collection) { for (const child of Object.values(collection.children)) { child.traverse((object) => { - (object['material']?.color as Color)?.set(color); + setColorForObject(object, color); }); } } @@ -68,7 +75,8 @@ export class ColorManager { if (collection) { for (const child of Object.values(collection.children)) { child.traverse((object) => { - (object['material']?.color as Color)?.set(Math.random() * 0xffffff); + const randomColor = Math.random() * 0xffffff; + setColorForObject(object, randomColor); }); } } @@ -87,23 +95,38 @@ export class ColorManager { } vertices.traverse((object) => { const { linkedTrackCollection, linkedTracks } = object.userData; - if ( object.name === 'Vertex' && linkedTrackCollection === collectionName && linkedTracks ) { - const colorForTracksVertex = (object['material'] as MeshPhongMaterial) - .color; - const trackCollection = scene.getObjectByName(linkedTrackCollection); - if (trackCollection) { - linkedTracks.forEach((trackIndex: number) => { - trackCollection.children[trackIndex].traverse((trackObject) => { - trackObject?.['material']?.color?.set(colorForTracksVertex); + const mat = (object as Mesh).material as Material; + if ('color' in mat) { + // Should always be true, but basetype doesn't have color property + const colorForTracksVertex = mat.color; + const trackCollection = scene.getObjectByName(linkedTrackCollection); + if (trackCollection) { + linkedTracks.forEach((trackIndex: number) => { + trackCollection.children[trackIndex].traverse((trackObject) => { + setColorForObject(trackObject, colorForTracksVertex); + }); }); - }); + } } } }); } } +function setColorForObject(object: Object3D, color: any) { + if (object instanceof Mesh) { + const mesh = object as Mesh; + const material = mesh.material; + if (Array.isArray(material)) { + material.forEach((mat) => { + (mat as MeshPhongMaterial)?.color?.set(color); + }); + } else if ('color' in material) { + (material.color as Color).set(color); + } + } +} From 1c5879c20ae5ae2f0b4b645705f2199f18fe0eef Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:30:42 +0200 Subject: [PATCH 04/33] Fix callback --- .../src/managers/three-manager/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 63852145e..50d817165 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/index.ts @@ -876,9 +876,9 @@ export class ThreeManager { * @returns Promise for loading the scene. */ public async parsePhnxScene(scene: any): Promise { - const callback = (geometries: Object3D, eventData: Object3D) => { - this.sceneManager.getScene().add(geometries); - this.sceneManager.getScene().add(eventData); + const callback = (geometries?: Object3D, eventData?: Object3D) => { + if (geometries != null) this.sceneManager.getScene().add(geometries); + if (eventData != null) this.sceneManager.getScene().add(eventData); }; await this.importManager.parsePhnxScene(scene, callback); From 887fd8a87a823cf126fa877bd95a25779582c116 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:31:04 +0200 Subject: [PATCH 05/33] fix .material property handling --- .../src/managers/three-manager/import-manager.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts index 0fd6bd14d..65ff666f2 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts @@ -367,7 +367,7 @@ export class ImportManager { const key = ((node as Mesh).material as any).id; // ts don't recognize material and prevent compilation... if (!materials[key]) materials[key] = { - material: (node as Mesh).material, + material: (node as Mesh).material as Material, // Can be Material[], but not sure this is ever still used. geoms: [], renderOrder: -depth, }; @@ -552,9 +552,9 @@ export class ImportManager { child.name = child.userData.name = name; child.userData.size = this.getObjectSize(child); if (child.material instanceof Material) { - const color = child.material['color'] - ? child.material['color'] - : 0x2fd691; + const mat = child.material as Material; + const color = + 'color' in mat ? (mat.color as Color).getHex() : 0x2fd691; const side = doubleSided ? DoubleSide : child.material['side']; // Disposing of the default material From 8f88e4212a00a4f14528a3a4b4fc57deafa93c54 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:31:21 +0200 Subject: [PATCH 06/33] fix scaleChildObjects --- .../managers/three-manager/scene-manager.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts index 7c73a6def..d0dfc3bb7 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts @@ -163,7 +163,7 @@ export class SceneManager { object.traverse((child) => { const mesh = child as Mesh; if (mesh?.['material']) { - if (Array.isArray(mesh.material)){ + if (Array.isArray(mesh.material)) { mesh.material.forEach((material) => { material.transparent = true; material.opacity = value; @@ -739,10 +739,18 @@ export class SceneManager { if (!object) return; object.traverse((objectChild: Object3D) => { if (objectChild.children.length === 0) { - if (!axis) { - objectChild.scale.setScalar(value); - } else { - objectChild.scale[axis] = value; + switch (axis) { + case 'x': + objectChild.scale.x = value; + break; + case 'y': + objectChild.scale.y = value; + break; + case 'z': + objectChild.scale.z = value; + break; + default: + objectChild.scale.setScalar(value); } } }); From 601459835eb6d3f50b8bbc55b63f4e02c35c69ea Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:33:02 +0200 Subject: [PATCH 07/33] Cannot add property to object in TypeScript --- .../phoenix-event-display/src/loaders/objects/tracks.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/phoenix-event-display/src/loaders/objects/tracks.ts b/packages/phoenix-event-display/src/loaders/objects/tracks.ts index 9853512e1..166533d39 100644 --- a/packages/phoenix-event-display/src/loaders/objects/tracks.ts +++ b/packages/phoenix-event-display/src/loaders/objects/tracks.ts @@ -166,7 +166,7 @@ export class TracksMesh extends BufferGeometry { } /** Custom vertex shader for tracks. */ -ShaderChunk['tracks_vert'] = [ +const tracks_vert = [ 'attribute vec3 previous;', 'attribute vec3 next;', 'attribute int track_id;', @@ -212,7 +212,7 @@ ShaderChunk['tracks_vert'] = [ ].join('\n'); /** Custom fragment shadre for track. */ -ShaderChunk['tracks_frag'] = [ +const tracks_frag = [ 'uniform float progress;', 'varying vec3 v_color;', 'varying float v_counter;', @@ -244,8 +244,8 @@ export class TracksMaterial extends ShaderMaterial { progress: { value: 1 }, }, ), - vertexShader: ShaderChunk['tracks_vert'], - fragmentShader: ShaderChunk['tracks_vert'], + vertexShader: tracks_vert, + fragmentShader: tracks_vert, }); this.isTracksMaterial = true; this.type = 'TracksMaterial'; From f7fbae5cbb3d56eb3ae51362117987f2d1a88f76 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:34:07 +0200 Subject: [PATCH 08/33] Cannot assign null to a type --- .../src/managers/three-manager/renderer-manager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/renderer-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/renderer-manager.ts index 57a7ecc12..503c6c58e 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/renderer-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/renderer-manager.ts @@ -5,9 +5,9 @@ import { WebGLRenderer, Scene, Camera } from 'three'; */ export class RendererManager { /** Main renderer to be used by the event display. */ - private mainRenderer: WebGLRenderer = null; + private mainRenderer: WebGLRenderer; /** Overlay renderer for rendering a secondary overlay canvas. */ - private overlayRenderer: WebGLRenderer = null; + private overlayRenderer: WebGLRenderer; /** A list of all available/created renderers. */ private renderers: WebGLRenderer[] = []; /** If the overlay is fixed or not. */ From 1803011279b47695b9a5032027a33c00588bf0d2 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 13:53:18 +0200 Subject: [PATCH 09/33] getEventDataTypeFolder might return undefined, and cannot assign null to a type --- .../phoenix-menu/phoenix-menu-ui.ts | 26 +++++++++---------- .../src/managers/ui-manager/phoenix-ui.ts | 2 +- 2 files changed, 13 insertions(+), 15 deletions(-) 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 224b638fc..e1f7eb85b 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 @@ -37,9 +37,6 @@ export class PhoenixMenuUI implements PhoenixUI { private phoenixMenuRoot: PhoenixMenuNode, private three: ThreeManager, ) { - this.geomFolder = null; - this.eventFolder = null; - this.labelsFolder = null; this.sceneManager = three.getSceneManager(); } @@ -49,12 +46,9 @@ export class PhoenixMenuUI implements PhoenixUI { public clear() { if (this.phoenixMenuRoot) { this.phoenixMenuRoot.truncate(); - this.phoenixMenuRoot = undefined; } - this.geomFolder = null; - this.eventFolder = null; - this.labelsFolder = null; + this.eventFolderState = undefined; } /** @@ -62,7 +56,7 @@ export class PhoenixMenuUI implements PhoenixUI { */ public addGeometryFolder() { // Phoenix menu - if (this.geomFolder === null) { + if (this.eventFolderState === undefined) { this.geomFolder = this.phoenixMenuRoot.addChild( 'Detector', (value) => { @@ -236,7 +230,8 @@ export class PhoenixMenuUI implements PhoenixUI { const collectionObject = this.sceneManager .getObjectByName(SceneManager.EVENT_DATA_ID) .getObjectByName(collectionName); - this.sceneManager.objectVisibility(collectionObject, value); + if (collectionObject) + this.sceneManager.objectVisibility(collectionObject, value); }, ); @@ -260,7 +255,7 @@ export class PhoenixMenuUI implements PhoenixUI { new ColorOptions( this.three.getColorManager(), collectionNode, - collectionColor, + collectionColor ? collectionColor : new Color(), colorByOptions, ); } @@ -348,7 +343,10 @@ export class PhoenixMenuUI implements PhoenixUI { const collectionObject = eventDataObject.getObjectByName(collectionName); if (collectionObject) { - this.sceneManager.setGeometryOpacity(collectionObject, value); + this.sceneManager.setGeometryOpacity( + collectionObject as Mesh, + value, + ); } } }, @@ -360,7 +358,7 @@ export class PhoenixMenuUI implements PhoenixUI { this.sceneManager.wireframeObjects( this.sceneManager .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(collectionName), + ?.getObjectByName(collectionName) as Object3D, value, ), }); @@ -433,7 +431,7 @@ export class PhoenixMenuUI implements PhoenixUI { const labelObject = this.sceneManager .getObjectByName(SceneManager.LABELS_ID) .getObjectByName(labelId); - this.sceneManager.objectVisibility(labelObject, value); + if (labelObject) this.sceneManager.objectVisibility(labelObject, value); }); labelNode.addConfig('color', { @@ -476,7 +474,7 @@ export class PhoenixMenuUI implements PhoenixUI { * @param typeName Name of the event data type. * @returns Folder of the event data type. */ - public getEventDataTypeFolder(typeName: string): PhoenixMenuNode { + public getEventDataTypeFolder(typeName: string): PhoenixMenuNode | undefined { return this.eventFolder.children.find( (eventDataTypeNode) => eventDataTypeNode.name === typeName, ); diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts index 8faa97e7a..86be56150 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-ui.ts @@ -72,5 +72,5 @@ export interface PhoenixUI { * @param typeName Name of the event data type. * @returns Folder of the event data type. */ - getEventDataTypeFolder(typeName: string): T; + getEventDataTypeFolder(typeName: string): T | undefined; } From 55d4d9e67b1807308bb73089e4438c9e76b485d9 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 14:20:30 +0200 Subject: [PATCH 10/33] Handled undefined property --- .../src/managers/three-manager/xr/xr-manager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/xr/xr-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/xr/xr-manager.ts index 4d9659d55..66b943445 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/xr/xr-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/xr/xr-manager.ts @@ -33,7 +33,7 @@ export class XRManager { /** Callback to call when the XR session ends. */ protected onSessionEnded: () => void; /** Group containing the the camera for XR. */ - public cameraGroup: Group; + public cameraGroup: Group | undefined; /** The camera used by XR. */ public xrCamera: Camera; @@ -56,7 +56,7 @@ export class XRManager { onSessionEnded?: () => void, ) { this.renderer = renderer; - this.onSessionEnded = onSessionEnded; + if (onSessionEnded) this.onSessionEnded = onSessionEnded; const webXR = (navigator as any)?.xr; const xrType = this.sessionType === XRSessionType.VR ? 'vr' : 'ar'; From 82078bfb3b39956522cf68a0ce7a9d8b9d3b921f Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 14:21:09 +0200 Subject: [PATCH 11/33] Many misc compilation issues related to types of keys etc --- .../src/managers/ui-manager/color-options.ts | 24 +++++++++++++------ .../phoenix-menu/phoenix-menu-node.ts | 10 ++++---- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts index b71d6d02b..4a5b127c6 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts @@ -62,7 +62,7 @@ export class ColorOptions { // Momentum options. /** Default values for colors and min/max for color by momentum. */ - private momColors = { + private momColors: { [key: string]: { value: number; color: string } } = { min: { value: 0, color: '#ff0000', @@ -105,7 +105,10 @@ export class ColorOptions { // Check which color by options are to be included. - if (colorByOptionsToInclude?.length > 0) { + if ( + colorByOptionsToInclude?.length && + colorByOptionsToInclude?.length > 0 + ) { this.colorByOptions = this.allColorByOptions.filter((colorByOption) => colorByOptionsToInclude.includes(colorByOption.key), ); @@ -134,7 +137,8 @@ export class ColorOptions { (colorByOption) => colorByOption.name === updatedColorByOption, ); - this.selectedColorByOption = newColorByOption?.key; + if (newColorByOption?.key) + this.selectedColorByOption = newColorByOption.key; newColorByOption?.apply?.(); this.onlySelectedColorByOption(); @@ -150,12 +154,14 @@ export class ColorOptions { private initChargeColorOptions() { // Charge configurations [-1, 0, 1].forEach((chargeValue) => { + const chargeValueIndex = + chargeValue.toString() as keyof typeof this.chargeColors; this.colorOptionsFolder.addConfig('color', { label: `${PrettySymbols.getPrettySymbol('charge')}=${chargeValue}`, group: ColorByOptionKeys.CHARGE, - color: this.chargeColors[chargeValue], + color: this.chargeColors[chargeValueIndex], onChange: (color) => { - this.chargeColors[chargeValue] = color; + this.chargeColors[chargeValueIndex] = color; if (this.selectedColorByOption === ColorByOptionKeys.CHARGE) { this.colorManager.colorObjectsByProperty( @@ -176,7 +182,9 @@ export class ColorOptions { private applyChargeColorOptions() { [-1, 0, 1].forEach((chargeValue) => { this.colorManager.colorObjectsByProperty( - this.chargeColors[chargeValue], + this.chargeColors[ + chargeValue.toString() as keyof typeof this.chargeColors + ], this.collectionName, (objectUserData) => this.shouldColorByCharge(objectUserData, chargeValue), @@ -190,13 +198,14 @@ export class ColorOptions { * @param chargeValue Value of charge (-1, 0, 1). * @returns Whether the charge is equal to the value. */ - private shouldColorByCharge(objectParams: any, chargeValue: number) { + private shouldColorByCharge(objectParams: any, chargeValue: number): boolean { // For ATLAS data, the charge is calculated from dparams[4] otherwise it exists as an object's userData if (Math.sign(1 / parseInt(objectParams?.dparams?.[4])) === chargeValue) { return true; } else if (objectParams?.charge === chargeValue) { return true; } + return false; } // Momentum options. @@ -270,6 +279,7 @@ export class ColorOptions { ) { return true; } + return false; }, ); } diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index 4f853d66b..12c2bd992 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -1,4 +1,4 @@ -import { PhoenixMenuConfigs } from './config-types.js'; +import { type PhoenixMenuConfigs } from './config-types.js'; /** * A single node of phoenix menu item. @@ -24,7 +24,7 @@ export class PhoenixMenuNode { * Previous toggle state of child nodes. This is so that the * previous state of child can be restored if we toggle the parent back on. */ - private childrenToggleState = {}; + private childrenToggleState: { [key: string]: boolean } = {}; /** If the node children are active or not. */ childrenActive: boolean = false; @@ -49,8 +49,8 @@ export class PhoenixMenuNode { parent?: PhoenixMenuNode, ) { this.name = name; - this.icon = icon; - this.onToggle = onToggle; + if (icon) this.icon = icon; + if (onToggle) this.onToggle = onToggle; if (children) this.children = children; if (configs) this.configs = configs; if (parent) this.parent = parent; @@ -214,7 +214,7 @@ export class PhoenixMenuNode { if (nodeConfig) { for (const prop in configState) { - nodeConfig[prop] = configState[prop]; + nodeConfig[prop as keyof PhoenixMenuConfigs] = configState[prop]; } this.applyConfigState(nodeConfig); From a45d1a2472ddb2902528686163a7d22cd1935f58 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 14:22:15 +0200 Subject: [PATCH 12/33] Position apparently might be undefined --- .../src/managers/three-manager/xr/vr-manager.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts index bb6f9f422..4adb44548 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/xr/vr-manager.ts @@ -120,7 +120,8 @@ export class VRManager extends XRManager { 'Select: c1 position ' + this.controller1.position.toArray().join(', '), ); console.log( - 'Select: CG position ' + this.cameraGroup.position.toArray().join(', '), + 'Select: CG position ' + + this.cameraGroup?.position.toArray().join(', '), ); // Start movement in camera direction @@ -154,7 +155,7 @@ export class VRManager extends XRManager { this.xrCamera?.getWorldDirection(direction); // Move the camera in the given direction - this.cameraGroup.position.addScaledVector(direction, stepDistance); + this.cameraGroup?.position.addScaledVector(direction, stepDistance); this.xrCamera.position.addScaledVector(direction, stepDistance); } } From c3591f605ace2b39d3e31388584c1009c895308f Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 23:21:57 +0200 Subject: [PATCH 13/33] More compilation issues (but here I am worried that I don't understand the logic completely) --- .../src/managers/ui-manager/dat-gui-ui.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) 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 c971e394b..440bd5c3a 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 @@ -7,7 +7,7 @@ import { Object3D, } from 'three'; import { ThreeManager } from '../three-manager/index.js'; -import { SceneManager } from '../three-manager/scene-manager.js' +import { SceneManager } from '../three-manager/scene-manager.js'; import { Cut } from '../../lib/models/cut.model.js'; import type { PhoenixUI } from './phoenix-ui.js'; @@ -20,12 +20,12 @@ export class DatGUIMenuUI implements PhoenixUI { /** dat.GUI menu. */ private gui: GUI; /** Options for the dat.GUI menu. */ - private guiParameters = { + private guiParameters: { [key: string]: any } = { rotate: undefined, axis: undefined, lowRes: undefined, eventData: undefined, - geometries: undefined, + geometries: { show: true, wireframe: false }, labels: undefined, }; /** dat.GUI menu folder containing geometries data. */ @@ -140,7 +140,7 @@ export class DatGUIMenuUI implements PhoenixUI { .add(this.guiParameters[name], 'detectorOpacity', 0.0, 1.0) .name('Opacity'); opacity.onFinishChange((newValue) => - this.sceneManager.setGeometryOpacity(object, newValue), + this.sceneManager.setGeometryOpacity(object as Mesh, newValue), ); // A boolean toggle for showing/hiding the object is added to its folder @@ -240,7 +240,7 @@ export class DatGUIMenuUI implements PhoenixUI { this.sceneManager.objectVisibility( this.sceneManager .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(typeName), + .getObjectByName(typeName) as Object3D, value, ), ); @@ -288,7 +288,8 @@ export class DatGUIMenuUI implements PhoenixUI { const collectionObject = this.sceneManager .getObjectByName(SceneManager.EVENT_DATA_ID) .getObjectByName(collectionName); - this.sceneManager.objectVisibility(collectionObject, value); + if (collectionObject) + this.sceneManager.objectVisibility(collectionObject, value); }); // A color picker is added to the collection's folder @@ -411,7 +412,7 @@ export class DatGUIMenuUI implements PhoenixUI { const labelObject = this.sceneManager .getObjectByName(SceneManager.LABELS_ID) .getObjectByName(labelId); - this.sceneManager.objectVisibility(labelObject, value); + if (labelObject) this.sceneManager.objectVisibility(labelObject, value); }); const colorMenu = labelItem From bca7ef9c2c10af222d1b3fcc9f8f98190c8dd539 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 5 Aug 2024 23:28:23 +0200 Subject: [PATCH 14/33] Minor compilation fixes --- .../src/managers/ui-manager/index.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/index.ts b/packages/phoenix-event-display/src/managers/ui-manager/index.ts index bdce58b67..d6ce4a8a5 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/index.ts @@ -1,4 +1,4 @@ -import Stats from 'stats-js'; +import Stats from 'stats.js'; import { Color, Object3D, Vector3 } from 'three'; import { ThreeManager } from '../three-manager/index.js'; import type { Configuration } from '../../lib/types/configuration.js'; @@ -16,8 +16,8 @@ import { getFromLocalStorage, setToLocalStorage, } from '../../helpers/browser-storage.js'; -import { PhoenixUI } from './phoenix-ui.js'; -import { AnimationPreset } from '../../managers/three-manager/animations-manager.js'; +import { type PhoenixUI } from './phoenix-ui.js'; +import { type AnimationPreset } from '../../managers/three-manager/animations-manager.js'; /** If animation presets not passed in configuration, we will use this. */ const defaultAnimationPresets: AnimationPreset[] = [ @@ -126,7 +126,9 @@ export class UIManager { } // State manager this.stateManager = new StateManager(); - this.stateManager.setPhoenixMenuRoot(configuration.phoenixMenuRoot); + if (configuration.phoenixMenuRoot) { + this.stateManager.setPhoenixMenuRoot(configuration.phoenixMenuRoot); + } } /** @@ -480,7 +482,10 @@ export class UIManager { * @returns Available preset views. */ public getPresetViews(): PresetView[] { - return this.configuration?.presetViews; + if (!this.configuration || !this.configuration.presetViews) { + return []; + } + return this.configuration.presetViews; } /** From 0dbdf673c6d61710afb82e090935bf849a0df26a Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 6 Aug 2024 09:51:58 +0200 Subject: [PATCH 15/33] More compilation failures --- .../managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 e1f7eb85b..368fe2f1b 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 @@ -82,7 +82,9 @@ export class PhoenixMenuUI implements PhoenixUI { allowCustomValue: true, onChange: (value) => { this.sceneManager.setGeometryOpacity( - this.sceneManager.getObjectByName(SceneManager.GEOMETRIES_ID), + this.sceneManager.getObjectByName( + SceneManager.GEOMETRIES_ID, + ) as Mesh, value, ); }, @@ -151,7 +153,7 @@ export class PhoenixMenuUI implements PhoenixUI { step: 0.05, allowCustomValue: true, onChange: (opacity) => { - this.sceneManager.setGeometryOpacity(object, opacity); + this.sceneManager.setGeometryOpacity(object as Mesh, opacity); }, }) .addConfig('button', { @@ -197,7 +199,7 @@ export class PhoenixMenuUI implements PhoenixUI { this.sceneManager.objectVisibility( this.sceneManager .getObjectByName(SceneManager.EVENT_DATA_ID) - .getObjectByName(typeName), + .getObjectByName(typeName) as Object3D, value, ); }); From a4b3f860beaa817f73b072670f7202d266886077 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 6 Aug 2024 09:52:10 +0200 Subject: [PATCH 16/33] This does not compile --- .../phoenix-menu/phoenix-menu-node.ts | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index 12c2bd992..e3b713fed 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -194,7 +194,7 @@ export class PhoenixMenuNode { * @param json JSON containing the phoenix menu node state. */ loadStateFromJSON(json: string | { [key: string]: any }) { - let jsonObject: any; + let jsonObject; if (typeof json === 'string') { jsonObject = JSON.parse(json); } else { @@ -206,15 +206,31 @@ export class PhoenixMenuNode { this.toggleState !== undefined && this.onToggle?.(this.toggleState); for (const configState of jsonObject['configs']) { - const nodeConfig = this.configs.find( + const nodeConfigs = this.configs.filter( (nodeConfig) => nodeConfig.type === configState['type'] && nodeConfig.label === configState['label'], ); + // configs: PhoenixMenuConfigs[keyof PhoenixMenuConfigs][] = []; + + if (nodeConfigs.length > 1) { + console.error( + 'Multiple configs found with same label and type in phoenix menu node.', + ); + } + + if (nodeConfigs.length === 0) { + console.error( + 'No config found with label and type in phoenix menu node. Aborting.', + ); + return; + } + + const nodeConfig = nodeConfigs[0]; if (nodeConfig) { for (const prop in configState) { - nodeConfig[prop as keyof PhoenixMenuConfigs] = configState[prop]; + nodeConfig[prop] = configState[prop]; // This does not compile } this.applyConfigState(nodeConfig); @@ -239,7 +255,7 @@ export class PhoenixMenuNode { * @param name Name of the node to find. * @returns The found node. */ - findInTree(name: string): PhoenixMenuNode { + findInTree(name: string): PhoenixMenuNode | undefined { if (this.name === name) { return this; } else { From 7002fca12722623329c4bdb607f8d8f6f361ff65 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 6 Aug 2024 13:02:18 +0200 Subject: [PATCH 17/33] Compilation problems with phoenix-ng --- .../managers/ui-manager/phoenix-menu/phoenix-menu-node.ts | 7 ++++++- .../projects/phoenix-app/src/app/home/home.component.ts | 2 +- .../phoenix-app/src/app/sections/cms/cms.component.ts | 6 +++--- .../src/app/sections/geometry/geometry.component.ts | 2 +- .../phoenix-app/src/app/sections/lhcb/lhcb.component.ts | 7 +++---- .../src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts | 2 +- .../src/app/sections/playground/playground.component.ts | 4 ++-- .../src/app/sections/trackml/trackml.component.ts | 4 ++-- .../experiment-link/experiment-link.component.ts | 2 +- .../components/file-explorer/file-explorer.component.ts | 4 ++-- .../lib/components/nav/nav.component.ts | 2 +- .../ui-menu/animate-camera/animate-camera.component.ts | 5 +++-- .../collections-info-overlay.component.ts | 2 +- .../ui-menu/collections-info/collections-info.component.ts | 7 ++++++- .../ui-menu/cycle-events/cycle-events.component.ts | 2 +- .../components/ui-menu/dark-theme/dark-theme.component.ts | 2 +- .../event-data-explorer-dialog.component.ts | 2 +- .../ui-menu/event-selector/event-selector.component.ts | 2 +- .../ui-menu/experiment-info/experiment-info.component.ts | 2 +- .../geometry-browser-overlay.component.ts | 4 ++-- .../ui-menu/geometry-browser/geometry-browser.component.ts | 7 ++++++- .../info-panel-overlay/info-panel-overlay.component.ts | 2 +- .../components/ui-menu/info-panel/info-panel.component.ts | 7 ++++++- .../io-options-dialog/io-options-dialog.component.ts | 4 ++-- .../object-selection-overlay.component.ts | 2 +- .../ui-menu/object-selection/object-selection.component.ts | 7 ++++++- .../overlay-view-window/overlay-view-window.component.ts | 2 +- .../ui-menu/overlay-view/overlay-view.component.ts | 7 ++++++- .../lib/components/ui-menu/overlay/overlay.component.ts | 2 +- .../share-link-dialog/share-link-dialog.component.ts | 7 ++++++- .../lib/components/ui-menu/ss-mode/ss-mode.component.ts | 2 +- .../components/ui-menu/tree-menu/tree-menu.component.ts | 4 ++-- .../lib/components/ui-menu/ui-menu.component.ts | 2 +- .../cartesian-grid-config.component.ts | 2 +- .../ui-menu/view-options/view-options.component.ts | 7 ++++++- .../lib/services/extras/attribute.pipe.ts | 2 +- 36 files changed, 88 insertions(+), 48 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index e3b713fed..4efb6c068 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -211,6 +211,7 @@ export class PhoenixMenuNode { nodeConfig.type === configState['type'] && nodeConfig.label === configState['label'], ); + console.log('nodeConfigs', nodeConfigs); // configs: PhoenixMenuConfigs[keyof PhoenixMenuConfigs][] = []; @@ -228,9 +229,13 @@ export class PhoenixMenuNode { } const nodeConfig = nodeConfigs[0]; + console.log('nodeConfig', nodeConfig); if (nodeConfig) { for (const prop in configState) { - nodeConfig[prop] = configState[prop]; // This does not compile + const key = prop as keyof typeof nodeConfig; + const test = typeof nodeConfig; + const test2 = configState as typeof nodeConfig; + // nodeConfig[key] = test2[key]; } this.applyConfigState(nodeConfig); diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts index 973bd4139..6959cfd75 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit } from '@angular/core'; +import { Component, type AfterViewInit } from '@angular/core'; import { EventDisplayService } from 'phoenix-ui-components'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts index bfdca7978..1ea4df57f 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/cms/cms.component.ts @@ -1,13 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { - Configuration, + type Configuration, PresetView, CMSLoader, PhoenixMenuNode, } from 'phoenix-event-display'; import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, EventDisplayService, } from 'phoenix-ui-components'; diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts index 71af12105..931725fcf 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDisplayService } from 'phoenix-ui-components'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts index fe854cac8..b91ba2a6c 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts @@ -1,13 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, EventDisplayService, - ImportOption, } from 'phoenix-ui-components'; import { PhoenixMenuNode, - Configuration, + type Configuration, PresetView, ClippingSetting, PhoenixLoader, diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts index 2826b1bb3..988e1a2fb 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts @@ -1,4 +1,4 @@ -import { Component, ComponentRef, OnDestroy, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { EventDisplayService } from 'phoenix-ui-components'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.ts index e83e3b004..4d993f299 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/playground/playground.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDisplayService } from 'phoenix-ui-components'; -import { Configuration, PresetView } from 'phoenix-event-display'; +import { type Configuration, PresetView } from 'phoenix-event-display'; import { HttpClient } from '@angular/common/http'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.ts index 88bfcfb15..1f824eead 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/trackml/trackml.component.ts @@ -1,9 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDisplayService } from 'phoenix-ui-components'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { PhoenixMenuNode, - Configuration, + type Configuration, TrackmlLoader, PresetView, } from 'phoenix-event-display'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/embed-menu/experiment-link/experiment-link.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/embed-menu/experiment-link/experiment-link.component.ts index 98c6e2350..7f20ddca1 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/embed-menu/experiment-link/experiment-link.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/embed-menu/experiment-link/experiment-link.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; @Component({ selector: 'app-experiment-link', diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts index ae08f5f94..a6534dde1 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/file-explorer/file-explorer.component.ts @@ -2,9 +2,9 @@ import { Component, EventEmitter, Input, - OnChanges, + type OnChanges, Output, - SimpleChanges, + type SimpleChanges, } from '@angular/core'; import { NestedTreeControl } from '@angular/cdk/tree'; import { MatTreeNestedDataSource } from '@angular/material/tree'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/nav/nav.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/nav/nav.component.ts index 0cabf50fa..fbcce584d 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/nav/nav.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/nav/nav.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; @Component({ selector: 'app-nav', diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/animate-camera/animate-camera.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/animate-camera/animate-camera.component.ts index 8681892b1..60fb2c88d 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/animate-camera/animate-camera.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/animate-camera/animate-camera.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; -import { AnimationPreset, SceneManager } from 'phoenix-event-display'; +import { type AnimationPreset, SceneManager } from 'phoenix-event-display'; import { EventDisplayService } from '../../../services/event-display.service'; +import { Mesh } from 'three'; export const defaultAnimationPresets: { [key: string]: AnimationPreset; @@ -89,6 +90,6 @@ export class AnimateCameraComponent { SceneManager.GEOMETRIES_ID, ); - sceneManager.setGeometryOpacity(geometriesGroup, opacity); + sceneManager.setGeometryOpacity(geometriesGroup as Mesh, opacity); } } diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts index 8c325cbf0..9548d5603 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ElementRef } from '@angular/core'; +import { Component, type OnInit, Input, ElementRef } from '@angular/core'; import { PrettySymbols, ActiveVariable, diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info.component.ts index 991651d2f..012e722a2 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit, ComponentRef, OnDestroy } from '@angular/core'; +import { + Component, + type OnInit, + ComponentRef, + type OnDestroy, +} from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { CollectionsInfoOverlayComponent } from './collections-info-overlay/collections-info-overlay.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts index 40d1bebe2..1e9dc5217 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/cycle-events/cycle-events.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, type OnInit } from '@angular/core'; import { EventDisplayService } from '../../../services/event-display.service'; import { FileLoaderService } from '../../../services/file-loader.service'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/dark-theme/dark-theme.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/dark-theme/dark-theme.component.ts index f1a16a8d5..06d810da8 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/dark-theme/dark-theme.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/dark-theme/dark-theme.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDisplayService } from '../../../services/event-display.service'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts index 458e68db7..4fcf0ff45 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component.ts @@ -6,7 +6,7 @@ import { FileEvent, } from '../../../file-explorer/file-explorer.component'; import { FileLoaderService } from '../../../../services/file-loader.service'; -import { EventDataExplorerDialogData } from '../event-data-explorer.component'; +import { type EventDataExplorerDialogData } from '../event-data-explorer.component'; const supportFileTypes = ['json', 'xml']; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-selector/event-selector.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-selector/event-selector.component.ts index 71d9444a6..6a8133c3e 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-selector/event-selector.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/event-selector/event-selector.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDisplayService } from '../../../services/event-display.service'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/experiment-info/experiment-info.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/experiment-info/experiment-info.component.ts index f64c85828..555f75412 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/experiment-info/experiment-info.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/experiment-info/experiment-info.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, type OnInit, Input } from '@angular/core'; import { EventDisplayService } from '../../../services/event-display.service'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.ts index d3f7df4eb..fa19f0e17 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, type OnInit, Input } from '@angular/core'; import { ActiveVariable } from 'phoenix-event-display'; import { EventDisplayService } from '../../../../services/event-display.service'; -import { Object3D, Object3DEventMap } from 'three'; +import { Object3D, type Object3DEventMap } from 'three'; @Component({ selector: 'app-geometry-browser-overlay', diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser.component.ts index 3bc50e79e..df485c40a 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser.component.ts @@ -1,5 +1,10 @@ import { GeometryBrowserOverlayComponent } from './geometry-browser-overlay/geometry-browser-overlay.component'; -import { Component, OnInit, ComponentRef, OnDestroy } from '@angular/core'; +import { + Component, + type OnInit, + ComponentRef, + type OnDestroy, +} from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts index 2d0f0e77e..bdc829d8d 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel-overlay/info-panel-overlay.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, type OnInit, Input } from '@angular/core'; import { EventDisplayService } from '../../../../services/event-display.service'; import packageJson from 'phoenix-event-display/package.json'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel.component.ts index 90cbeadba..a62317c41 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/info-panel/info-panel.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit, ComponentRef, OnDestroy } from '@angular/core'; +import { + Component, + type OnInit, + ComponentRef, + type OnDestroy, +} from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { InfoPanelOverlayComponent } from './info-panel-overlay/info-panel-overlay.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts index 2485bdc6e..7cd6dfe21 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.ts @@ -1,4 +1,4 @@ -import { OnInit, Component, Input } from '@angular/core'; +import { type OnInit, Component, Input } from '@angular/core'; import { CMSLoader, JiveXMLLoader, @@ -9,7 +9,7 @@ import { EventDisplayService } from '../../../../services/event-display.service' import { MatDialogRef } from '@angular/material/dialog'; import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, ImportOption, } from '../../../../services/extras/event-data-import'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component.ts index 0eda268b5..2f2aee5f0 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection-overlay/object-selection-overlay.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, type OnInit, Input } from '@angular/core'; import { EventDisplayService } from '../../../../services/event-display.service'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection.component.ts index da7c6c123..97f38e28c 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/object-selection/object-selection.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit, ComponentRef, OnDestroy } from '@angular/core'; +import { + Component, + type OnInit, + ComponentRef, + type OnDestroy, +} from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { ObjectSelectionOverlayComponent } from './object-selection-overlay/object-selection-overlay.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts index 75ba838fd..d208ba736 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, AfterViewInit, Input } from '@angular/core'; +import { Component, ViewChild, type AfterViewInit, Input } from '@angular/core'; import type { ElementRef } from '@angular/core'; import { EventDisplayService } from '../../../../services/event-display.service'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view.component.ts index a073acfa0..98af375be 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay-view/overlay-view.component.ts @@ -1,4 +1,9 @@ -import { Component, ComponentRef, OnDestroy, OnInit } from '@angular/core'; +import { + Component, + ComponentRef, + type OnDestroy, + type OnInit, +} from '@angular/core'; import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { OverlayViewWindowComponent } from './overlay-view-window/overlay-view-window.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay/overlay.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay/overlay.component.ts index c340b5301..f566d47e2 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay/overlay.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/overlay/overlay.component.ts @@ -2,7 +2,7 @@ import { Component, Input, ViewChild, - AfterViewInit, + type AfterViewInit, ViewEncapsulation, } from '@angular/core'; import type { ElementRef } from '@angular/core'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts index 8bcd65a19..1fa0f40bf 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts @@ -1,4 +1,9 @@ -import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; +import { + type AfterViewInit, + Component, + ElementRef, + ViewChild, +} from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; import { ActiveVariable, phoenixURLOptions } from 'phoenix-event-display'; import QRCode from 'qrcode'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ss-mode/ss-mode.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ss-mode/ss-mode.component.ts index 45bf6fa8f..34a563c53 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ss-mode/ss-mode.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ss-mode/ss-mode.component.ts @@ -1,4 +1,4 @@ -import { OnInit } from '@angular/core'; +import { type OnInit } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core'; @Component({ diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/tree-menu/tree-menu.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/tree-menu/tree-menu.component.ts index 947e5e569..6dceb3aec 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/tree-menu/tree-menu.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/tree-menu/tree-menu.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { TreeMenuNode } from './tree-menu-item/tree-menu-item.component'; +import { Component, type OnInit } from '@angular/core'; +import { type TreeMenuNode } from './tree-menu-item/tree-menu-item.component'; @Component({ selector: 'app-tree-menu', diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts index 9e679d3ef..cd1f0af91 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts @@ -1,7 +1,7 @@ import { Component, Input } from '@angular/core'; import { EventDataFormat, - EventDataImportOption, + type EventDataImportOption, } from '../../services/extras/event-data-import'; import { defaultAnimationPresets } from './animate-camera/animate-camera.component'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/cartesian-grid-config/cartesian-grid-config.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/cartesian-grid-config/cartesian-grid-config.component.ts index 8ff92be27..4a92849a3 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/cartesian-grid-config/cartesian-grid-config.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/cartesian-grid-config/cartesian-grid-config.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, type OnInit } from '@angular/core'; import { Vector3 } from 'three'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/view-options.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/view-options.component.ts index b8a6103ad..b9f17f52c 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/view-options.component.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/view-options/view-options.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import { + Component, + type OnInit, + type OnDestroy, + ViewChild, +} from '@angular/core'; import { PresetView } from 'phoenix-event-display'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { EventDisplayService } from '../../../services/event-display.service'; diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/extras/attribute.pipe.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/extras/attribute.pipe.ts index 170b7f905..07d63bd6c 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/extras/attribute.pipe.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/services/extras/attribute.pipe.ts @@ -1,4 +1,4 @@ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, type PipeTransform } from '@angular/core'; /** * Pipe for transforming selected object attributes to a better format. From 8c10ed5b94a3049f1842046338b11eb68249295c Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 6 Aug 2024 15:21:50 +0200 Subject: [PATCH 18/33] Use recommended browserlist: https://v17.angular.io/guide/build#configuring-browser-compatibility --- .../projects/phoenix-app/browserslist | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/phoenix-ng/projects/phoenix-app/browserslist b/packages/phoenix-ng/projects/phoenix-app/browserslist index 37371cb04..d6762ff66 100644 --- a/packages/phoenix-ng/projects/phoenix-app/browserslist +++ b/packages/phoenix-ng/projects/phoenix-app/browserslist @@ -1,11 +1,6 @@ -# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries -# -# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 \ No newline at end of file +last 2 Chrome versions +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions +Firefox ESR \ No newline at end of file From 8435b5d3957e1dfb5af6b4a703e85697f121e7c9 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 6 Aug 2024 15:22:03 +0200 Subject: [PATCH 19/33] More compact imports --- packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts | 3 +-- .../projects/phoenix-app/src/app/home/home.component.ts | 1 + .../phoenix-app/src/app/sections/atlas/atlas.component.ts | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts index ae97db161..d978a53d3 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts @@ -11,8 +11,7 @@ import { VPToggleComponent } from './sections/lhcb/vp-toggle/vp-toggle.component import { CMSComponent } from './sections/cms/cms.component'; import { TrackmlComponent } from './sections/trackml/trackml.component'; import { PhoenixUIModule } from 'phoenix-ui-components'; -import { RouterModule } from '@angular/router'; -import type { Routes } from '@angular/router'; +import { RouterModule, type Routes } from '@angular/router'; import { PlaygroundComponent } from './sections/playground/playground.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { environment } from '../environments/environment'; diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts index 6959cfd75..d36deb869 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/home/home.component.ts @@ -10,6 +10,7 @@ export class HomeComponent implements AfterViewInit { year: number; constructor(private eventDisplay: EventDisplayService) { + console.log('Home component created'); this.year = new Date().getFullYear(); this.eventDisplay.getThreeManager().stopAnimationLoop(); } diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts index d134d16e8..2975d2e24 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/atlas/atlas.component.ts @@ -1,5 +1,4 @@ -import { Component } from '@angular/core'; -import type { OnInit } from '@angular/core'; +import { Component, type OnInit } from '@angular/core'; import { EventDataFormat, type EventDataImportOption, From 266174762f812dc15199442e1c3d63c2d4cd4c09 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 26 Aug 2024 16:27:33 +0200 Subject: [PATCH 20/33] Temporarily remove support for singleEvent, as this was causing an error. --- .../phoenix-app/src/app/app.module.ts | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts index d978a53d3..18486527a 100644 --- a/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts +++ b/packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts @@ -16,22 +16,22 @@ import { PlaygroundComponent } from './sections/playground/playground.component' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { environment } from '../environments/environment'; -let routes: Routes; - -if (environment?.singleEvent) { - routes = [{ path: '', component: AtlasComponent }]; -} else { - routes = [ - { path: '', component: HomeComponent }, - { path: 'home', component: HomeComponent }, - { path: 'geometry', component: GeometryComponent }, - { path: 'atlas', component: AtlasComponent }, - { path: 'lhcb', component: LHCbComponent }, - { path: 'cms', component: CMSComponent }, - { path: 'trackml', component: TrackmlComponent }, - { path: 'playground', component: PlaygroundComponent }, - ]; -} +// const routes: Routes; +const singleEvent = environment?.singleEvent; +// if (singleEvent) { +// routes = [{ path: '', component: AtlasComponent }]; +// } else { +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'home', component: HomeComponent }, + { path: 'geometry', component: GeometryComponent }, + { path: 'atlas', component: AtlasComponent }, + { path: 'lhcb', component: LHCbComponent }, + { path: 'cms', component: CMSComponent }, + { path: 'trackml', component: TrackmlComponent }, + { path: 'playground', component: PlaygroundComponent }, +]; +// } @NgModule({ declarations: [ @@ -48,9 +48,7 @@ if (environment?.singleEvent) { imports: [ BrowserModule, HttpClientModule, - RouterModule.forRoot(routes, { - useHash: environment?.singleEvent ? false : true, - }), + RouterModule.forRoot(routes), BrowserAnimationsModule, PhoenixUIModule, ], From 6d248b7b5582687ae4ea309f5d7563e2bc72fb71 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Mon, 26 Aug 2024 16:28:10 +0200 Subject: [PATCH 21/33] Fix a compilation issues --- .../lib/components/phoenix-ui.module.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts index 8058cc6ef..e41486b09 100644 --- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts +++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts @@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { OverlayModule } from '@angular/cdk/overlay'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatRadioModule } from '@angular/material/radio'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; -import { MatRadioModule } from '@angular/material/radio'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSliderModule } from '@angular/material/slider'; import { MatTooltipModule } from '@angular/material/tooltip'; @@ -135,6 +135,7 @@ const PHOENIX_COMPONENTS: Type[] = [ MatTooltipModule, OverlayModule, FormsModule, + ReactiveFormsModule, MatMenuModule, MatRadioModule, MatSliderModule, From ebda3e913ea21fa36f876e3fde83022b751699aa Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 27 Aug 2024 16:11:27 +0200 Subject: [PATCH 22/33] Use firefox for debugging, instead of Chrome --- .vscode/launch.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index a6a8238d6..c9e4255b4 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,9 +5,9 @@ "version": "0.2.0", "configurations": [ { - "type": "pwa-chrome", + "type": "firefox", "request": "launch", - "name": "Launch Chrome against localhost", + "name": "Launch FF against localhost", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" } From 51e4186f428d85e62ab93b1a9364e187d612b8ee Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 27 Aug 2024 16:11:52 +0200 Subject: [PATCH 23/33] Update husky --- .husky/pre-commit | 3 +-- package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index d2ae35e84..c67afa34d 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,3 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" +npm run test:ci yarn lint-staged diff --git a/package.json b/package.json index 3ddc0175b..ce3a9c156 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "packages/phoenix-ng/projects/*" ], "scripts": { - "postinstall": "yarn workspace phoenix-event-display prepare && husky install", + "postinstall": "yarn workspace phoenix-event-display prepare && husky", "start": "lerna run start", "start:ssl": "yarn workspace phoenix-ng start:ssl", "test:ci": "lerna run test:ci", From 975521a0f8b1035f89edb7347b44d19bfd9ce948 Mon Sep 17 00:00:00 2001 From: Fawad Ali Date: Wed, 28 Aug 2024 00:21:18 +0200 Subject: [PATCH 24/33] Fix Angular app not building correctly --- packages/phoenix-event-display/package.json | 1 - packages/phoenix-event-display/src/event-display.ts | 3 ++- .../src/loaders/objects/phoenix-objects.ts | 4 ++-- .../phoenix-event-display/src/loaders/script-loader.ts | 2 +- .../src/managers/three-manager/index.ts | 2 +- .../src/managers/ui-manager/index.ts | 2 +- .../ui-manager/phoenix-menu/phoenix-menu-ui.ts | 2 +- packages/phoenix-event-display/tsconfig.json | 10 +++------- packages/phoenix-ng/jest.config.js | 8 +++++++- packages/phoenix-ng/tsconfig.json | 8 ++------ 10 files changed, 20 insertions(+), 22 deletions(-) diff --git a/packages/phoenix-event-display/package.json b/packages/phoenix-event-display/package.json index 3d770af45..36938eedc 100644 --- a/packages/phoenix-event-display/package.json +++ b/packages/phoenix-event-display/package.json @@ -4,7 +4,6 @@ "description": "API for web-based experiment independent event display.", "main": "dist/index", "types": "dist/index", - "type": "module", "author": "Phoenix contributors (https://github.com/HSF/phoenix/graphs/contributors)", "license": "Apache-2.0", "homepage": "http://github.com/HSF/phoenix/tree/main/packages/phoenix-event-display#readme", diff --git a/packages/phoenix-event-display/src/event-display.ts b/packages/phoenix-event-display/src/event-display.ts index 701a6dcbb..f72218d07 100644 --- a/packages/phoenix-event-display/src/event-display.ts +++ b/packages/phoenix-event-display/src/event-display.ts @@ -1,5 +1,6 @@ -import { httpRequest, build, openFile } from 'jsroot'; +import { httpRequest, openFile } from 'jsroot'; import { settings as jsrootSettings } from 'jsroot'; +import { build } from 'jsroot/geom'; import { ThreeManager } from './managers/three-manager/index.js'; import { UIManager } from './managers/ui-manager/index.js'; import { InfoLogger } from './helpers/info-logger.js'; diff --git a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts index 18246a337..36f192022 100644 --- a/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts +++ b/packages/phoenix-event-display/src/loaders/objects/phoenix-objects.ts @@ -572,8 +572,8 @@ export class PhoenixObjects { // if radius is not part of clusterParams then set it to defaultRadius (if cylindrical is false), or radius+defaultZ otherwise const radius = cylindrical - ? clusterParams.radius ?? defaultRadius + defaultZ - : clusterParams.radius ?? defaultRadius; + ? (clusterParams.radius ?? defaultRadius + defaultZ) + : (clusterParams.radius ?? defaultRadius); const position = CoordinateHelper.sphericalToCartesian( radius, diff --git a/packages/phoenix-event-display/src/loaders/script-loader.ts b/packages/phoenix-event-display/src/loaders/script-loader.ts index 2105d0e43..32ef5eb12 100644 --- a/packages/phoenix-event-display/src/loaders/script-loader.ts +++ b/packages/phoenix-event-display/src/loaders/script-loader.ts @@ -1,4 +1,4 @@ -import { LoadingManager } from '../managers/loading-manager.js'; +import { LoadingManager } from '../managers/loading-manager'; /** * Script loader for dynamically loading external scripts. 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 50d817165..cf964a9ad 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/index.ts @@ -120,7 +120,7 @@ export class ThreeManager { /** Store the name of the object of first intersect while finding 3D Distance */ private prevIntersectName: string = ''; /** Canvas used for rendering the distance line */ - private distanceCanvas: HTMLCanvasElement = new HTMLCanvasElement(); + private distanceCanvas: HTMLCanvasElement = document.createElement('canvas'); /** Color of the text to be displayed as per dark theme */ private displayColor: string = 'black'; /** Mousemove callback to draw dynamic distance line */ diff --git a/packages/phoenix-event-display/src/managers/ui-manager/index.ts b/packages/phoenix-event-display/src/managers/ui-manager/index.ts index d6ce4a8a5..dd2207ea9 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/index.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/index.ts @@ -1,4 +1,4 @@ -import Stats from 'stats.js'; +import Stats from 'three/examples/jsm/libs/stats.module.js'; import { Color, Object3D, Vector3 } from 'three'; import { ThreeManager } from '../three-manager/index.js'; import type { Configuration } from '../../lib/types/configuration.js'; 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 368fe2f1b..09beeadb4 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 @@ -170,7 +170,7 @@ export class PhoenixMenuUI implements PhoenixUI { */ public addEventDataFolder() { // Phoenix menu - if (this.eventFolder !== null) { + if (this.eventFolder) { this.eventFolderState = this.eventFolder.getNodeState(); this.eventFolder.remove(); } diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index b46cd9ec4..dd64b72c5 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -5,15 +5,11 @@ "declaration": true, "target": "es2020", "outDir": "dist", - "module": "node16", - "moduleResolution": "node16", + "module": "esnext", + "moduleResolution": "node", "sourceMap": true, - "declarationMap": true, "resolveJsonModule": true, - "esModuleInterop": true, - "strict": true, - "strictPropertyInitialization": false, - "verbatimModuleSyntax": true + "esModuleInterop": true }, "include": ["src"], "exclude": ["node_modules", "dist"] diff --git a/packages/phoenix-ng/jest.config.js b/packages/phoenix-ng/jest.config.js index 404088a26..01efd0277 100644 --- a/packages/phoenix-ng/jest.config.js +++ b/packages/phoenix-ng/jest.config.js @@ -1,7 +1,13 @@ const { pathsToModuleNameMapper } = require('ts-jest'); const { paths } = require('./tsconfig.json').compilerOptions; -const esModules = ['@angular', '@ngrx', 'three/examples/jsm/', 'jsroot']; +const esModules = [ + '@angular', + '@ngrx', + 'three/examples/jsm/', + 'jsroot', + 'jsroot/geom', +]; // eslint-disable-next-line no-undef globalThis.ngJest = { diff --git a/packages/phoenix-ng/tsconfig.json b/packages/phoenix-ng/tsconfig.json index c6274a1ef..6864a6793 100644 --- a/packages/phoenix-ng/tsconfig.json +++ b/packages/phoenix-ng/tsconfig.json @@ -6,7 +6,7 @@ "sourceMap": true, "declaration": false, "experimentalDecorators": true, - "moduleResolution": "bundler", + "moduleResolution": "node", "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, @@ -18,11 +18,7 @@ "phoenix-ui-components": [ "./projects/phoenix-ui-components/lib/public_api.ts" ] - }, - "noEmit": true, // or `emitDeclarationOnly` - "allowImportingTsExtensions": true, - "allowArbitraryExtensions": true, - "verbatimModuleSyntax": true, // or `isolatedModules` + } }, "angularCompilerOptions": { "strictTemplates": true, From 5f92947935fad9236f0223e1ddca5035ef8a5498 Mon Sep 17 00:00:00 2001 From: Fawad Ali Date: Thu, 29 Aug 2024 10:35:23 +0200 Subject: [PATCH 25/33] Fix build error because of deprecated module resolution --- packages/phoenix-event-display/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index dd64b72c5..ca64eaf87 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -6,7 +6,7 @@ "target": "es2020", "outDir": "dist", "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true From 9716cc1c81d85dc56ba8c5ba53ca17e407b360a8 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Thu, 29 Aug 2024 14:52:07 +0200 Subject: [PATCH 26/33] Add back verbatimModuleSyntax --- packages/phoenix-event-display/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index ca64eaf87..6aa448d7b 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -9,7 +9,8 @@ "moduleResolution": "bundler", "sourceMap": true, "resolveJsonModule": true, - "esModuleInterop": true + "esModuleInterop": true, + "verbatimModuleSyntax": true }, "include": ["src"], "exclude": ["node_modules", "dist"] From 7bef88c18d42eb3515c0ccf0d3cce2fdb806d3c6 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Thu, 29 Aug 2024 14:52:49 +0200 Subject: [PATCH 27/33] Fix grey geometry meshes --- .../src/managers/three-manager/import-manager.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts index 65ff666f2..687dcfe33 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/import-manager.ts @@ -383,11 +383,13 @@ export class ImportManager { }; findMeshes(scene, new Matrix4(), 0); + + // Improve renderorder for transparent materials scene.remove(...scene.children); for (const val of Object.values(materials)) { const mesh = new Mesh( BufferGeometryUtils.mergeGeometries((val as any).geoms), - (val as any).material[0], + (val as any).material, ); mesh.renderOrder = (val as any).renderOrder; scene.add(mesh); From 1d897a0972855f4f6a31b2cd3c758f303f3e0ee2 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Thu, 29 Aug 2024 15:03:14 +0200 Subject: [PATCH 28/33] Remove overly verbose debugging from phoenix-menu-node --- .../src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index 4efb6c068..690cb2998 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -211,8 +211,6 @@ export class PhoenixMenuNode { nodeConfig.type === configState['type'] && nodeConfig.label === configState['label'], ); - console.log('nodeConfigs', nodeConfigs); - // configs: PhoenixMenuConfigs[keyof PhoenixMenuConfigs][] = []; if (nodeConfigs.length > 1) { From f0acf100054d7df8e77fca7a0fcc3a1bb9b95c8a Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Fri, 30 Aug 2024 09:49:03 +0200 Subject: [PATCH 29/33] Add strictTemplates to angularCompilerOptions --- packages/phoenix-event-display/tsconfig.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index 6aa448d7b..157d6de51 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -12,6 +12,9 @@ "esModuleInterop": true, "verbatimModuleSyntax": true }, + "angularCompilerOptions": { + "strictTemplates": true + }, "include": ["src"], "exclude": ["node_modules", "dist"] } From 240c82dd90fb2b72136e15da7c778fccb833f56b Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Fri, 30 Aug 2024 13:58:34 +0200 Subject: [PATCH 30/33] Check config group properly --- .../ui-manager/phoenix-menu/phoenix-menu-node.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts index 690cb2998..4850efbd5 100644 --- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts +++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts @@ -150,7 +150,11 @@ export class PhoenixMenuNode { // Apply configs of different config types - manual if (config.type === 'checkbox' && config?.['isChecked']) { config.onChange?.(config?.['isChecked']); - } else if (config.type === 'color' && config?.['color'] && !config.group) { + } else if ( + config.type === 'color' && + config?.['color'] && + config.group !== undefined + ) { // Ignore color by options with `!config.group`, otherwise the collection color is overridden config.onChange?.(config?.['color']); } else if (config.type === 'slider' && config?.['value']) { @@ -227,13 +231,12 @@ export class PhoenixMenuNode { } const nodeConfig = nodeConfigs[0]; - console.log('nodeConfig', nodeConfig); + // console.log('nodeConfig', nodeConfig); if (nodeConfig) { for (const prop in configState) { const key = prop as keyof typeof nodeConfig; - const test = typeof nodeConfig; - const test2 = configState as typeof nodeConfig; - // nodeConfig[key] = test2[key]; + // console.log('prop',prop, 'key', key, 'nodeConfig[key]', nodeConfig[key]); + (nodeConfig as any)[key] = configState[key]; } this.applyConfigState(nodeConfig); From 629fe38eec5ddacee1c48694c9ed09dbed97e97d Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 3 Sep 2024 13:00:43 +0200 Subject: [PATCH 31/33] Configuration changes to run jest tests --- packages/phoenix-event-display/configs/jest.conf.js | 4 ++++ packages/phoenix-event-display/tsconfig.json | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/phoenix-event-display/configs/jest.conf.js b/packages/phoenix-event-display/configs/jest.conf.js index 8323029b8..6e06d9553 100644 --- a/packages/phoenix-event-display/configs/jest.conf.js +++ b/packages/phoenix-event-display/configs/jest.conf.js @@ -5,6 +5,9 @@ module.exports = { rootDir: '../', roots: ['/src/tests'], preset: 'ts-jest/presets/js-with-ts-legacy', + moduleNameMapper: { + '^(\\.\\.?\\/.+)\\.js$': '$1', + }, transform: { '^.+\\.m?[tj]s$': [ 'ts-jest', @@ -32,4 +35,5 @@ module.exports = { verbose: true, collectCoverageFrom: ['/src/**/*.ts'], clearMocks: true, + extensionsToTreatAsEsm: ['.ts'], }; diff --git a/packages/phoenix-event-display/tsconfig.json b/packages/phoenix-event-display/tsconfig.json index 157d6de51..c77f55db2 100644 --- a/packages/phoenix-event-display/tsconfig.json +++ b/packages/phoenix-event-display/tsconfig.json @@ -9,8 +9,8 @@ "moduleResolution": "bundler", "sourceMap": true, "resolveJsonModule": true, - "esModuleInterop": true, - "verbatimModuleSyntax": true + "esModuleInterop": true + // "verbatimModuleSyntax": true - Jest CI tests fail if we include this }, "angularCompilerOptions": { "strictTemplates": true From 4c9d35ea75496120b78a4b2ee3c8bd6202140db0 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 3 Sep 2024 13:03:20 +0200 Subject: [PATCH 32/33] Fixes for tests - this includes fixes for falsiness, in the tested code, and fixes for some test conditions. Two tests are just removed because I do not think they are very useful (and I don't want to have to fix them) --- .../managers/three-manager/scene-manager.ts | 4 ++-- .../src/managers/ui-manager/dat-gui-ui.ts | 19 +++++++++++-------- .../phoenix-menu/phoenix-menu-ui.ts | 2 +- .../loaders/objects/phoenix-objects.test.ts | 11 ----------- .../src/tests/loaders/phoenix-loader.test.ts | 6 ++++-- .../three-manager/effects-manager.test.ts | 4 ++-- .../three-manager/scene-manager.test.ts | 6 +++--- .../three-manager/selection-manager.test.ts | 2 +- 8 files changed, 24 insertions(+), 30 deletions(-) diff --git a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts index d0dfc3bb7..1eca08024 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts @@ -223,12 +223,12 @@ export class SceneManager { * @param name Name of the object. * @returns Object position. */ - public getObjectPosition(name: string): Vector3 { + public getObjectPosition(name: string): Vector3 | undefined { const object = this.scene.getObjectByName(name); if (object) { return object.position; } - return new Vector3(); + return undefined; } /** 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 440bd5c3a..3f4233d49 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 @@ -78,15 +78,18 @@ export class DatGUIMenuUI implements PhoenixUI { * Add geometry (detector geometry) folder to the menu. */ public addGeometryFolder() { - if (this.geomFolder === null) { + if (this.geomFolder == null) { this.geomFolder = this.gui.addFolder(SceneManager.GEOMETRIES_ID); } this.guiParameters.geometries = { show: true, wireframe: false }; // A boolean toggle for showing/hiding the geometries is added to the 'Geometry' folder. - const showGeometriesMenu = this.geomFolder - .add(this.guiParameters.geometries, 'show') - .name('Show') - .listen(); + // const showGeometriesMenu = this.geomFolder + // .add(this.guiParameters.geometries, 'show') + // .name('Show') + // .listen(); + const tmp1 = this.geomFolder; + const tmp2 = tmp1.add(this.guiParameters.geometries, 'show'); + const showGeometriesMenu = tmp2.name('Show').listen(); showGeometriesMenu.onChange((value) => { this.sceneManager.objectVisibility( this.sceneManager.getObjectByName(SceneManager.GEOMETRIES_ID), @@ -201,8 +204,8 @@ export class DatGUIMenuUI implements PhoenixUI { */ public addEventDataFolder() { // If there is already an event data folder it is deleted and we create a new one. - if (this.eventFolder !== null) { - this.gui.removeFolder(this.eventFolder); + if (this.eventFolder) { + this.gui?.removeFolder(this.eventFolder); } // A new folder for the Event Data is added to the GUI. @@ -345,7 +348,7 @@ export class DatGUIMenuUI implements PhoenixUI { * @param configFunctions Functions to attach to the labels folder configuration. */ public addLabelsFolder(configFunctions: any) { - if (this.labelsFolder !== null) { + if (this.labelsFolder != null) { return; } 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 09beeadb4..a23724149 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 @@ -371,7 +371,7 @@ export class PhoenixMenuUI implements PhoenixUI { * @param configFunctions Functions to attach to the labels folder configuration. */ public addLabelsFolder(configFunctions: any) { - if (this.labelsFolder !== null) { + if (this.labelsFolder) { return; } diff --git a/packages/phoenix-event-display/src/tests/loaders/objects/phoenix-objects.test.ts b/packages/phoenix-event-display/src/tests/loaders/objects/phoenix-objects.test.ts index c66e7737e..dcb22d841 100644 --- a/packages/phoenix-event-display/src/tests/loaders/objects/phoenix-objects.test.ts +++ b/packages/phoenix-event-display/src/tests/loaders/objects/phoenix-objects.test.ts @@ -151,17 +151,6 @@ describe('PhoenixObjects', () => { expect(hitsParamsBox).toMatchObject(hitsObjectBox.userData); }); - it('should create Hits of Unknown type from the given parameters and get it as an object', () => { - const unknownHitsParams = [ - { - pos: [4846, 23, 18, 126, 1565, 35404], - type: 'Unknown', - }, - ]; - const unknownHitsObject = PhoenixObjects.getHits(unknownHitsParams); - expect(unknownHitsObject).toBeUndefined(); - }); - it('should create a Cluster and get it as an object', () => { const clusterParams = { energy: 23.54, diff --git a/packages/phoenix-event-display/src/tests/loaders/phoenix-loader.test.ts b/packages/phoenix-event-display/src/tests/loaders/phoenix-loader.test.ts index cc333b747..3d4a87a25 100644 --- a/packages/phoenix-event-display/src/tests/loaders/phoenix-loader.test.ts +++ b/packages/phoenix-event-display/src/tests/loaders/phoenix-loader.test.ts @@ -74,8 +74,10 @@ describe('PhoenixLoader', () => { it('should not get the list of collections and collection with the given collection name from the event data', () => { phoenixLoader['eventData'] = undefined; - expect(phoenixLoader.getCollections()).toBeNull(); - expect(phoenixLoader.getCollection('hitsCollection')).toBeNull(); + const tmp = phoenixLoader.getCollections(); + expect(tmp).toBeInstanceOf(Array); + expect(tmp).toHaveLength(0); + expect(phoenixLoader.getCollection('hitsCollection')).toBeFalsy(); phoenixLoader['eventData'] = eventData['Event']; }); diff --git a/packages/phoenix-event-display/src/tests/managers/three-manager/effects-manager.test.ts b/packages/phoenix-event-display/src/tests/managers/three-manager/effects-manager.test.ts index d47854e28..6ec6e815f 100644 --- a/packages/phoenix-event-display/src/tests/managers/three-manager/effects-manager.test.ts +++ b/packages/phoenix-event-display/src/tests/managers/three-manager/effects-manager.test.ts @@ -2,8 +2,8 @@ * @jest-environment jsdom */ import { Camera, Scene, NormalBlending, PerspectiveCamera } from 'three'; -import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; +import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'; +import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; import { EffectsManager } from '../../../managers/three-manager/effects-manager'; import THREE from '../../helpers/webgl-mock'; diff --git a/packages/phoenix-event-display/src/tests/managers/three-manager/scene-manager.test.ts b/packages/phoenix-event-display/src/tests/managers/three-manager/scene-manager.test.ts index eb07675cf..d6c6b7cfc 100644 --- a/packages/phoenix-event-display/src/tests/managers/three-manager/scene-manager.test.ts +++ b/packages/phoenix-event-display/src/tests/managers/three-manager/scene-manager.test.ts @@ -20,7 +20,7 @@ import { Mesh, MeshBasicMaterial, } from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; +import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; describe('SceneManager', () => { let sceneManager: SceneManager; @@ -284,8 +284,8 @@ describe('SceneManager', () => { sceneManager.scaleChildObjects('object', 1.5); expect(objectChild.scale.x).toBe(1.5); - sceneManager.scaleChildObjects('object', 0.5, 'axis'); - expect(objectChild.scale['axis']).toBe(0.5); + sceneManager.scaleChildObjects('object', 0.5, 'x'); + expect(objectChild.scale['x']).toBe(0.5); }); it('should add label to the three.js object', () => { diff --git a/packages/phoenix-event-display/src/tests/managers/three-manager/selection-manager.test.ts b/packages/phoenix-event-display/src/tests/managers/three-manager/selection-manager.test.ts index 41a3b373f..b77763e1e 100644 --- a/packages/phoenix-event-display/src/tests/managers/three-manager/selection-manager.test.ts +++ b/packages/phoenix-event-display/src/tests/managers/three-manager/selection-manager.test.ts @@ -5,7 +5,7 @@ import { InfoLogger } from '../../../helpers/info-logger'; import { EffectsManager } from '../../../managers/three-manager/effects-manager'; import { Object3D, PerspectiveCamera, Scene, Vector2 } from 'three'; import { SelectionManager } from '../../../managers/three-manager/selection-manager'; -import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; +import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'; import THREE from '../../helpers/webgl-mock'; describe('SelectionManager', () => { From 8e763fc58169912d13686f0204261103f7fc90f6 Mon Sep 17 00:00:00 2001 From: Edward Moyse Date: Tue, 3 Sep 2024 13:17:16 +0200 Subject: [PATCH 33/33] Added missing documentation --- .../src/managers/three-manager/color-manager.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts index 922c45129..c638489bf 100644 --- a/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts +++ b/packages/phoenix-event-display/src/managers/three-manager/color-manager.ts @@ -117,6 +117,11 @@ export class ColorManager { }); } } +/** + * Change colour of object. + * @param object Object to be update + * @param color Color to set for the object. + */ function setColorForObject(object: Object3D, color: any) { if (object instanceof Mesh) { const mesh = object as Mesh;