feat: add a basic timeline UI (#232)

* enhance timeline properties

* add timeline

* fix

* update property

src/components/molecules/Visualizer/Engine/Cesium/core/Clock.tsx

@@ -0,0 +1,57 @@
+import { ClockRange, ClockStep, JulianDate } from "cesium";
+import React, { useEffect, useMemo } from "react";
+import { Clock, useCesium } from "resium";
+
+import type { SceneProperty } from "../../ref";
+
+export type Props = {
+  property?: SceneProperty;
+};
+
+export default function ReearthClock({ property }: Props): JSX.Element | null {
+  const { animation, visible, start, stop, current, stepType, rangeType, multiplier, step } =
+    property?.timeline ?? {};
+  const startTime = useMemo(() => (start ? JulianDate.fromIso8601(start) : undefined), [start]);
+  const stopTime = useMemo(() => (stop ? JulianDate.fromIso8601(stop) : undefined), [stop]);
+  const currentTime = useMemo(
+    () => (current ? JulianDate.fromIso8601(current) : undefined),
+    [current],
+  );
+  const clockStep =
+    stepType === "fixed" ? ClockStep.TICK_DEPENDENT : ClockStep.SYSTEM_CLOCK_MULTIPLIER;
+  const clockMultiplier = stepType === "fixed" ? step ?? 1 : multiplier ?? 1;
+
+  const { viewer } = useCesium();
+  useEffect(() => {
+    if (!viewer) return;
+    if (viewer.animation?.container) {
+      (viewer.animation.container as HTMLDivElement).style.visibility = visible
+        ? "visible"
+        : "hidden";
+    }
+    if (viewer.timeline?.container) {
+      (viewer.timeline.container as HTMLDivElement).style.visibility = visible
+        ? "visible"
+        : "hidden";
+    }
+    viewer.forceResize();
+  }, [viewer, visible]);
+
+  return (
+    <Clock
+      shouldAnimate={animation}
+      startTime={startTime}
+      stopTime={stopTime}
+      currentTime={currentTime}
+      clockStep={clockStep}
+      multiplier={clockMultiplier}
+      clockRange={rangeType ? rangeTypes[rangeType] : undefined}
+    />
+  );
+}
+
+const rangeTypes = {
+  unbounded: ClockRange.UNBOUNDED,
+  clamped: ClockRange.CLAMPED,
+  bounced: ClockRange.LOOP_STOP,
+};

src/components/molecules/Visualizer/Engine/Cesium/index.tsx

@@ -2,7 +2,6 @@ import { ArcType, Color, ScreenSpaceEventType } from "cesium";
 import React, { forwardRef } from "react";
 import {
   Viewer,
-  Clock,
   Globe,
   Fog,
   Sun,
@@ -20,6 +19,7 @@ import {
 
 import type { EngineProps, Ref as EngineRef } from "..";
 
+import Clock from "./core/Clock";
 import Event from "./Event";
 import useHooks from "./hooks";
 
@@ -74,8 +74,8 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       <Viewer
         ref={cesium}
         className={className}
-        animation={false}
-        timeline={false}
+        animation
+        timeline
         fullscreenButton={false}
         homeButton={false}
         geocoder={false}
@@ -100,7 +100,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         shadows={!!property?.atmosphere?.shadows}
         onClick={handleClick}>
         <Event onMount={handleMount} onUnmount={handleUnmount} />
-        <Clock shouldAnimate={!!property?.timeline?.animation} />
+        <Clock property={property} />
         <ScreenSpaceEventHandler useDefault>
           {/* remove default click event */}
           <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_CLICK} />

src/components/molecules/Visualizer/Engine/ref.ts

@@ -117,6 +117,14 @@ export type SceneProperty = {
   };
   timeline?: {
     animation?: boolean;
+    visible?: boolean;
+    current?: string;
+    start?: string;
+    stop?: string;
+    stepType?: "rate" | "fixed";
+    multiplier?: number;
+    step?: number;
+    rangeType?: "unbounded" | "clamped" | "bounced";
   };
   googleAnalytics?: {
     enableGA?: boolean;