@reearth/core 0.0.7-alpha.4 → 0.0.7-alpha.41

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,
@@ -37,7 +38,7 @@ import {
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
 import { FEATURE_FLAGS } from "../../Visualizer/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;
@@ -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);
 
@@ -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;
 
@@ -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.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%",
@@ -158,7 +163,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       onWheel={mouseEventHandles.wheel}>
       <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>
@@ -252,7 +261,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/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/mantle/atoms/compute.ts

@@ -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];

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/evaluator/simple/expression/expression.test.ts

@@ -26,6 +26,14 @@ describe("replaceDefines", () => {
     });
     expect(result).toBe("(value1) + (value2)");
   });
+
+  test("should handle Japanese text with multiple variables", () => {
+    const result = replaceDefines("${住所} (${人数}人)", {
+      住所: "東京都渋谷区",
+      人数: "5",
+    });
+    expect(result).toBe("(東京都渋谷区) ((5)人)");
+  });
 });
 
 describe("removeBackslashes", () => {
@@ -40,6 +48,70 @@ describe("removeBackslashes", () => {
   });
 });
 
+describe("Expression evaluation", () => {
+  test("should evaluate Japanese expression with feature properties as string literal", () => {
+    const expressionString = '"${住所} (${人数}人)"';
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("緑町 (2人)");
+  });
+
+  test("should evaluate Japanese expression with two spaces - user observation", () => {
+    const expressionString = '"${住所}  (${人数}人)"';
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("緑町  (2人)");
+  });
+
+  test("should evaluate expression with multiple variables", () => {
+    const expressionString = '"${name}: ${住所} (${人数}人) - ${status}"';
+    const feature = {
+      properties: {
+        name: "太郎",
+        住所: "緑町",
+        人数: 2,
+        status: "完了",
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("太郎: 緑町 (2人) - 完了");
+  });
+
+  test("should evaluate Japanese expression without quotes - shows the issue", () => {
+    const expressionString = "${住所} (${人数}人)";
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    expect(() => {
+      const expression = new Expression(expressionString, feature);
+      expression.evaluate();
+    }).toThrow('Unexpected function call "czm_住所"');
+  });
+});
+
 describe("expression caches", () => {
   beforeEach(() => {
     EXPRESSION_CACHES.clear();

package/src/mantle/evaluator/simple/expression/node.ts

@@ -175,18 +175,16 @@ export class Node {
   }
   _evaluateVariableString(feature?: Feature) {
     const variableRegex = /\${(.*?)}/g;
-    let result = this._value;
-    let match = variableRegex.exec(result);
-    while (match !== null) {
-      const placeholder = match[0];
-      const variableName = match[1];
-      let property = feature?.properties[variableName];
-      if (typeof property === "undefined") {
-        property = "";
-      }
-      result = result.replace(placeholder, property);
-      match = variableRegex.exec(result);
-    }
+    const result = this._value.replace(
+      variableRegex,
+      (_placeholder: string, variableName: string) => {
+        let property = feature?.properties[variableName];
+        if (typeof property === "undefined") {
+          property = "";
+        }
+        return property;
+      },
+    );
     return result;
   }
   _evaluateVariable(feature?: Feature) {

package/src/mantle/types/appearance.ts

@@ -60,14 +60,14 @@ export type MarkerAppearance = {
   label?: boolean;
   labelText?: string;
   labelPosition?:
-    | "left"
-    | "right"
-    | "top"
-    | "bottom"
-    | "lefttop"
-    | "leftbottom"
-    | "righttop"
-    | "rightbottom";
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+  | "lefttop"
+  | "leftbottom"
+  | "righttop"
+  | "rightbottom";
   labelTypography?: Typography;
   labelBackground?: boolean;
   labelBackgroundColor?: string;
@@ -102,6 +102,7 @@ export type PolygonAppearance = {
   stroke?: boolean;
   strokeColor?: string;
   strokeWidth?: number;
+  height?: number;
   heightReference?: "none" | "clamp" | "relative";
   shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
   lineJoin?: CanvasLineJoin;
@@ -156,6 +157,7 @@ export type ModelAppearance = {
   model?: string; // For compat
   url?: string;
   heightReference?: "none" | "clamp" | "relative";
+  height?: number;
   heading?: number;
   pitch?: number;
   roll?: number;
@@ -191,16 +193,16 @@ export type FrustumAppearance = {
 
 export type Cesium3DTilesAppearance = {
   show?: boolean;
+  height?: number;
   color?: string;
   styleUrl?: string;
   shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
-  colorBlendMode?: "highlight" | "replace" | "mix" | "default";
+  colorBlendMode?: "highlight" | "replace" | "mix";
   edgeWidth?: number;
   edgeColor?: string;
   selectedFeatureColor?: string; // This doesn't support expression
   disableIndexingFeature?: boolean;
   tileset?: string;
-  apiKey?: string;
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;

package/src/mantle/types/index.ts

@@ -76,6 +76,9 @@ export type Data = {
   updateInterval?: number; // milliseconds
   parameters?: Record<string, any>;
   idProperty?: string;
+  serviceTokens?: {
+    googleMapApiKey?: string;
+  };
   time?: {
     property?: string;
     interval?: number; // milliseconds

package/src/utils/image.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export const useImage = (src?: string): HTMLImageElement | undefined => {
   const imgRef = useRef<HTMLImageElement>();
@@ -23,13 +23,3 @@ export const useImage = (src?: string): HTMLImageElement | undefined => {
 
   return img;
 };
-
-export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
-  const can = useMemo(() => document.createElement("canvas"), []);
-  const [data, setData] = useState<string>("");
-  useEffect(() => {
-    cb(can);
-    setData(can.toDataURL());
-  }, [can, cb]);
-  return data;
-};