@reearth/core 0.0.7-alpha.6 → 0.0.7-alpha.60

package/src/Map/Sketch/sketchMachine.ts

@@ -1,7 +1,6 @@
 // TODO: Refactor: move cesium related code to engine.
-// import { Cartesian2, Cartesian3 } from "cesium";
 import invariant from "tiny-invariant";
-import { createMachine, type StateFrom } from "xstate";
+import { createMachine, assign, type StateFrom } from "xstate";
 
 import { type SketchType } from "./types";
 
@@ -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,9 +98,42 @@ 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: {
+          initial: "marker",
           states: {
             marker: {
               initial: "vertex",
@@ -93,7 +148,7 @@ export function createSketchMachine() {
                   on: {
                     NEXT: {
                       target: "vertex",
-                      internal: true,
+                      reenter: false,
                       actions: ["pushPosition"],
                     },
                   },
@@ -121,7 +176,7 @@ export function createSketchMachine() {
                     NEXT: [
                       {
                         target: "vertex",
-                        internal: true,
+                        reenter: false,
                         actions: ["pushPosition"],
                       },
                     ],
@@ -137,12 +192,12 @@ export function createSketchMachine() {
                     NEXT: [
                       {
                         target: "#sketch.extruding",
-                        cond: "willRectangleComplete",
-                        actions: ["pushPosition"],
+                        guard: "willRectangleComplete",
+                        actions: ["pushPosition", "recordOriginalControlPoint"],
                       },
                       {
                         target: "vertex",
-                        internal: true,
+                        reenter: false,
                         actions: ["pushPosition"],
                       },
                     ],
@@ -157,7 +212,7 @@ export function createSketchMachine() {
                   on: {
                     NEXT: {
                       target: "vertex",
-                      internal: true,
+                      reenter: false,
                       actions: ["pushPosition"],
                     },
                   },
@@ -171,7 +226,7 @@ export function createSketchMachine() {
                   on: {
                     NEXT: {
                       target: "vertex",
-                      internal: true,
+                      reenter: false,
                       actions: ["pushPosition"],
                     },
                     EXTRUDE: {
@@ -190,7 +245,7 @@ export function createSketchMachine() {
             CANCEL: [
               {
                 target: ".history",
-                cond: "canPopPosition",
+                guard: "canPopPosition",
                 actions: ["popPosition"],
               },
               {
@@ -224,99 +279,369 @@ export function createSketchMachine() {
             },
           },
         },
-      },
-      schema: {
-        events: {} as unknown as EventObject,
-      },
-      predictableActionArguments: true,
-      preserveActionOrder: true,
-      tsTypes: {} as import("./sketchMachine.typegen").Typegen0,
-    },
-    {
-      guards: {
-        canPopPosition: context => {
-          return context.controlPoints != null && context.controlPoints.length > 1;
-        },
-        willRectangleComplete: context => {
-          return context.controlPoints != null && context.controlPoints.length === 2;
-        },
-      },
-      actions: {
-        createMarker: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "marker";
-          context.controlPoints = [controlPoint];
-        },
-        createPolyline: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "polyline";
-          context.controlPoints = [controlPoint];
-        },
-        createCircle: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "circle";
-          context.controlPoints = [controlPoint];
-        },
-        createRectangle: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "rectangle";
-          context.controlPoints = [controlPoint];
-        },
-        createPolygon: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "polygon";
-          context.controlPoints = [controlPoint];
-        },
-        createExtrudedCircle: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "extrudedCircle";
-          context.controlPoints = [controlPoint];
-        },
-        createExtrudedRectangle: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "extrudedRectangle";
-          context.controlPoints = [controlPoint];
-        },
-        createExtrudedPolygon: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.type = "extrudedPolygon";
-          context.controlPoints = [controlPoint];
-        },
-        pushPosition: (context, event) => {
-          context.lastPointerPosition = [...event.pointerPosition];
-          const controlPoint = [...event.controlPoint] as Position3d;
-          context.lastControlPoint = controlPoint;
-          context.controlPoints?.push(controlPoint);
-        },
-        popPosition: context => {
-          invariant(context.controlPoints != null);
-          invariant(context.controlPoints.length > 1);
-          context.controlPoints.pop();
-        },
-        clearDrawing: context => {
-          delete context.lastControlPoint;
-          delete context.type;
-          delete context.controlPoints;
+        editing: {
+          initial: "marker",
+          states: {
+            marker: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            polyline: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      reenter: false,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            circle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            rectangle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            polygon: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      reenter: false,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedCircle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedRectangle: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedPolygon: {
+              initial: "waiting",
+              states: {
+                waiting: {
+                  on: {
+                    CATCH: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["catchControlPoint"],
+                    },
+                    UPDATE: {
+                      target: "waiting",
+                      reenter: false,
+                      actions: ["updateControlPoints"],
+                    },
+                  },
+                },
+                moving: {
+                  on: {
+                    MOVE: {
+                      target: "moving",
+                      reenter: false,
+                      actions: ["moveControlPoint"],
+                    },
+                    RELEASE: {
+                      target: "waiting",
+                      actions: ["releaseControlPoint"],
+                    },
+                  },
+                },
+              },
+            },
+          },
+          on: {
+            EXIT_EDIT: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+          },
         },
       },
     },
-  );
+  ).provide({
+    guards: {
+      canPopPosition: ({ context }) => context.controlPoints != null && context.controlPoints.length > 1,
+      willRectangleComplete: ({ context }) => context.controlPoints != null && context.controlPoints.length === 2,
+    },
+    actions: {
+      createMarker: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "MARKER" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "marker" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editMarker: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_MARKER" }>;
+        return { lastControlPoint: undefined, type: "marker" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createPolyline: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "POLYLINE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "polyline" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editPolyline: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_POLYLINE" }>;
+        return { lastControlPoint: undefined, type: "polyline" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createCircle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "CIRCLE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "circle" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editCircle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_CIRCLE" }>;
+        return { lastControlPoint: undefined, type: "circle" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createRectangle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "RECTANGLE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "rectangle" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editRectangle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_RECTANGLE" }>;
+        return { lastControlPoint: undefined, type: "rectangle" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createPolygon: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "POLYGON" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "polygon" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editPolygon: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_POLYGON" }>;
+        return { lastControlPoint: undefined, type: "polygon" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createExtrudedCircle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EXTRUDED_CIRCLE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "extrudedCircle" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editExtrudedCircle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_EXTRUDED_CIRCLE" }>;
+        return { lastControlPoint: undefined, type: "extrudedCircle" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createExtrudedRectangle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EXTRUDED_RECTANGLE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "extrudedRectangle" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editExtrudedRectangle: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_EXTRUDED_RECTANGLE" }>;
+        return { lastControlPoint: undefined, type: "extrudedRectangle" as SketchType, controlPoints: e.controlPoints };
+      }),
+      createExtrudedPolygon: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EXTRUDED_POLYGON" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return { lastPointerPosition: [...e.pointerPosition] as Position2d, lastControlPoint: controlPoint, type: "extrudedPolygon" as SketchType, controlPoints: [controlPoint] };
+      }),
+      editExtrudedPolygon: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "EDIT_EXTRUDED_POLYGON" }>;
+        return { lastControlPoint: undefined, type: "extrudedPolygon" as SketchType, controlPoints: e.controlPoints };
+      }),
+      pushPosition: assign(({ context, event }) => {
+        const e = event as Extract<EventObject, { type: "NEXT" | "EXTRUDE" }>;
+        const controlPoint = [...e.controlPoint] as Position3d;
+        return {
+          lastPointerPosition: [...e.pointerPosition] as Position2d,
+          lastControlPoint: controlPoint,
+          controlPoints: [...(context.controlPoints ?? []), controlPoint],
+        };
+      }),
+      popPosition: assign(({ context }) => {
+        invariant(context.controlPoints != null);
+        invariant(context.controlPoints.length > 1);
+        return { controlPoints: context.controlPoints.slice(0, -1) };
+      }),
+      clearDrawing: assign(() => ({
+        lastControlPoint: undefined,
+        type: undefined,
+        controlPoints: undefined,
+        catchedControlPointIndex: undefined,
+        catchedExtrudedPoint: undefined,
+        originalControlPoint: undefined,
+      })),
+      catchControlPoint: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "CATCH" }>;
+        return { catchedControlPointIndex: e.catchedControlPointIndex, catchedExtrudedPoint: e.catchedExtrudedPoint };
+      }),
+      moveControlPoint: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "MOVE" }>;
+        return { controlPoints: e.controlPoints };
+      }),
+      releaseControlPoint: assign(() => ({ catchedControlPointIndex: undefined, catchedExtrudedPoint: undefined })),
+      updateControlPoints: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "UPDATE" }>;
+        return { controlPoints: e.controlPoints };
+      }),
+      recordOriginalControlPoint: assign(({ event }) => {
+        const e = event as Extract<EventObject, { type: "NEXT" }>;
+        return { originalControlPoint: [...e.controlPoint] as Position3d };
+      }),
+    },
+  });
 }
 
 export type SketchMachine = ReturnType<typeof createSketchMachine>;