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

package/src/Map/Sketch/index.tsx

@@ -7,7 +7,13 @@ import { InteractionModeType } from "../../Visualizer/interactionMode";
 import { EngineRef, Feature, LayerSelectionReason, LayersRef, SketchRef } from "../types";
 
 import useHooks from "./hooks";
-import { SketchComponentType, SketchEventProps, SketchFeature, SketchType } from "./types";
+import {
+  SketchComponentType,
+  SketchEditingFeature,
+  SketchEventProps,
+  SketchFeature,
+  SketchType,
+} from "./types";
 
 export * from "./types";
 
@@ -29,7 +35,14 @@ export type SketchProps = {
   onSketchTypeChange?: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
   onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
   onSketchPluginFeatureCreate?: (props: SketchEventProps) => void;
+  onSketchFeatureUpdate?: (feature: SketchFeature | null) => void;
+  onSketchPluginFeatureUpdate?: (props: SketchEventProps) => void;
+  onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
+  onSketchPluginFeatureDelete?: (props: { layerId: string; featureId: string }) => void;
   onLayerSelect?: OnLayerSelectType;
+  sketchEditingFeature?: SketchEditingFeature;
+  onSketchEditFeature?: (feature: SketchEditingFeature | undefined) => void;
+  onMount?: () => void;
 };
 
 const Sketch: ForwardRefRenderFunction<SketchRef, SketchProps> = (
@@ -43,23 +56,51 @@ const Sketch: ForwardRefRenderFunction<SketchRef, SketchProps> = (
     onSketchTypeChange,
     onSketchFeatureCreate,
     onSketchPluginFeatureCreate,
+    onSketchFeatureUpdate,
+    onSketchPluginFeatureUpdate,
+    onSketchFeatureDelete,
+    onSketchPluginFeatureDelete,
     onLayerSelect,
+    sketchEditingFeature,
+    onSketchEditFeature,
+    onMount,
   },
   ref,
 ) => {
-  const { state, extrudedHeight, geometryOptions, color, disableShadow, enableRelativeHeight } =
-    useHooks({
-      ref,
-      layersRef,
-      engineRef,
-      interactionMode,
-      selectedFeature,
-      overrideInteractionMode,
-      onSketchTypeChange,
-      onSketchFeatureCreate,
-      onSketchPluginFeatureCreate,
-      onLayerSelect,
-    });
+  const {
+    state,
+    isEditing,
+    catchedControlPointIndex,
+    catchedExtrudedPoint,
+    extrudedHeight,
+    extrudedPoint,
+    centroidBasePoint,
+    centroidExtrudedPoint,
+    geometryOptions,
+    color,
+    disableShadow,
+    handleControlPointMouseEvent,
+    handleAddControlPoint,
+    selectedControlPointIndex,
+  } = useHooks({
+    ref,
+    layersRef,
+    engineRef,
+    interactionMode,
+    selectedFeature,
+    overrideInteractionMode,
+    onSketchTypeChange,
+    onSketchFeatureCreate,
+    onSketchPluginFeatureCreate,
+    onSketchFeatureUpdate,
+    onSketchPluginFeatureUpdate,
+    onSketchFeatureDelete,
+    onSketchPluginFeatureDelete,
+    onLayerSelect,
+    sketchEditingFeature,
+    onSketchEditFeature,
+    onMount,
+  });
   if (state.matches("idle")) {
     return null;
   }
@@ -68,10 +109,16 @@ const Sketch: ForwardRefRenderFunction<SketchRef, SketchProps> = (
       geometryOptions={geometryOptions}
       color={color}
       disableShadow={disableShadow}
-      enableRelativeHeight={enableRelativeHeight}
-      {...(state.matches("extruding") && {
-        extrudedHeight,
-      })}
+      isEditing={isEditing}
+      catchedControlPointIndex={catchedControlPointIndex}
+      catchedExtrudedPoint={catchedExtrudedPoint}
+      extrudedHeight={extrudedHeight}
+      extrudedPoint={extrudedPoint}
+      centroidBasePoint={centroidBasePoint}
+      centroidExtrudedPoint={centroidExtrudedPoint}
+      handleControlPointMouseEvent={handleControlPointMouseEvent}
+      handleAddControlPoint={handleAddControlPoint}
+      selectedControlPointIndex={selectedControlPointIndex}
     />
   ) : null;
 };

package/src/Map/Sketch/sketchMachine.ts

@@ -1,5 +1,4 @@
 // TODO: Refactor: move cesium related code to engine.
-// import { Cartesian2, Cartesian3 } from "cesium";
 import invariant from "tiny-invariant";
 import { createMachine, type StateFrom } from "xstate";
 
@@ -24,15 +23,38 @@ export type EventObject =
       pointerPosition: Position2d;
       controlPoint: Position3d;
     })
+  | ((
+      | { type: "EDIT_MARKER" }
+      | { type: "EDIT_POLYLINE" }
+      | { type: "EDIT_CIRCLE" }
+      | { type: "EDIT_RECTANGLE" }
+      | { type: "EDIT_POLYGON" }
+      | { type: "EDIT_EXTRUDED_CIRCLE" }
+      | { type: "EDIT_EXTRUDED_RECTANGLE" }
+      | { type: "EDIT_EXTRUDED_POLYGON" }
+      | { type: "CATCH" }
+      | { type: "UPDATE" }
+      | { type: "MOVE" }
+      | { type: "RELEASE" }
+    ) & {
+      extrudedHeight?: number;
+      controlPoints: Position3d[];
+      catchedControlPointIndex?: number;
+      catchedExtrudedPoint?: boolean;
+    })
   | { type: "CREATE" }
   | { type: "CANCEL" }
-  | { type: "ABORT" };
+  | { type: "ABORT" }
+  | { type: "EXIT_EDIT" };
 
-interface Context {
+export interface Context {
   lastPointerPosition?: Position2d;
   lastControlPoint?: Position3d;
   type?: SketchType;
   controlPoints?: Position3d[];
+  catchedControlPointIndex?: number;
+  catchedExtrudedPoint?: boolean;
+  originalControlPoint?: Position3d;
 }
 
 export function createSketchMachine() {
@@ -76,6 +98,38 @@ export function createSketchMachine() {
               target: "drawing.extrudedPolygon",
               actions: ["createExtrudedPolygon"],
             },
+            EDIT_MARKER: {
+              target: "editing.marker",
+              actions: ["editMarker"],
+            },
+            EDIT_POLYLINE: {
+              target: "editing.polyline",
+              actions: ["editPolyline"],
+            },
+            EDIT_CIRCLE: {
+              target: "editing.circle",
+              actions: ["editCircle"],
+            },
+            EDIT_RECTANGLE: {
+              target: "editing.rectangle",
+              actions: ["editRectangle"],
+            },
+            EDIT_POLYGON: {
+              target: "editing.polygon",
+              actions: ["editPolygon"],
+            },
+            EDIT_EXTRUDED_CIRCLE: {
+              target: "editing.circle",
+              actions: ["editExtrudedCircle"],
+            },
+            EDIT_EXTRUDED_RECTANGLE: {
+              target: "editing.extrudedRectangle",
+              actions: ["editExtrudedRectangle"],
+            },
+            EDIT_EXTRUDED_POLYGON: {
+              target: "editing.extrudedPolygon",
+              actions: ["editExtrudedPolygon"],
+            },
           },
         },
         drawing: {
@@ -138,7 +192,7 @@ export function createSketchMachine() {
                       {
                         target: "#sketch.extruding",
                         cond: "willRectangleComplete",
-                        actions: ["pushPosition"],
+                        actions: ["pushPosition", "recordOriginalControlPoint"],
                       },
                       {
                         target: "vertex",
@@ -224,6 +278,247 @@ export function createSketchMachine() {
             },
           },
         },
+        editing: {
+          states: {
+            marker: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            polyline: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      internal: true,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            circle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            rectangle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            polygon: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      internal: true,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedCircle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedRectangle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedPolygon: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      internal: true,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      internal: true,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+          },
+          on: {
+            EXIT_EDIT: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+          },
+        },
       },
       schema: {
         events: {} as unknown as EventObject,
@@ -249,6 +544,11 @@ export function createSketchMachine() {
           context.type = "marker";
           context.controlPoints = [controlPoint];
         },
+        editMarker: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "marker";
+          context.controlPoints = event.controlPoints;
+        },
         createPolyline: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -256,6 +556,11 @@ export function createSketchMachine() {
           context.type = "polyline";
           context.controlPoints = [controlPoint];
         },
+        editPolyline: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "polyline";
+          context.controlPoints = event.controlPoints;
+        },
         createCircle: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -263,6 +568,11 @@ export function createSketchMachine() {
           context.type = "circle";
           context.controlPoints = [controlPoint];
         },
+        editCircle: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "circle";
+          context.controlPoints = event.controlPoints;
+        },
         createRectangle: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -270,6 +580,11 @@ export function createSketchMachine() {
           context.type = "rectangle";
           context.controlPoints = [controlPoint];
         },
+        editRectangle: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "rectangle";
+          context.controlPoints = event.controlPoints;
+        },
         createPolygon: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -277,6 +592,11 @@ export function createSketchMachine() {
           context.type = "polygon";
           context.controlPoints = [controlPoint];
         },
+        editPolygon: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "polygon";
+          context.controlPoints = event.controlPoints;
+        },
         createExtrudedCircle: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -284,6 +604,11 @@ export function createSketchMachine() {
           context.type = "extrudedCircle";
           context.controlPoints = [controlPoint];
         },
+        editExtrudedCircle: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "extrudedCircle";
+          context.controlPoints = event.controlPoints;
+        },
         createExtrudedRectangle: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -291,6 +616,11 @@ export function createSketchMachine() {
           context.type = "extrudedRectangle";
           context.controlPoints = [controlPoint];
         },
+        editExtrudedRectangle: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "extrudedRectangle";
+          context.controlPoints = event.controlPoints;
+        },
         createExtrudedPolygon: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -298,6 +628,11 @@ export function createSketchMachine() {
           context.type = "extrudedPolygon";
           context.controlPoints = [controlPoint];
         },
+        editExtrudedPolygon: (context, event) => {
+          context.lastControlPoint = undefined;
+          context.type = "extrudedPolygon";
+          context.controlPoints = event.controlPoints;
+        },
         pushPosition: (context, event) => {
           context.lastPointerPosition = [...event.pointerPosition];
           const controlPoint = [...event.controlPoint] as Position3d;
@@ -313,6 +648,26 @@ export function createSketchMachine() {
           delete context.lastControlPoint;
           delete context.type;
           delete context.controlPoints;
+          delete context.catchedControlPointIndex;
+          delete context.catchedExtrudedPoint;
+          delete context.originalControlPoint;
+        },
+        catchControlPoint: (context, event) => {
+          context.catchedControlPointIndex = event.catchedControlPointIndex;
+          context.catchedExtrudedPoint = event.catchedExtrudedPoint;
+        },
+        moveControlPoint: (context, event) => {
+          context.controlPoints = event.controlPoints;
+        },
+        releaseControlPoint: context => {
+          delete context.catchedControlPointIndex;
+          delete context.catchedExtrudedPoint;
+        },
+        updateControlPoints: (context, event) => {
+          context.controlPoints = event.controlPoints;
+        },
+        recordOriginalControlPoint: (context, event) => {
+          context.originalControlPoint = [...event.controlPoint] as Position3d;
         },
       },
     },

package/src/Map/Sketch/sketchMachine.typegen.ts

@@ -13,7 +13,8 @@ export interface Typegen0 {
     services: never;
   };
   eventsCausingActions: {
-    clearDrawing: "ABORT" | "CANCEL" | "CREATE";
+    catchControlPoint: "CATCH";
+    clearDrawing: "ABORT" | "CANCEL" | "CREATE" | "EXIT_EDIT";
     createCircle: "CIRCLE";
     createExtrudedCircle: "EXTRUDED_CIRCLE";
     createExtrudedPolygon: "EXTRUDED_POLYGON";
@@ -22,8 +23,20 @@ export interface Typegen0 {
     createPolygon: "POLYGON";
     createPolyline: "POLYLINE";
     createRectangle: "RECTANGLE";
+    editCircle: "EDIT_CIRCLE";
+    editExtrudedCircle: "EDIT_EXTRUDED_CIRCLE";
+    editExtrudedPolygon: "EDIT_EXTRUDED_POLYGON";
+    editExtrudedRectangle: "EDIT_EXTRUDED_RECTANGLE";
+    editMarker: "EDIT_MARKER";
+    editPolygon: "EDIT_POLYGON";
+    editPolyline: "EDIT_POLYLINE";
+    editRectangle: "EDIT_RECTANGLE";
+    moveControlPoint: "MOVE";
     popPosition: "CANCEL";
     pushPosition: "EXTRUDE" | "NEXT";
+    recordOriginalControlPoint: "NEXT";
+    releaseControlPoint: "RELEASE";
+    updateControlPoints: "UPDATE";
   };
   eventsCausingDelays: {};
   eventsCausingGuards: {
@@ -47,6 +60,31 @@ export interface Typegen0 {
     | "drawing.polyline.vertex"
     | "drawing.rectangle"
     | "drawing.rectangle.vertex"
+    | "editing"
+    | "editing.circle"
+    | "editing.circle.moving"
+    | "editing.circle.waiting"
+    | "editing.extrudedCircle"
+    | "editing.extrudedCircle.moving"
+    | "editing.extrudedCircle.waiting"
+    | "editing.extrudedPolygon"
+    | "editing.extrudedPolygon.moving"
+    | "editing.extrudedPolygon.waiting"
+    | "editing.extrudedRectangle"
+    | "editing.extrudedRectangle.moving"
+    | "editing.extrudedRectangle.waiting"
+    | "editing.marker"
+    | "editing.marker.moving"
+    | "editing.marker.waiting"
+    | "editing.polygon"
+    | "editing.polygon.moving"
+    | "editing.polygon.waiting"
+    | "editing.polyline"
+    | "editing.polyline.moving"
+    | "editing.polyline.waiting"
+    | "editing.rectangle"
+    | "editing.rectangle.moving"
+    | "editing.rectangle.waiting"
     | "extruding"
     | "idle"
     | {
@@ -67,6 +105,25 @@ export interface Typegen0 {
               polyline?: "vertex";
               rectangle?: "vertex";
             };
+        editing?:
+          | "circle"
+          | "extrudedCircle"
+          | "extrudedPolygon"
+          | "extrudedRectangle"
+          | "marker"
+          | "polygon"
+          | "polyline"
+          | "rectangle"
+          | {
+              circle?: "moving" | "waiting";
+              extrudedCircle?: "moving" | "waiting";
+              extrudedPolygon?: "moving" | "waiting";
+              extrudedRectangle?: "moving" | "waiting";
+              marker?: "moving" | "waiting";
+              polygon?: "moving" | "waiting";
+              polyline?: "moving" | "waiting";
+              rectangle?: "moving" | "waiting";
+            };
       };
   tags: never;
 }