fix: prevent unnecessary render on timeline on reearth/core (#510)

fix: prevent unnecessary render on timeline
reearth · Mar 6, 2023 · 7cb9d5d · 7cb9d5d
1 parent aa247e9
commit 7cb9d5d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/src/core/Crust/Widgets/Widget/Timeline/hooks.ts b/src/core/Crust/Widgets/Widget/Timeline/hooks.ts
@@ -146,27 +146,21 @@ export const useTimeline = ({
     }
   }, [clock, onSpeedChange, onTick]);
 
+  const overriddenStart = overriddenClock?.start?.getTime();
+  const overriddenStop = overriddenClock?.start?.getTime();
   // Sync cesium clock.
   useEffect(() => {
     setRange(prev => {
-      const start = overriddenClock?.start?.getTime() ?? clock?.start?.getTime();
-      const stop = overriddenClock?.stop?.getTime() ?? clock?.stop?.getTime();
+      const start = overriddenStart ?? clockStartTime;
+      const stop = overriddenStop ?? clockStopTime;
       const next = makeRange(start, stop);
       if (prev.start !== next.start || prev.end !== next.end) {
         return next;
       }
       return prev;
     });
     setSpeed(Math.abs(clockSpeed));
-  }, [
-    clockStartTime,
-    clockStopTime,
-    clockSpeed,
-    clock?.start,
-    clock?.stop,
-    overriddenClock?.start,
-    overriddenClock?.stop,
-  ]);
+  }, [clockStartTime, clockStopTime, clockSpeed, overriddenStart, overriddenStop]);
 
   useEffect(() => {
     const h: TickEventCallback = d => {
@@ -179,12 +173,12 @@ export const useTimeline = ({
     };
   }, [onTick, clock?.playing, removeTickEventListener]);
 
+  const overriddenCurrentTime = overriddenClock?.current?.getTime();
   useEffect(() => {
-    const current = overriddenClock?.current;
-    if (current) {
-      setCurrentTime(current.getTime());
+    if (overriddenCurrentTime) {
+      setCurrentTime(overriddenCurrentTime);
     }
-  }, [overriddenClock]);
+  }, [overriddenCurrentTime]);
 
   useEffect(() => {
     if (isMobile) {

diff --git a/src/core/Crust/context.ts b/src/core/Crust/context.ts
@@ -45,15 +45,9 @@ export function widgetContextFromMapRef({
       return engine()?.getClock();
     },
     overriddenClock: {
-      get current() {
-        return convertTime(sceneProperty?.timeline?.current);
-      },
-      get start() {
-        return convertTime(sceneProperty?.timeline?.start);
-      },
-      get stop() {
-        return convertTime(sceneProperty?.timeline?.stop);
-      },
+      current: convertTime(sceneProperty?.timeline?.current),
+      start: convertTime(sceneProperty?.timeline?.start),
+      stop: convertTime(sceneProperty?.timeline?.stop),
     },
     initialCamera: sceneProperty?.default?.camera,
     is2d: sceneProperty?.default?.sceneMode === "2d",

diff --git a/src/core/engines/Cesium/core/Clock.tsx b/src/core/engines/Cesium/core/Clock.tsx
@@ -14,9 +14,9 @@ export type Props = {
 export default function ReearthClock({ property, onTick }: Props): JSX.Element | null {
   const { animation, visible, start, stop, current, stepType, rangeType, multiplier, step } =
     property?.timeline ?? {};
-  const dateStart = convertTime(start);
-  const dateStop = convertTime(stop);
-  const dateCurrent = convertTime(current);
+  const dateStart = useMemo(() => convertTime(start), [start]);
+  const dateStop = useMemo(() => convertTime(stop), [stop]);
+  const dateCurrent = useMemo(() => convertTime(current), [current]);
   const startTime = useMemo(
     () => (dateStart ? JulianDate.fromDate(dateStart) : undefined),
     [dateStart],