@reearth/core 0.0.1

package/src/Visualizer/hooks.ts

@@ -0,0 +1,403 @@
+import { clone } from "lodash-es";
+import { Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+
+import type { ComputedFeature, Feature, LatLng, SelectedFeatureInfo } from "../mantle";
+import type {
+  MapRef,
+  LayerSelectionReason,
+  Camera,
+  ComputedLayer,
+  SceneProperty,
+  LayerEditEvent,
+  CursorType,
+  LayerVisibilityEvent,
+  LayerLoadEvent,
+  LayerSelectWithRectStart,
+  LayerSelectWithRectMove,
+  LayerSelectWithRectEnd,
+} from "../Map";
+import { useOverriddenProperty } from "../Map";
+import { SketchEventCallback, SketchEventProps, SketchType } from "../Map/Sketch/types";
+import { TimelineManagerRef } from "../Map/useTimelineManager";
+
+import type { InteractionModeType } from "./interactionMode";
+import { INTERACTION_MODES } from "./interactionMode";
+import useViewport from "./useViewport";
+
+export default function useHooks(
+  {
+    camera: initialCamera,
+    interactionMode: initialInteractionMode,
+    sceneProperty,
+    zoomedLayerId,
+    onLayerSelect,
+    onCameraChange,
+    onInteractionModeChange,
+    onZoomToLayer,
+    onLayerDrop,
+    onSketchTypeChangeProp,
+  }: {
+    camera?: Camera;
+    interactionMode?: InteractionModeType;
+    sceneProperty?: SceneProperty;
+    zoomedLayerId?: string;
+    onLayerSelect?: (
+      layerId: string | undefined,
+      layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+      feature: ComputedFeature | undefined,
+      reason: LayerSelectionReason | undefined,
+    ) => void;
+    onCameraChange?: (camera: Camera) => void;
+    onInteractionModeChange?: (mode: InteractionModeType) => void;
+    onZoomToLayer?: (layerId: string | undefined) => void;
+    onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+    onSketchTypeChangeProp?: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
+  },
+  ref: Ref<MapRef | null>,
+) {
+  const mapRef = useRef<MapRef>(null);
+
+  useImperativeHandle(ref, () => mapRef.current, []);
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const viewport = useViewport({
+    wrapperRef,
+  });
+
+  // layer
+  const [selectedLayer, selectLayer] = useState<{
+    layerId?: string;
+    featureId?: string;
+    layer?: ComputedLayer;
+    reason?: LayerSelectionReason;
+  }>({});
+  const [selectedFeature, selectFeature] = useState<Feature>();
+  const [selectedComputedFeature, selectComputedFeature] = useState<ComputedFeature>();
+
+  const handleLayerSelect = useCallback(
+    async (
+      layerId: string | undefined,
+      featureId: string | undefined,
+      layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+      reason: LayerSelectionReason | undefined,
+      info: SelectedFeatureInfo | undefined,
+    ) => {
+      if (selectedLayer.layerId === layerId && selectedLayer.featureId === featureId) return;
+
+      const computedLayer = await layer?.();
+      const computedFeature =
+        layerId && featureId
+          ? mapRef.current?.engine.findComputedFeatureById?.(layerId, featureId) ?? info?.feature
+          : undefined;
+
+      selectFeature(
+        layerId && featureId
+          ? mapRef.current?.engine.findFeatureById?.(layerId, featureId)
+          : undefined,
+      );
+      selectComputedFeature(computedFeature);
+
+      selectLayer(l =>
+        l.layerId === layerId && l.featureId === featureId
+          ? l
+          : { layerId, featureId, layer: computedLayer, reason },
+      );
+
+      onLayerSelect?.(layerId, layer, computedFeature, reason);
+    },
+    [selectedLayer, onLayerSelect],
+  );
+
+  const timelineManagerRef: TimelineManagerRef = useRef();
+
+  // scene
+  const [overriddenSceneProperty, originalOverrideSceneProperty] =
+    useOverriddenProperty(sceneProperty);
+
+  const overrideSceneProperty = useCallback(
+    (pluginId: string, property: SceneProperty) => {
+      if (property.timeline) {
+        const filteredTimeline = clone(property.timeline);
+        delete filteredTimeline.visible;
+        if (Object.keys(filteredTimeline).length > 0) {
+          if (
+            filteredTimeline.current !== undefined ||
+            filteredTimeline.start !== undefined ||
+            filteredTimeline.stop !== undefined
+          ) {
+            timelineManagerRef?.current?.commit({
+              cmd: "SET_TIME",
+              payload: {
+                start:
+                  filteredTimeline.start ?? timelineManagerRef?.current?.computedTimeline.start,
+                stop: filteredTimeline.stop ?? timelineManagerRef?.current?.computedTimeline.stop,
+                current:
+                  filteredTimeline.current ?? timelineManagerRef?.current?.computedTimeline.current,
+              },
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+          if (
+            filteredTimeline.multiplier !== undefined ||
+            filteredTimeline.stepType !== undefined ||
+            filteredTimeline.rangeType !== undefined
+          ) {
+            timelineManagerRef?.current?.commit({
+              cmd: "SET_OPTIONS",
+              payload: {
+                stepType: filteredTimeline.stepType,
+                multiplier: filteredTimeline.multiplier,
+                rangeType: filteredTimeline.rangeType,
+              },
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+          if (filteredTimeline.animation !== undefined) {
+            timelineManagerRef?.current?.commit({
+              cmd: filteredTimeline.animation ? "PLAY" : "PAUSE",
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+        }
+      }
+      originalOverrideSceneProperty(pluginId, property);
+    },
+    [timelineManagerRef, originalOverrideSceneProperty],
+  );
+
+  // camera
+  const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
+
+  const [cameraForceHorizontalRoll, setCameraForceHorizontalRoll] = useState(false);
+  const handleCameraForceHorizontalRollChange = useCallback((enable?: boolean) => {
+    setCameraForceHorizontalRoll(!!enable);
+  }, []);
+
+  // interaction mode
+  const [_interactionMode, changeInteractionMode] = useValue(
+    initialInteractionMode,
+    onInteractionModeChange,
+  );
+  const interactionMode = _interactionMode || "default";
+
+  const [cursor, setCursor] = useState<CursorType>("auto");
+  useEffect(() => {
+    setCursor(
+      interactionMode === "sketch" ? "crosshair" : interactionMode === "move" ? "grab" : "auto",
+    );
+  }, [interactionMode]);
+
+  // feature flags
+  const featureFlags = INTERACTION_MODES[interactionMode];
+
+  // layer edit
+  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>();
+  const onLayerEdit = useCallback((cb: (e: LayerEditEvent) => void) => {
+    onLayerEditRef.current = cb;
+  }, []);
+  const handleLayerEdit = useCallback((e: LayerEditEvent) => {
+    onLayerEditRef.current?.(e);
+  }, []);
+
+  // layer visiblity
+  const onLayerVisibilityRef = useRef<(e: LayerVisibilityEvent) => void>();
+  const onLayerVisibility = useCallback((cb: (e: LayerVisibilityEvent) => void) => {
+    onLayerVisibilityRef.current = cb;
+  }, []);
+  const handleLayerVisibility = useCallback((e: LayerVisibilityEvent) => {
+    onLayerVisibilityRef.current?.(e);
+  }, []);
+
+  // layer load
+  const onLayerLoadRef = useRef<(e: LayerLoadEvent) => void>();
+  const onLayerLoad = useCallback((cb: (e: LayerLoadEvent) => void) => {
+    onLayerLoadRef.current = cb;
+  }, []);
+  const handleLayerLoad = useCallback((e: LayerLoadEvent) => {
+    onLayerLoadRef.current?.(e);
+  }, []);
+
+  // multiple feature selection
+  const onLayerSelectWithRectStartRef = useRef<(e: LayerSelectWithRectStart) => void>();
+  const onLayerSelectWithRectStart = useCallback((cb: (e: LayerSelectWithRectStart) => void) => {
+    onLayerSelectWithRectStartRef.current = cb;
+  }, []);
+  const handleLayerSelectWithRectStart = useCallback((e: LayerSelectWithRectStart) => {
+    onLayerSelectWithRectStartRef.current?.(e);
+  }, []);
+  const onLayerSelectWithRectMoveRef = useRef<(e: LayerSelectWithRectMove) => void>();
+  const onLayerSelectWithRectMove = useCallback((cb: (e: LayerSelectWithRectMove) => void) => {
+    onLayerSelectWithRectMoveRef.current = cb;
+  }, []);
+  const handleLayerSelectWithRectMove = useCallback((e: LayerSelectWithRectMove) => {
+    onLayerSelectWithRectMoveRef.current?.(e);
+  }, []);
+  const onLayerSelectWithRectEndRef = useRef<(e: LayerSelectWithRectEnd) => void>();
+  const onLayerSelectWithRectEnd = useCallback((cb: (e: LayerSelectWithRectEnd) => void) => {
+    onLayerSelectWithRectEndRef.current = cb;
+  }, []);
+  const handleLayerSelectWithRectEnd = useCallback((e: LayerSelectWithRectEnd) => {
+    onLayerSelectWithRectEndRef.current?.(e);
+  }, []);
+
+  // plugin sketch feature events
+  const onSketchPluginFeatureCreateCallbacksRef = useRef<SketchEventCallback[]>([]);
+  const onSketchPluginFeatureCreate = useCallback((cb: SketchEventCallback) => {
+    onSketchPluginFeatureCreateCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchPluginFeatureCreate = useCallback((props: SketchEventProps) => {
+    onSketchPluginFeatureCreateCallbacksRef.current.forEach(fn => fn(props));
+  }, []);
+
+  const onSketchTypeChangeCallbacksRef = useRef<((type: SketchType | undefined) => void)[]>([]);
+  const onSketchTypeChange = useCallback((cb: (type: SketchType | undefined) => void) => {
+    onSketchTypeChangeCallbacksRef.current.push(cb);
+  }, []);
+  const handleSketchTypeChange = useCallback(
+    (type: SketchType | undefined, from?: "editor" | "plugin") => {
+      onSketchTypeChangeCallbacksRef.current.forEach(fn => fn(type));
+      onSketchTypeChangeProp?.(type, from);
+    },
+    [onSketchTypeChangeProp],
+  );
+
+  // zoom to layer
+  useEffect(() => {
+    if (zoomedLayerId) {
+      mapRef.current?.engine?.lookAtLayer(zoomedLayerId);
+      onZoomToLayer?.(undefined);
+    }
+  }, [zoomedLayerId, onZoomToLayer]);
+
+  // dnd
+  const [isLayerDragging, setIsLayerDragging] = useState(false);
+  const handleLayerDrag = useCallback(() => {
+    setIsLayerDragging(true);
+  }, []);
+  const handleLayerDrop = useCallback(
+    (layerId: string, _featureId: string | undefined, latlng: LatLng | undefined) => {
+      setIsLayerDragging(false);
+      const layer = mapRef.current?.layers.findById(layerId);
+      const propertyKey = layer?.property.default.location
+        ? "default.location"
+        : layer?.property.default.position
+          ? "default.position"
+          : undefined;
+      if (latlng && layer && layer.propertyId && propertyKey) {
+        onLayerDrop?.(layer.propertyId, propertyKey, latlng);
+      }
+    },
+    [onLayerDrop, mapRef],
+  );
+
+  const coreContextValue = useMemo(
+    () => ({
+      interactionMode,
+      selectedLayer,
+      selectedComputedFeature,
+      viewport,
+      overriddenSceneProperty,
+      overrideSceneProperty,
+      handleCameraForceHorizontalRollChange,
+      handleInteractionModeChange: changeInteractionMode,
+      onSketchPluginFeatureCreate,
+      onSketchTypeChange,
+      onLayerVisibility,
+      onLayerLoad,
+      onLayerEdit,
+      onLayerSelectWithRectStart,
+      onLayerSelectWithRectMove,
+      onLayerSelectWithRectEnd,
+    }),
+    [
+      interactionMode,
+      selectedLayer,
+      selectedComputedFeature,
+      viewport,
+      overriddenSceneProperty,
+      overrideSceneProperty,
+      changeInteractionMode,
+      handleCameraForceHorizontalRollChange,
+      onLayerEdit,
+      onSketchPluginFeatureCreate,
+      onSketchTypeChange,
+      onLayerVisibility,
+      onLayerLoad,
+      onLayerSelectWithRectStart,
+      onLayerSelectWithRectMove,
+      onLayerSelectWithRectEnd,
+    ],
+  );
+
+  const containerStyle = useMemo(
+    () => ({
+      position: "relative" as const,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+    }),
+    [],
+  );
+
+  return {
+    mapRef,
+    wrapperRef,
+    selectedFeature,
+    camera,
+    featureFlags,
+    overriddenSceneProperty,
+    isLayerDragging,
+    timelineManagerRef,
+    cursor,
+    cameraForceHorizontalRoll,
+    coreContextValue,
+    containerStyle,
+    overrideSceneProperty,
+    handleLayerSelect,
+    handleLayerDrag,
+    handleLayerDrop,
+    handleLayerEdit,
+    handleCameraChange: changeCamera,
+    handleInteractionModeChange: changeInteractionMode,
+    handleSketchPluginFeatureCreate,
+    handleSketchTypeChange,
+    handleLayerVisibility,
+    handleLayerLoad,
+    handleLayerSelectWithRectStart,
+    handleLayerSelectWithRectMove,
+    handleLayerSelectWithRectEnd,
+  };
+}
+
+function useValue<T>(
+  initial: T | undefined,
+  onChange: ((t: T) => void) | undefined,
+): [T | undefined, (v?: T) => void] {
+  const [state, set] = useState(initial);
+
+  const handleOnChange = useCallback(
+    (v?: T) => {
+      if (v) {
+        set(v);
+        onChange?.(v);
+      }
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    set(initial);
+  }, [initial]);
+
+  return [state, handleOnChange];
+}

package/src/Visualizer/index.stories.tsx

@@ -0,0 +1,128 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps, FC, useEffect, useState } from "react";
+
+import { useVisualizer } from "./context";
+
+import { CoreVisualizer } from ".";
+
+export default {
+  component: CoreVisualizer,
+} as Meta;
+
+type Story = StoryObj<typeof CoreVisualizer>;
+
+export const Cesium: Story = {
+  args: {
+    ready: true,
+    engine: "cesium",
+    sceneProperty: {
+      tiles: [
+        {
+          id: "default",
+          tile_type: "default",
+        },
+      ],
+    },
+  },
+};
+
+const Content: FC<{ ready?: boolean }> = ({ ready }) => {
+  const visualizer = useVisualizer();
+  useEffect(() => {
+    if (!ready) return;
+    visualizer.current?.engine.flyTo({
+      lat: 35.683252649879606,
+      lng: 139.75262379931652,
+      height: 5000,
+    });
+    visualizer.current?.layers.add({
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          // GeoJSON
+          type: "Feature",
+          geometry: {
+            coordinates: [139.75262379931652, 35.683252649879606, 1000],
+            type: "Point",
+          },
+        },
+      },
+      marker: {
+        imageColor: "blue",
+      },
+    });
+  }, [visualizer, ready]);
+  return null;
+};
+
+const VisualizerWrapper: FC<ComponentProps<typeof CoreVisualizer>> = props => {
+  const [ready, setReady] = useState(false);
+  return (
+    <CoreVisualizer {...props} onMount={() => setReady(true)}>
+      <Content ready={ready} />
+    </CoreVisualizer>
+  );
+};
+
+export const API: Story = {
+  render: args => {
+    return <VisualizerWrapper {...args} />;
+  },
+  args: {
+    ready: true,
+    engine: "cesium",
+    sceneProperty: {
+      tiles: [
+        {
+          id: "default",
+          tile_type: "default",
+        },
+      ],
+    },
+  },
+};
+
+export const Plugin = {
+  args: {
+    ready: true,
+    engine: "cesium",
+    sceneProperty: {
+      tiles: [
+        {
+          id: "default",
+          tile_type: "default",
+        },
+      ],
+    },
+    widgetAlignSystem: {
+      outer: {
+        left: {
+          top: {
+            align: "start",
+            widgets: [
+              {
+                id: "plugin",
+                pluginId: "plugin",
+                extensionId: "test",
+                ...({
+                  __REEARTH_SOURCECODE: `reearth.layers.add(${JSON.stringify({
+                    id: "l",
+                    type: "simple",
+                    data: {
+                      type: "geojson",
+                      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+                    },
+                    marker: {
+                      imageColor: "#fff",
+                    },
+                  })});`,
+                } as any),
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+};

package/src/Visualizer/index.tsx

@@ -0,0 +1,187 @@
+import { memo, forwardRef, CSSProperties, type Ref, type PropsWithChildren } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { ComputedFeature } from "../mantle";
+import {
+  Map,
+  type MapRef,
+  type SceneProperty,
+  type Layer,
+  type LayerSelectionReason,
+  type Camera,
+  type LatLng,
+  type Cluster,
+  type ComputedLayer,
+} from "../Map";
+import { SketchFeature, SketchType } from "../Map/Sketch/types";
+
+import { VisualizerProvider } from "./context";
+import { coreContext } from "./coreContext";
+import { engines, type EngineType } from "./engines";
+import Err from "./Error";
+import useHooks from "./hooks";
+import type { InteractionModeType } from "./interactionMode";
+
+export { useVisualizer, type Context as VisualizerContext } from "./context";
+export * from "./engines";
+export * from "./useViewport";
+export * from "./coreContext";
+export * from "./featureFlags";
+export * from "./interactionMode";
+
+export type CoreVisualizerProps = {
+  engine?: EngineType;
+  isBuilt?: boolean;
+  isEditable?: boolean;
+  sceneProperty?: SceneProperty;
+  layers?: Layer[];
+  clusters?: Cluster[]; // TODO: remove completely from beta core
+  camera?: Camera;
+  interactionMode?: InteractionModeType;
+  shouldRender?: boolean;
+  meta?: Record<string, unknown>;
+  style?: CSSProperties;
+  small?: boolean;
+  ready?: boolean;
+  hiddenLayers?: string[];
+  zoomedLayerId?: string;
+  onCameraChange?: (camera: Camera) => void;
+  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    feature: ComputedFeature | undefined,
+    reason: LayerSelectionReason | undefined,
+  ) => void;
+  onZoomToLayer?: (layerId: string | undefined) => void;
+  onMount?: () => void;
+  onSketchTypeChangeProp?: (type: SketchType | undefined) => void;
+  onSketchFeatureCreate?: (feature: SketchFeature | null) => void;
+  onInteractionModeChange?: (mode: InteractionModeType) => void;
+};
+
+export const CoreVisualizer = memo(
+  forwardRef<MapRef, PropsWithChildren<CoreVisualizerProps>>(
+    (
+      {
+        engine,
+        isBuilt,
+        isEditable,
+        sceneProperty,
+        layers,
+        clusters,
+        small,
+        ready,
+        hiddenLayers,
+        camera: initialCamera,
+        interactionMode,
+        shouldRender,
+        meta,
+        style,
+        zoomedLayerId,
+        children,
+        onLayerDrop,
+        onLayerSelect,
+        onCameraChange,
+        onZoomToLayer,
+        onInteractionModeChange,
+        onMount,
+        onSketchTypeChangeProp,
+        onSketchFeatureCreate,
+      },
+      ref: Ref<MapRef | null>,
+    ) => {
+      const {
+        mapRef,
+        wrapperRef,
+        selectedFeature,
+        camera,
+        featureFlags,
+        overriddenSceneProperty,
+        isLayerDragging,
+        timelineManagerRef,
+        cursor,
+        cameraForceHorizontalRoll,
+        coreContextValue,
+        containerStyle,
+        handleLayerSelect,
+        handleLayerDrag,
+        handleLayerDrop,
+        handleLayerEdit,
+        handleCameraChange,
+        handleInteractionModeChange,
+        handleSketchPluginFeatureCreate,
+        handleSketchTypeChange,
+        handleLayerVisibility,
+        handleLayerLoad,
+        handleLayerSelectWithRectStart,
+        handleLayerSelectWithRectMove,
+        handleLayerSelectWithRectEnd,
+      } = useHooks(
+        {
+          camera: initialCamera,
+          interactionMode,
+          sceneProperty,
+          zoomedLayerId,
+          onLayerSelect,
+          onCameraChange,
+          onZoomToLayer,
+          onLayerDrop,
+          onInteractionModeChange,
+          onSketchTypeChangeProp,
+        },
+        ref,
+      );
+
+      return (
+        <ErrorBoundary FallbackComponent={Err}>
+          <VisualizerProvider mapRef={mapRef}>
+            <div ref={wrapperRef} style={containerStyle}>
+              <Map
+                ref={mapRef}
+                isBuilt={isBuilt}
+                isEditable={isEditable}
+                engine={engine}
+                layers={layers}
+                engines={engines}
+                camera={camera}
+                cameraForceHorizontalRoll={cameraForceHorizontalRoll}
+                clusters={clusters}
+                hiddenLayers={hiddenLayers}
+                isLayerDragging={isLayerDragging}
+                isLayerDraggable={isEditable}
+                meta={meta}
+                style={style}
+                featureFlags={featureFlags}
+                shouldRender={shouldRender}
+                property={overriddenSceneProperty}
+                small={small}
+                ready={ready}
+                timelineManagerRef={timelineManagerRef}
+                interactionMode={interactionMode}
+                selectedFeature={selectedFeature}
+                cursor={cursor}
+                onCameraChange={handleCameraChange}
+                onLayerDrag={handleLayerDrag}
+                onLayerDrop={handleLayerDrop}
+                onLayerSelect={handleLayerSelect}
+                onLayerEdit={handleLayerEdit}
+                overrideInteractionMode={handleInteractionModeChange}
+                onSketchFeatureCreate={onSketchFeatureCreate}
+                onSketchPluginFeatureCreate={handleSketchPluginFeatureCreate}
+                onSketchTypeChange={handleSketchTypeChange}
+                onMount={onMount}
+                onLayerVisibility={handleLayerVisibility}
+                onLayerLoad={handleLayerLoad}
+                onLayerSelectWithRectStart={handleLayerSelectWithRectStart}
+                onLayerSelectWithRectMove={handleLayerSelectWithRectMove}
+                onLayerSelectWithRectEnd={handleLayerSelectWithRectEnd}
+              />
+              <coreContext.Provider value={coreContextValue}>{children}</coreContext.Provider>
+            </div>
+          </VisualizerProvider>
+        </ErrorBoundary>
+      );
+    },
+  ),
+);