@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

package/src/Map/types/viewerProperty.ts

@@ -37,6 +37,7 @@ export type SceneMode = "3d" | "2d" | "columbus";
 
 export type ViewerProperty = {
   globe?: GlobeProperty;
+  geoid?: GeoidProperty;
   terrain?: TerrainProperty;
   scene?: SceneProperty;
   tiles?: TileProperty[];
@@ -56,6 +57,13 @@ export type GlobeProperty = {
   depthTestAgainstTerrain?: boolean;
 };
 
+export type GeoidProperty = {
+  server: {
+    url: string;
+    geoidProperty: string;
+  };
+};
+
 export type GlobeAtmosphereProperty = {
   enabled?: boolean;
   lightIntensity?: number;
@@ -66,7 +74,7 @@ export type GlobeAtmosphereProperty = {
 
 export type TerrainProperty = {
   enabled?: boolean;
-  type?: "cesium" | "arcgis" | "cesiumion";
+  type?: "cesium" | "cesiumion" | "reearth_terrain";
   url?: string;
   normal?: boolean;
   elevationHeatMap?: ElevationHeatMapProperty;
@@ -122,6 +130,7 @@ export type TileProperty = {
   id: string;
   type?: string;
   url?: string;
+  cesiumIonAssetId?: number;
   opacity?: number;
   zoomLevel?: number[];
   zoomLevelForURL?: number[];
@@ -132,6 +141,8 @@ export type TileLabelProperty = {
   id: string;
   labelType: "japan_gsi_optimal_bvmap";
   style: Record<string, any>;
+  near?: number;
+  far?: number;
 };
 
 export type SkyProperty = {

package/src/Map/useTimelineManager.ts

@@ -61,13 +61,7 @@ export type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetO
 };
 
 export type TimelineCommitter = {
-  source:
-    | "widgetContext"
-    | "pluginAPI"
-    | "featureResource"
-    | "storyTimelineBlock"
-    | "storyPage"
-    | "initialize";
+  source: string;
   id?: string;
 };
 
@@ -87,7 +81,7 @@ type Props = {
     multiplier?: number;
     rangeType?: "unbounded" | "clamped" | "bounced";
   };
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   timelineManagerRef?: TimelineManagerRef;
 };
 
@@ -101,7 +95,7 @@ export default ({ init, engineRef, timelineManagerRef }: Props) => {
   const [options, setOptions] = useState<TimelineOptions>({
     animation: init?.animation ?? false,
     stepType: init?.stepType ?? "rate",
-    multiplier: init?.stepType === "fixed" ? init?.step ?? 1 : init?.multiplier ?? 1,
+    multiplier: init?.stepType === "fixed" ? (init?.step ?? 1) : (init?.multiplier ?? 1),
     rangeType: init?.rangeType ?? "unbounded",
   });
 
@@ -112,7 +106,7 @@ export default ({ init, engineRef, timelineManagerRef }: Props) => {
     const currentTime = current.getTime();
 
     const convertedStartTime = startTime > currentTime ? currentTime : startTime;
-    const convertedStopTime = stopTime <= currentTime ? currentTime + DEFAULT_RANGE : stopTime;
+    const convertedStopTime = stopTime < currentTime ? currentTime + DEFAULT_RANGE : stopTime;
 
     return {
       start: new Date(convertedStartTime),

package/src/Map/utils.ts

@@ -6,7 +6,7 @@ export function useGet<T>(value: T): () => T {
   return useCallback(() => ref.current, []);
 }
 
-export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef<T> {
+export function wrapRef<T>(ref: RefObject<T | null>, keys: FunctionKeys<T>): WrappedRef<T> {
   return Object.fromEntries(
     (Object.keys(keys) as (keyof T)[]).map(k => {
       return [k, (...args: any[]) => (ref.current?.[k] as any)?.(...args)];

package/src/Visualizer/Error.tsx

@@ -1,10 +1,13 @@
 import type { FallbackProps } from "react-error-boundary";
 
 export default function Error({ error, resetErrorBoundary }: FallbackProps) {
+  const err = error as Error;
+  const errorMessage = err?.message ?? String(error);
+
   return (
     <div>
       <h1>Oops! An Error Occurred</h1>
-      <p>{error.message}</p>
+      <p>{errorMessage}</p>
       <p>
         <button style={{ color: "#fff" }} onClick={resetErrorBoundary}>
           Retry

package/src/Visualizer/context.tsx

@@ -2,11 +2,11 @@ import { FC, PropsWithChildren, RefObject, createContext, useContext, useMemo }
 
 import { MapRef } from "../Map";
 
-const context = createContext<RefObject<MapRef> | undefined>(undefined);
+const context = createContext<RefObject<MapRef | null> | undefined>(undefined);
 
-export type Context = RefObject<MapRef>;
+export type Context = RefObject<MapRef | null>;
 
-export const useVisualizer = (): RefObject<MapRef> => {
+export const useVisualizer = (): RefObject<MapRef | null> => {
   const value = useContext(context);
   if (!value) {
     throw new Error("Visualizer is not declared. You have to use this hook inside of Visualizer");
@@ -14,11 +14,11 @@ export const useVisualizer = (): RefObject<MapRef> => {
   return value;
 };
 
-const filterMapRefToContext = (mapRef: RefObject<MapRef>): Context => {
+const filterMapRefToContext = (mapRef: RefObject<MapRef | null>): Context => {
   return mapRef as Context;
 };
 
-export const VisualizerProvider: FC<PropsWithChildren<{ mapRef: RefObject<MapRef> }>> = ({
+export const VisualizerProvider: FC<PropsWithChildren<{ mapRef: RefObject<MapRef | null> }>> = ({
   mapRef,
   children,
 }) => {

package/src/Visualizer/coreContext.tsx

@@ -9,8 +9,8 @@ import {
   LayerSelectWithRectStart,
 } from "../Map";
 import { SketchEventCallback, SketchType } from "../Map/Sketch/types";
+import { InteractionModeType } from "../shared/interactionMode";
 
-import { InteractionModeType } from "./interactionMode";
 import { Viewport } from "./useViewport";
 
 type CoreContext = {
@@ -26,6 +26,8 @@ type CoreContext = {
   handleCameraForceHorizontalRollChange?: (enable?: boolean) => void;
   handleInteractionModeChange?: (mode?: InteractionModeType | undefined) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureUpdate?: (cb: SketchEventCallback) => void;
+  onSketchPluginFeatureDelete?: (cb: SketchEventCallback) => void;
   onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
   onLayerVisibility?: (cb: (e: LayerVisibilityEvent) => void) => void;
   onLayerLoad?: (cb: (e: LayerLoadEvent) => void) => void;

package/src/Visualizer/hooks.ts

@@ -7,7 +7,6 @@ import type {
   Camera,
   ComputedLayer,
   LayerEditEvent,
-  CursorType,
   LayerVisibilityEvent,
   LayerLoadEvent,
   LayerSelectWithRectStart,
@@ -17,9 +16,9 @@ import type {
 } from "../Map";
 import { SketchEventCallback, SketchEventProps, SketchType } from "../Map/Sketch/types";
 import { TimelineManagerRef } from "../Map/useTimelineManager";
+import type { InteractionModeType } from "../shared/interactionMode";
+import { INTERACTION_MODES } from "../shared/interactionMode";
 
-import type { InteractionModeType } from "./interactionMode";
-import { INTERACTION_MODES } from "./interactionMode";
 import useCoreAPI from "./useCoreAPI";
 import useViewport from "./useViewport";
 
@@ -56,7 +55,7 @@ export default function useHooks(
 ) {
   const mapRef = useRef<MapRef>(null);
 
-  useImperativeHandle(ref, () => mapRef.current, []);
+  useImperativeHandle(ref, () => mapRef.current as MapRef, []);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
 
@@ -82,12 +81,24 @@ export default function useHooks(
       reason: LayerSelectionReason | undefined,
       info: SelectedFeatureInfo | undefined,
     ) => {
-      if (selectedLayer.layerId === layerId && selectedLayer.featureId === featureId) return;
+      const isSketchLayer =
+        selectedLayer.layer?.layer?.type === "simple" &&
+        selectedLayer.layer?.layer?.data?.isSketchLayer;
+      // Sketch layer feature has a fixed featureId, we need to exclude it from the skip condition
+      if (
+        selectedLayer.layerId === layerId &&
+        selectedLayer.featureId === featureId &&
+        !isSketchLayer
+      )
+        return;
 
       const computedLayer = await layer?.();
       const computedFeature =
         layerId && featureId
-          ? mapRef.current?.engine.findComputedFeatureById?.(layerId, featureId) ?? info?.feature
+          ? ((isSketchLayer
+              ? computedLayer?.features?.find(f => f.id === featureId)
+              : mapRef.current?.engine.findComputedFeatureById?.(layerId, featureId)) ??
+            info?.feature)
           : undefined;
 
       selectFeature(
@@ -108,7 +119,7 @@ export default function useHooks(
     [selectedLayer, onLayerSelect],
   );
 
-  const timelineManagerRef: TimelineManagerRef = useRef();
+  const timelineManagerRef: TimelineManagerRef = useRef(undefined);
 
   // camera
   const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
@@ -119,24 +130,22 @@ export default function useHooks(
   }, []);
 
   // interaction mode
-  const [_interactionMode, changeInteractionMode] = useValue(
-    initialInteractionMode,
+  const [interactionMode, changeInteractionMode] = useValue(
+    initialInteractionMode || "default",
     onInteractionModeChange,
   );
-  const interactionMode = _interactionMode || "default";
 
-  const [cursor, setCursor] = useState<CursorType>("auto");
   useEffect(() => {
-    setCursor(
-      interactionMode === "sketch" ? "crosshair" : interactionMode === "move" ? "grab" : "auto",
-    );
+    if (interactionMode === "default") {
+      mapRef?.current?.engine?.setCursor("auto");
+    }
   }, [interactionMode]);
 
   // feature flags
-  const featureFlags = INTERACTION_MODES[interactionMode];
+  const featureFlags = INTERACTION_MODES[interactionMode ?? "default"];
 
   // layer edit
-  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>();
+  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>(undefined);
   const onLayerEdit = useCallback((cb: (e: LayerEditEvent) => void) => {
     onLayerEditRef.current = cb;
   }, []);
@@ -145,7 +154,7 @@ export default function useHooks(
   }, []);
 
   // layer visiblity
-  const onLayerVisibilityRef = useRef<(e: LayerVisibilityEvent) => void>();
+  const onLayerVisibilityRef = useRef<(e: LayerVisibilityEvent) => void>(undefined);
   const onLayerVisibility = useCallback((cb: (e: LayerVisibilityEvent) => void) => {
     onLayerVisibilityRef.current = cb;
   }, []);
@@ -154,7 +163,7 @@ export default function useHooks(
   }, []);
 
   // layer load
-  const onLayerLoadRef = useRef<(e: LayerLoadEvent) => void>();
+  const onLayerLoadRef = useRef<(e: LayerLoadEvent) => void>(undefined);
   const onLayerLoad = useCallback((cb: (e: LayerLoadEvent) => void) => {
     onLayerLoadRef.current = cb;
   }, []);
@@ -163,21 +172,21 @@ export default function useHooks(
   }, []);
 
   // multiple feature selection
-  const onLayerSelectWithRectStartRef = useRef<(e: LayerSelectWithRectStart) => void>();
+  const onLayerSelectWithRectStartRef = useRef<(e: LayerSelectWithRectStart) => void>(undefined);
   const onLayerSelectWithRectStart = useCallback((cb: (e: LayerSelectWithRectStart) => void) => {
     onLayerSelectWithRectStartRef.current = cb;
   }, []);
   const handleLayerSelectWithRectStart = useCallback((e: LayerSelectWithRectStart) => {
     onLayerSelectWithRectStartRef.current?.(e);
   }, []);
-  const onLayerSelectWithRectMoveRef = useRef<(e: LayerSelectWithRectMove) => void>();
+  const onLayerSelectWithRectMoveRef = useRef<(e: LayerSelectWithRectMove) => void>(undefined);
   const onLayerSelectWithRectMove = useCallback((cb: (e: LayerSelectWithRectMove) => void) => {
     onLayerSelectWithRectMoveRef.current = cb;
   }, []);
   const handleLayerSelectWithRectMove = useCallback((e: LayerSelectWithRectMove) => {
     onLayerSelectWithRectMoveRef.current?.(e);
   }, []);
-  const onLayerSelectWithRectEndRef = useRef<(e: LayerSelectWithRectEnd) => void>();
+  const onLayerSelectWithRectEndRef = useRef<(e: LayerSelectWithRectEnd) => void>(undefined);
   const onLayerSelectWithRectEnd = useCallback((cb: (e: LayerSelectWithRectEnd) => void) => {
     onLayerSelectWithRectEndRef.current = cb;
   }, []);
@@ -194,6 +203,25 @@ export default function useHooks(
     onSketchPluginFeatureCreateCallbacksRef.current.forEach(fn => fn(props));
   }, []);
 
+  const onSketchPluginFeatureUpdateCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureUpdate = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureUpdate = useCallback((props: SketchEventProps) => {
+    onSketchPluginFeatureUpdateCallbacksRef.current.forEach(fn => fn(props));
+  }, []);
+
+  const onSketchPluginFeatureDeleteCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureDelete = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureDeleteCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureDelete = useCallback(
+    (props: { layerId: string; featureId: string }) => {
+      onSketchPluginFeatureDeleteCallbacksRef.current.forEach(fn => fn(props));
+    },
+    [],
+  );
+
   const onSketchTypeChangeCallbacksRef = useRef<((type: SketchType | undefined) => void)[]>([]);
   const onSketchTypeChange = useCallback((cb: (type: SketchType | undefined) => void) => {
     onSketchTypeChangeCallbacksRef.current.push(cb);
@@ -244,6 +272,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       handleInteractionModeChange: changeInteractionMode,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -261,6 +291,8 @@ export default function useHooks(
       handleCameraForceHorizontalRollChange,
       onLayerEdit,
       onSketchPluginFeatureCreate,
+      onSketchPluginFeatureUpdate,
+      onSketchPluginFeatureDelete,
       onSketchTypeChange,
       onLayerVisibility,
       onLayerLoad,
@@ -290,10 +322,10 @@ export default function useHooks(
     featureFlags,
     isLayerDragging,
     timelineManagerRef,
-    cursor,
     cameraForceHorizontalRoll,
     coreContextValue,
     containerStyle,
+    overriddenInteractionMode: interactionMode,
     handleLayerSelect,
     handleLayerDrag,
     handleLayerDrop,
@@ -301,6 +333,8 @@ export default function useHooks(
     handleCameraChange: changeCamera,
     handleInteractionModeChange: changeInteractionMode,
     handleSketchPluginFeatureCreate,
+    handleSketchPluginFeatureUpdate,
+    handleSketchPluginFeatureDelete,
     handleSketchTypeChange,
     handleLayerVisibility,
     handleLayerLoad,

package/src/Visualizer/index.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ComponentProps, FC, useEffect, useState } from "react";
+import { fn } from "storybook/test";
 
 import { useVisualizer } from "./context";
 
@@ -7,6 +8,20 @@ import { CoreVisualizer } from ".";
 
 export default {
   component: CoreVisualizer,
+  args: {
+    // Explicit action handlers for callback props
+    onMount: fn(),
+    onLayerSelect: fn(),
+    onCameraChange: fn(),
+    onLayerDrag: fn(),
+    onLayerDrop: fn(),
+    onLayerEdit: fn(),
+    onLayerSelectWithRectStart: fn(),
+    onLayerSelectWithRectMove: fn(),
+    onLayerSelectWithRectEnd: fn(),
+    onLayerVisibility: fn(),
+    onLayerLoad: fn(),
+  },
 } as Meta;
 
 type Story = StoryObj<typeof CoreVisualizer>;

package/src/Visualizer/index.tsx

@@ -12,22 +12,24 @@ import {
   type LatLng,
   type Cluster,
   type ComputedLayer,
+  type Credits,
+  type CustomProviderConfig,
 } from "../Map";
 import { SketchFeature, SketchType } from "../Map/Sketch/types";
+import type { InteractionModeType } from "../shared/interactionMode";
 
 import { VisualizerProvider } from "./context";
 import { coreContext } from "./coreContext";
 import { engines, type EngineType } from "./engines";
 import Err from "./Error";
 import useHooks from "./hooks";
-import type { InteractionModeType } from "./interactionMode";
 
 export { useVisualizer, type Context as VisualizerContext } from "./context";
 export * from "./engines";
 export * from "./useViewport";
 export * from "./coreContext";
-export * from "./featureFlags";
-export * from "./interactionMode";
+export * from "../shared/featureFlags";
+export * from "../shared/interactionMode";
 
 export type CoreVisualizerProps = {
   engine?: EngineType;
@@ -41,11 +43,13 @@ export type CoreVisualizerProps = {
   interactionMode?: InteractionModeType;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  customProvider?: CustomProviderConfig;
   style?: CSSProperties;
   small?: boolean;
   ready?: boolean;
   hiddenLayers?: string[];
   zoomedLayerId?: string;
+  displayCredits?: boolean;
   onCameraChange?: (camera: Camera) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
@@ -58,7 +62,11 @@ export type CoreVisualizerProps = {
   onMount?: () => void;
   onSketchTypeChangeProp?: (type: SketchType | undefined) => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
+  onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
   onInteractionModeChange?: (mode: InteractionModeType) => void;
+  onAPIReady?: () => void;
+  onCreditsUpdate?: (credits?: Credits) => void;
 };
 
 export const CoreVisualizer = memo(
@@ -79,6 +87,8 @@ export const CoreVisualizer = memo(
         interactionMode,
         shouldRender,
         meta,
+        customProvider,
+        displayCredits = true,
         style,
         zoomedLayerId,
         children,
@@ -90,6 +100,10 @@ export const CoreVisualizer = memo(
         onMount,
         onSketchTypeChangeProp,
         onSketchFeatureCreate,
+        onSketchFeatureUpdate,
+        onSketchFeatureDelete,
+        onAPIReady,
+        onCreditsUpdate,
       },
       ref: Ref<MapRef | null>,
     ) => {
@@ -101,10 +115,10 @@ export const CoreVisualizer = memo(
         featureFlags,
         isLayerDragging,
         timelineManagerRef,
-        cursor,
         cameraForceHorizontalRoll,
         coreContextValue,
         containerStyle,
+        overriddenInteractionMode,
         handleLayerSelect,
         handleLayerDrag,
         handleLayerDrop,
@@ -112,6 +126,8 @@ export const CoreVisualizer = memo(
         handleCameraChange,
         handleInteractionModeChange,
         handleSketchPluginFeatureCreate,
+        handleSketchPluginFeatureUpdate,
+        handleSketchPluginFeatureDelete,
         handleSketchTypeChange,
         handleLayerVisibility,
         handleLayerLoad,
@@ -152,6 +168,8 @@ export const CoreVisualizer = memo(
                 isLayerDragging={isLayerDragging}
                 isLayerDraggable={isEditable}
                 meta={meta}
+                customProvider={customProvider}
+                displayCredits={displayCredits}
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
@@ -160,9 +178,8 @@ export const CoreVisualizer = memo(
                 small={small}
                 ready={ready}
                 timelineManagerRef={timelineManagerRef}
-                interactionMode={interactionMode}
+                interactionMode={overriddenInteractionMode}
                 selectedFeature={selectedFeature}
-                cursor={cursor}
                 onCameraChange={handleCameraChange}
                 onLayerDrag={handleLayerDrag}
                 onLayerDrop={handleLayerDrop}
@@ -171,6 +188,10 @@ export const CoreVisualizer = memo(
                 overrideInteractionMode={handleInteractionModeChange}
                 onSketchFeatureCreate={onSketchFeatureCreate}
                 onSketchPluginFeatureCreate={handleSketchPluginFeatureCreate}
+                onSketchFeatureUpdate={onSketchFeatureUpdate}
+                onSketchPluginFeatureUpdate={handleSketchPluginFeatureUpdate}
+                onSketchFeatureDelete={onSketchFeatureDelete}
+                onSketchPluginFeatureDelete={handleSketchPluginFeatureDelete}
                 onSketchTypeChange={handleSketchTypeChange}
                 onMount={onMount}
                 onLayerVisibility={handleLayerVisibility}
@@ -178,6 +199,8 @@ export const CoreVisualizer = memo(
                 onLayerSelectWithRectStart={handleLayerSelectWithRectStart}
                 onLayerSelectWithRectMove={handleLayerSelectWithRectMove}
                 onLayerSelectWithRectEnd={handleLayerSelectWithRectEnd}
+                onAPIReady={onAPIReady}
+                onCreditsUpdate={onCreditsUpdate}
               />
               <coreContext.Provider value={coreContextValue}>{children}</coreContext.Provider>
             </div>

package/src/Visualizer/useViewport.ts

@@ -10,7 +10,7 @@ export type Viewport = {
 };
 
 type Props = {
-  wrapperRef: RefObject<HTMLDivElement>;
+  wrapperRef: RefObject<HTMLDivElement | null>;
 };
 
 export default ({ wrapperRef }: Props) => {

package/src/engines/Cesium/Feature/Box/hooks/box.ts

@@ -127,7 +127,7 @@ export const useHooks = ({
   );
 
   // ScalePoint event handlers
-  const currentPointIndex = useRef<number>();
+  const currentPointIndex = useRef<number>(undefined);
   const handlePointMouseDown: PointEventCallback = useCallback(
     (_, { index }) => {
       if (!viewer) {
@@ -138,7 +138,7 @@ export const useHooks = ({
     },
     [viewer],
   );
-  const prevMousePosition2dForPoint = useRef<Cartesian2>();
+  const prevMousePosition2dForPoint = useRef<Cartesian2>(undefined);
   const handlePointMouseMove: PointEventCallback = useCallback(
     (e, { position, oppositePosition, pointLocal, index, layerId }) => {
       if (
@@ -282,7 +282,7 @@ export const useHooks = ({
   }, [viewer]);
 
   // Edge event handlers
-  const currentEdgeIndex = useRef<number>();
+  const currentEdgeIndex = useRef<number>(undefined);
   const handleEdgeMouseDown: EdgeEventCallback = useCallback(
     (_, { index }) => {
       if (!viewer) {
@@ -293,7 +293,7 @@ export const useHooks = ({
     },
     [viewer],
   );
-  const prevMouseXAxisForEdge = useRef<number>();
+  const prevMouseXAxisForEdge = useRef<number>(undefined);
   const handleEdgeMouseMove: EdgeEventCallback = useCallback(
     (e, { index, layerId }) => {
       if (currentEdgeIndex.current !== index) {

package/src/engines/Cesium/Feature/Box/hooks/edge.ts

@@ -59,7 +59,7 @@ export const useHooks = ({
     () =>
       new ColorMaterialProperty(
         new CallbackProperty(
-          () => (isEdgeHovered.current ? hoverColor ?? fillColor : fillColor),
+          () => (isEdgeHovered.current ? (hoverColor ?? fillColor) : fillColor),
           false,
         ),
       ),

package/src/engines/Cesium/Feature/Box/hooks/side.ts

@@ -54,7 +54,7 @@ export const useHooks = ({
   const [outlineColorCb] = useState(
     () =>
       new CallbackProperty(
-        () => (isActiveRef.current ? activeOutlineColor ?? outlineColor : outlineColor),
+        () => (isActiveRef.current ? (activeOutlineColor ?? outlineColor) : outlineColor),
         false,
       ),
   );

package/src/engines/Cesium/Feature/Box/utils.ts

@@ -68,11 +68,17 @@ function screenProjectVector(
   ray.origin = position;
   ray.direction = direction;
   const nearPoint2d = scene.cartesianToCanvasCoordinates(Ray.getPoint(ray, 0), new Cartesian2());
+  if (!nearPoint2d) {
+    return result;
+  }
 
   const farPoint2d = scene.cartesianToCanvasCoordinates(
     Ray.getPoint(ray, length),
     new Cartesian2(),
   );
+  if (!farPoint2d) {
+    return result;
+  }
   const screenVector2d = Cartesian2.subtract(farPoint2d, nearPoint2d, result);
   return screenVector2d;
 }

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

@@ -5,7 +5,6 @@ import { Map, Props } from "../../../../Map";
 
 export default {
   component: Map,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
 const Template: StoryFn<Props> = args => <Map {...args} />;

package/src/engines/Cesium/Feature/Frustum/getFieldOfView.ts

@@ -7,6 +7,7 @@ export function getFieldOfView(camera: Camera, zoom: number): number {
   const fov = getFieldOfViewSeparate(camera, zoom, cartesianScratch);
   const frustum = camera.frustum;
   invariant(frustum instanceof PerspectiveFrustum);
+  invariant(frustum.aspectRatio !== undefined);
   return frustum.aspectRatio > 1 ? fov.x : fov.y;
 }
 
@@ -17,6 +18,7 @@ export function getFieldOfViewSeparate(
 ): Cartesian2 {
   const frustum = camera.frustum;
   invariant(frustum instanceof PerspectiveFrustum);
+  invariant(frustum.aspectRatio !== undefined);
   result.x = Math.atan(Math.pow(2, 1 - zoom)) * 2;
   result.y = 2 * Math.atan(frustum.aspectRatio * Math.tan(result.x / 2));
   return result;

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

@@ -5,7 +5,6 @@ import { Map, Props } from "../../../../Map";
 
 export default {
   component: Map,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
 const Template: StoryFn<Props> = args => <Map {...args} />;

package/src/engines/Cesium/Feature/HeatMap/HeatmapMesh.tsx

@@ -62,7 +62,7 @@ export const HeatmapMesh = memo(
     ) => {
       const { scene } = useCesium();
       const groundPrimitives = scene?.groundPrimitives;
-      const primitiveRef = useRef<GroundPrimitive>();
+      const primitiveRef = useRef<GroundPrimitive>(undefined);
 
       const material = useConstant(() =>
         createHeatmapMeshMaterial({

package/src/engines/Cesium/Feature/Marker/index.tsx

@@ -228,7 +228,7 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
         position={
           useTransition
             ? (translateCallbackProperty as unknown as PositionProperty)
-            : translatedCoords ?? pos
+            : (translatedCoords ?? pos)
         }
         layerId={layer?.id}
         featureId={feature?.id}