@reearth/core 0.0.1

package/src/Map/Sketch/index.tsx

@@ -0,0 +1,101 @@
+// Reference: Sketch feature is basically referenced from https://github.com/takram-design-engineering/plateau-view/blob/main/libs/sketch/src/SketchTool.tsx
+
+import { type LineString, type MultiPolygon, type Polygon } from "geojson";
+import { ComponentType, ForwardRefRenderFunction, RefObject, forwardRef } from "react";
+import { RequireExactlyOne } from "type-fest";
+
+import { ComputedLayer, SelectedFeatureInfo } from "../../mantle";
+import { Position3d } from "../../types";
+import { InteractionModeType } from "../../Visualizer/interactionMode";
+import { EngineRef, Feature, LayerSelectionReason, LayersRef, SketchRef } from "../types";
+
+import useHooks from "./hooks";
+import { SketchEventProps, SketchFeature, SketchType } from "./types";
+
+export * from "./types";
+
+export type SketchComponentType = ComponentType<SketchComponentProps>;
+
+type GeometryOptions = {
+  type: SketchType;
+  controlPoints: readonly Position3d[];
+};
+
+type SketchComponentProps = RequireExactlyOne<
+  {
+    geometry?: LineString | Polygon | MultiPolygon | null;
+    geometryOptions?: GeometryOptions | null;
+    extrudedHeight?: number;
+    disableShadow?: boolean;
+    enableRelativeHeight?: boolean;
+    color?: string;
+  },
+  "geometry" | "geometryOptions"
+>;
+
+export type OnLayerSelectType = (
+  layerId: string | undefined,
+  featureId: string | undefined,
+  layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+  reason: LayerSelectionReason | undefined,
+  info: SelectedFeatureInfo | undefined,
+) => void;
+
+export type SketchProps = {
+  layersRef: RefObject<LayersRef>;
+  engineRef: RefObject<EngineRef>;
+  SketchComponent?: SketchComponentType;
+  selectedFeature?: Feature;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onSketchTypeChange?: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
+  onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onSketchPluginFeatureCreate?: (props: SketchEventProps) => void;
+  onLayerSelect?: OnLayerSelectType;
+};
+
+const Sketch: ForwardRefRenderFunction<SketchRef, SketchProps> = (
+  {
+    layersRef,
+    engineRef,
+    interactionMode = "default",
+    selectedFeature,
+    SketchComponent,
+    overrideInteractionMode,
+    onSketchTypeChange,
+    onSketchFeatureCreate,
+    onSketchPluginFeatureCreate,
+    onLayerSelect,
+  },
+  ref,
+) => {
+  const { state, extrudedHeight, geometryOptions, color, disableShadow, enableRelativeHeight } =
+    useHooks({
+      ref,
+      layersRef,
+      engineRef,
+      interactionMode,
+      selectedFeature,
+      overrideInteractionMode,
+      onSketchTypeChange,
+      onSketchFeatureCreate,
+      onSketchPluginFeatureCreate,
+      onLayerSelect,
+    });
+  if (state.matches("idle")) {
+    return null;
+  }
+  return SketchComponent ? (
+    <SketchComponent
+      geometryOptions={geometryOptions}
+      color={color}
+      disableShadow={disableShadow}
+      enableRelativeHeight={enableRelativeHeight}
+      {...(state.matches("extruding") && {
+        extrudedHeight,
+      })}
+    />
+  ) : null;
+};
+
+export default forwardRef(Sketch);

package/src/Map/Sketch/preset.ts

@@ -0,0 +1,29 @@
+import { SketchAppearance } from "./types";
+
+export const PRESET_APPEARANCE: SketchAppearance = {
+  marker: {
+    height: 0,
+    heightReference: "clamp",
+    hideIndicator: true,
+    selectedFeatureColor: "#00bebe",
+  },
+  polygon: {
+    classificationType: "terrain",
+    extrudedHeight: {
+      expression: "${extrudedHeight}",
+    },
+    fillColor: "#FFFFFF",
+    heightReference: "clamp",
+    hideIndicator: true,
+    selectedFeatureColor: "#00bebe",
+    shadows: "enabled",
+  },
+  polyline: {
+    clampToGround: true,
+    hideIndicator: true,
+    selectedFeatureColor: "#00bebe",
+    shadows: "enabled",
+    strokeColor: "#FFFFFF",
+    strokeWidth: 2,
+  },
+};

package/src/Map/Sketch/sketchMachine.ts

@@ -0,0 +1,323 @@
+// 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 { type SketchType } from "./types";
+
+export type Position2d = [number, number];
+export type Position3d = [number, number, number];
+
+export type EventObject =
+  | ((
+      | { type: "MARKER" }
+      | { type: "POLYLINE" }
+      | { type: "CIRCLE" }
+      | { type: "RECTANGLE" }
+      | { type: "POLYGON" }
+      | { type: "EXTRUDED_CIRCLE" }
+      | { type: "EXTRUDED_RECTANGLE" }
+      | { type: "EXTRUDED_POLYGON" }
+      | { type: "NEXT" }
+      | { type: "EXTRUDE" }
+    ) & {
+      pointerPosition: Position2d;
+      controlPoint: Position3d;
+    })
+  | { type: "CREATE" }
+  | { type: "CANCEL" }
+  | { type: "ABORT" };
+
+interface Context {
+  lastPointerPosition?: Position2d;
+  lastControlPoint?: Position3d;
+  type?: SketchType;
+  controlPoints?: Position3d[];
+}
+
+export function createSketchMachine() {
+  return createMachine(
+    {
+      id: "sketch",
+      initial: "idle",
+      context: {} as Context,
+      states: {
+        idle: {
+          on: {
+            MARKER: {
+              target: "drawing.marker",
+              actions: ["createMarker"],
+            },
+            POLYLINE: {
+              target: "drawing.polyline",
+              actions: ["createPolyline"],
+            },
+            CIRCLE: {
+              target: "drawing.circle",
+              actions: ["createCircle"],
+            },
+            RECTANGLE: {
+              target: "drawing.rectangle",
+              actions: ["createRectangle"],
+            },
+            POLYGON: {
+              target: "drawing.polygon",
+              actions: ["createPolygon"],
+            },
+            EXTRUDED_CIRCLE: {
+              target: "drawing.circle",
+              actions: ["createExtrudedCircle"],
+            },
+            EXTRUDED_RECTANGLE: {
+              target: "drawing.extrudedRectangle",
+              actions: ["createExtrudedRectangle"],
+            },
+            EXTRUDED_POLYGON: {
+              target: "drawing.extrudedPolygon",
+              actions: ["createExtrudedPolygon"],
+            },
+          },
+        },
+        drawing: {
+          states: {
+            marker: {
+              initial: "vertex",
+              states: {
+                vertex: {},
+              },
+            },
+            polyline: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: {
+                      target: "vertex",
+                      internal: true,
+                      actions: ["pushPosition"],
+                    },
+                  },
+                },
+              },
+            },
+            circle: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: {
+                      target: "#sketch.extruding",
+                      actions: ["pushPosition"],
+                    },
+                  },
+                },
+              },
+            },
+            rectangle: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: [
+                      {
+                        target: "vertex",
+                        internal: true,
+                        actions: ["pushPosition"],
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+            extrudedRectangle: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: [
+                      {
+                        target: "#sketch.extruding",
+                        cond: "willRectangleComplete",
+                        actions: ["pushPosition"],
+                      },
+                      {
+                        target: "vertex",
+                        internal: true,
+                        actions: ["pushPosition"],
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+            polygon: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: {
+                      target: "vertex",
+                      internal: true,
+                      actions: ["pushPosition"],
+                    },
+                  },
+                },
+              },
+            },
+            extrudedPolygon: {
+              initial: "vertex",
+              states: {
+                vertex: {
+                  on: {
+                    NEXT: {
+                      target: "vertex",
+                      internal: true,
+                      actions: ["pushPosition"],
+                    },
+                    EXTRUDE: {
+                      target: "#sketch.extruding",
+                      actions: ["pushPosition"],
+                    },
+                  },
+                },
+              },
+            },
+            history: {
+              type: "history",
+            },
+          },
+          on: {
+            CANCEL: [
+              {
+                target: ".history",
+                cond: "canPopPosition",
+                actions: ["popPosition"],
+              },
+              {
+                target: "idle",
+                actions: ["clearDrawing"],
+              },
+            ],
+            ABORT: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+            CREATE: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+          },
+        },
+        extruding: {
+          on: {
+            CREATE: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+            CANCEL: {
+              target: "drawing.history",
+              actions: ["popPosition"],
+            },
+            ABORT: {
+              target: "idle",
+              actions: ["clearDrawing"],
+            },
+          },
+        },
+      },
+      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;
+        },
+      },
+    },
+  );
+}
+
+export type SketchMachine = ReturnType<typeof createSketchMachine>;
+export type SketchMachineState = StateFrom<SketchMachine>;

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

@@ -0,0 +1,72 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  "@@xstate/typegen": true;
+  internalEvents: {
+    "xstate.init": { type: "xstate.init" };
+  };
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    delays: never;
+    guards: never;
+    services: never;
+  };
+  eventsCausingActions: {
+    clearDrawing: "ABORT" | "CANCEL" | "CREATE";
+    createCircle: "CIRCLE";
+    createExtrudedCircle: "EXTRUDED_CIRCLE";
+    createExtrudedPolygon: "EXTRUDED_POLYGON";
+    createExtrudedRectangle: "EXTRUDED_RECTANGLE";
+    createMarker: "MARKER";
+    createPolygon: "POLYGON";
+    createPolyline: "POLYLINE";
+    createRectangle: "RECTANGLE";
+    popPosition: "CANCEL";
+    pushPosition: "EXTRUDE" | "NEXT";
+  };
+  eventsCausingDelays: {};
+  eventsCausingGuards: {
+    canPopPosition: "CANCEL";
+    willRectangleComplete: "NEXT";
+  };
+  eventsCausingServices: {};
+  matchesStates:
+    | "drawing"
+    | "drawing.circle"
+    | "drawing.circle.vertex"
+    | "drawing.extrudedPolygon"
+    | "drawing.extrudedPolygon.vertex"
+    | "drawing.extrudedRectangle"
+    | "drawing.extrudedRectangle.vertex"
+    | "drawing.marker"
+    | "drawing.marker.vertex"
+    | "drawing.polygon"
+    | "drawing.polygon.vertex"
+    | "drawing.polyline"
+    | "drawing.polyline.vertex"
+    | "drawing.rectangle"
+    | "drawing.rectangle.vertex"
+    | "extruding"
+    | "idle"
+    | {
+        drawing?:
+          | "circle"
+          | "extrudedPolygon"
+          | "extrudedRectangle"
+          | "marker"
+          | "polygon"
+          | "polyline"
+          | "rectangle"
+          | {
+              circle?: "vertex";
+              extrudedPolygon?: "vertex";
+              extrudedRectangle?: "vertex";
+              marker?: "vertex";
+              polygon?: "vertex";
+              polyline?: "vertex";
+              rectangle?: "vertex";
+            };
+      };
+  tags: never;
+}

package/src/Map/Sketch/types.ts

@@ -0,0 +1,52 @@
+import { Feature as GeojsonFeature, MultiPolygon, Polygon, Point, LineString } from "geojson";
+
+import { LayerAppearanceTypes } from "../../mantle";
+import { Position3d } from "../../types";
+
+export type SketchType =
+  | "marker"
+  | "polyline"
+  | "circle"
+  | "rectangle"
+  | "polygon"
+  | "extrudedCircle"
+  | "extrudedRectangle"
+  | "extrudedPolygon";
+
+export type GeometryOptionsXYZ = {
+  type: SketchType;
+  controlPoints: Position3d[];
+};
+
+export type SketchFeature = GeojsonFeature<
+  Polygon | MultiPolygon | Point | LineString,
+  {
+    id: string;
+    type: SketchType;
+    positions: readonly Position3d[];
+    extrudedHeight: number;
+  }
+>;
+
+export type SketchEventProps = {
+  layerId?: string;
+  featureId?: string;
+  feature?: SketchFeature;
+};
+
+export type SketchEventCallback = (event: SketchEventProps) => void;
+
+export type SketchAppearance = Partial<LayerAppearanceTypes>;
+
+export function isSketchType(value: unknown): value is SketchType {
+  return (
+    value === "marker" ||
+    value === "polyline" ||
+    value === "circle" ||
+    value === "rectangle" ||
+    value === "polygon" ||
+    value === "extrudedCircle" ||
+    value === "extrudedRectangle" ||
+    value === "extrudedPolygon"
+  );
+}

package/src/Map/Sketch/utils.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+
+export function useWindowEvent<K extends keyof WindowEventMap>(
+  eventName: K,
+  callback: (event: WindowEventMap[K]) => void,
+  options?: EventListenerOptions,
+): void {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const listener = (event: WindowEventMap[K]): void => {
+      callbackRef.current?.(event);
+    };
+    const options = optionsRef.current;
+    window.addEventListener(eventName, listener, options);
+    return () => {
+      window.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName]);
+}