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

package/src/engines/Cesium/Sketch/ExtrudedPolygonEntity.tsx

@@ -1,10 +1,10 @@
 import {
   CallbackProperty,
   ClassificationType,
+  Color,
   ColorMaterialProperty,
   HeightReference,
   ShadowMode,
-  type Color,
   type PolygonHierarchy,
 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
@@ -12,60 +12,60 @@ import { useMemo, useRef, type FC } from "react";
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface ExtrudedPolygonEntityProps {
-  dynamic?: boolean;
   id?: string;
   hierarchy: PolygonHierarchy;
   extrudedHeight: number;
   color?: Color;
   disableShadow?: boolean;
-  enableRelativeHeight?: boolean;
+  isEditing?: boolean;
 }
 
 export const ExtrudedPolygonEntity: FC<ExtrudedPolygonEntityProps> = ({
-  dynamic = false,
   id,
   hierarchy: hierarchyProp,
   extrudedHeight: extrudedHeightProp,
   color,
   disableShadow = false,
-  enableRelativeHeight = false,
+  isEditing,
 }) => {
   const hierarchyRef = useRef(hierarchyProp);
   hierarchyRef.current = hierarchyProp;
   const hierarchyProperty = useConstant(
     () => new CallbackProperty(() => hierarchyRef.current, false),
   );
-  const hierarchy = dynamic ? hierarchyProperty : hierarchyProp;
+  const hierarchy = hierarchyProperty;
 
   const extrudedHeightRef = useRef(extrudedHeightProp);
   extrudedHeightRef.current = extrudedHeightProp;
   const extrudedHeightProperty = useConstant(
     () => new CallbackProperty(() => extrudedHeightRef.current, false),
   );
-  const extrudedHeight = dynamic ? extrudedHeightProperty : extrudedHeightProp;
+  const extrudedHeight = extrudedHeightProperty;
 
   const options = useMemo(
     (): EntityProps => ({
       polygon: {
         hierarchy,
+        heightReference: HeightReference.RELATIVE_TO_TERRAIN,
         extrudedHeight,
-        extrudedHeightReference: HeightReference.RELATIVE_TO_GROUND,
+        extrudedHeightReference: HeightReference.RELATIVE_TO_TERRAIN,
+        // extrudedHeightReference: HeightReference.NONE,
         fill: true,
         outline: true,
         outlineWidth: 1,
-        outlineColor: color?.withAlpha(1),
-        material: new ColorMaterialProperty(color),
+        outlineColor: isEditing
+          ? Color.fromCssColorString(DEFAULT_EDIT_COLOR)
+          : color?.withAlpha(1),
+        material: new ColorMaterialProperty(isEditing ? color?.withAlpha(0.2) : color),
         classificationType: ClassificationType.TERRAIN,
         shadows: disableShadow ? ShadowMode.DISABLED : ShadowMode.ENABLED,
-        ...(enableRelativeHeight
-          ? { height: 0, heightReference: HeightReference.RELATIVE_TO_GROUND }
-          : undefined),
       },
     }),
-    [extrudedHeight, disableShadow, hierarchy, color, enableRelativeHeight],
+    [extrudedHeight, disableShadow, hierarchy, color, isEditing],
   );
 
   const { requestRender } = useContext();

package/src/engines/Cesium/Sketch/PolylineEntity.tsx

@@ -1,21 +1,24 @@
-import { CallbackProperty, ClassificationType, type Cartesian3, type Color } from "@cesium/engine";
+import { CallbackProperty, ClassificationType, Color, type Cartesian3 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
 
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface PolylineEntityProps {
   dynamic?: boolean;
   positions: Cartesian3[];
   color?: Color;
+  isEditing?: boolean;
 }
 
 export const PolylineEntity: FC<PolylineEntityProps> = ({
   dynamic = false,
   positions: positionsProp,
   color,
+  isEditing,
 }) => {
   const positionsRef = useRef(positionsProp);
   positionsRef.current = positionsProp;
@@ -28,13 +31,13 @@ export const PolylineEntity: FC<PolylineEntityProps> = ({
     (): EntityProps => ({
       polyline: {
         positions,
-        width: 1.5,
-        material: color,
+        width: isEditing ? 1.5 : 1.5,
+        material: isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color,
         classificationType: ClassificationType.TERRAIN,
         clampToGround: true,
       },
     }),
-    [color, positions],
+    [color, positions, isEditing],
   );
 
   const { requestRender } = useContext();

package/src/engines/Cesium/Sketch/SurfaceAddingPoints.tsx

@@ -0,0 +1,60 @@
+import { Cartesian3 } from "@cesium/engine";
+import { memo, type FC } from "react";
+
+import { Position3d } from "../../../types";
+
+import { ControlPoint } from "./ControlPoint";
+import { type GeometryOptions } from "./createGeometry";
+
+export interface SurfaceAddingPointsProps {
+  geometryOptions: GeometryOptions;
+  isEditing?: boolean;
+  handleAddControlPoint?: (position: Position3d, index: number) => void;
+}
+
+const cartesianScratch1 = new Cartesian3();
+
+const SurfaceAddingPoints: FC<SurfaceAddingPointsProps> = memo(
+  ({ geometryOptions: { type, controlPoints }, isEditing, handleAddControlPoint }) => {
+    if (!["polyline", "polygon", "extrudedPolygon"].includes(type)) return null;
+
+    const addingPoints = [];
+
+    for (let i = 0; i < controlPoints.length - 1; i++) {
+      const nextPoint = controlPoints[i + 1];
+      const midPoint = Cartesian3.midpoint(controlPoints[i], nextPoint, cartesianScratch1);
+      addingPoints.push(midPoint.clone());
+    }
+
+    if (type === "polygon" || type === "extrudedPolygon") {
+      const midPoint = Cartesian3.midpoint(
+        controlPoints[controlPoints.length - 1],
+        controlPoints[0],
+        cartesianScratch1,
+      );
+      addingPoints.push(midPoint.clone());
+    }
+
+    return (
+      <>
+        {addingPoints.map((addingPoint, index) => (
+          <ControlPoint
+            key={index}
+            position={addingPoint}
+            isAddingPoint
+            index={index}
+            clampToGround
+            isEditing={isEditing}
+            handleControlPointMouseEvent={() =>
+              handleAddControlPoint?.([addingPoint.x, addingPoint.y, addingPoint.z], index)
+            }
+          />
+        ))}
+      </>
+    );
+  },
+);
+
+SurfaceAddingPoints.displayName = "SurfaceAddingPoints";
+
+export default SurfaceAddingPoints;

package/src/engines/Cesium/Sketch/SurfaceControlPoints.tsx

@@ -1,62 +1,152 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { SurfaceMeasurement } from "./SurfaceMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface SurfaceControlPointsProps {
   geometryOptions: GeometryOptions;
   color?: Color;
+  isEditing?: boolean;
+  selectedControlPointIndex?: number;
+  catchedControlPointIndex?: number;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
 const cartesianScratch1 = new Cartesian3();
-const cartesianScratch2 = new Cartesian3();
 
 const SurfaceControlPoints: FC<SurfaceControlPointsProps> = memo(
-  ({ geometryOptions: { type, controlPoints: controlPointsProp }, color }) => {
-    let controlPoints = [...controlPointsProp];
-    let measurementPoints: [Cartesian3, Cartesian3] | undefined;
-    let showLine = false;
+  ({
+    geometryOptions: { type, controlPoints },
+    color,
+    isEditing,
+    catchedControlPointIndex,
+    selectedControlPointIndex,
+    handleControlPointMouseEvent,
+  }) => {
+    const measurements: { points: [Cartesian3, Cartesian3]; showLine: boolean }[] = [];
 
-    if (type === "rectangle" && controlPoints.length === 3) {
-      const [p1, p2, p3] = controlPoints;
-      const projection = Cartesian3.projectVector(
-        Cartesian3.subtract(p3, p1, cartesianScratch1),
-        Cartesian3.subtract(p2, p1, cartesianScratch2),
-        cartesianScratch1,
-      );
-      const offset = Cartesian3.subtract(
-        p3,
-        Cartesian3.add(p1, projection, cartesianScratch1),
-        cartesianScratch2,
-      );
-      const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
-      const p5 = Cartesian3.add(p4, offset, cartesianScratch2);
-      controlPoints = [p1, p2, p5];
-      measurementPoints = [p4, p5];
-      showLine = true;
-    } else if (type === "marker") {
-      measurementPoints = undefined;
-      controlPoints = [];
-    } else if (controlPoints.length >= 2) {
-      measurementPoints = controlPoints.slice(-2) as [Cartesian3, Cartesian3];
-      showLine = type === "circle";
+    if (controlPoints.length >= 2) {
+      if (isEditing) {
+        if (catchedControlPointIndex !== undefined && catchedControlPointIndex !== -1) {
+          switch (type) {
+            case "polyline":
+              if (catchedControlPointIndex > 0) {
+                measurements.push({
+                  points: [
+                    controlPoints[catchedControlPointIndex - 1],
+                    controlPoints[catchedControlPointIndex],
+                  ],
+                  showLine: false,
+                });
+              }
+              if (catchedControlPointIndex < controlPoints.length - 1) {
+                measurements.push({
+                  points: [
+                    controlPoints[catchedControlPointIndex],
+                    controlPoints[catchedControlPointIndex + 1],
+                  ],
+                  showLine: false,
+                });
+              }
+              break;
+            case "circle":
+            case "extrudedCircle":
+              if (catchedControlPointIndex !== 2) {
+                measurements.push({
+                  points: [controlPoints[0], controlPoints[1]],
+                  showLine: true,
+                });
+              }
+              break;
+            case "rectangle":
+            case "extrudedRectangle":
+              if (catchedControlPointIndex <= 1) {
+                measurements.push({
+                  points: [controlPoints[0], controlPoints[1]],
+                  showLine: false,
+                });
+              } else if (catchedControlPointIndex === 2) {
+                const [p1, p2, p3] = controlPoints;
+                const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
+                measurements.push({ points: [p4, p3], showLine: true });
+              }
+              break;
+            case "polygon":
+            case "extrudedPolygon":
+              measurements.push({
+                points: [
+                  controlPoints[catchedControlPointIndex],
+                  catchedControlPointIndex === 0
+                    ? controlPoints[controlPoints.length - 1]
+                    : controlPoints[catchedControlPointIndex - 1],
+                ],
+                showLine: false,
+              });
+              measurements.push({
+                points: [
+                  controlPoints[catchedControlPointIndex],
+                  catchedControlPointIndex === controlPoints.length - 1
+                    ? controlPoints[0]
+                    : controlPoints[catchedControlPointIndex + 1],
+                ],
+                showLine: false,
+              });
+              break;
+            default:
+              break;
+          }
+        }
+      } else {
+        switch (type) {
+          case "rectangle" || "extrudedRectangle":
+            if (controlPoints.length === 2) {
+              measurements.push({
+                points: controlPoints as [Cartesian3, Cartesian3],
+                showLine: true,
+              });
+            } else if (controlPoints.length === 3) {
+              const [p1, p2, p3] = controlPoints;
+              const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
+              measurements.push({ points: [p4, p3], showLine: true });
+            }
+            break;
+          default:
+            measurements.push({
+              points: controlPoints.slice(-2) as [Cartesian3, Cartesian3],
+              showLine: type === "circle",
+            });
+            break;
+        }
+      }
     }
 
     return (
       <>
         {controlPoints.map((controlPoint, index) => (
-          <ControlPoint key={index} position={controlPoint} clampToGround />
+          <ControlPoint
+            key={index}
+            position={controlPoint}
+            index={index}
+            isSelected={selectedControlPointIndex === index}
+            clampToGround
+            isEditing={isEditing}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
+          />
         ))}
-        {measurementPoints != undefined && (
+        {measurements.map(({ points, showLine }, index) => (
           <SurfaceMeasurement
-            a={measurementPoints[0]}
-            b={measurementPoints[1]}
-            color={color}
+            key={index}
+            a={points[0]}
+            b={points[1]}
+            color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
             showLine={showLine}
           />
-        )}
+        ))}
       </>
     );
   },

package/src/engines/Cesium/Sketch/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_SKETCH_COLOR = "#00bebe";
+
+export const DEFAULT_EDIT_COLOR = "#3B3CD0";
+export const SELECTED_EDIT_COLOR = "#FF9900";
+export const ADDING_POINT_COLOR = "#3B3CD0";

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

@@ -2,46 +2,61 @@
 
 import { Color } from "@cesium/engine";
 import { Cartesian3 } from "cesium";
-import { type LineString, type MultiPolygon, type Polygon } from "geojson";
 import { memo, useMemo, type FC } from "react";
-import { type RequireExactlyOne } from "type-fest";
 
 import { SketchType } from "../../../Map/Sketch/types";
 import { Position3d } from "../../../types";
 import { convertGeometryToPositionsArray, convertPolygonToHierarchyArray } from "../utils/polygon";
 
+import { DEFAULT_SKETCH_COLOR } from "./constants";
 import { createGeometry, GeometryOptions } from "./createGeometry";
 import ExtrudedControlPoints from "./ExtrudedControlPoints";
 import { ExtrudedPolygonEntity } from "./ExtrudedPolygonEntity";
 import { PolygonEntity } from "./PolygonEntity";
 import { PolylineEntity } from "./PolylineEntity";
+import SurfaceAddingPoints from "./SurfaceAddingPoints";
 import SurfaceControlPoints from "./SurfaceControlPoints";
 
-export type SketchComponentProps = RequireExactlyOne<
-  {
-    geometry?: LineString | Polygon | MultiPolygon | null;
-    geometryOptions?: {
-      type: SketchType;
-      controlPoints: readonly Position3d[];
-    } | null;
-    extrudedHeight?: number;
-    disableShadow?: boolean;
-    color?: string;
-    enableRelativeHeight?: boolean;
-  },
-  "geometry" | "geometryOptions"
->;
+export type SketchComponentProps = {
+  geometryOptions?: {
+    type: SketchType;
+    controlPoints: readonly Position3d[];
+  } | null;
+  extrudedHeight?: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  disableShadow?: boolean;
+  color?: string;
+  isEditing?: boolean;
+  catchedControlPointIndex?: number;
+  catchedExtrudedPoint?: boolean;
+  selectedControlPointIndex?: number;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
+  handleAddControlPoint?: (position: Position3d, index: number) => void;
+};
 
-const DEFAULT_SKETCH_COLOR = "#00bebe";
+export type ControlPointMouseEventHandler = (
+  index: number,
+  isExtrudedPoint: boolean,
+  type: "mousedown" | "click",
+) => void;
 
 const SketchComponent: FC<SketchComponentProps> = memo(
   ({
-    geometry,
     geometryOptions,
     extrudedHeight,
     disableShadow,
     color: stringColor,
-    enableRelativeHeight,
+    isEditing,
+    extrudedPoint,
+    centroidBasePoint,
+    centroidExtrudedPoint,
+    catchedControlPointIndex,
+    catchedExtrudedPoint,
+    selectedControlPointIndex,
+    handleControlPointMouseEvent,
+    handleAddControlPoint,
   }) => {
     const cartesianGeometryOptions: GeometryOptions | null = useMemo(
       () =>
@@ -55,9 +70,8 @@ const SketchComponent: FC<SketchComponentProps> = memo(
     );
 
     const g = useMemo(
-      () =>
-        geometry ?? (cartesianGeometryOptions ? createGeometry(cartesianGeometryOptions) : null),
-      [geometry, cartesianGeometryOptions],
+      () => (cartesianGeometryOptions ? createGeometry(cartesianGeometryOptions) : null),
+      [cartesianGeometryOptions],
     );
 
     const { positionsArray, hierarchyArray } = useMemo(() => {
@@ -82,31 +96,56 @@ const SketchComponent: FC<SketchComponentProps> = memo(
     return (
       <>
         {positionsArray?.map((positions, index) => (
-          <PolylineEntity key={index} dynamic positions={positions} color={color} />
+          <PolylineEntity
+            key={index}
+            dynamic
+            positions={positions}
+            color={color}
+            isEditing={isEditing}
+          />
         ))}
         {hierarchyArray?.map((hierarchy, index) => (
           <PolygonEntity key={index} dynamic hierarchy={hierarchy} color={color} />
         ))}
-        {cartesianGeometryOptions != null && extrudedHeight == null && (
-          <SurfaceControlPoints geometryOptions={cartesianGeometryOptions} color={color} />
+        {cartesianGeometryOptions != null && (!extrudedHeight || isEditing) && (
+          <SurfaceControlPoints
+            geometryOptions={cartesianGeometryOptions}
+            color={color}
+            isEditing={isEditing}
+            catchedControlPointIndex={catchedControlPointIndex}
+            selectedControlPointIndex={selectedControlPointIndex}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
+          />
+        )}
+        {cartesianGeometryOptions != null && isEditing && (
+          <SurfaceAddingPoints
+            geometryOptions={cartesianGeometryOptions}
+            isEditing={isEditing}
+            handleAddControlPoint={handleAddControlPoint}
+          />
         )}
-        {cartesianGeometryOptions != null && extrudedHeight != null && (
+        {cartesianGeometryOptions != null && extrudedHeight && (
           <ExtrudedControlPoints
             geometryOptions={cartesianGeometryOptions}
             extrudedHeight={extrudedHeight}
+            extrudedPoint={extrudedPoint}
+            centroidBasePoint={centroidBasePoint}
+            centroidExtrudedPoint={centroidExtrudedPoint}
+            catchedExtrudedPoint={catchedExtrudedPoint}
             color={color}
+            isEditing={isEditing}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
           />
         )}
-        {extrudedHeight != null &&
+        {extrudedHeight &&
           hierarchyArray?.map((hierarchy, index) => (
             <ExtrudedPolygonEntity
               key={index}
-              dynamic
               hierarchy={hierarchy}
               extrudedHeight={extrudedHeight}
               disableShadow={disableShadow}
               color={color}
-              enableRelativeHeight={enableRelativeHeight}
+              isEditing={isEditing}
             />
           ))}
       </>

package/src/engines/Cesium/SpatialId/CoordinateIndicator.tsx

@@ -0,0 +1,28 @@
+import { ClassificationType, Color, Rectangle } from "cesium";
+import { FC, memo, useMemo } from "react";
+import { Entity } from "resium";
+
+type SpatialIdComponentProps = {
+  wsen: [number, number, number, number];
+  color: string;
+};
+
+export const CoordinateIndicator: FC<SpatialIdComponentProps> = memo(({ wsen, color }) => {
+  const options = useMemo(
+    () => ({
+      rectangle: {
+        coordinates: Rectangle.fromDegrees(...wsen),
+        clampToGround: true,
+        fill: true,
+        outline: false,
+        material: Color.fromCssColorString(color),
+        classificationType: ClassificationType.BOTH,
+      },
+    }),
+    [wsen, color],
+  );
+
+  return <Entity {...options} />;
+});
+
+CoordinateIndicator.displayName = "SpatialIdSpace";

package/src/engines/Cesium/SpatialId/SpatialIdSpace.tsx

@@ -0,0 +1,33 @@
+import { ClassificationType, Color, HeightReference, Rectangle } from "cesium";
+import { FC, memo, useMemo } from "react";
+import { Entity } from "resium";
+
+import { SpatialIdSpaceType } from "../../../Map/SpatialId/types";
+
+type SpatialIdComponentProps = {
+  space: SpatialIdSpaceType;
+};
+
+export const SpatialIdSpace: FC<SpatialIdComponentProps> = memo(({ space }) => {
+  const options = useMemo(
+    () => ({
+      rectangle: {
+        coordinates: Rectangle.fromDegrees(...space.wsen),
+        height: space.height,
+        heightReference: HeightReference.NONE,
+        extrudedHeight: space.extrudedHeight,
+        clampToGround: false,
+        fill: true,
+        outline: true,
+        outlineColor: Color.fromCssColorString(space.outlineColor ?? ""),
+        material: Color.fromCssColorString(space.color ?? ""),
+        classificationType: ClassificationType.TERRAIN,
+      },
+    }),
+    [space],
+  );
+
+  return <Entity id={space.id} {...options} />;
+});
+
+SpatialIdSpace.displayName = "SpatialIdSpace";

package/src/engines/Cesium/SpatialId/VerticalSpaceIndicator.tsx

@@ -0,0 +1,32 @@
+import { ClassificationType, Color, Rectangle } from "cesium";
+import { FC, memo, useMemo } from "react";
+import { Entity } from "resium";
+
+import { VerticalSpaceIndicatorType } from "../../../Map/SpatialId/types";
+
+type VerticalSpaceIndicatorProps = {
+  indicator: VerticalSpaceIndicatorType;
+};
+
+export const VerticalSpaceIndicator: FC<VerticalSpaceIndicatorProps> = memo(({ indicator }) => {
+  const options = useMemo(
+    () => ({
+      rectangle: {
+        coordinates: Rectangle.fromDegrees(...indicator.wsen),
+        height: indicator.height,
+        extrudedHeight: indicator.extrudedHeight,
+        clampToGround: false,
+        fill: true,
+        outline: true,
+        outlineColor: Color.fromCssColorString(indicator.outlineColor),
+        material: Color.fromCssColorString(indicator.color),
+        classificationType: ClassificationType.TERRAIN,
+      },
+    }),
+    [indicator],
+  );
+
+  return <Entity {...options} />;
+});
+
+VerticalSpaceIndicator.displayName = "VerticalSpaceIndicator";

package/src/engines/Cesium/SpatialId/index.ts

@@ -0,0 +1,3 @@
+export * from "./SpatialIdSpace";
+export * from "./CoordinateIndicator";
+export * from "./VerticalSpaceIndicator";