@reearth/core 0.0.7-alpha.23 → 0.0.7-alpha.25

package/src/Map/index.tsx

@@ -5,6 +5,7 @@ import { INTERACTION_MODES } from "../Visualizer/interactionMode";
 import useHooks, { MapRef } from "./hooks";
 import Layers, { type Props as LayersProps } from "./Layers";
 import Sketch, { SketchProps } from "./Sketch";
+import SpatialId from "./SpatialId";
 import type { Engine, EngineProps } from "./types";
 
 export * from "./types";
@@ -85,6 +86,7 @@ function MapFn(
     engineRef,
     layersRef,
     sketchRef,
+    spatialIdRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
@@ -94,6 +96,7 @@ function MapFn(
     handleEngineMount,
     handleLayersMount,
     handleSketchMount,
+    handleSpatialIdMount,
   } = useHooks({
     ref,
     timelineManagerRef,
@@ -167,6 +170,14 @@ function MapFn(
         onSketchEditFeature={setSketchEditingFeature}
         onMount={handleSketchMount}
       />
+      <SpatialId
+        ref={spatialIdRef}
+        engineRef={engineRef}
+        interactionMode={interactionMode}
+        terrainEnabled={!!props.property?.terrain?.enabled}
+        overrideInteractionMode={overrideInteractionMode}
+        onMount={handleSpatialIdMount}
+      />
     </Engine>
   ) : null;
 }

package/src/Map/ref.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from "react";
 
+import { SpatialIdRef } from "./SpatialId/types";
 import type { EngineRef, LayersRef, SketchRef } from "./types";
 import { TimelineManagerRef } from "./useTimelineManager";
 import { FunctionKeys, WrappedRef, wrapRef } from "./utils";
@@ -8,6 +9,7 @@ export type MapRef = {
   engine: WrappedRef<EngineRef>;
   layers: WrappedRef<LayersRef>;
   sketch: WrappedRef<SketchRef>;
+  spatialId?: WrappedRef<SpatialIdRef>;
   timeline?: TimelineManagerRef;
 };
 
@@ -133,21 +135,30 @@ const sketchRefKeys: FunctionKeys<SketchRef> = {
   onEditFeatureChange: 1,
 };
 
+const spatialIdRefKeys: FunctionKeys<SpatialIdRef> = {
+  pickSpace: 1,
+  exitPickSpace: 1,
+  onSpacePick: 1,
+};
+
 export function mapRef({
   engineRef,
   layersRef,
   sketchRef,
+  spatialIdRef,
   timelineManagerRef,
 }: {
   engineRef: RefObject<EngineRef>;
   layersRef: RefObject<LayersRef>;
   sketchRef: RefObject<SketchRef>;
+  spatialIdRef: RefObject<SpatialIdRef>;
   timelineManagerRef?: TimelineManagerRef;
 }): MapRef {
   return {
     engine: wrapRef(engineRef, engineRefKeys),
     layers: wrapRef(layersRef, layersRefKeys),
     sketch: wrapRef(sketchRef, sketchRefKeys),
+    spatialId: wrapRef(spatialIdRef, spatialIdRefKeys),
     timeline: timelineManagerRef,
   };
 }

package/src/Map/types/index.ts

@@ -119,6 +119,7 @@ export type EngineRef = {
   getExtrudedHeight: (
     position: [x: number, y: number, z: number],
     windowPosition: [x: number, y: number],
+    allowNegative?: boolean,
   ) => number | undefined;
   getExtrudedPoint: (
     position: [x: number, y: number, z: number],

package/src/Visualizer/hooks.ts

@@ -329,6 +329,7 @@ export default function useHooks(
     cameraForceHorizontalRoll,
     coreContextValue,
     containerStyle,
+    overriddenInteractionMode: interactionMode,
     handleLayerSelect,
     handleLayerDrag,
     handleLayerDrop,

package/src/Visualizer/index.tsx

@@ -116,6 +116,7 @@ export const CoreVisualizer = memo(
         cameraForceHorizontalRoll,
         coreContextValue,
         containerStyle,
+        overriddenInteractionMode,
         handleLayerSelect,
         handleLayerDrag,
         handleLayerDrop,
@@ -174,7 +175,7 @@ export const CoreVisualizer = memo(
                 small={small}
                 ready={ready}
                 timelineManagerRef={timelineManagerRef}
-                interactionMode={interactionMode}
+                interactionMode={overriddenInteractionMode}
                 selectedFeature={selectedFeature}
                 cursor={cursor}
                 onCameraChange={handleCameraChange}

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(
@@ -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/SpatialId/index.tsx

@@ -0,0 +1,42 @@
+import { ClassificationType, Color, HeightReference, Rectangle } from "cesium";
+import { FC, memo, useMemo } from "react";
+import { Entity } from "resium";
+
+import { SpatialIdSpaceType } from "../../../Map/SpatialId/types";
+
+const DEFAULT_COLOR = "#00bebe";
+
+type SpatialIdComponentProps = {
+  space: SpatialIdSpaceType;
+};
+
+const SpatialIdSpace: FC<SpatialIdComponentProps> = memo(({ space }) => {
+  const options = useMemo(
+    () => ({
+      rectangle: {
+        coordinates: Rectangle.fromDegrees(...space.wsen),
+        height: space.type === "coordinate" ? undefined : space.height,
+        heightReference: space.type === "coordinate" ? undefined : HeightReference.NONE,
+        extrudedHeight: space.type === "coordinate" ? undefined : space.extrudedHeight,
+        clampToGround: space.type === "coordinate",
+        fill: true,
+        outline: space.type !== "coordinate",
+        outlineColor: Color.fromCssColorString(space.color ?? DEFAULT_COLOR).withAlpha(
+          space.type === "floor" ? 0.5 : 1,
+        ),
+        material: Color.fromCssColorString(space.color ?? DEFAULT_COLOR).withAlpha(
+          space.type === "floor" ? 0.05 : 0.2,
+        ),
+        classificationType:
+          space.type === "coordinate" ? ClassificationType.BOTH : ClassificationType.TERRAIN,
+      },
+    }),
+    [space],
+  );
+
+  return <Entity id={space.id} {...options} />;
+});
+
+SpatialIdSpace.displayName = "SpatialIdSpace";
+
+export default SpatialIdSpace;

package/src/engines/Cesium/common.ts

@@ -554,7 +554,7 @@ export const colorBlendModeFor3DTile = (
       replace: Cesium3DTileColorBlendMode.REPLACE,
       mix: Cesium3DTileColorBlendMode.MIX,
     }) as { [key in string]?: Cesium3DTileColorBlendMode }
-  )[colorBlendMode]
+  )[colorBlendMode];
 
 export const heightReference = (
   heightReference?: "none" | "clamp" | "relative",
@@ -853,6 +853,7 @@ export function getExtrudedHeight(
   scene: Scene,
   position: Cartesian3,
   windowPosition: Cartesian2,
+  allowNegative = false,
 ): number | undefined {
   const cartesianScratch = new Cartesian3();
   const normalScratch = new Cartesian3();
@@ -894,7 +895,7 @@ export function getExtrudedHeight(
       scene.globe.ellipsoid,
       cartographicScratch,
     ).height;
-    return Math.max(0, toHeight - fromHeight);
+    return allowNegative ? toHeight - fromHeight : Math.max(0, toHeight - fromHeight);
   } catch (error) {
     console.error(error);
   }

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

@@ -35,6 +35,7 @@ import {
   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";
@@ -46,7 +47,6 @@ import {
   findEntity,
   findFeaturesFromLayer,
 } from "../utils/utils";
-import { getGeometryFromEntity } from "../helpers/getGeometryFromEntity";
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
@@ -261,13 +261,14 @@ 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) => {

package/src/mantle/types/appearance.ts

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