@reearth/core 0.0.7-alpha.5 → 0.0.7-beta.1

package/src/engines/Cesium/hooks.ts

@@ -1,31 +1,42 @@
 import {
+  Color,
   Entity,
   Cesium3DTileFeature,
+  Cartesian3,
   Ion,
   Cesium3DTileset,
   JulianDate,
   Cesium3DTilePointFeature,
   Model,
   Cartographic,
+  SunLight,
+  DirectionalLight,
   Viewer as CesiumViewer,
   Primitive,
   GroundPrimitive,
   ShadowMap,
   ImageryLayer,
+  Scene,
+  Math as CesiumMath,
 } from "cesium";
-import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
+import CesiumDnD, { Context } from "cesium-dnd";
+import { isEqual } from "lodash-es";
+import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
+import { useCustomCompareCallback } from "use-custom-compare";
 
 import type {
+  Camera,
+  LatLng,
   LayerSelectionReason,
   EngineRef,
-  ViewerProperty,
+  SceneProperty,
   MouseEvents,
   LayerEditEvent,
   LayerVisibilityEvent,
 } from "..";
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
-import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
+import { ComputedFeature, DataType, SelectedFeatureInfo } from "../../mantle";
 import {
   LayerLoadEvent,
   LayerSelectWithRectEnd,
@@ -34,22 +45,20 @@ import {
   LayersRef,
   RequestingRenderMode,
 } from "../../Map";
+import { FORCE_REQUEST_RENDER, NO_REQUEST_RENDER, REQUEST_RENDER_ONCE } from "../../Map/hooks";
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
 import { FEATURE_FLAGS } from "../../Visualizer/featureFlags";
 
-import { isSelectable } from "./common";
+import { useCameraLimiter } from "./cameraLimiter";
+import { getCamera, isDraggable, isSelectable } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import { arrayToCartecian3 } from "./helpers/sphericalHaromic";
-import useCamera from "./hooks/useCamera";
-import useEngineRef from "./hooks/useEngineRef";
-import useExplicitRender from "./hooks/useExplicitRender";
-import useLayerDragDrop from "./hooks/useLayerDragDrop";
 import { useLayerSelectWithRect } from "./hooks/useLayerSelectWithRect";
-import { useOverrideGlobeShader } from "./hooks/useOverrideGlobeShader/useOverrideGlobeShader";
-import useViewerProperty from "./hooks/useViewerProperty";
 import { InternalCesium3DTileFeature } from "./types";
+import useEngineRef from "./useEngineRef";
+import { useOverrideGlobeShader } from "./useOverrideGlobeShader";
 import { makeMouseEventProps } from "./utils/mouse";
-import { findEntity, getEntityContent } from "./utils/utils";
+import { convertCartesian3ToPosition, findEntity, getEntityContent } from "./utils/utils";
 
 interface CustomGlobeSurface {
   tileProvider: {
@@ -65,48 +74,46 @@ type CesiumMouseWheelEvent = (delta: number) => void;
 export default ({
   ref,
   property,
-  time,
+  camera,
   selectedLayerId,
   selectionReason,
+  isLayerDraggable,
+  isLayerDragging,
   meta,
   layersRef,
   featureFlags,
-  timelineManagerRef,
-  isLayerDraggable,
-  isLayerDragging,
-  shouldRender,
   requestingRenderMode,
-  camera,
-  cameraForceHorizontalRoll,
+  shouldRender,
+  timelineManagerRef,
+  cameraForceHorizontalRoll = false,
   onLayerSelect,
+  onCameraChange,
   onLayerDrag,
   onLayerDrop,
   onLayerEdit,
   onLayerSelectWithRectStart,
   onLayerSelectWithRectMove,
   onLayerSelectWithRectEnd,
+  onMount,
   onLayerVisibility,
   onLayerLoad,
-  onCameraChange,
-  onMount,
 }: {
   ref: React.ForwardedRef<EngineRef>;
-  property?: ViewerProperty;
-  time?: string | Date;
+  property?: SceneProperty;
+  camera?: Camera;
   selectedLayerId?: {
     layerId?: string;
     featureId?: string;
   };
   layersRef?: RefObject<LayersRef>;
   selectionReason?: LayerSelectionReason;
-  meta?: Record<string, unknown>;
-  featureFlags: number;
-  timelineManagerRef?: TimelineManagerRef;
   isLayerDraggable?: boolean;
   isLayerDragging?: boolean;
+  meta?: Record<string, unknown>;
+  featureFlags: number;
+  requestingRenderMode?: React.MutableRefObject<RequestingRenderMode>;
   shouldRender?: boolean;
-  requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
-  camera?: Camera;
+  timelineManagerRef?: TimelineManagerRef;
   cameraForceHorizontalRoll?: boolean;
   onLayerSelect?: (
     layerId?: string,
@@ -114,6 +121,7 @@ export default ({
     options?: LayerSelectionReason,
     info?: SelectedFeatureInfo,
   ) => void;
+  onCameraChange?: (camera: Camera) => void;
   onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
   onLayerDrop?: (
     layerId: string,
@@ -124,17 +132,16 @@ export default ({
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onMount?: () => void;
   onLayerVisibility?: (e: LayerVisibilityEvent) => void;
   onLayerLoad?: (e: LayerLoadEvent) => void;
-  onCameraChange?: (camera: Camera) => void;
-  onMount?: () => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
-
-  const cesiumIonAccessToken =
+  const cesiumIonDefaultAccessToken =
     typeof meta?.cesiumIonAccessToken === "string" && meta.cesiumIonAccessToken
       ? meta.cesiumIonAccessToken
       : Ion.defaultAccessToken;
+  const cesiumIonAccessToken = property?.default?.ion || cesiumIonDefaultAccessToken;
 
   // expose ref
   const engineAPI = useEngineRef(ref, cesium);
@@ -148,6 +155,54 @@ export default ({
     featureFlags,
   });
 
+  const backgroundColor = useMemo(
+    () =>
+      property?.default?.bgcolor ? Color.fromCssColorString(property.default.bgcolor) : undefined,
+    [property?.default?.bgcolor],
+  );
+
+  const light = useMemo(() => {
+    let light;
+    if (property?.light?.lightType === "sunLight") {
+      light = new SunLight({
+        color: property.light?.lightColor
+          ? Color.fromCssColorString(property.light.lightColor)
+          : undefined,
+        intensity: property.light?.lightIntensity,
+      });
+    } else if (property?.light?.lightType === "directionalLight") {
+      light = new DirectionalLight({
+        direction: new Cartesian3(
+          property?.light?.lightDirectionX ?? 1,
+          property?.light?.lightDirectionY ?? 0,
+          property?.light?.lightDirectionZ ?? 0,
+        ),
+        color: property.light?.lightColor
+          ? Color.fromCssColorString(property.light.lightColor)
+          : undefined,
+        intensity: property.light?.lightIntensity,
+      });
+    } else {
+      light = cesium.current?.cesiumElement?.scene.light;
+      if (light) {
+        light.color = property?.light?.lightColor
+          ? Color.fromCssColorString(property.light.lightColor)
+          : light.color;
+        light.intensity = property?.light?.lightIntensity
+          ? property.light.lightIntensity
+          : light.intensity;
+      }
+    }
+    return light;
+  }, [
+    property?.light?.lightType,
+    property?.light?.lightColor,
+    property?.light?.lightDirectionX,
+    property?.light?.lightDirectionY,
+    property?.light?.lightDirectionZ,
+    property?.light?.lightIntensity,
+  ]);
+
   // shadow map
   type ShadowMapBias = {
     polygonOffsetFactor?: number;
@@ -167,11 +222,11 @@ export default ({
         })
       | undefined;
     if (!shadowMap) return;
-    shadowMap.softShadows = property?.scene?.shadow?.shadowMap?.softShadows ?? false;
-    shadowMap.darkness = property?.scene?.shadow?.shadowMap?.darkness ?? 0.3;
-    shadowMap.size = property?.scene?.shadow?.shadowMap?.size ?? 2048;
-    shadowMap.maximumDistance = property?.scene?.shadow?.shadowMap?.maximumDistance ?? 5000;
+    shadowMap.softShadows = property?.atmosphere?.softShadow ?? false;
+    shadowMap.darkness = property?.atmosphere?.shadowDarkness ?? 0.3;
+    shadowMap.size = property?.atmosphere?.shadowResolution ?? 2048;
     shadowMap.fadingEnabled = true;
+    shadowMap.maximumDistance = property?.atmosphere?.shadowMaximumDistance ?? 5000;
     shadowMap.normalOffset = true;
 
     // bias
@@ -224,12 +279,91 @@ export default ({
       Object.assign(shadowMap._pointBias, defaultPointBias);
     }
   }, [
-    property?.scene?.shadow?.shadowMap?.softShadows,
-    property?.scene?.shadow?.shadowMap?.darkness,
-    property?.scene?.shadow?.shadowMap?.size,
-    property?.scene?.shadow?.shadowMap?.maximumDistance,
+    property?.atmosphere?.softShadow,
+    property?.atmosphere?.shadowDarkness,
+    property?.atmosphere?.shadowResolution,
+    property?.atmosphere?.shadowMaximumDistance,
   ]);
 
+  useEffect(() => {
+    engineAPI.changeSceneMode(property?.default?.sceneMode, 0);
+  }, [property?.default?.sceneMode, engineAPI]);
+
+  // move to initial position at startup
+  const initialCameraFlight = useRef(false);
+
+  const handleMount = useCustomCompareCallback(
+    () => {
+      if (initialCameraFlight.current) return;
+      initialCameraFlight.current = true;
+      if (
+        property?.cameraLimiter?.cameraLimitterEnabled &&
+        property?.cameraLimiter?.cameraLimitterTargetArea
+      ) {
+        engineAPI.flyTo(property?.cameraLimiter?.cameraLimitterTargetArea, { duration: 0 });
+      } else if (property?.default?.camera ?? property?.camera?.camera) {
+        const camera = property?.default?.camera ?? property?.camera?.camera;
+        engineAPI.flyTo(camera as Camera, { duration: 0 });
+      }
+      const camera = getCamera(cesium?.current?.cesiumElement);
+      if (camera) {
+        onCameraChange?.(camera);
+      }
+      onMount?.();
+    },
+    [
+      engineAPI,
+      property?.default?.camera,
+      property?.camera?.camera,
+      property?.cameraLimiter?.cameraLimitterEnabled,
+      onCameraChange,
+      onMount,
+    ],
+    (prevDeps, nextDeps) =>
+      prevDeps[0] === nextDeps[0] &&
+      isEqual(prevDeps[1], nextDeps[1]) &&
+      isEqual(prevDeps[2], nextDeps[2]) &&
+      prevDeps[3] === nextDeps[3] &&
+      prevDeps[4] === nextDeps[4] &&
+      prevDeps[5] === nextDeps[5],
+  );
+
+  const handleUnmount = useCallback(() => {
+    initialCameraFlight.current = false;
+  }, []);
+
+  // cache the camera data emitted from viewer camera change
+  const emittedCamera = useRef<Camera[]>([]);
+  const updateCamera = useCallback(() => {
+    const viewer = cesium?.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed() || !onCameraChange) return;
+
+    const c = getCamera(viewer);
+    if (c && !isEqual(c, camera)) {
+      emittedCamera.current.push(c);
+      // The state change is not sync now. This number is how many state updates can actually happen to be merged within one re-render.
+      if (emittedCamera.current.length > 10) {
+        emittedCamera.current.shift();
+      }
+      onCameraChange?.(c);
+    }
+  }, [camera, onCameraChange]);
+
+  const handleCameraChange = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  const handleCameraMoveEnd = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  useEffect(() => {
+    if (camera && !emittedCamera.current.includes(camera)) {
+      engineAPI.flyTo(camera, { duration: 0 });
+      emittedCamera.current = [];
+    }
+  }, [camera, engineAPI]);
+
   const prevSelectedEntity = useRef<
     | Entity
     | Cesium3DTileset
@@ -359,25 +493,22 @@ export default ({
 
   const sphericalHarmonicCoefficients = useMemo(
     () =>
-      property?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients
+      property?.light?.sphericalHarmonicCoefficients
         ? arrayToCartecian3(
-            property?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
-            property?.scene?.imageBasedLighting?.intensity,
+            property?.light?.sphericalHarmonicCoefficients,
+            property?.light?.imageBasedLightIntensity,
           )
         : undefined,
-    [
-      property?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
-      property?.scene?.imageBasedLighting?.intensity,
-    ],
+    [property?.light?.sphericalHarmonicCoefficients, property?.light?.imageBasedLightIntensity],
   );
 
   useOverrideGlobeShader({
     cesium,
     sphericalHarmonicCoefficients,
-    globeShadowDarkness: property?.scene?.shadow?.darkness,
-    globeImageBasedLighting: property?.scene?.imageBasedLighting?.enabled,
-    enableLighting: property?.globe?.enableLighting,
-    hasVertexNormals: property?.terrain?.enabled && property.terrain.normal,
+    globeShadowDarkness: property?.atmosphere?.globeShadowDarkness,
+    globeImageBasedLighting: property?.atmosphere?.globeImageBasedLighting,
+    enableLighting: property?.atmosphere?.enable_lighting ?? property?.globeLighting?.globeLighting,
+    hasVertexNormals: property?.terrain?.terrain && property.terrain.terrainNormal,
     terrain: property?.terrain,
   });
 
@@ -412,18 +543,18 @@ export default ({
       wheel: CesiumMouseWheelEvent | undefined;
     } = {
       click: undefined,
-      doubleClick: undefined,
-      mouseDown: undefined,
-      mouseUp: undefined,
-      rightClick: undefined,
-      rightDown: undefined,
-      rightUp: undefined,
-      middleClick: undefined,
-      middleDown: undefined,
-      middleUp: undefined,
-      mouseMove: undefined,
-      mouseEnter: undefined,
-      mouseLeave: undefined,
+      doubleclick: undefined,
+      mousedown: undefined,
+      mouseup: undefined,
+      rightclick: undefined,
+      rightdown: undefined,
+      rightup: undefined,
+      middleclick: undefined,
+      middledown: undefined,
+      middleup: undefined,
+      mousemove: undefined,
+      mouseenter: undefined,
+      mouseleave: undefined,
       wheel: (delta: number) => {
         handleMouseWheel(delta);
       },
@@ -648,6 +779,55 @@ export default ({
     viewer.scene.requestRender();
   }, []);
 
+  // enable Drag and Drop Layers
+  const handleLayerDrag = useCallback(
+    (e: Entity, position: Cartesian3 | undefined, _context: Context): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed() || !isSelectable(e) || !isDraggable(e)) return false;
+
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      if (!pos) return false;
+
+      const tag = getTag(e);
+      if (!tag) return false;
+
+      onLayerDrag?.(tag.layerId || "", tag.featureId, pos);
+    },
+    [onLayerDrag],
+  );
+
+  const handleLayerDrop = useCallback(
+    (e: Entity, position: Cartesian3 | undefined): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return false;
+
+      const tag = getTag(e);
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      onLayerDrop?.(tag?.layerId || "", tag?.featureId || "", pos);
+
+      return false; // let apollo-client handle optimistic updates
+    },
+    [onLayerDrop],
+  );
+
+  const cesiumDnD = useRef<CesiumDnD>();
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    cesiumDnD.current = new CesiumDnD(viewer, {
+      onDrag: handleLayerDrag,
+      onDrop: handleLayerDrop,
+      dragDelay: 1000,
+      initialDisabled: !isLayerDraggable,
+    });
+    return () => {
+      if (!viewer || viewer.isDestroyed()) return;
+      cesiumDnD.current?.disable();
+    };
+  }, [handleLayerDrag, handleLayerDrop, isLayerDraggable]);
+  const { cameraViewBoundaries, cameraViewOuterBoundaries, cameraViewBoundariesMaterial } =
+    useCameraLimiter(cesium, camera, property?.cameraLimiter);
+
   const context = useMemo<FeatureContext>(
     () => ({
       selectionReason,
@@ -667,86 +847,147 @@ export default ({
   );
 
   useEffect(() => {
-    const globe = cesium.current?.cesiumElement?.scene.globe;
-    if (globe) {
-      const surface = (globe as any)._surface as CustomGlobeSurface;
-      if (surface) {
-        surface.tileProvider._debug.wireframe = property?.debug?.showGlobeWireframe ?? false;
-      }
+    if (!cesium.current?.cesiumElement) return;
+    const allowCameraMove = !!(featureFlags & FEATURE_FLAGS.CAMERA_MOVE);
+    const allowCameraZoom = !!(featureFlags & FEATURE_FLAGS.CAMERA_ZOOM);
+    const allowCameraTilt = !!(featureFlags & FEATURE_FLAGS.CAMERA_TILT);
+    const allowCameraLook = !!(featureFlags & FEATURE_FLAGS.CAMERA_LOOK);
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTranslate =
+      allowCameraMove;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableRotate = allowCameraMove;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableLook = allowCameraLook;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTilt = allowCameraTilt;
+    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableZoom = allowCameraZoom;
+  }, [featureFlags]);
+
+  // Anti-aliasing
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    // TODO: FXAA doesn't support alpha blending in Cesium, so we will enable FXAA when this is fixed.
+    // viewer.scene.postProcessStages.fxaa.enabled = property?.render?.antialias === "high";
+    viewer.scene.msaaSamples =
+      property?.render?.antialias === "extreme"
+        ? 8
+        : property?.render?.antialias === "high"
+          ? 6
+          : property?.render?.antialias === "medium"
+            ? 4
+            : 1; // default as 1
+  }, [property?.render?.antialias]);
+
+  // explicit rendering
+  const explicitRender = useCallback(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!requestingRenderMode?.current || !viewer || viewer.isDestroyed()) return;
+    viewer.scene.requestRender();
+    if (requestingRenderMode.current === REQUEST_RENDER_ONCE) {
+      requestingRenderMode.current = NO_REQUEST_RENDER;
     }
-  }, [property?.debug?.showGlobeWireframe]);
+  }, [requestingRenderMode]);
+
+  const explicitRenderRef = useRef<() => void>();
 
   useEffect(() => {
-    if (!time) return;
-    timelineManagerRef?.current?.commit({
-      cmd: "SET_TIME",
-      payload: {
-        start: time,
-        stop: time,
-        current: time,
-      },
-      committer: {
-        source: "initialize",
-        id: "reearth_core",
-      },
+    explicitRenderRef.current = explicitRender;
+  }, [explicitRender]);
+
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    return viewer.scene.postUpdate.addEventListener(() => {
+      explicitRenderRef.current?.();
     });
-  }, [time, timelineManagerRef]);
+  }, []);
 
-  const { sceneLight, sceneBackgroundColor, sceneMsaaSamples, sceneMode } = useViewerProperty({
-    property,
-    cesium,
-  });
+  // render one frame when scene property changes
+  useEffect(() => {
+    if (requestingRenderMode) {
+      requestingRenderMode.current = REQUEST_RENDER_ONCE;
+    }
+  }, [property, requestingRenderMode]);
 
-  useLayerDragDrop({ cesium, onLayerDrag, onLayerDrop, isLayerDraggable });
+  // force render when timeline is animating or is shouldRender
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    if (requestingRenderMode) {
+      requestingRenderMode.current =
+        isLayerDragging || shouldRender
+          ? FORCE_REQUEST_RENDER
+          : requestingRenderMode.current === REQUEST_RENDER_ONCE
+            ? REQUEST_RENDER_ONCE
+            : NO_REQUEST_RENDER;
+    }
+  }, [isLayerDragging, shouldRender, requestingRenderMode]);
 
-  useExplicitRender({ cesium, requestingRenderMode, isLayerDragging, shouldRender, property });
+  // cesium timeline & animation widget
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer) return;
+    if (viewer.animation?.container) {
+      (viewer.animation.container as HTMLDivElement).style.visibility = property?.timeline?.visible
+        ? "visible"
+        : "hidden";
+    }
+    if (viewer.timeline?.container) {
+      (viewer.timeline.container as HTMLDivElement).style.visibility = property?.timeline?.visible
+        ? "visible"
+        : "hidden";
+    }
+    viewer.forceResize();
+  }, [property]);
 
-  const {
-    cameraViewBoundaries,
-    cameraViewOuterBoundaries,
-    cameraViewBoundariesMaterial,
-    handleCameraChange,
-    handleCameraMoveEnd,
-    mountCamera,
-    unmountCamera,
-  } = useCamera({
-    cesium,
-    property,
-    camera,
-    cameraForceHorizontalRoll,
-    featureFlags,
-    engineAPI,
-    onCameraChange,
-  });
+  const globe = cesium.current?.cesiumElement?.scene.globe;
 
-  const handleMount = useCallback(() => {
-    mountCamera?.();
-    onMount?.();
-  }, [mountCamera, onMount]);
+  useEffect(() => {
+    if (globe) {
+      const surface = (globe as any)._surface as CustomGlobeSurface;
+      if (surface) {
+        surface.tileProvider._debug.wireframe = property?.render?.showWireframe ?? false;
+      }
+    }
+  }, [globe, property?.render?.showWireframe]);
+
+  const onPreRenderCallback = useCallback(
+    (scene: Scene) => {
+      if (!scene.camera || !cameraForceHorizontalRoll) return;
+      if (Math.abs(CesiumMath.negativePiToPi(scene.camera.roll)) > Math.PI / 86400) {
+        scene.camera.setView({
+          orientation: {
+            heading: scene.camera.heading,
+            pitch: scene.camera.pitch,
+            roll: 0,
+          },
+        });
+      }
+    },
+    [cameraForceHorizontalRoll],
+  );
 
-  const handleUnmount = useCallback(() => {
-    unmountCamera?.();
-  }, [unmountCamera]);
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer) return;
+    return viewer.scene.preRender.addEventListener(onPreRenderCallback);
+  }, [onPreRenderCallback]);
 
   return {
+    backgroundColor,
     cesium,
-    cesiumIonAccessToken,
-    mouseEventHandles,
-    layerSelectWithRectEventHandlers,
-    context,
-    sceneLight,
-    sceneBackgroundColor,
-    sceneMsaaSamples,
-    sceneMode,
     cameraViewBoundaries,
     cameraViewOuterBoundaries,
     cameraViewBoundariesMaterial,
-    handleCameraChange,
-    handleCameraMoveEnd,
-    handleUpdate,
-    handleClick,
+    cesiumIonAccessToken,
+    mouseEventHandles,
+    context,
+    light,
     handleMount,
     handleUnmount,
+    handleUpdate,
+    handleClick,
+    handleCameraChange,
+    handleCameraMoveEnd,
+    layerSelectWithRectEventHandlers,
   };
 };
 

package/src/engines/Cesium/index.stories.tsx

@@ -35,7 +35,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },