Merge pull request #927 from vorth/cancel-tweens

Tweens canceled on mouse interaction

online/src/viewer/context/camera.jsx

@@ -127,6 +127,13 @@ const CameraProvider = ( props ) =>
     setState( 'outlines', props.outlines );
   }
 
+  const setCamera = loadedCamera =>
+  {
+    setState( 'camera', loadedCamera );
+    // important: update trackballCamera synchronously, NOT as an effect.
+    injectCameraState( state.camera, trackballCamera );
+  }
+
   if ( !!props.context ) {
     // Sync background from the context
     createEffect( () => {
@@ -136,8 +143,7 @@ const CameraProvider = ( props ) =>
     // Sync rotation from the context
     createEffect( () => {
       const { up, lookDir } = props.context.state.camera;
-      setState( 'camera', { up, lookDir } );
-      injectCameraState( state.camera, trackballCamera );
+      setCamera( { up, lookDir } );
     });
   }
 
@@ -160,6 +166,7 @@ const CameraProvider = ( props ) =>
     // This gets hooked up to TrackballControls changes, and updates the main camera state
     //   from the captive trackballCamera in response.
     const extractedCamera = extractCameraState( trackballCamera, target );
+    // console.log( `trackball sync ${name}, distance=${extractedCamera.distance}` );
     const { up, lookDir } = extractedCamera;
     if ( !! props.context ) {
       props.context.setCamera( { up, lookDir } );
@@ -182,14 +189,6 @@ const CameraProvider = ( props ) =>
     return [ vec.x, vec.y, vec.z ];
   }
 
-  const setCamera = loadedCamera =>
-  {
-    setState( 'camera', loadedCamera );
-    // console.log( `setCamera ${loadedCamera.distance}` );
-    // important: update trackballCamera synchronously, NOT as an effect.
-    injectCameraState( state.camera, trackballCamera );
-  }
-
   const setDistance = distance =>
   {
     setCamera( fixedFrustum( distance ) );
@@ -213,6 +212,12 @@ const CameraProvider = ( props ) =>
   }
   animate();
 
+  const cancelTweens = () =>
+  {
+    tweens .getAll() .map( tween => tween.stop() );
+    tweens .removeAll();
+  }
+
   const tweenCamera = ( goalCamera ) =>
   {
     const { duration=0 } = state.tweening;
@@ -222,8 +227,7 @@ const CameraProvider = ( props ) =>
       return;
     }
 
-    tweens .getAll() .map( tween => tween.stop() );
-    tweens .removeAll();
+    cancelTweens();
 
     const { distance, lookAt: [x,y,z] } = goalCamera; // target values
 
@@ -268,11 +272,11 @@ const CameraProvider = ( props ) =>
     //  code in the caller finishes.
     requestAnimationFrame( () => tweens .getAll() .map( tween => tween.start() ) );
   }
-
+  
   const providerValue = {
     name: props.name,
     perspectiveProps, trackballProps, state,
-    resetCamera, setCamera, tweenCamera, setLighting, togglePerspective, toggleOutlines, setDistance, mapViewToWorld,
+    resetCamera, setCamera, tweenCamera, cancelTweens, setLighting, togglePerspective, toggleOutlines, setDistance, mapViewToWorld,
   };
 
   // The perspectiveProps is used to initialize PerspectiveCamera in clients.

online/src/viewer/ltcanvas.jsx

@@ -33,12 +33,13 @@ const Lighting = () =>
 
 const LightedCameraControls = (props) =>
 {
-  const { perspectiveProps, trackballProps, name, state } = useCamera();
+  const { perspectiveProps, trackballProps, name, state, cancelTweens } = useCamera();
   const [ tool ] = useInteractionTool();
   const enableTrackball = () => ( tool === undefined ) || tool().allowTrackball;
   props = mergeProps( { rotateSpeed: 4.5, zoomSpeed: 3, panSpeed: 1 }, props );
   const halfWidth = () => perspectiveProps.width / 2;
 
+  const onDragStart = () => cancelTweens();
   const onDragEnd = () => ( tool !== undefined ) && tool() .onTrackballEnd();
 
   return (
@@ -57,7 +58,8 @@ const LightedCameraControls = (props) =>
         </PerspectiveCamera>
       </Show>
       <TrackballControls enabled={enableTrackball()} rotationOnly={props.rotationOnly} name={name}
-        camera={trackballProps.camera} target={perspectiveProps.target} sync={trackballProps.sync} trackballEnd={onDragEnd}
+        camera={trackballProps.camera} target={perspectiveProps.target} sync={trackballProps.sync}
+        trackballStart={onDragStart} trackballEnd={onDragEnd}
         rotateSpeed={props.rotateSpeed} zoomSpeed={props.zoomSpeed} panSpeed={props.panSpeed} />
     </>
   );

online/src/viewer/trackballcontrols.jsx

@@ -53,6 +53,10 @@ export const TrackballControls = (props) =>
 
     controls.connect( gl().domElement );
 
+    const onStart = () => {
+      props.trackballStart && props.trackballStart( controls .target, props.name );
+    }
+    controls .addEventListener( "start", onStart );
     const onChange = () => props.sync( controls .target, props.name );
     controls .addEventListener( "change", onChange );
     const onEnd = () => {