@reearth/core 0.0.7-alpha.13 → 0.0.7-alpha.15

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

@@ -5,37 +5,42 @@ import {
   type PositionProperty,
   type Property,
 } from "@cesium/engine";
-import { useMemo, useRef, type FC } from "react";
+import { useCallback, useMemo, useRef, type FC } from "react";
 import { Entity } from "resium";
 import invariant from "tiny-invariant";
 
 import { useConstant } from "../../../utils";
 
-let image: HTMLCanvasElement | undefined;
+import { ADDING_POINT_COLOR, DEFAULT_EDIT_COLOR, SELECTED_EDIT_COLOR } from "./constants";
 
-function getImage(): HTMLCanvasElement {
-  if (image != null) {
-    return image;
-  }
-  image = document.createElement("canvas");
-  image.width = 16;
-  image.height = 16;
-  const context = image.getContext("2d");
-  invariant(context != null);
-  context.fillStyle = "white";
-  context.fillRect(3, 3, 10, 10);
-  context.strokeStyle = "black";
-  context.lineWidth = 2;
-  context.strokeRect(3, 3, 10, 10);
-  return image;
-}
+import { ControlPointMouseEventHandler } from ".";
+
+let drawPointImage: HTMLCanvasElement | undefined;
+let editPointImage: HTMLCanvasElement | undefined;
+let selectedPointImage: HTMLCanvasElement | undefined;
+let addingPointImage: HTMLCanvasElement | undefined;
 
 export interface ControlPointProps {
   position: Property | Cartesian3;
   clampToGround?: boolean;
+  index: number;
+  isEditing?: boolean;
+  isSelected?: boolean;
+  isAddingPoint?: boolean;
+  isExtrudedControlPoint?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround = false }) => {
+export const ControlPoint: FC<ControlPointProps> = ({
+  position,
+  clampToGround = false,
+  index,
+  isEditing,
+  isSelected,
+  isAddingPoint,
+  isExtrudedControlPoint,
+  handleControlPointMouseEvent,
+}) => {
   const positionRef = useRef(position);
   positionRef.current = position;
   const positionProperty = useConstant(
@@ -53,15 +58,114 @@ export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround =
     () => ({
       position: positionProperty,
       billboard: {
-        image: getImage(),
-        width: 8,
-        height: 8,
+        image: isEditing
+          ? isAddingPoint
+            ? getAddingPointImage()
+            : isSelected
+              ? getSelectedPointImage()
+              : getEditPointImage()
+          : getDrawPointImage(),
+        width: isEditing ? 16 : 8,
+        height: isEditing ? 16 : 8,
         heightReference: clampToGround ? HeightReference.CLAMP_TO_GROUND : HeightReference.NONE,
         disableDepthTestDistance: Infinity,
       },
     }),
-    [clampToGround, positionProperty],
+    [clampToGround, positionProperty, isAddingPoint, isEditing, isSelected],
   );
 
-  return <Entity {...options} />;
+  const handleMouseDown = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "mousedown");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  const handleMouseClick = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "click");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  return <Entity {...options} onMouseDown={handleMouseDown} onClick={handleMouseClick} />;
 };
+
+function getDrawPointImage(): HTMLCanvasElement {
+  if (drawPointImage != null) {
+    return drawPointImage;
+  }
+  drawPointImage = document.createElement("canvas");
+  drawPointImage.width = 16;
+  drawPointImage.height = 16;
+  const ctx = drawPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.fillStyle = "white";
+  ctx.fillRect(3, 3, 10, 10);
+  ctx.strokeStyle = "black";
+  ctx.lineWidth = 2;
+  ctx.strokeRect(3, 3, 10, 10);
+  return drawPointImage;
+}
+
+function getEditPointImage(): HTMLCanvasElement {
+  return getImage(editPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: DEFAULT_EDIT_COLOR,
+  });
+}
+
+function getSelectedPointImage(): HTMLCanvasElement {
+  return getImage(selectedPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: SELECTED_EDIT_COLOR,
+  });
+}
+
+function getAddingPointImage(): HTMLCanvasElement {
+  if (addingPointImage != null) {
+    return addingPointImage;
+  }
+  addingPointImage = document.createElement("canvas");
+  addingPointImage.width = 32;
+  addingPointImage.height = 32;
+  const ctx = addingPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(16, 16, 12, 0, 2 * Math.PI);
+  ctx.fillStyle = "white";
+  ctx.fill();
+  ctx.strokeStyle = ADDING_POINT_COLOR;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(16, 8);
+  ctx.lineTo(16, 24);
+  ctx.stroke();
+  ctx.moveTo(8, 16);
+  ctx.lineTo(24, 16);
+  ctx.stroke();
+  return addingPointImage;
+}
+
+function getImage(
+  canvas: HTMLCanvasElement | undefined,
+  options: {
+    size: number;
+    color: string;
+    strokeColor: string;
+  },
+): HTMLCanvasElement {
+  if (canvas != null) {
+    return canvas;
+  }
+  canvas = document.createElement("canvas");
+  canvas.width = options.size;
+  canvas.height = options.size;
+  const ctx = canvas.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(options.size / 2, options.size / 2, options.size / 2 - 4, 0, 2 * Math.PI);
+  ctx.fillStyle = options.color;
+  ctx.fill();
+  ctx.strokeStyle = options.strokeColor;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  return canvas;
+}

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

@@ -1,46 +1,91 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
-import { useCesium } from "resium";
-import invariant from "tiny-invariant";
 
+import { Position3d } from "../../../types";
+
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { ExtrudedMeasurement } from "./ExtrudedMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface ExtrudedControlPointsProps {
   geometryOptions: GeometryOptions;
   extrudedHeight: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  catchedExtrudedPoint?: boolean;
   color?: Color;
+  isEditing?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-const cartesianScratch = new Cartesian3();
-
 const ExtrudedControlPoints: FC<ExtrudedControlPointsProps> = memo(
-  ({ geometryOptions: { controlPoints }, extrudedHeight, color }) => {
-    const { viewer } = useCesium();
+  ({
+    geometryOptions: { controlPoints, type },
+    extrudedHeight,
+    color,
+    isEditing,
+    extrudedPoint: extrudedPointPosition,
+    centroidBasePoint: extrudeBasePointPosition,
+    centroidExtrudedPoint: extrudeControlPointPosition,
+    catchedExtrudedPoint,
+    handleControlPointMouseEvent,
+  }) => {
     const controlPoint = controlPoints[controlPoints.length - 1];
-    const normal = viewer?.scene?.globe.ellipsoid.geodeticSurfaceNormal(
-      controlPoint,
-      cartesianScratch,
-    );
 
-    invariant(normal !== undefined);
-    const extrudedPoint = Cartesian3.add(
-      controlPoint,
-      Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
-      cartesianScratch,
-    );
+    const extrudedPoint = extrudedPointPosition
+      ? new Cartesian3(...extrudedPointPosition)
+      : undefined;
+
+    const heightBasePoint = extrudeBasePointPosition
+      ? new Cartesian3(...extrudeBasePointPosition)
+      : undefined;
+
+    const centroidExtrudedPoint = extrudeControlPointPosition
+      ? new Cartesian3(...extrudeControlPointPosition)
+      : undefined;
 
     return (
       <>
-        <ControlPoint position={controlPoint} clampToGround />
-        <ControlPoint position={extrudedPoint} />
-        <ExtrudedMeasurement
-          a={controlPoint}
-          b={extrudedPoint}
-          extrudedHeight={extrudedHeight}
-          color={color}
-        />
+        {extrudedPoint && (
+          <>
+            <ControlPoint
+              index={-1}
+              position={extrudedPoint}
+              isEditing={isEditing}
+              isExtrudedControlPoint
+              handleControlPointMouseEvent={handleControlPointMouseEvent}
+            />
+            {(!isEditing || catchedExtrudedPoint) && (
+              <ExtrudedMeasurement
+                a={controlPoint}
+                b={extrudedPoint}
+                extrudedHeight={extrudedHeight}
+                color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
+                showLine={type !== "extrudedPolygon"}
+              />
+            )}
+          </>
+        )}
+        {heightBasePoint && (
+          <ControlPoint
+            index={-1}
+            position={heightBasePoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
+        {centroidExtrudedPoint && (
+          <ControlPoint
+            index={-1}
+            position={centroidExtrudedPoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
       </>
     );
   },

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

@@ -46,6 +46,7 @@ export interface ExtrudedMeasurementProps {
   b: Cartesian3;
   extrudedHeight: number;
   color?: Color;
+  showLine?: boolean;
 }
 
 export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
@@ -53,6 +54,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
   b,
   extrudedHeight,
   color,
+  showLine,
 }) => {
   const position = useConstant(() => new Cartesian3());
   return (
@@ -64,7 +66,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
             : `${(extrudedHeight / 1000).toFixed(1)} km`}
         </MeasurementText>
       </ScreenSpaceElement>
-      <MeasurementLine a={a} b={b} color={color} />
+      {showLine && <MeasurementLine a={a} b={b} color={color} />}
     </>
   );
 };

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;