From b6de8ef735898db18a0fe81c1fb704b48d103b93 Mon Sep 17 00:00:00 2001
From: Scott Vorthmann <scott@vorthmann.org>
Date: Sat, 18 Jan 2025 21:51:55 -0800
Subject: [PATCH] Scene animation now does camera first then parts

Parts still just appear or disappear instantaneously... no fade-in or fade-out yet.
---
 online/src/viewer/context/camera.jsx | 15 ++++++++++-----
 online/src/viewer/context/scene.jsx  |  9 +++++----
 online/src/viewer/context/viewer.jsx |  9 +++++----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/online/src/viewer/context/camera.jsx b/online/src/viewer/context/camera.jsx
index 3c2d65e14..3b5a46599 100644
--- a/online/src/viewer/context/camera.jsx
+++ b/online/src/viewer/context/camera.jsx
@@ -224,7 +224,7 @@ const CameraProvider = ( props ) =>
 
     if ( duration <= 0 ) {
       setCamera( goalCamera );
-      return;
+      return Promise.resolve();
     }
 
     cancelTweens();
@@ -257,7 +257,8 @@ const CameraProvider = ( props ) =>
 
     const tweenRotate = new Tween( { t: 0 } );
     tweens .add( tweenRotate );
-    tweenRotate
+    return new Promise( resolve => {
+      tweenRotate
       .easing( Easing.Quadratic.InOut )
       .to( { t: 1.0 }, duration )
       .onUpdate( ({ t }) => {
@@ -266,11 +267,15 @@ const CameraProvider = ( props ) =>
         const up = toVector( new Vector3(0,1,0) .applyQuaternion( sourceQuaternion ) );
         const lookDir = toVector( new Vector3(0,0,-1) .applyQuaternion( sourceQuaternion ) );
         setCamera( { up, lookDir } );
+      })
+      .onComplete( () => {
+        resolve();
       });
     
-    // We don't want to do this sync, since the tween duration may expire before subsequent
-    //  code in the caller finishes.
-    requestAnimationFrame( () => tweens .getAll() .map( tween => tween.start() ) );
+      // We don't want to do this sync, since the tween duration may expire before subsequent
+      //  code in the caller finishes.
+      requestAnimationFrame( () => tweens .getAll() .map( tween => tween.start() ) );
+    });
   }
   
   const providerValue = {
diff --git a/online/src/viewer/context/scene.jsx b/online/src/viewer/context/scene.jsx
index 6ecfb674e..b5e45296d 100644
--- a/online/src/viewer/context/scene.jsx
+++ b/online/src/viewer/context/scene.jsx
@@ -46,16 +46,17 @@ const SceneProvider = ( props ) =>
   createEffect( () => {
     postRequest( selectScene( props.name ) )
       .then( ( { payload: { scene } } ) => {
-        if ( scene.camera ) {
-          tweenCamera( scene.camera );
-        }
         if ( scene.lighting ) {
           const { backgroundColor } = scene.lighting;
           setLighting( { ...state.lighting, backgroundColor } );
         }
         setScene( 'embedding', reconcile( scene.embedding ) );
         setScene( 'polygons', scene.polygons );
-        updateShapes( scene.shapes );    
+        if ( scene.camera ) {
+          tweenCamera( scene.camera )
+            .then( () => updateShapes( scene.shapes ) );
+        } else
+          updateShapes( scene.shapes );    
       });
   });
 
diff --git a/online/src/viewer/context/viewer.jsx b/online/src/viewer/context/viewer.jsx
index 0a8f02336..b76f5cddb 100644
--- a/online/src/viewer/context/viewer.jsx
+++ b/online/src/viewer/context/viewer.jsx
@@ -68,16 +68,17 @@ const ViewerProvider = ( props ) =>
 
   subscribeFor( 'SCENE_RENDERED', ( { scene } ) => {
     setWaiting( false );
-    if ( scene.camera ) {
-      tweenCamera( scene.camera );
-    }
     if ( scene.lighting ) {
       const { backgroundColor } = scene.lighting;
       setLighting( { ...state.lighting, backgroundColor } );
     }
     setScene( 'embedding', reconcile( scene.embedding ) );
     setScene( 'polygons', scene.polygons );
-    updateShapes( scene.shapes );
+    if ( scene.camera ) {
+      tweenCamera( scene.camera )
+        .then( () => updateShapes( scene.shapes ) );
+    } else
+      updateShapes( scene.shapes );
     // logShapes();
   } );