Merge pull request #540 from EarthyScience/jp/anim-update

update useTime in previews

Author: TheJeran

src/components/plots/KeyFramePreviewer.tsx

@@ -39,6 +39,7 @@ export const KeyFramePreviewer = () => {
         const originalAngle = Math.atan2(originalPos.x, originalPos.z);
         return { radius, originalAngle}
     },[keyFrames])
+    const timeRatio = timeRate/frameRate;
 
     const KeyFrameLerper = (startState: Record<string,any>, endState:Record<string,any>, alpha:number, useCamera=true) => {
         const startVizState = startState["visual"]
@@ -127,6 +128,18 @@ export const KeyFramePreviewer = () => {
                 invalidate();
             }
         }   
+        if (useTime) { 
+            //This is currently incongruent with the export. This uses the timestep at the first keyframe as the intital progress
+            //whereas export uses the current timestep at time of export. If the first keyframe is not on the first frame export will look different than preview. 
+            //Will come back to this
+            const animProg = keyFrames?.get(keyFrameList[0]).time
+            const {dataShape} = useGlobalStore.getState()
+            const timeFrames = dataShape[dataShape.length-3]
+            const dt = 1/timeFrames
+            let newProg = dt * Math.floor(currentFrame * timeRatio) + animProg;
+            newProg = loopTime ? newProg - Math.floor(newProg) : Math.min(newProg, 1);
+            usePlotStore.setState({animProg:newProg})
+        }
         if (orbit){
             const angle = (currentFrame / (frames+1)) * deg2rad(orbitDeg);
             const newAngle = originalAngle + (orbitDir ? -angle : angle);
@@ -140,11 +153,13 @@ export const KeyFramePreviewer = () => {
 
     // PREVIEW ANIMATION
     useEffect(()=>{
-        if (!keyFrames || isAnimating.current) return;
+        if (!keyFrames || !previewKeyFrames){ 
+            isAnimating.current = false;
+            return;
+        }
         const {animProg, setAnimProg} = usePlotStore.getState()
         originalAnimProg.current = animProg
         const keyFrameList = Array.from(keyFrames.keys()).sort((a, b) => a - b)
-        const timeRatio = timeRate/frameRate;
         const {dataShape} = useGlobalStore.getState()
         const timeFrames = dataShape[dataShape.length-3]
         const dt = 1/timeFrames
@@ -155,17 +170,13 @@ export const KeyFramePreviewer = () => {
             if (frame > frames) {
                 clearInterval(intervalRef.current as NodeJS.Timeout);
                 isAnimating.current = false;
+                useImageExportStore.setState({previewKeyFrames:false})
                 setAnimProg(originalAnimProg.current)
                 return;
             }
             useImageExportStore.getState().setCurrentFrame(frame)
             const startFrame = keyFrameList[keyFrameIdx];
             if (keyFrameIdx + 1 < keyFrameList.length) {
-                if (useTime) {
-                    let newProg = dt * Math.floor(frame * timeRatio) + animProg;
-                    newProg = loopTime ? newProg - Math.floor(newProg) : Math.min(newProg, 1);
-                    setAnimProg(newProg);
-                }
                 const endFrame = keyFrameList[keyFrameIdx + 1];
                 const thisFrames = endFrame - startFrame;
                 const alpha = Math.max(frame - startFrame, 0) / thisFrames;
@@ -183,6 +194,11 @@ export const KeyFramePreviewer = () => {
                     invalidate();
                 }
             }
+            if (useTime) {
+                let newProg = dt * Math.floor(frame * timeRatio) + animProg;
+                newProg = loopTime ? newProg - Math.floor(newProg) : Math.min(newProg, 1);
+                setAnimProg(newProg);
+            }
             if (orbit){
                 const angle = (frame / (frames+1)) * deg2rad(orbitDeg);
                 const newAngle = originalAngle + (orbitDir ? -angle : angle);

src/components/ui/KeyFrames.tsx

@@ -68,9 +68,9 @@ const KeyFrames = () => {
         animProg:state.animProg, setAnimProg:state.setAnimProg
     })))
 
-    const {keyFrames, frames, useTime, frameRate, timeRate, orbit, currentFrame, setCurrentFrame, setFrames} = useImageExportStore(useShallow(state=>({
+    const {keyFrames, frames, useTime, frameRate, timeRate, orbit, currentFrame, previewKeyFrames, setCurrentFrame, setFrames} = useImageExportStore(useShallow(state=>({
         keyFrames:state.keyFrames, frames:state.frames, orbit:state.orbit, currentFrame:state.currentFrame,
-        useTime:state.useTime, frameRate:state.frameRate, timeRate:state.timeRate, setCurrentFrame:state.setCurrentFrame, setFrames:state.setFrames
+        useTime:state.useTime, frameRate:state.frameRate, timeRate:state.timeRate, previewKeyFrames:state.previewKeyFrames, setCurrentFrame:state.setCurrentFrame, setFrames:state.setFrames
     })))
     const timeRatio = timeRate/frameRate
     const keyFrameList = keyFrames ? Array.from(keyFrames.keys()).sort((a, b) => a - b) : null;
@@ -199,7 +199,7 @@ const KeyFrames = () => {
                     variant="outline"
 					onClick={()=>{useImageExportStore.getState().PreviewKeyFrames()}}
 				>
-                    <MdPreview className='size-6'/> { MdLg === "lg" ? 'Preview' : ''}
+                    <MdPreview className='size-6'/> { MdLg === "lg" ? (previewKeyFrames ? 'Stop Preview' : "Preview") : ''}
 				</Button>
                 </TooltipTrigger>
                 <TooltipContent side="top" align="start">