@reearth/core 0.0.7-alpha.6 → 0.0.7-alpha.61

package/src/engines/Cesium/hooks.ts

@@ -27,6 +27,7 @@ import type {
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
+  Credits,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -35,9 +36,9 @@ import {
   RequestingRenderMode,
 } from "../../Map";
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
-import { FEATURE_FLAGS } from "../../Visualizer/featureFlags";
+import { FEATURE_FLAGS } from "../../shared/featureFlags";
 
-import { isSelectable } from "./common";
+import { getCredits, isSelectable } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import { arrayToCartecian3 } from "./helpers/sphericalHaromic";
 import useCamera from "./hooks/useCamera";
@@ -89,6 +90,7 @@ export default ({
   onLayerLoad,
   onCameraChange,
   onMount,
+  onCreditsUpdate,
 }: {
   ref: React.ForwardedRef<EngineRef>;
   property?: ViewerProperty;
@@ -97,7 +99,7 @@ export default ({
     layerId?: string;
     featureId?: string;
   };
-  layersRef?: RefObject<LayersRef>;
+  layersRef?: RefObject<LayersRef | null>;
   selectionReason?: LayerSelectionReason;
   meta?: Record<string, unknown>;
   featureFlags: number;
@@ -128,6 +130,7 @@ export default ({
   onLayerLoad?: (e: LayerLoadEvent) => void;
   onCameraChange?: (camera: Camera) => void;
   onMount?: () => void;
+  onCreditsUpdate?: (credits: Credits) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
 
@@ -237,8 +240,8 @@ export default ({
     | Primitive
     | GroundPrimitive
     | ImageryLayer
-  >();
-  const prevSelectedImageryFeatureId = useRef<string | undefined>();
+  >(undefined);
+  const prevSelectedImageryFeatureId = useRef<string | undefined>(undefined);
 
   // manage layer selection
   useEffect(() => {
@@ -334,8 +337,8 @@ export default ({
 
     if (entity) {
       const layer = tag?.layerId
-        ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
-          layersRef?.current?.findById(tag.layerId)
+        ? (layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+          layersRef?.current?.findById(tag.layerId))
         : undefined;
       // Sometimes only featureId is specified, so we need to sync entity tag.
       onLayerSelect?.(
@@ -462,8 +465,8 @@ export default ({
       if (target && "id" in target && target.id instanceof Entity && isSelectable(target.id)) {
         const tag = getTag(target.id);
         const layer = tag?.layerId
-          ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
-            layersRef?.current?.findById(tag.layerId)
+          ? (layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+            layersRef?.current?.findById(tag.layerId))
           : undefined;
         onLayerSelect?.(
           tag?.layerId,
@@ -557,8 +560,11 @@ export default ({
         if (pickRay) {
           const l = await scene.imageryLayers.pickImageryLayerFeatures(pickRay, scene);
 
-          // NOTE: For now we only send the first selected feature to onLayerSelect instead of sending all of them: @pyshx
-          const f = l?.[0];
+          // Find the topmost overlaid feature.
+          const f = l?.findLast(f => {
+            const appearanceType = f?.data?.appearanceType;
+            return appearanceType && f?.data?.feature?.[appearanceType]?.show !== false;
+          });
 
           const appearanceType = f?.data?.appearanceType;
 
@@ -581,8 +587,8 @@ export default ({
             }
 
             const layer = tag?.layerId
-              ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
-                layersRef?.current?.findById(tag.layerId)
+              ? (layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+                layersRef?.current?.findById(tag.layerId))
               : undefined;
             const content = getEntityContent(
               f.data.feature ?? f,
@@ -648,6 +654,22 @@ export default ({
     viewer.scene.requestRender();
   }, []);
 
+  const onCreditsUpdateRef = useRef(onCreditsUpdate);
+  onCreditsUpdateRef.current = onCreditsUpdate;
+  const updateCredits = useCallback(() => {
+    if (!onCreditsUpdateRef.current) return;
+    // currently we don't have a proper way to get the credits update event
+    // wait for 3 seconds to get latest credits
+    // some internal property is been used here.
+    setTimeout(() => {
+      if (!onCreditsUpdateRef.current) return;
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return;
+      const credits = getCredits(viewer);
+      onCreditsUpdateRef.current(credits);
+    }, 3000);
+  }, []);
+
   const context = useMemo<FeatureContext>(
     () => ({
       selectionReason,
@@ -662,8 +684,17 @@ export default ({
       toXYZ: engineAPI.toXYZ,
       toWindowPosition: engineAPI.toWindowPosition,
       isPositionVisible: engineAPI.isPositionVisible,
+      updateCredits,
     }),
-    [selectionReason, engineAPI, onLayerEdit, onLayerVisibility, onLayerLoad, timelineManagerRef],
+    [
+      selectionReason,
+      engineAPI,
+      onLayerEdit,
+      onLayerVisibility,
+      onLayerLoad,
+      timelineManagerRef,
+      updateCredits,
+    ],
   );
 
   useEffect(() => {
@@ -728,6 +759,14 @@ export default ({
     unmountCamera?.();
   }, [unmountCamera]);
 
+  const handleTilesChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
+  const handleTerrainProviderChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
   return {
     cesium,
     cesiumIonAccessToken,
@@ -747,6 +786,8 @@ export default ({
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   };
 };
 

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

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

package/src/engines/Cesium/index.tsx

@@ -47,6 +47,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    displayCredits,
     layersRef,
     featureFlags,
     requestingRenderMode,
@@ -63,6 +64,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onMount,
     onLayerVisibility,
     onLayerLoad,
+    onCreditsUpdate,
   },
   ref,
 ) => {
@@ -85,6 +87,8 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   } = useHooks({
     ref,
     property,
@@ -112,6 +116,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onLayerLoad,
     onCameraChange,
     onMount,
+    onCreditsUpdate,
   });
 
   return (
@@ -133,7 +138,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       navigationHelpButton={false}
       projectionPicker={false}
       sceneModePicker={false}
-      creditContainer={creditContainer}
+      creditContainer={displayCredits ? undefined : creditContainer}
       style={{
         width: small ? "300px" : "auto",
         height: small ? "300px" : "100%",
@@ -155,10 +160,15 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       onMouseMove={mouseEventHandles.mouseMove}
       onMouseEnter={mouseEventHandles.mouseEnter}
       onMouseLeave={mouseEventHandles.mouseLeave}
-      onWheel={mouseEventHandles.wheel}>
+      onWheel={mouseEventHandles.wheel}
+      automaticallyTrackDataSourceClocks={false}>
       <Event onMount={handleMount} onUnmount={handleUnmount} />
       <Clock timelineManagerRef={timelineManagerRef} />
-      <ImageryLayers tiles={property?.tiles} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <ImageryLayers
+        tiles={property?.tiles}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTilesChange={handleTilesChange}
+      />
       <LabelImageryLayers tileLabels={property?.tileLabels} />
       <Indicator property={property} timelineManagerRef={timelineManagerRef} />
       <ScreenSpaceEventHandler useDefault>
@@ -201,7 +211,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       <ScreenSpaceCameraController
         maximumZoomDistance={
           property?.camera?.limiter?.enabled
-            ? property.camera?.limiter?.targetArea?.height ?? Number.POSITIVE_INFINITY
+            ? (property.camera?.limiter?.targetArea?.height ?? Number.POSITIVE_INFINITY)
             : Number.POSITIVE_INFINITY
         }
         enableCollisionDetection={!property?.camera?.allowEnterGround}
@@ -236,7 +246,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         light={sceneLight}
         mode={sceneMode}
         msaaSamples={sceneMsaaSamples}
-        useDepthPicking={false}
+        useDepthPicking={true}
         useWebVR={!!property?.scene?.vr || undefined} // NOTE: useWebVR={false} will crash Cesium
         debugShowFramesPerSecond={!!property?.debug?.showFramesPerSecond}
         verticalExaggerationRelativeHeight={property?.scene?.verticalExaggerationRelativeHeight}
@@ -252,7 +262,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         saturationShift={property?.sky?.skyAtmosphere?.saturationShift}
         brightnessShift={property?.sky?.skyAtmosphere?.brightnessShift}
       />
-      <Globe property={property} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <Globe
+        property={property}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTerrainProviderChange={handleTerrainProviderChange}
+      />
       <featureContext.Provider value={context}>{ready ? children : null}</featureContext.Provider>
       <AmbientOcclusion
         {...AMBIENT_OCCLUSION_QUALITY[property?.render?.ambientOcclusion?.quality || "low"]}

package/src/engines/Cesium/pickMany.ts

@@ -152,6 +152,8 @@ function getPickCullingVolume(
   const camera = scene.camera;
   const frustum = camera.frustum;
   invariant(frustum instanceof PerspectiveFrustum);
+  invariant(frustum.fovy !== undefined);
+  invariant(frustum.aspectRatio !== undefined);
 
   const near = frustum.near;
   const tanPhi = Math.tan(frustum.fovy / 2);

package/src/engines/Cesium/types.ts

@@ -21,4 +21,4 @@ export type PrivateCesiumGlobe = Globe & {
   };
 };
 
-export type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair";
+export type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair" | "wait";

package/src/engines/Cesium/utils/mouse.ts

@@ -10,7 +10,7 @@ export const makeMouseEventProps = (viewer: Viewer, e: CesiumMovementEvent) => {
   const props: MouseEventProps = {
     x: position?.x,
     y: position?.y,
-    ...(position ? getLocationFromScreen(viewer.scene, position.x, position.y, true) ?? {} : {}),
+    ...(position ? (getLocationFromScreen(viewer.scene, position.x, position.y, true) ?? {}) : {}),
   };
   return props;
 };

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

@@ -357,7 +357,7 @@ export const getEntityContent = (
     },
   };
 
-  return defaultContent ? content[defaultContent] : content.attributes ?? content.description;
+  return defaultContent ? content[defaultContent] : (content.attributes ?? content.description);
 };
 
 function propertiesToTableContent(properties: Record<string, any>): { key: string; value: any }[] {

package/src/mantle/atoms/compute.test.ts

@@ -1,6 +1,6 @@
-import { renderHook, act, waitFor } from "@testing-library/react";
+import { renderHook, waitFor } from "@testing-library/react";
 import { useAtom } from "jotai";
-import { useMemo } from "react";
+import { act, useMemo } from "react";
 import { test, expect, vi, beforeEach } from "vitest";
 
 import * as DataCache from "../data";
@@ -79,7 +79,7 @@ test("computeAtom", async () => {
     result.current.set({ type: "setLayer", layer });
   });
 
-  expect(result.current.result).toEqual({
+  (expect(result.current.result).toEqual({
     id: "xxx",
     layer,
     status: "ready",
@@ -94,7 +94,7 @@ test("computeAtom", async () => {
         features: [],
         originalFeatures: [],
       }),
-    );
+    ));
 
   // delete delegatedDataTypes
   act(() => {

package/src/mantle/atoms/compute.ts

@@ -43,7 +43,7 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
   });
 
   const layer = atom<Layer | undefined>(undefined);
-  const overrides = atom<Record<string, any> | undefined, Record<string, any> | undefined>(
+  const overrides = atom<Record<string, any> | undefined, [Record<string, any> | undefined], void>(
     undefined,
     (_, set, value) => {
       set(overrides, pick(value, appearanceKeys));
@@ -68,7 +68,7 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
       features: get(finalFeatures) ?? [],
       originalFeatures:
         currentLayer.type === "simple" && currentLayer.data
-          ? get(dataAtoms.getAll)(currentLayer.id, currentLayer.data)?.flat() ?? []
+          ? (get(dataAtoms.getAll)(currentLayer.id, currentLayer.data)?.flat() ?? [])
           : [],
       properties: currentLayer.type === "simple" ? currentLayer.properties : undefined,
       ...get(computedResult)?.layer,
@@ -109,7 +109,11 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
         return true;
       }
 
-      const curFeatures = processGeoJSON(currentLayer.data.value);
+      const curFeatures = processGeoJSON(
+        currentLayer.data.value,
+        undefined,
+        currentLayer.data.idProperty,
+      );
       if (curFeatures.length === prevFeatures?.length) {
         return !curFeatures.every((cur, i) => {
           const prev = prevFeatures[i];
@@ -304,7 +308,7 @@ export function computeAtom(cache?: typeof globalDataFeaturesCache) {
     await set(compute, { forceUpdateData: true });
   });
 
-  return atom<ComputedLayer | undefined, Command>(
+  return atom<ComputedLayer | undefined, [Command], void>(
     g => g(get),
     async (_, s, value) => {
       switch (value.type) {

package/src/mantle/compat/forward.ts

@@ -9,7 +9,7 @@ import { LegacyCluster } from "./types";
 import type { LegacyLayer } from ".";
 
 export function convertLegacyLayer(l: LegacyLayer | undefined): Layer | undefined {
-  return l ? convertLegacyLayerGroup(l) ?? convertLegacyLayerItem(l) : undefined;
+  return l ? (convertLegacyLayerGroup(l) ?? convertLegacyLayerItem(l)) : undefined;
 }
 
 function convertLegacyLayerCommon(l: LegacyLayer): any {

package/src/mantle/data/geojson.ts

@@ -10,54 +10,85 @@ export async function fetchGeoJSON(
   options?: FetchOptions,
 ): Promise<Feature[] | void> {
   const d = data.url ? await (await f(data.url, options)).json() : data.value;
-  return processGeoJSON(d, range);
+  return processGeoJSON(d, range, data.idProperty);
 }
 
-export function processGeoJSON(geojson: GeoJSON, range?: DataRange): Feature[] {
+export function processGeoJSON(
+  geojson: GeoJSON,
+  range?: DataRange,
+  idProperty?: string,
+): Feature[] {
   if (geojson.type === "FeatureCollection") {
-    return geojson.features.flatMap(f => processGeoJSON(f, range));
+    return geojson.features.flatMap(f => processGeoJSON(f, range, idProperty));
   }
 
   if (geojson.type === "Feature") {
     const geo = geojson.geometry;
+    if (geo.type === "GeometryCollection") {
+      return geo.geometries.flatMap(geometry => {
+        return processGeoJSON(
+          {
+            ...geojson,
+            geometry,
+          },
+          undefined,
+          idProperty,
+        );
+      });
+    }
     if (geo.type === "MultiPoint") {
       return geo.coordinates.flatMap(coord => {
-        return processGeoJSON({
-          ...geojson,
-          geometry: {
-            type: "Point",
-            coordinates: coord,
+        return processGeoJSON(
+          {
+            ...geojson,
+            geometry: {
+              type: "Point",
+              coordinates: coord,
+            },
           },
-        });
+          undefined,
+          idProperty,
+        );
       });
     }
     if (geo.type === "MultiLineString") {
       return geo.coordinates.flatMap(coord => {
-        return processGeoJSON({
-          ...geojson,
-          geometry: {
-            type: "LineString",
-            coordinates: coord,
+        return processGeoJSON(
+          {
+            ...geojson,
+            geometry: {
+              type: "LineString",
+              coordinates: coord,
+            },
           },
-        });
+          undefined,
+          idProperty,
+        );
       });
     }
     if (geo.type === "MultiPolygon") {
       return geo.coordinates.flatMap(coord => {
-        return processGeoJSON({
-          ...geojson,
-          geometry: {
-            type: "Polygon",
-            coordinates: coord,
+        return processGeoJSON(
+          {
+            ...geojson,
+            geometry: {
+              type: "Polygon",
+              coordinates: coord,
+            },
           },
-        });
+          undefined,
+          idProperty,
+        );
       });
     }
 
     return [
       {
         type: "feature",
-        id: generateRandomString(12),
+        id:
+          idProperty && geojson.properties && geojson.properties[idProperty]
+            ? geojson.properties[idProperty]
+            : generateRandomString(12),
         geometry:
           geo.type === "Point" || geo.type === "LineString" || geo.type === "Polygon"
             ? geo

package/src/mantle/data/georss.ts

@@ -1,4 +1,4 @@
-import { XMLParser, X2jOptionsOptional } from "fast-xml-parser";
+import { XMLParser, type X2jOptions } from "fast-xml-parser";
 
 import type { Data, DataRange, Feature, Geometry } from "../types";
 
@@ -28,7 +28,7 @@ function handler(xmlDataStr: string) {
 }
 
 function parseBuffer(xmlDataStr: string) {
-  const options: X2jOptionsOptional = {
+  const options: X2jOptions = {
     ignoreAttributes: false,
     attributeNamePrefix: "",
   };

package/src/mantle/data/gml.ts

@@ -1,4 +1,4 @@
-import { XMLParser, X2jOptionsOptional } from "fast-xml-parser";
+import { XMLParser, X2jOptions } from "fast-xml-parser";
 
 import type { Data, DataRange, Feature, Geometry } from "../types";
 
@@ -21,7 +21,7 @@ function handler(xmlDataStr: string) {
 }
 
 function parseBuffer(xmlDataStr: string) {
-  const options: X2jOptionsOptional = {
+  const options: X2jOptions = {
     ignoreAttributes: false,
     attributeNamePrefix: "",
   };

package/src/mantle/data/gpx.ts

@@ -243,7 +243,7 @@ const parseGPXWithCustomParser = (
           extensions[name] = parseFloat(
             (extension as Element).innerHTML != undefined
               ? (extension as Element).innerHTML
-              : (extension as Element).childNodes[0].textContent ?? "",
+              : ((extension as Element).childNodes[0].textContent ?? ""),
           );
         }
 
@@ -325,7 +325,7 @@ const getElementValue = (parent: Element, tag: string): string => {
   if (element !== null) {
     return element.innerHTML != undefined
       ? element.innerHTML
-      : element.childNodes[0].textContent ?? "";
+      : (element.childNodes[0].textContent ?? "");
   } else return "";
 };
 

package/src/mantle/data/shapefile/parseZip.ts

@@ -3,6 +3,7 @@ import proj4 from "proj4";
 
 import { parseDbf } from "./parseDbf";
 import { parseShp } from "./parseShp";
+
 import { combine } from ".";
 
 export async function parseZip(buffer: ArrayBuffer): Promise<GeoJSON.GeoJSON | GeoJSON.GeoJSON[]> {