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

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -15,13 +15,11 @@ import {
   Cesium3DTileFeature,
   Model,
   Cesium3DTilePointFeature,
-  GoogleMaps as CesiumGoogleMaps,
-  Resource,
-  defaultValue,
   ImageBasedLighting,
   Cesium3DTileContent,
   Color,
   Viewer,
+  createGooglePhotorealistic3DTileset,
 } from "cesium";
 import { pick } from "lodash-es";
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -57,7 +55,6 @@ import {
 } from "../utils";
 
 import { TilesetFeatureIndex } from "./TilesetFeatureIndex";
-import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 import { useDrawClipping } from "./useDrawClipping";
 
@@ -77,6 +74,7 @@ const useData = (layer: ComputedLayer | undefined) => {
           ? data.layers.join(",")
           : data?.layers
         : undefined,
+      googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
     };
   }, [layer]);
 };
@@ -179,7 +177,7 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 
 const useFeature = ({
   id,
-  tileset,
+  tilesetRef,
   idProperty,
   layer,
   viewer,
@@ -189,9 +187,10 @@ const useFeature = ({
   onComputedFeatureFetch,
   shouldUseFeatureIndex,
   isTilesetReady,
+  useExternalStyle,
 }: {
   id?: string;
-  tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
   idProperty?: string;
   layer?: ComputedLayer;
   viewer?: Viewer;
@@ -201,6 +200,7 @@ const useFeature = ({
   selectedFeatureIdsRef: MutableRefObject<string[]>;
   shouldUseFeatureIndex?: boolean;
   isTilesetReady: boolean;
+  useExternalStyle?: boolean;
 }) => {
   const cachedFeaturesRef = useRef<CachedFeature[]>([]);
   const cachedCalculatedLayerRef = useRef(layer);
@@ -222,44 +222,51 @@ const useFeature = ({
 
         const computedFeature = evalFeature(layer, { ...feature?.feature, properties });
 
-        const style = computedFeature?.["3dtiles"];
+        if (!useExternalStyle) {
+          const style = computedFeature?.["3dtiles"];
 
-        COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-          if (name === "color") {
-            if (isFeatureSelected) {
-              raw.color =
-                typeof layer["3dtiles"]?.selectedFeatureColor === "string"
-                  ? toColor(layer["3dtiles"]?.selectedFeatureColor) ?? raw.color
-                  : raw.color;
-              return;
-            }
-
-            raw.color = DEFAULT_FEATURE_COLOR;
-          }
-          const val = convertStyle(style?.[name], convert);
-          if (val !== undefined) {
-            raw[name] = val;
-          }
-        });
-
-        if (raw instanceof Cesium3DTilePointFeature) {
-          POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+          COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
             const val = convertStyle(style?.[name], convert);
-            if (val !== undefined) {
-              raw[name] = val;
+
+            if (name === "color") {
+              // Reset color to default so that new style could update all.
+              raw.color = DEFAULT_FEATURE_COLOR;
+
+              // Apply color from style.
+              if (val !== undefined) {
+                raw.color = val;
+              }
+
+              // Apply color for selected feature.
+              if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
+                raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
+              }
+            } else {
+              if (val !== undefined) {
+                raw[name] = val;
+              }
             }
           });
-        }
 
-        if ("style" in raw) {
-          raw.style = new Cesium3DTileStyle(
-            // TODO: Convert value if it's necessary
-            MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
-              const val = convertStyle(style?.[name as keyof typeof style], convert);
-              if (val === undefined) return res;
-              return { ...res, [name]: val };
-            }, {}),
-          );
+          if (raw instanceof Cesium3DTilePointFeature) {
+            POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+              const val = convertStyle(style?.[name], convert);
+              if (val !== undefined) {
+                raw[name] = val;
+              }
+            });
+          }
+
+          if ("style" in raw) {
+            raw.style = new Cesium3DTileStyle(
+              // TODO: Convert value if it's necessary
+              MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
+                const val = convertStyle(style?.[name as keyof typeof style], convert);
+                if (val === undefined) return res;
+                return { ...res, [name]: val };
+              }, {}),
+            );
+          }
         }
 
         attachTag(feature.raw, {
@@ -273,7 +280,7 @@ const useFeature = ({
       }
       return;
     },
-    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef],
+    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef, useExternalStyle],
   );
 
   const handleTilesetLoad = useCallback(
@@ -324,10 +331,10 @@ const useFeature = ({
   handleTilesetLoadRef.current = handleTilesetLoad;
   useEffect(
     () =>
-      tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
         handleTilesetLoadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   const handleTilesetUnload = useCallback(
@@ -343,10 +350,10 @@ const useFeature = ({
   handleTilesetUnloadRef.current = handleTilesetUnload;
   useEffect(
     () =>
-      tileset.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
         handleTilesetUnloadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   useEffect(() => {
@@ -362,7 +369,7 @@ const useFeature = ({
 
   // If styles are updated while features are calculating,
   // we stop calculating features, and reassign styles.
-  const skippedComputingAt = useRef<number | null>();
+  const skippedComputingAt = useRef<number | null>(undefined);
   useEffect(() => {
     skippedComputingAt.current = Date.now();
   }, [pickedAppearance, updateStyle]);
@@ -449,8 +456,8 @@ export const useHooks = ({
   onLayerFetch?: (value: Partial<Pick<LayerSimple, "properties">>) => void;
 }) => {
   const { viewer } = useCesium();
-  const tilesetRef = useRef<Cesium3DTilesetType>();
-  const { onLayerLoad } = useContext();
+  const tilesetRef = useRef<Cesium3DTilesetType>(undefined);
+  const { onLayerLoad, updateCredits } = useContext();
   const layerIdRef = useRef(layer?.id);
   layerIdRef.current = layer?.id;
 
@@ -460,7 +467,6 @@ export const useHooks = ({
     edgeColor,
     edgeWidth,
     experimental_clipping,
-    apiKey,
     selectedFeatureColor,
     disableIndexingFeature,
   } = property ?? {};
@@ -481,10 +487,12 @@ export const useHooks = ({
   } = useClippingBox({ clipping: experimental_clipping, boxId });
 
   const [style, setStyle] = useState<Cesium3DTileStyle>();
-  const { url, type, idProperty } = useData(layer);
+  const { url, type, idProperty, googleMapApiKey } = useData(layer);
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
+  const [isTilesetCompReady, setIsTilesetCompReady] = useState(false);
+  const [isTilesetRefReady, setIsTilesetRefReady] = useState(false);
 
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
@@ -503,8 +511,9 @@ export const useHooks = ({
     return prevPlanes.current;
   }, [_planes]);
   const clipDirection = direction === "inside" ? -1 : 1;
+
   // Create immutable object
-  const [clippingPlanes] = useState(
+  const [clippingPlanes, setClippingPlanes] = useState<CesiumClippingPlaneCollection>(
     () =>
       new CesiumClippingPlaneCollection({
         planes: planes?.map(
@@ -519,6 +528,27 @@ export const useHooks = ({
         edgeColor: toColor(edgeColor),
       }),
   );
+  // Initialize clipping planes
+  // This is workaround to reinitialize ClippingPlanes in strict mode.
+  useEffect(
+    () => () => {
+      setClippingPlanes(
+        new CesiumClippingPlaneCollection({
+          planes: planes?.map(
+            plane =>
+              new ClippingPlane(
+                new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+                (plane.distance || 0) * clipDirection,
+              ),
+          ),
+          unionClippingRegions: direction === "outside",
+          edgeWidth: edgeWidth,
+          edgeColor: toColor(edgeColor),
+        }),
+      );
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   const { drawClippingEnabled, drawClippingEdgeProps } = useDrawClipping({
     ...experimental_clipping?.draw,
@@ -542,6 +572,7 @@ export const useHooks = ({
         (tileset?.cesiumElement as any)[layerIdField] = layer.id;
       }
       tilesetRef.current = tileset?.cesiumElement;
+      setIsTilesetRefReady(!!tileset?.cesiumElement);
     },
     [id, layer?.id, featureIndex, shouldUseFeatureIndex],
   );
@@ -578,7 +609,7 @@ export const useHooks = ({
 
   useFeature({
     id,
-    tileset: tilesetRef,
+    tilesetRef,
     layer,
     idProperty,
     viewer,
@@ -588,6 +619,7 @@ export const useHooks = ({
     selectedFeatureIdsRef,
     shouldUseFeatureIndex,
     isTilesetReady,
+    useExternalStyle: !!styleUrl,
   });
 
   const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
@@ -703,36 +735,57 @@ export const useHooks = ({
     }
     (async () => {
       const res = await fetch(styleUrl);
-      if (!res.ok) return;
-      setStyle(new Cesium3DTileStyle(await res.json()));
+      if (!res.ok) {
+        console.warn("Failed to fetch style from:", styleUrl);
+        return;
+      }
+      const styleData = await res.json();
+      const newStyle = new Cesium3DTileStyle(styleData);
+      setStyle(newStyle);
     })();
   }, [styleUrl]);
 
-  const googleMapResource = useMemo(() => {
-    if (type !== "google-photorealistic" || !isVisible) return;
-    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
-    const googleMaps = CesiumGoogleMaps as GoogleMaps;
-    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
-    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
-    const credit = googleMaps.getDefaultApiKeyCredit(key);
-    return new Resource({
-      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
-      queryParameters: { key },
-      credits: credit ? [credit] : undefined,
-    } as Resource.ConstructorOptions);
-  }, [apiKey, type, isVisible]);
+  // Apply style to tileset when both external style and tileset are ready
+  useEffect(() => {
+    if (style && tilesetRef.current && isTilesetReady) {
+      tilesetRef.current.style = style;
+    }
+  }, [style, isTilesetReady]);
+
+  const googleMapPhotorealisticResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return null;
+
+    const loadTileset = async () => {
+      try {
+        if (googleMapApiKey) {
+          const tileset = await createGooglePhotorealistic3DTileset({ key: googleMapApiKey });
+          return tileset.resource;
+        } else {
+          const resource = IonResource.fromAssetId(2275207, {
+            accessToken: meta?.cesiumIonAccessToken as string | undefined,
+          });
+          return resource;
+        }
+      } catch (error) {
+        console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
+        throw error;
+      }
+    };
+
+    return loadTileset();
+  }, [type, isVisible, googleMapApiKey, meta?.cesiumIonAccessToken]);
 
   const tilesetUrl = useMemo(() => {
     return type === "osm-buildings" && isVisible
       ? IonResource.fromAssetId(96188, {
           accessToken: meta?.cesiumIonAccessToken as string | undefined,
         }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
-      : googleMapResource
-        ? googleMapResource
+      : googleMapPhotorealisticResource && isVisible
+        ? googleMapPhotorealisticResource
         : type === "3dtiles" && isVisible
-          ? url ?? tileset
+          ? (url ?? tileset)
           : null;
-  }, [isVisible, tileset, url, type, meta, googleMapResource]);
+  }, [type, isVisible, meta?.cesiumIonAccessToken, googleMapPhotorealisticResource, url, tileset]);
 
   const imageBasedLighting = useMemo(() => {
     if (
@@ -773,13 +826,25 @@ export const useHooks = ({
 
   const handleReady = useCallback(
     (tileset: Cesium3DTileset) => {
-      setIsTilesetReady(true);
+      setIsTilesetCompReady(true);
       onLayerFetch?.({ properties: tileset.properties });
       onLayerLoad?.({ layerId: layerIdRef.current });
     },
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    if (!isTilesetCompReady || !isTilesetRefReady) return;
+    setIsTilesetReady(true);
+  }, [isTilesetCompReady, isTilesetRefReady]);
+
+  useEffect(() => {
+    updateCredits?.();
+    return () => {
+      updateCredits?.();
+    };
+  }, [type, updateCredits]);
+
   return {
     tilesetUrl,
     ref,

package/src/engines/Cesium/Feature/Tileset/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/Tileset/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { memo, useMemo, type JSX } from "react";
 import { Cesium3DTileset } from "resium";
 
 import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";

package/src/engines/Cesium/Feature/Tileset/useClippingBox.ts

@@ -105,7 +105,7 @@ export const useClippingBox = ({
 
   const isBoxClicked = useRef(false);
   const isTopBottomSidePlaneClicked = useRef(false);
-  const currentCameraPosition = useRef<Camera | undefined>();
+  const currentCameraPosition = useRef<Camera | undefined>(undefined);
 
   // Coordinates
   const [coords, setCoords] = useState(coordinates);
@@ -349,7 +349,7 @@ export const useClippingBox = ({
     [boxId, boxState.isEdgeClicked, boxState.isScalePointClicked, handleUpdateBoxState],
   );
 
-  const hovered = useRef<any>();
+  const hovered = useRef<any>(undefined);
   const handleRawMouseMove = useCallback(
     (e: any) => {
       const picked = viewer?.scene.pick(e.endPosition);

package/src/engines/Cesium/Feature/Tileset/useDrawClipping.ts

@@ -69,11 +69,11 @@ export const useDrawClipping = ({
       const polygon = turf.polygon([surfacePoints.map(p => [p.lng, p.lat])]);
       const center = turf.centroid(polygon);
       const baseHeight = viewer?.scene
-        ? (await sampleTerrainHeight(
+        ? ((await sampleTerrainHeight(
             viewer?.scene,
             center.geometry.coordinates[0],
             center.geometry.coordinates[1],
-          )) ?? 0
+          )) ?? 0)
         : 0;
       setBaseHeight(baseHeight);
 

package/src/engines/Cesium/Feature/context.ts

@@ -26,6 +26,7 @@ export type Context = {
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
   isPositionVisible?: (position: [x: number, y: number, z: number]) => boolean;
+  updateCredits?: () => void;
 };
 
 export const context = createContext<Context>({});

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

@@ -1,5 +1,5 @@
-import LRUCache from "lru-cache";
-import { useEffect, useMemo } from "react";
+import { LRUCache } from "lru-cache";
+import { useEffect, useMemo, type JSX } from "react";
 
 import type { AppearanceTypes, FeatureComponentProps, ComputedLayer } from "../..";
 import { ComputedFeature, DataType, guessType } from "../../../mantle";
@@ -96,6 +96,7 @@ const FEATURE_DELEGATE_THRESHOLD = 6000;
 export default function Feature({
   layer,
   isHidden,
+  sketchEditingFeature,
   ...props
 }: FeatureComponentProps): JSX.Element | null {
   const data = extractSimpleLayerData(layer);
@@ -131,7 +132,10 @@ export default function Feature({
     const useSceneSpecularEnvironmentMaps =
       !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
 
-    const isVisible = layer.layer.visible !== false && !isHidden;
+    const isVisible =
+      layer.layer.visible !== false &&
+      !isHidden &&
+      !(sketchEditingFeature?.layerId === layer.id && sketchEditingFeature?.feature?.id === f?.id);
 
     const componentId =
       urlMD5 +
@@ -140,7 +144,7 @@ export default function Feature({
           f?.id ?? ""
         }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
-        }_${JSON.stringify(layer.transition) ?? ""}`,
+        }_${JSON.stringify(layer.transition) ?? ""}_${JSON.stringify(f?.geometry) ?? ""}`,
       );
 
     if (cacheable) {
@@ -172,7 +176,7 @@ export default function Feature({
         <C
           {...props}
           key={!useTransition ? componentId : undefined}
-          id={!useTransition ? componentId : f?.id ?? layer.id}
+          id={!useTransition ? componentId : (f?.id ?? layer.id)}
           property={f ? f[k] : layer[k] || pickProperty(k, layer)}
           geometry={f?.geometry}
           feature={f}

package/src/engines/Cesium/Feature/utils.tsx

@@ -16,16 +16,17 @@ import {
   Primitive,
   GroundPrimitive,
 } from "cesium";
-import md5 from "js-md5";
-import { pick } from "lodash-es";
+import { md5 } from "js-md5";
+import { cloneDeep, pick } from "lodash-es";
 import {
   ComponentProps,
   ComponentType,
   ForwardedRef,
   forwardRef,
+  useCallback,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useState,
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
@@ -86,10 +87,11 @@ function EntityExtComponent(
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
 ) {
-  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+  const [entity, setEntity] = useState<CesiumComponentRef<CesiumEntity> | null>(null);
 
   useLayoutEffect(() => {
-    attachTag(r.current?.cesiumElement, {
+    if (!entity?.cesiumElement) return;
+    attachTag(entity.cesiumElement, {
       layerId: layerId || props.id,
       featureId,
       draggable,
@@ -105,10 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current?.cesiumElement,
+    entity,
   ]);
 
-  return <Entity ref={composeRefs(ref, r)} {...props} />;
+  const handleRef = useCallback((r: CesiumComponentRef<CesiumEntity>) => setEntity(r), []);
+
+  return <Entity ref={composeRefs(ref, handleRef)} {...props} />;
 }
 
 export function attachTag(
@@ -232,13 +236,20 @@ export const extractSimpleLayer = (
   if (l?.type !== "simple") {
     return;
   }
-  return l;
+  // Proxy object lead to issues when creating mvt imagery provider, so convert to plain object
+  // Not sure for other types, but to keep consistency, convert all simple layers here
+  // It should be okey since simple layer data is supposed to be simple enough and computed data should not be included
+  return toPlainObject(l);
 };
 
 export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | undefined => {
   return extractSimpleLayer(layer)?.data;
 };
 
+export const toPlainObject = <T,>(obj: T): T => {
+  return cloneDeep(obj);
+};
+
 export const toColor = (c?: string) => {
   if (!c || typeof c !== "string") return undefined;
 
@@ -274,10 +285,7 @@ export const toDistanceDisplayCondition = (
 };
 
 export const generateIDWithMD5 = (id: string) => {
-  const hash = md5.create();
-  hash.update(id);
-
-  return hash.hex();
+  return md5(id);
 };
 
 export const usePick = <T extends object, U extends keyof T>(

package/src/engines/Cesium/PostProcesses/hbao/AmbientOcclusion.tsx

@@ -12,8 +12,7 @@ import {
 } from "./createAmbientOcclusionStage";
 
 export interface AmbientOcclusionProps
-  extends Omit<AmbientOcclusionStageOptions, "prefix">,
-    Partial<AmbientOcclusionStageUniforms> {
+  extends Omit<AmbientOcclusionStageOptions, "prefix">, Partial<AmbientOcclusionStageUniforms> {
   enabled?: boolean;
 }
 
@@ -83,7 +82,11 @@ export const AmbientOcclusionStage = ({
 
   usePreRender(() => {
     const frustum = scene?.camera.frustum;
-    if (frustum instanceof PerspectiveFrustum) {
+    if (
+      frustum instanceof PerspectiveFrustum &&
+      frustum.fovy !== undefined &&
+      frustum.aspectRatio !== undefined
+    ) {
       const cotFovy = 1 / Math.tan(frustum.fovy / 2);
       stage.uniforms.focalLength.x = cotFovy * frustum.aspectRatio;
       stage.uniforms.focalLength.y = cotFovy;
@@ -111,7 +114,7 @@ export const AmbientOcclusion: FC<AmbientOcclusionProps> = props => {
     // Screen-space camera controller should detect collision
     const cameraHeight = scene.camera.positionCartographic.height - globeHeight;
     const frustum = scene?.camera.frustum;
-    if (frustum instanceof PerspectiveFrustum) {
+    if (frustum instanceof PerspectiveFrustum && frustum.fov !== undefined) {
       scene.camera.frustum.near =
         CesiumMath.clamp(cameraHeight - 1, 1, 5) / Math.tan(frustum.fov / 2);
     }