@reearth/core 0.0.1

package/src/Map/hooks.ts

@@ -0,0 +1,127 @@
+import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect } from "react";
+
+import { SelectedFeatureInfo } from "../mantle";
+
+import { type MapRef, mapRef } from "./ref";
+import type {
+  EngineRef,
+  LayersRef,
+  LayerSelectionReason,
+  ComputedLayer,
+  RequestingRenderMode,
+  SceneProperty,
+  SketchRef,
+} from "./types";
+import useTimelineManager, { TimelineManagerRef } from "./useTimelineManager";
+
+import { CursorType } from ".";
+
+export type { MapRef } from "./ref";
+
+export const FORCE_REQUEST_RENDER = -1;
+export const NO_REQUEST_RENDER = 0;
+export const REQUEST_RENDER_ONCE = 1;
+
+export default function ({
+  ref,
+  sceneProperty,
+  timelineManagerRef,
+  cursor,
+  onLayerSelect,
+}: {
+  ref: Ref<MapRef>;
+  sceneProperty?: SceneProperty;
+  timelineManagerRef?: TimelineManagerRef;
+  cursor?: CursorType;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    options?: LayerSelectionReason,
+    info?: SelectedFeatureInfo,
+  ) => void;
+}) {
+  const engineRef = useRef<EngineRef>(null);
+  const layersRef = useRef<LayersRef>(null);
+  const sketchRef = useRef<SketchRef>(null);
+  const requestingRenderMode = useRef<RequestingRenderMode>(NO_REQUEST_RENDER);
+
+  useImperativeHandle(
+    ref,
+    () =>
+      mapRef({
+        engineRef,
+        layersRef,
+        sketchRef,
+        timelineManagerRef,
+      }),
+    [timelineManagerRef],
+  );
+
+  // selectLayer logic
+  // 1. Map/hooks(here) is the source
+  //    1.2 State updates propagate up, through onLayerSelect, to update
+  //        the pluginAPI(in Crust) and to update external state through
+  //        the Visualizer's onLayerselect prop.
+  // 2. Passes down from Map to Layers
+  // 3. Passes down from Map to Engine
+  // 4. Source state can be updated only from the Engine (through the layersRef)
+
+  const [selectedLayer, selectLayer] = useState<{
+    layerId?: string;
+    featureId?: string;
+    reason?: LayerSelectionReason;
+  }>({});
+
+  const handleLayerSelect = useCallback(
+    async (
+      layerId: string | undefined,
+      featureId: string | undefined,
+      layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+      reason?: LayerSelectionReason,
+      info?: SelectedFeatureInfo,
+    ) => {
+      selectLayer({ layerId, featureId, reason });
+      onLayerSelect?.(layerId, featureId, layer, reason, info);
+    },
+    [onLayerSelect],
+  );
+
+  const handleEngineLayerSelect = useCallback(
+    (
+      layerId: string | undefined,
+      featureId?: string,
+      reason?: LayerSelectionReason,
+      info?: SelectedFeatureInfo,
+    ) => {
+      layersRef.current?.selectFeatures(
+        [{ layerId, featureId: featureId ? [featureId] : undefined }],
+        reason,
+        info,
+      );
+    },
+    [],
+  );
+
+  useTimelineManager({
+    init: sceneProperty?.timeline,
+    engineRef,
+    timelineManagerRef,
+  });
+
+  useEffect(() => {
+    if (cursor) {
+      engineRef.current?.setCursor(cursor);
+    }
+  }, [cursor]);
+
+  return {
+    engineRef,
+    layersRef,
+    sketchRef,
+    selectedLayer,
+    requestingRenderMode,
+    handleLayerSelect,
+    handleEngineLayerSelect,
+  };
+}

package/src/Map/index.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, useMemo, type Ref } from "react";
+
+import { INTERACTION_MODES } from "../Visualizer/interactionMode";
+
+import useHooks, { MapRef } from "./hooks";
+import Layers, { type Props as LayersProps } from "./Layers";
+import Sketch, { SketchProps } from "./Sketch";
+import type { Engine, EngineProps } from "./types";
+
+export * from "./types";
+export { useGet, type WrappedRef, type Undefinable, useOverriddenProperty } from "./utils";
+
+export type {
+  NaiveLayer,
+  LazyLayer,
+  FeatureComponentType,
+  FeatureComponentProps,
+  ClusterProperty,
+  Layer,
+  LayerSelectionReason,
+  Cluster,
+  EvalFeature,
+  DefaultInfobox,
+  OverriddenLayer,
+} from "./Layers";
+
+export * from "./Sketch";
+export type { TimelineCommitter, TimelineManagerRef } from "./useTimelineManager";
+
+export type { MapRef } from "./hooks";
+
+export type CursorType = "auto" | "grab" | "crosshair";
+
+export type Props = {
+  engines?: Record<string, Engine>;
+  engine?: string;
+} & Omit<
+  LayersProps,
+  "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes" | "selectedLayerId"
+> &
+  Omit<EngineProps, "onLayerSelect" | "layerSelectionReason" | "selectedLayerId"> &
+  Omit<SketchProps, "layersRef" | "engineRef" | "SketchComponent"> & {
+    cursor?: CursorType;
+  };
+
+function MapFn(
+  {
+    engines,
+    engine,
+    isBuilt,
+    isEditable,
+    clusters,
+    hiddenLayers,
+    layers,
+    overrides,
+    timelineManagerRef,
+    sceneProperty,
+    interactionMode,
+    selectedFeature,
+    cursor,
+    onLayerSelect,
+    overrideInteractionMode,
+    onSketchTypeChange,
+    onSketchFeatureCreate,
+    onSketchPluginFeatureCreate,
+    featureFlags = INTERACTION_MODES.default,
+    ...props
+  }: Props,
+  ref: Ref<MapRef>,
+): JSX.Element | null {
+  const currentEngine = engine ? engines?.[engine] : undefined;
+  const Engine = currentEngine?.component;
+  const {
+    engineRef,
+    layersRef,
+    sketchRef,
+    selectedLayer,
+    requestingRenderMode,
+    handleLayerSelect,
+    handleEngineLayerSelect,
+  } = useHooks({
+    ref,
+    sceneProperty,
+    timelineManagerRef,
+    cursor,
+    onLayerSelect,
+  });
+
+  const selectedLayerIds = useMemo(
+    () => ({
+      layerId: selectedLayer.layerId,
+      featureId: selectedLayer.featureId,
+    }),
+    [selectedLayer.layerId, selectedLayer.featureId],
+  );
+
+  const selectedReason = useMemo(() => selectedLayer.reason, [selectedLayer.reason]);
+
+  return Engine ? (
+    <Engine
+      ref={engineRef}
+      isBuilt={isBuilt}
+      isEditable={isEditable}
+      selectedLayerId={selectedLayerIds}
+      layerSelectionReason={selectedReason}
+      layersRef={layersRef}
+      requestingRenderMode={requestingRenderMode}
+      timelineManagerRef={timelineManagerRef}
+      onLayerSelect={handleEngineLayerSelect}
+      featureFlags={featureFlags}
+      {...props}>
+      <Layers
+        ref={layersRef}
+        engineRef={engineRef}
+        clusters={clusters}
+        hiddenLayers={hiddenLayers}
+        isBuilt={isBuilt}
+        isEditable={isEditable}
+        layers={layers}
+        overrides={overrides}
+        selectedLayer={selectedLayer}
+        Feature={currentEngine?.featureComponent}
+        clusterComponent={currentEngine?.clusterComponent}
+        delegatedDataTypes={currentEngine.delegatedDataTypes}
+        meta={props.meta}
+        sceneProperty={props.property}
+        requestingRenderMode={requestingRenderMode}
+        onLayerSelect={handleLayerSelect}
+      />
+      <Sketch
+        ref={sketchRef}
+        layersRef={layersRef}
+        engineRef={engineRef}
+        interactionMode={interactionMode}
+        selectedFeature={selectedFeature}
+        SketchComponent={currentEngine?.sketchComponent}
+        onLayerSelect={handleLayerSelect}
+        overrideInteractionMode={overrideInteractionMode}
+        onSketchTypeChange={onSketchTypeChange}
+        onSketchFeatureCreate={onSketchFeatureCreate}
+        onSketchPluginFeatureCreate={onSketchPluginFeatureCreate}
+      />
+    </Engine>
+  ) : null;
+}
+
+export const Map = forwardRef(MapFn);

package/src/Map/ref.ts

@@ -0,0 +1,147 @@
+import type { RefObject } from "react";
+
+import type { EngineRef, LayersRef, SketchRef } from "./types";
+import { TimelineManagerRef } from "./useTimelineManager";
+import { FunctionKeys, WrappedRef, wrapRef } from "./utils";
+
+export type MapRef = {
+  engine: WrappedRef<EngineRef>;
+  layers: WrappedRef<LayersRef>;
+  sketch: WrappedRef<SketchRef>;
+  timeline?: TimelineManagerRef;
+};
+
+const engineRefKeys: FunctionKeys<EngineRef> = {
+  captureScreen: 1,
+  changeSceneMode: 1,
+  changeSpeed: 1,
+  changeTime: 1,
+  enableScreenSpaceCameraController: 1,
+  flyTo: 1,
+  flyToGround: 1,
+  getCamera: 1,
+  getCameraFovInfo: 1,
+  getClock: 1,
+  getLocationFromScreen: 1,
+  sampleTerrainHeight: 1,
+  computeGlobeHeight: 1,
+  getGlobeHeight: 1,
+  toXYZ: 1,
+  toLngLatHeight: 1,
+  convertScreenToPositionOffset: 1,
+  isPositionVisible: 1,
+  setView: 1,
+  toWindowPosition: 1,
+  getViewport: 1,
+  flyToBBox: 1,
+  rotateOnCenter: 1,
+  overrideScreenSpaceController: 1,
+  lookAt: 1,
+  lookAtLayer: 1,
+  lookHorizontal: 1,
+  lookVertical: 1,
+  moveBackward: 1,
+  moveDown: 1,
+  moveForward: 1,
+  moveLeft: 1,
+  moveOverTerrain: 1,
+  moveRight: 1,
+  moveUp: 1,
+  onClick: 1,
+  onDoubleClick: 1,
+  onMiddleClick: 1,
+  onMiddleDown: 1,
+  onMiddleUp: 1,
+  onMouseDown: 1,
+  onMouseEnter: 1,
+  onMouseLeave: 1,
+  onMouseMove: 1,
+  onMouseUp: 1,
+  onRightClick: 1,
+  onRightDown: 1,
+  onRightUp: 1,
+  onWheel: 1,
+  orbit: 1,
+  pause: 1,
+  play: 1,
+  requestRender: 1,
+  rotateRight: 1,
+  tick: 1,
+  zoomIn: 1,
+  zoomOut: 1,
+  changeStart: 1,
+  changeStop: 1,
+  inViewport: 1,
+  onTick: 1,
+  removeTickEventListener: 1,
+  findFeaturesByIds: 1,
+  findFeatureById: 1,
+  findComputedFeatureById: 1,
+  findComputedFeaturesByIds: 1,
+  selectFeatures: 1,
+  unselectFeatures: 1,
+  pickManyFromViewport: 1,
+  getExtrudedHeight: 1,
+  getSurfaceDistance: 1,
+  equalsEpsilon2d: 1,
+  equalsEpsilon3d: 1,
+  createGeometry: 1,
+  setCursor: 1,
+  bringToFront: 1,
+  sendToBack: 1,
+};
+
+const layersRefKeys: FunctionKeys<LayersRef> = {
+  add: 1,
+  addAll: 1,
+  deleteLayer: 1,
+  find: 1,
+  findAll: 1,
+  findById: 1,
+  findByIds: 1,
+  findByTagLabels: 1,
+  findByTags: 1,
+  hide: 1,
+  isLayer: 1,
+  layers: 1,
+  override: 1,
+  replace: 1,
+  select: 1,
+  selectFeature: 1,
+  selectFeatures: 1,
+  selectedLayer: 1,
+  selectedFeature: 1,
+  show: 1,
+  walk: 1,
+  overriddenLayers: 1,
+};
+
+const sketchRefKeys: FunctionKeys<SketchRef> = {
+  setType: 1,
+  setColor: 1,
+  setDefaultAppearance: 1,
+  createDataOnly: 1,
+  disableShadow: 1,
+  enableRelativeHeight: 1,
+  allowRightClickToAbort: 1,
+  allowAutoResetInteractionMode: 1,
+};
+
+export function mapRef({
+  engineRef,
+  layersRef,
+  sketchRef,
+  timelineManagerRef,
+}: {
+  engineRef: RefObject<EngineRef>;
+  layersRef: RefObject<LayersRef>;
+  sketchRef: RefObject<SketchRef>;
+  timelineManagerRef?: TimelineManagerRef;
+}): MapRef {
+  return {
+    engine: wrapRef(engineRef, engineRefKeys),
+    layers: wrapRef(layersRef, layersRefKeys),
+    sketch: wrapRef(sketchRef, sketchRefKeys),
+    timeline: timelineManagerRef,
+  };
+}

package/src/Map/types/event.ts

@@ -0,0 +1,104 @@
+import EventTarget from "@ungap/event-target";
+
+export type EventCallback<T extends any[] = any[]> = (...args: T) => void;
+export type EventEmitter<E extends { [P in string]: any[] } = { [P in string]: any[] }> = <
+  T extends keyof E,
+>(
+  type: T,
+  ...args: E[T]
+) => void;
+
+export type Events<E extends { [P in string]: any[] } = { [P in string]: any[] }> = {
+  readonly on: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+  readonly off: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+  readonly once: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+};
+
+export function events<E extends { [P in string]: any[] } = { [P in string]: any[] }>(): [
+  Events<E>,
+  EventEmitter<E>,
+] {
+  const e = new EventTarget();
+  const callbacks = new Map<keyof E, Map<EventCallback<E[keyof E]>, (e: Event) => void>>();
+  const getEventCallback = <T extends keyof E>(
+    type: T,
+    cb: EventCallback<E[T]>,
+  ): ((e: Event) => void) => {
+    let ecbs = callbacks.get(type);
+    if (!ecbs) {
+      ecbs = new Map();
+      callbacks.set(type, ecbs);
+    }
+
+    let ecb = ecbs.get(cb as EventCallback);
+    if (!ecb) {
+      ecb = (e: Event): void => {
+        cb(...(e as CustomEvent).detail);
+      };
+      ecbs.set(cb as EventCallback, ecb);
+    }
+
+    return ecb;
+  };
+  const deleteEventCallback = (type: keyof E, cb: EventCallback): void => {
+    callbacks.get(type)?.delete(cb);
+  };
+
+  const on = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.addEventListener(String(type), ecb);
+  };
+  const off = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.removeEventListener(String(type), ecb);
+    deleteEventCallback(type, ecb);
+  };
+  const once = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.addEventListener(String(type), ecb, { once: true });
+  };
+
+  const events = {
+    get on() {
+      return on;
+    },
+    get off() {
+      return off;
+    },
+    get once() {
+      return once;
+    },
+  };
+
+  return [
+    events,
+    <T extends keyof E>(type: T, ...args: E[T]) =>
+      e.dispatchEvent(new CustomEvent(String(type), { detail: args })),
+  ];
+}
+
+export function mergeEvents<E extends { [x: string]: any[] } = { [x: string]: any[] }>(
+  source: Events<E>,
+  dest: EventEmitter<E>,
+  types: (keyof E)[],
+): () => void {
+  const cbs = types.reduce<{ [T in keyof E]: EventCallback<E[T]> }>(
+    (a, b) => ({
+      ...a,
+      [b]: (...args: E[typeof b]) => {
+        dest(b, ...args);
+      },
+    }),
+    {} as any,
+  );
+
+  for (const t of Object.keys(cbs)) {
+    source.on(t, cbs[t]);
+  }
+
+  return () => {
+    for (const t of Object.keys(cbs)) {
+      source.off(t, cbs[t]);
+    }
+  };
+}