feat(event-display): create an active observable variable

packages/phoenix-event-display/src/event-display.ts

@@ -5,6 +5,7 @@ import { Configuration } from './extras/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';
 
 declare global {
   /**
@@ -580,7 +581,7 @@ export class EventDisplay {
    * Get the uuid of the currently selected object.
    * @returns uuid of the currently selected object.
    */
-  public getActiveObjectId(): any {
+  public getActiveObjectId(): ActiveVariable<string> {
     return this.graphicsLibrary.getActiveObjectId();
   }
 

packages/phoenix-event-display/src/helpers/active-variable.ts

@@ -0,0 +1,35 @@
+/** Callback function type. */
+export type CallbackFunction<T = any> = (updatedValue: T) => void;
+
+/**
+ * An active variable whose value can be changed and the change can be observed.
+ */
+export class ActiveVariable<T = any> {
+  /**
+   * Create the observable active variable.
+   * @param value Initial value.
+   */
+  constructor(public value?: T) {}
+
+  /**
+   * Callbacks to call on update.
+   */
+  private callbacks: CallbackFunction<T>[] = [];
+
+  /**
+   * Update the value of variable.
+   * @param updatedValue New updated value.
+   */
+  public update(updatedValue: T) {
+    this.value = updatedValue;
+    this.callbacks.forEach((callback) => callback(updatedValue));
+  }
+
+  /**
+   * Call a function on updating the value of variable.
+   * @param callback Callback to call with updated value when the variable is updated.
+   */
+  public onUpdate(callback: CallbackFunction<T>) {
+    this.callbacks.push(callback);
+  }
+}

packages/phoenix-event-display/src/index.ts

@@ -29,6 +29,7 @@ export * from './extras/preset-view.model';
 export * from './helpers/rk-helper';
 export * from './helpers/runge-kutta';
 export * from './helpers/pretty-symbols';
+export * from './helpers/active-variable';
 
 // Loaders
 export * from './loaders/event-data-loader';

packages/phoenix-event-display/src/three/index.ts

@@ -26,6 +26,7 @@ import { EffectsManager } from './effects-manager';
 import { VRManager } from './vr-manager';
 import { StateManager } from '../managers/state-manager';
 import { LoadingManager } from '../managers/loading-manager';
+import { ActiveVariable } from '../helpers/active-variable';
 
 /**
  * Manager for all three.js related functions.
@@ -544,7 +545,7 @@ export class ThreeManager {
    * Get the uuid of the currently selected object.
    * @returns uuid of the currently selected object.
    */
-  public getActiveObjectId(): any {
+  public getActiveObjectId(): ActiveVariable<string> {
     return this.getSelectionManager().getActiveObjectId();
   }
 

packages/phoenix-event-display/src/three/selection-manager.ts

@@ -12,6 +12,7 @@ import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import { InfoLogger } from '../info-logger';
 import { EffectsManager } from './effects-manager';
 import { PrettySymbols } from '../helpers/pretty-symbols';
+import { ActiveVariable } from '../helpers/active-variable';
 
 /**
  * Manager for managing event display's selection related functions.
@@ -26,19 +27,7 @@ export class SelectionManager {
   /** Object used to display the information of the selected 3D object. */
   private selectedObject: { name: string; attributes: any[] };
   /** The currently selected object which is observable for changes. */
-  private activeObject = {
-    uuid: '',
-    callbacks: [],
-    update: function (uuid: string) {
-      this.uuid = uuid;
-      for (const callback of this.callbacks) {
-        callback(uuid);
-      }
-    },
-    onUpdate: function (callback: (uuid: string) => void) {
-      this.callbacks.push(callback);
-    },
-  };
+  private activeObject = new ActiveVariable<string>('');
   /** Objects to be ignored on hovering over the scene. */
   private ignoreList: string[];
 
@@ -102,7 +91,7 @@ export class SelectionManager {
    * Get the uuid of the currently selected object.
    * @returns uuid of the currently selected object.
    */
-  public getActiveObjectId(): any {
+  public getActiveObjectId(): ActiveVariable<string> {
     return this.activeObject;
   }
 

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html

@@ -46,7 +46,7 @@
             *ngFor="let object of showingCollection; index as i"
             [attr.id]="object.uuid"
             [ngClass]="{
-              'active-object': activeObject && activeObject.uuid === object.uuid
+              'active-object': activeObject && activeObject.value === object.uuid
             }"
           >
             <td>#{{ i }}</td>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ElementRef } from '@angular/core';
-import { PrettySymbols } from 'phoenix-event-display';
+import { PrettySymbols, ActiveVariable } from 'phoenix-event-display';
 import { EventDisplayService } from '../../../../services/event-display.service';
 
 @Component({
@@ -13,7 +13,7 @@ export class CollectionsInfoOverlayComponent implements OnInit {
   selectedCollection: string;
   showingCollection: any;
   collectionColumns: string[];
-  activeObject: any;
+  activeObject: ActiveVariable<string>;
 
   constructor(
     private elementRef: ElementRef,