fix: hide labels during animations until event objects fully appear

packages/phoenix-event-display/src/managers/three-manager/animations-manager.ts

@@ -152,42 +152,43 @@ export class AnimationsManager {
     onEnd?: () => void,
     onAnimationStart?: () => void,
   ) {
+    // 🔥 Hide labels at the start of the animation
+    const labelsGroup = this.scene.getObjectByName(SceneManager.LABELS_ID);
+    if (labelsGroup) labelsGroup.visible = false;
+
     const extraAnimationSphereDuration = tweenDuration * 0.25;
     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;
       position: any;
     }[] = [];
 
     const allTweens = [];
+
     // Traverse over all event data
     eventData.traverse((eventObject: any) => {
       if (eventObject.geometry) {
         // Animation for extrapolating tracks without changing scale
         if (eventObject.name === 'Track' || eventObject.name === 'LineHit') {
-          // Check if geometry drawRange count exists
           let geometryPosCount =
             eventObject.geometry?.attributes?.position?.count;
+
           if (geometryPosCount) {
-            // WORKAROUND
-            // Changing position count for TubeGeometry because
-            // what we get is not the actual and it has Infinity drawRange count
             if (eventObject.geometry instanceof TubeGeometry) {
               geometryPosCount *= 6;
             }
 
             if (eventObject.geometry instanceof TracksMesh) {
               eventObject.material.progress = 0;
               const eventObjectTween = new Tween(eventObject.material).to(
-                {
-                  progress: 1,
-                },
+                { progress: 1 },
                 tweenDuration,
               );
               eventObjectTween.onComplete(() => {
@@ -197,22 +198,18 @@ export class AnimationsManager {
             } else if (eventObject.geometry instanceof BufferGeometry) {
               const oldDrawRangeCount = eventObject.geometry.drawRange.count;
               eventObject.geometry.setDrawRange(0, 0);
+
               const eventObjectTween = new Tween(
                 eventObject.geometry.drawRange,
-              ).to(
-                {
-                  count: geometryPosCount,
-                },
-                tweenDuration,
-              );
+              ).to({ count: geometryPosCount }, tweenDuration);
               eventObjectTween.onComplete(() => {
                 eventObject.geometry.drawRange.count = oldDrawRangeCount;
               });
               allTweens.push(eventObjectTween);
             }
           }
         }
-        // Animation for scaling out objects with or without position
+        // Animation for Jets
         else if (eventObject.name === 'Jet') {
           const scaleTween = new Tween({
             x: 0.01,
@@ -226,36 +223,35 @@ export class AnimationsManager {
             },
             tweenDuration,
           );
-          // Manually updating scale since we need to change position
+
           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 {
+        }
+        // Hits and generic objects
+        else {
           const hasPosition = !eventObject.position.equals(
             new Vector3(0, 0, 0),
           );
+
           let position = hasPosition
             ? eventObject.position
             : eventObject.geometry.boundingSphere.center;
 
-          // Edit geometry for hits
           if (eventObject.name === 'Hit') {
             position = Array.from(
               eventObject.geometry.attributes['position'].array,
             );
             eventObject.geometry.deleteAttribute('position');
             eventObject.geometry.computeBoundingSphere();
           } else {
-            // Making the object invisible and will make visible
-            // once the animation sphere reaches the object
             eventObject.visible = false;
           }
 
@@ -267,7 +263,7 @@ export class AnimationsManager {
       }
     });
 
-    // Tween for the animation sphere
+    // Tween for animation sphere
     const animationSphereTween = new Tween(animationSphere).to(
       { radius: 3000 },
       tweenDuration,
@@ -300,7 +296,6 @@ export class AnimationsManager {
 
     animationSphereTween.onUpdate(onAnimationSphereUpdate);
 
-    // Animation sphere tween after covering the tracks
     const animationSphereTweenClone = new Tween(animationSphere).to(
       { radius: 10000 },
       extraAnimationSphereDuration,
@@ -311,18 +306,22 @@ export class AnimationsManager {
 
     allTweens.push(animationSphereTween);
 
-    // Call onAnimationStart when the first tween starts
+    // onStart callback
     allTweens[0].onStart(() => onAnimationStart?.());
 
     // Start all tweens
     for (const tween of allTweens) {
       tween.easing(Easing.Quartic.Out).start();
     }
 
-    // Call onEnd when the last tween completes
+    // 🔥 FINAL animation end handler
     animationSphereTweenClone.onComplete(() => {
-      // Restore all remaining event data items
       onAnimationSphereUpdate(new Sphere(new Vector3(), Infinity));
+
+      // 🔥 Show labels again when the animation ends
+      const labelsGroup = this.scene.getObjectByName(SceneManager.LABELS_ID);
+      if (labelsGroup) labelsGroup.visible = true;
+
       onEnd?.();
     });
   }
@@ -345,6 +344,10 @@ export class AnimationsManager {
       return;
     }
 
+    // 🔥 Hide labels at the start of the animation
+    const labelsGroup = this.scene.getObjectByName(SceneManager.LABELS_ID);
+    if (labelsGroup) labelsGroup.visible = false;
+
     // Sphere to get spherical set of clipping planes from
     const sphere = new SphereGeometry(1, 8, 8);
     // Clipping planes for animation
@@ -396,12 +399,14 @@ export class AnimationsManager {
         this.rendererManager.getMainRenderer().localClippingEnabled =
           prevLocalClipping /* false */;
       }
+
       // Remove the applied clipping planes from the event data objects
       allEventData.traverse((eventObject: any) => {
         if (eventObject.geometry && eventObject.material) {
           eventObject.material.clippingPlanes = null;
         }
       });
+
       onEnd?.();
     });
   }
@@ -560,6 +565,10 @@ export class AnimationsManager {
     const { positions, animateEventAfterInterval, collisionDuration } =
       animationPreset;
 
+    // 🔥 Hide labels at the start of the preset animation
+    const labelsGroup = this.scene.getObjectByName(SceneManager.LABELS_ID);
+    if (labelsGroup) labelsGroup.visible = false;
+
     if (animateEventAfterInterval && collisionDuration) {
       // Will be made visible after collision animation ends.
       const object = this.scene.getObjectByName(SceneManager.EVENT_DATA_ID);
@@ -583,7 +592,14 @@ export class AnimationsManager {
       previousTween.chain(tween);
       previousTween = tween;
     });
-    previousTween.onComplete(onEnd);
+
+    // 🔥 When animation finishes, show labels again
+    previousTween.onComplete(() => {
+      const labelsGroup = this.scene.getObjectByName(SceneManager.LABELS_ID);
+      if (labelsGroup) labelsGroup.visible = true;
+
+      onEnd?.(); // Call original callback
+    });
 
     firstTween.start();
   }

packages/phoenix-event-display/src/managers/three-manager/scene-manager.ts

@@ -1051,4 +1051,18 @@ export class SceneManager {
     if (object) return object;
     return new Object3D();
   }
+  /**
+   * Toggle visibility of all labels in the scene.
+   * @param visible If the labels will be visible (true) or hidden (false).
+   */
+  public toggleLables(visible: boolean): void {
+    const labelsGroup = this.getObjectsGroup(SceneManager.LABELS_ID);
+    if (labelsGroup) {
+      labelsGroup.visible = visible;
+
+      labelsGroup.traverse((child: Object3D) => {
+        child.visible = visible;
+      });
+    }
+  }
 }