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

package/src/engines/Cesium/core/presets.ts

@@ -1,7 +1,6 @@
 import { WebMercatorTilingScheme } from "@cesium/engine";
 import {
   ImageryProvider,
-  ArcGisMapServerImageryProvider,
   IonImageryProvider,
   OpenStreetMapImageryProvider,
   IonWorldImageryStyle,
@@ -11,54 +10,91 @@ import {
 
 import { JapanGSIOptimalBVmapLabelImageryProvider } from "./labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider";
 
+const PRESET_TILE_TYPES = [
+  // Dynamic Cesium Ion asset — asset ID supplied per-tile via cesiumIonAssetId field
+  "cesium_ion",
+
+  // Public presets — always available, no auth required
+  "open_street_map",
+  "japan_gsi_standard",
+  "stamen_watercolor",
+  "carto_light",
+  "url",
+
+  // Cesium Ion presets — require user-provided Ion token (scene.default.ion)
+  "cesium_ion_default",
+  "cesium_ion_labelled",
+  "cesium_ion_road",
+  "cesium_ion_earth_at_night",
+
+  // Legacy aliases — kept for backward compatibility with existing apps
+  "default", // → cesium_ion_default
+  "default_road", // → cesium_ion_road
+  "default_label", // → cesium_ion_labelled
+  "black_marble", // → cesium_ion_earth_at_night
+];
+
+export type PresetTileType = (typeof PRESET_TILE_TYPES)[number];
+
+export const isValidPresetTileType = (type: string | undefined): type is PresetTileType => {
+  return PRESET_TILE_TYPES.includes(type as PresetTileType);
+};
+
+export type TileOptions = {
+  url?: string;
+  cesiumIonAccessToken?: string;
+  cesiumIonAssetId?: number | string;
+  heatmap?: boolean;
+  tile_zoomLevel?: number[];
+};
+
 export const tiles = {
-  default: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
-  default_label: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL_WITH_LABELS, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
-  default_road: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
-  stamen_watercolor: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-      fileExtension: "jpg",
-    }),
-  stamen_toner: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/toner/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-    }),
+  // --- Dynamic Cesium Ion asset ---
+  // Uses per-tile cesiumIonAssetId; requires cesiumIonAccessToken.
+  cesium_ion: (opts?: TileOptions) => {
+    if (!opts?.cesiumIonAssetId) return null;
+    const NumberAssetId = parseInt(String(opts.cesiumIonAssetId), 10);
+    if (isNaN(NumberAssetId)) {
+      console.warn(`Invalid cesiumIonAssetId: ${opts.cesiumIonAssetId}`);
+      return null;
+    }
+    return IonImageryProvider.fromAssetId(NumberAssetId, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    });
+  },
+
+  // --- Public presets ---
   open_street_map: () =>
     new OpenStreetMapImageryProvider({
-      url: "https://a.tile.openstreetmap.org/",
-      credit:
-        "Copyright: Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
+      url: "https://tile.openstreetmap.org",
+      credit: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }),
-  esri_world_topo: () =>
-    ArcGisMapServerImageryProvider.fromUrl(
-      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-      {
-        credit:
-          "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
-        enablePickFeatures: false,
-      },
-    ).catch(console.error),
-  black_marble: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(3812, { accessToken: cesiumIonAccessToken }).catch(
-      console.error,
-    ),
+
   japan_gsi_standard: () =>
     new OpenStreetMapImageryProvider({
       url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
+      credit:
+        "<a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>, Shoreline data is derived from: United States. National Imagery and Mapping Agency. \"Vector Map Level 0 (VMAP0).\" Bethesda, MD: Denver, CO: The Agency; USGS Information Services, 1997.",
+    }),
+
+  stamen_watercolor: () =>
+    new UrlTemplateImageryProvider({
+      url: "https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg",
+      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
+      maximumLevel: 16,
+    }),
+
+  carto_light: () =>
+    new UrlTemplateImageryProvider({
+      url: "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+      credit:
+        "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='https://carto.com/attributions'>CARTO</a>",
     }),
-  url: ({ url, heatmap, tile_zoomLevel } = {}) =>
+
+  url: ({ url, heatmap, tile_zoomLevel }: TileOptions = {}) =>
     url
       ? new UrlTemplateImageryProvider({
           url,
@@ -67,15 +103,53 @@ export const tiles = {
           maximumLevel: tile_zoomLevel?.[1],
         })
       : null,
-} as {
-  [key: string]: (opts?: {
-    url?: string;
-    cesiumIonAccessToken?: string;
-    heatmap?: boolean;
-    tile_zoomLevel?: number[];
-  }) => Promise<ImageryProvider> | ImageryProvider | null;
+
+  // --- Cesium Ion presets ---
+  // Require the user to configure a Cesium Ion access token in their scene (scene.default.ion).
+  cesium_ion_default: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_labelled: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL_WITH_LABELS, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_road: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_earth_at_night: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(3812, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+  // --- Legacy aliases ---
+} as any as {
+  [K in PresetTileType]: (opts?: TileOptions) => Promise<ImageryProvider> | ImageryProvider | null;
 };
 
+// Populate legacy aliases after object literal to allow forward references.
+Object.assign(tiles, {
+  default: tiles.cesium_ion_default,
+  default_road: tiles.cesium_ion_road,
+  default_label: tiles.cesium_ion_labelled,
+  black_marble: tiles.cesium_ion_earth_at_night,
+});
+
 export const labelTiles = {
   japan_gsi_optimal_bvmap: (params: {
     url: string;

package/src/engines/Cesium/helpers/getGeometryFromEntity.ts

@@ -0,0 +1,55 @@
+import { Cartesian3, Entity, JulianDate, PolygonHierarchy } from "cesium";
+
+import { Geometry } from "../../../mantle";
+
+export function getMarkerCoordinates(
+  entity: Entity,
+  currentTime: JulianDate,
+): [number, number, number] {
+  const position = entity.position?.getValue(currentTime) as Cartesian3 | undefined;
+  return [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+}
+
+export function getGeometryFromEntity(currentTime: JulianDate, entity: Entity) {
+  if (entity.point || entity.billboard || entity.label) {
+    const coordinates = getMarkerCoordinates(entity, currentTime);
+
+    const geometry: Geometry = {
+      type: "Point",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polyline) {
+    const positions = entity.polyline?.positions?.getValue(currentTime) as Cartesian3[];
+    const coordinates = positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "LineString",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polygon) {
+    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
+    const coordinates = hierarchy?.positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "Polygon",
+      coordinates: [coordinates],
+    };
+    return geometry;
+  }
+
+  return undefined;
+}

package/src/engines/Cesium/hooks/useCamera.ts

@@ -7,7 +7,7 @@ import { useCustomCompareCallback } from "use-custom-compare";
 
 import { EngineRef, ViewerProperty } from "../..";
 import { Camera } from "../../../mantle";
-import { FEATURE_FLAGS } from "../../../Visualizer";
+import { FEATURE_FLAGS } from "../../../shared/featureFlags";
 import { getCamera } from "../common";
 
 import { useCameraLimiter } from "./useCameraLimiter";
@@ -21,7 +21,7 @@ export default ({
   cameraForceHorizontalRoll = false,
   onCameraChange,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   property?: ViewerProperty;
   engineAPI: EngineRef;
   featureFlags: number;

package/src/engines/Cesium/hooks/useCameraLimiter.ts

@@ -20,7 +20,7 @@ const targetWidth = 1000000;
 const targetLength = 1000000;
 
 export function useCameraLimiter(
-  cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
+  cesium: RefObject<CesiumComponentRef<CesiumViewer> | null>,
   camera: Camera | undefined,
   property: CameraLimiterProperty | undefined,
 ) {

package/src/engines/Cesium/hooks/useEngineRef.ts

@@ -32,8 +32,10 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
+  getCredits,
 } from "../common";
 import { attachTag, getTag } from "../Feature";
+import { getGeometryFromEntity } from "../helpers/getGeometryFromEntity";
 import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
 import { createGeometry } from "../Sketch/createGeometry";
 import { CursorType } from "../types";
@@ -48,9 +50,9 @@ import {
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
-  cesium: RefObject<CesiumComponentRef<Cesium.Viewer>>,
+  cesium: RefObject<CesiumComponentRef<Cesium.Viewer> | null>,
 ): EngineRef {
-  const cancelCameraFlight = useRef<() => void>();
+  const cancelCameraFlight = useRef<() => void>(undefined);
   const mouseEventCallbacks = useRef<MouseEventCallbacks>({
     click: [],
     doubleClick: [],
@@ -107,7 +109,8 @@ export default function useEngineRef(
           if (
             calcViewSize &&
             cartesian &&
-            viewer.scene.camera.frustum instanceof Cesium.PerspectiveFrustum
+            viewer.scene.camera.frustum instanceof Cesium.PerspectiveFrustum &&
+            viewer.scene.camera.frustum.fov !== undefined
           ) {
             const distance = Cesium.Cartesian3.distance(viewer.scene.camera.positionWC, cartesian);
             viewSize = distance * Math.tan(viewer.scene.camera.frustum.fov / 2);
@@ -169,10 +172,11 @@ export default function useEngineRef(
       toWindowPosition: (position: [x: number, y: number, z: number]) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
-        const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+        const result = Cesium.SceneTransforms.worldToWindowCoordinates(
           viewer.scene,
           Cesium.Cartesian3.fromElements(...position),
         );
+        if (!result) return;
         return [result.x, result.y];
       },
       // Calculate next positino from screen(window) offset.
@@ -259,15 +263,31 @@ export default function useEngineRef(
         }
         return;
       },
-      getExtrudedHeight: (position, windowPosition) => {
+      getExtrudedHeight: (position, windowPosition, allowNegative) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
         return getExtrudedHeight(
           viewer.scene,
           new Cesium.Cartesian3(position[0], position[1], position[2]),
           new Cesium.Cartesian2(windowPosition[0], windowPosition[1]),
+          allowNegative,
         );
       },
+      getExtrudedPoint: (position, extrudedHeight) => {
+        if (!position || !extrudedHeight) return;
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const point = new Cesium.Cartesian3(position[0], position[1], position[2]);
+        const cartesianScratch = new Cesium.Cartesian3();
+        const normal = viewer.scene?.globe.ellipsoid.geodeticSurfaceNormal(point, cartesianScratch);
+        if (!normal) return;
+        const extrudedPoint = Cesium.Cartesian3.add(
+          point,
+          Cesium.Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
+          cartesianScratch,
+        );
+        return [extrudedPoint.x, extrudedPoint.y, extrudedPoint.z];
+      },
       getSurfaceDistance: (point1, point2) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
@@ -831,6 +851,7 @@ export default function useEngineRef(
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
+              geometry: getGeometryFromEntity(viewer.clock.currentTime, entity),
               properties: convertEntityProperties(viewer.clock.currentTime, entity),
               metaData: {
                 description: convertEntityDescription(viewer.clock.currentTime, entity),
@@ -938,6 +959,32 @@ export default function useEngineRef(
         tickEventCallback.current = tickEventCallback.current.filter(c => c !== cb) || [];
       },
       tickEventCallback,
+      calcRectangleControlPoint: (p1: Position3d, p2: Position3d, p3: Position3d) => {
+        const pp1 = new Cesium.Cartesian3(...p1);
+        const pp2 = new Cesium.Cartesian3(...p2);
+        const pp3 = new Cesium.Cartesian3(...p3);
+        const cartesianScratch1 = new Cesium.Cartesian3();
+        const cartesianScratch2 = new Cesium.Cartesian3();
+        const projection = Cesium.Cartesian3.projectVector(
+          Cesium.Cartesian3.subtract(pp3, pp1, cartesianScratch1),
+          Cesium.Cartesian3.subtract(pp2, pp1, cartesianScratch2),
+          cartesianScratch1,
+        );
+        const offset = Cesium.Cartesian3.subtract(
+          pp3,
+          Cesium.Cartesian3.add(pp1, projection, cartesianScratch1),
+          cartesianScratch2,
+        );
+        const pp4 = Cesium.Cartesian3.midpoint(pp1, pp2, cartesianScratch1);
+        const pp5 = Cesium.Cartesian3.add(pp4, offset, cartesianScratch2);
+        const p5 = [pp5.x, pp5.y, pp5.z] as Position3d;
+        return [p1, p2, p5];
+      },
+      getCredits: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCredits(viewer);
+      },
     };
   }, [cesium]);
 

package/src/engines/Cesium/hooks/useExplicitRender.ts

@@ -12,7 +12,7 @@ export default ({
   shouldRender,
   property,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   isLayerDragging?: boolean;
   shouldRender?: boolean;
@@ -28,7 +28,7 @@ export default ({
     }
   }, [cesium, requestingRenderMode]);
 
-  const explicitRenderRef = useRef<() => void>();
+  const explicitRenderRef = useRef<() => void>(undefined);
 
   useEffect(() => {
     explicitRenderRef.current = explicitRender;

package/src/engines/Cesium/hooks/useInstance.ts

@@ -70,7 +70,7 @@ export function useInstance<T, Keys extends unknown[], Owner>(
   descriptor: InstanceDescriptor<T, () => DisallowPromise<T>, Keys, Owner>,
 ): T {
   const [state, setState] = useState<T>();
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   if (ref.current == null) {
     ref.current = descriptor.create();
   }

package/src/engines/Cesium/hooks/useLayerDragDrop.ts

@@ -1,5 +1,5 @@
 import { Cartesian3, Entity, Viewer } from "cesium";
-import CesiumDnD, { Context } from "cesium-dnd";
+import CesiumDnD, { type Context } from "cesium-dnd";
 import { RefObject, useCallback, useEffect, useRef } from "react";
 import { CesiumComponentRef } from "resium";
 
@@ -14,7 +14,7 @@ export default ({
   onLayerDrag,
   onLayerDrop,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   isLayerDraggable?: boolean;
   onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
   onLayerDrop?: (
@@ -54,7 +54,7 @@ export default ({
     [cesium, onLayerDrop],
   );
 
-  const cesiumDnD = useRef<CesiumDnD>();
+  const cesiumDnD = useRef<Context>(undefined);
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
     if (!viewer || viewer.isDestroyed()) return;

package/src/engines/Cesium/hooks/useLayerSelectWithRect.ts

@@ -9,7 +9,7 @@ import {
   LayerSelectWithRectMove,
   LayerSelectWithRectStart,
 } from "../../../Map";
-import { INTERACTION_MODES } from "../../../Visualizer/interactionMode";
+import { INTERACTION_MODES } from "../../../shared/interactionMode";
 import { makeMouseEventProps } from "../utils/mouse";
 
 export const useLayerSelectWithRect = ({
@@ -20,7 +20,7 @@ export const useLayerSelectWithRect = ({
   onLayerSelectWithRectMove,
   onLayerSelectWithRectEnd,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   engineAPI: EngineRef;
   featureFlags: number;
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;