@reearth/core 0.0.7-alpha.3 → 0.0.7-alpha.31

package/src/Visualizer/index.tsx

@@ -12,6 +12,7 @@ import {
   type LatLng,
   type Cluster,
   type ComputedLayer,
+  type Credit,
 } from "../Map";
 import { SketchFeature, SketchType } from "../Map/Sketch/types";
 
@@ -46,6 +47,7 @@ export type CoreVisualizerProps = {
   ready?: boolean;
   hiddenLayers?: string[];
   zoomedLayerId?: string;
+  displayCredits?: boolean;
   onCameraChange?: (camera: Camera) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
@@ -58,7 +60,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: Credit[]) => void;
 };
 
 export const CoreVisualizer = memo(
@@ -79,6 +85,7 @@ export const CoreVisualizer = memo(
         interactionMode,
         shouldRender,
         meta,
+        displayCredits = true,
         style,
         zoomedLayerId,
         children,
@@ -90,6 +97,10 @@ export const CoreVisualizer = memo(
         onMount,
         onSketchTypeChangeProp,
         onSketchFeatureCreate,
+        onSketchFeatureUpdate,
+        onSketchFeatureDelete,
+        onAPIReady,
+        onCreditsUpdate,
       },
       ref: Ref<MapRef | null>,
     ) => {
@@ -101,10 +112,10 @@ export const CoreVisualizer = memo(
         featureFlags,
         isLayerDragging,
         timelineManagerRef,
-        cursor,
         cameraForceHorizontalRoll,
         coreContextValue,
         containerStyle,
+        overriddenInteractionMode,
         handleLayerSelect,
         handleLayerDrag,
         handleLayerDrop,
@@ -112,6 +123,8 @@ export const CoreVisualizer = memo(
         handleCameraChange,
         handleInteractionModeChange,
         handleSketchPluginFeatureCreate,
+        handleSketchPluginFeatureUpdate,
+        handleSketchPluginFeatureDelete,
         handleSketchTypeChange,
         handleLayerVisibility,
         handleLayerLoad,
@@ -152,6 +165,7 @@ export const CoreVisualizer = memo(
                 isLayerDragging={isLayerDragging}
                 isLayerDraggable={isEditable}
                 meta={meta}
+                displayCredits={displayCredits}
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
@@ -160,9 +174,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 +184,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 +195,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/interactionMode.ts

@@ -1,6 +1,6 @@
 import { FEATURE_FLAGS } from "./featureFlags";
 
-export type InteractionModeType = "default" | "move" | "selection" | "sketch";
+export type InteractionModeType = "default" | "move" | "selection" | "sketch" | "spatialId";
 
 // If you would like enable a feature in a specific mode,
 // just set the feature's flag here to that mode.
@@ -22,4 +22,5 @@ export const INTERACTION_MODES: Record<InteractionModeType, number> = {
     FEATURE_FLAGS.CAMERA_ZOOM |
     FEATURE_FLAGS.CAMERA_TILT,
   sketch: FEATURE_FLAGS.SKETCH | FEATURE_FLAGS.CAMERA_ZOOM | FEATURE_FLAGS.CAMERA_TILT,
+  spatialId: FEATURE_FLAGS.CAMERA_ZOOM | FEATURE_FLAGS.CAMERA_TILT,
 };

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

@@ -54,6 +54,7 @@ export default function Polygon({
     fillColor,
     strokeColor,
     strokeWidth = 1,
+    height,
     heightReference: hr,
     shadows,
     extrudedHeight,
@@ -83,7 +84,7 @@ export default function Polygon({
       coordiantes && stroke && !disableWorkaround
         ? coordiantes.flatMap(hole => [
             // bottom
-            hole.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)),
+            hole.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? height)),
             ...(extrudedHeight
               ? [
                   // top
@@ -92,14 +93,14 @@ export default function Polygon({
                   ...hole
                     .slice(0, -1)
                     .map(c => [
-                      Cartesian3.fromDegrees(c[0], c[1], 0),
+                      Cartesian3.fromDegrees(c[0], c[1], height ?? 0),
                       Cartesian3.fromDegrees(c[0], c[1], extrudedHeight),
                     ]),
                 ]
               : []),
           ])
         : [],
-    [coordiantes, stroke, disableWorkaround],
+    [coordiantes, stroke, disableWorkaround, height, extrudedHeight],
   );
 
   const memoStrokeColor = useMemo(
@@ -127,7 +128,7 @@ export default function Polygon({
   );
 
   const extrudedHeightProperty: { extrudedHeight: number } | undefined = useMemo(
-    () => (extrudedHeight ? { extrudedHeight } : undefined),
+    () => (extrudedHeight !== undefined ? { extrudedHeight } : undefined),
     [extrudedHeight],
   );
 
@@ -152,6 +153,7 @@ export default function Polygon({
           outline={!!memoStrokeColor}
           outlineColor={memoStrokeColor}
           outlineWidth={strokeWidth}
+          height={height}
           heightReference={heightReference(hr)}
           shadows={shadowMode(shadows)}
           distanceDisplayCondition={distanceDisplayCondition}

package/src/engines/Cesium/Feature/Raster/mvt.ts

@@ -1,6 +1,7 @@
-import { MVTImageryProvider } from "@reearth/cesium-mvt-imagery-provider";
 import { useMemo } from "react";
 
+import { MVTImageryProvider } from "@reearth/cesium-mvt-imagery-provider";
+
 import { extractSimpleLayer } from "../utils";
 
 import { useData, useImageryProvider } from "./hooks";

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

@@ -1,15 +1,9 @@
-import {
-  Entity,
-  Cartesian3,
-  PolygonHierarchy,
-  PointGraphics,
-  BillboardGraphics,
-  JulianDate,
-} from "cesium";
+import { Entity, PointGraphics, BillboardGraphics, JulianDate } from "cesium";
 
 import { EvalFeature } from "../../..";
 import { AppearanceTypes, ComputedFeature, ComputedLayer, Feature } from "../../../../mantle";
-import { heightReference, shadowMode, toColor } from "../../common";
+import { heightReference, shadowMode, toColor, classificationType } from "../../common";
+import { getMarkerCoordinates, getGeometryFromEntity } from "../../helpers/getGeometryFromEntity";
 import { convertEntityDescription, convertEntityProperties } from "../../utils/utils";
 import { attachTag, extractSimpleLayer, getTag, Tag } from "../utils";
 
@@ -39,7 +33,7 @@ type EntityAppearanceKey<AName extends SupportedAppearanceKey> = AName extends "
   ? keyof Pick<Entity, "point" | "billboard" | "label">
   : keyof Pick<Entity, CesiumEntityAppearanceKey>;
 
-type AppearancePropertyKeyType = "color" | "heightReference" | "shadows";
+type AppearancePropertyKeyType = "color" | "heightReference" | "shadows" | "classificationType";
 
 export function attachProperties<
   AName extends SupportedAppearanceKey,
@@ -93,6 +87,9 @@ export function attachProperties<
         break;
       case "heightReference":
         value = heightReference(value);
+        break;
+      case "classificationType":
+        value = classificationType(value);
     }
 
     if (value === (entity[propertyName] as any)[entityPropertyKey]) {
@@ -132,16 +129,14 @@ export const attachStyle = (
   const point = hasAppearance(layer, entity, ["marker", "point"]);
   const billboard = hasAppearance(layer, entity, ["marker", "billboard"]);
   const label = hasAppearance(layer, entity, ["marker", "label"]);
-  if (point || billboard || label) {
-    const position = entity.position?.getValue(currentTime);
-    const coordinates = [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+  if (entity.point || entity.billboard || entity.label) {
+    const coordinates = getMarkerCoordinates(entity, currentTime);
+    const geometry = getGeometryFromEntity(currentTime, entity);
+
     const feature: Feature = {
       type: "feature",
       id: makeFeatureId(entity),
-      geometry: {
-        type: "Point",
-        coordinates,
-      },
+      geometry,
       properties: convertEntityProperties(currentTime, entity),
       metaData: {
         description: convertEntityDescription(currentTime, entity),
@@ -261,21 +256,14 @@ export const attachStyle = (
     return [feature, computedFeature];
   }
 
-  if (hasAppearance(layer, entity, ["polyline", "polyline"])) {
+  if (entity.polyline) {
     const entityPosition = entity.position?.getValue(currentTime);
-    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 = getGeometryFromEntity(currentTime, entity);
+
     const feature: Feature = {
       type: "feature",
       id: makeFeatureId(entity),
-      geometry: {
-        type: "LineString",
-        coordinates,
-      },
+      geometry,
       properties: convertEntityProperties(currentTime, entity),
       metaData: {
         description: convertEntityDescription(currentTime, entity),
@@ -290,42 +278,43 @@ export const attachStyle = (
     if (!computedFeature) {
       return;
     }
-    attachProperties(entity, computedFeature, ["polyline", "polyline"], {
-      show: {
-        name: "show",
-        default: true,
-      },
-      width: {
-        name: "strokeWidth",
-      },
-      material: {
-        name: "strokeColor",
-        type: "color",
-      },
-      shadows: {
-        name: "shadows",
-        type: "shadows",
-      },
-      clampToGround: {
-        name: "clampToGround",
-      },
-    });
+    if (hasAppearance(layer, entity, ["polyline", "polyline"])) {
+      attachProperties(entity, computedFeature, ["polyline", "polyline"], {
+        show: {
+          name: "show",
+          default: true,
+        },
+        width: {
+          name: "strokeWidth",
+        },
+        material: {
+          name: "strokeColor",
+          type: "color",
+        },
+        shadows: {
+          name: "shadows",
+          type: "shadows",
+        },
+        clampToGround: {
+          name: "clampToGround",
+        },
+        classificationType: {
+          name: "classificationType",
+          type: "classificationType",
+        },
+      });
+    }
     return [feature, computedFeature];
   }
 
-  if (hasAppearance(layer, entity, ["polygon", "polygon"])) {
+  if (entity.polygon) {
     const entityPosition = entity.position?.getValue(currentTime);
-    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
-    const coordinates = hierarchy?.holes?.map(hole =>
-      hole.positions.map(position => [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0]),
-    );
+    const geometry = getGeometryFromEntity(currentTime, entity);
+
     const feature: Feature = {
       type: "feature",
       id: makeFeatureId(entity),
-      geometry: {
-        type: "Polygon",
-        coordinates,
-      },
+      geometry,
       properties: convertEntityProperties(currentTime, entity),
       metaData: {
         description: convertEntityDescription(currentTime, entity),
@@ -340,40 +329,46 @@ export const attachStyle = (
     if (!computedFeature) {
       return;
     }
-    attachProperties(entity, computedFeature, ["polygon", "polygon"], {
-      show: {
-        name: "show",
-        default: true,
-      },
-      fill: {
-        name: "fill",
-      },
-      material: {
-        name: "fillColor",
-        type: "color",
-      },
-      outline: {
-        name: "stroke",
-      },
-      outlineColor: {
-        name: "strokeColor",
-        type: "color",
-      },
-      outlineWidth: {
-        name: "strokeWidth",
-      },
-      shadows: {
-        name: "shadows",
-        type: "shadows",
-      },
-      heightReference: {
-        name: "heightReference",
-        type: "heightReference",
-      },
-      extrudedHeight: {
-        name: "extrudedHeight",
-      },
-    });
+    if (hasAppearance(layer, entity, ["polygon", "polygon"])) {
+      attachProperties(entity, computedFeature, ["polygon", "polygon"], {
+        show: {
+          name: "show",
+          default: true,
+        },
+        fill: {
+          name: "fill",
+        },
+        material: {
+          name: "fillColor",
+          type: "color",
+        },
+        outline: {
+          name: "stroke",
+        },
+        outlineColor: {
+          name: "strokeColor",
+          type: "color",
+        },
+        outlineWidth: {
+          name: "strokeWidth",
+        },
+        shadows: {
+          name: "shadows",
+          type: "shadows",
+        },
+        heightReference: {
+          name: "heightReference",
+          type: "heightReference",
+        },
+        extrudedHeight: {
+          name: "extrudedHeight",
+        },
+        classificationType: {
+          name: "classificationType",
+          type: "classificationType",
+        },
+      });
+    }
     return [feature, computedFeature];
   }
 };

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]);
 };
@@ -450,7 +448,7 @@ export const useHooks = ({
 }) => {
   const { viewer } = useCesium();
   const tilesetRef = useRef<Cesium3DTilesetType>();
-  const { onLayerLoad } = useContext();
+  const { onLayerLoad, updateCredits } = useContext();
   const layerIdRef = useRef(layer?.id);
   layerIdRef.current = layer?.id;
 
@@ -460,7 +458,6 @@ export const useHooks = ({
     edgeColor,
     edgeWidth,
     experimental_clipping,
-    apiKey,
     selectedFeatureColor,
     disableIndexingFeature,
   } = property ?? {};
@@ -481,7 +478,7 @@ 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);
@@ -503,8 +500,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 +517,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,
@@ -708,31 +727,33 @@ export const useHooks = ({
     })();
   }, [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]);
+  const googleMapPhotorealisticResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return null;
+
+    const loadTileset = async () => {
+      try {
+        const tileset = await createGooglePhotorealistic3DTileset(googleMapApiKey);
+        return tileset.resource;
+      } catch (error) {
+        console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
+        throw error;
+      }
+    };
+
+    return loadTileset();
+  }, [type, isVisible, googleMapApiKey]);
 
   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
           : null;
-  }, [isVisible, tileset, url, type, meta, googleMapResource]);
+  }, [type, isVisible, meta?.cesiumIonAccessToken, googleMapPhotorealisticResource, url, tileset]);
 
   const imageBasedLighting = useMemo(() => {
     if (
@@ -780,6 +801,13 @@ export const useHooks = ({
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    updateCredits?.();
+    return () => {
+      updateCredits?.();
+    };
+  }, [type, updateCredits]);
+
   return {
     tilesetUrl,
     ref,

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

@@ -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) {

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

@@ -23,9 +23,10 @@ import {
   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,9 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
+    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(