@reearth/core 0.0.1

package/src/Map/useTimelineManager.ts

@@ -0,0 +1,215 @@
+import { useCallback, useRef, useState, useMemo, MutableRefObject, RefObject } from "react";
+
+import { convertTime } from "../utils";
+
+import { EngineRef } from ".";
+
+type TimelineManager = {
+  readonly timeline: EngineClock;
+  readonly options: TimelineOptions;
+  readonly computedTimeline: Timeline;
+  commit: (commit: TimelineCommit) => void;
+  onTick: TickEvent;
+  offTick: TickEvent;
+  onCommit: (cb: (committer: TimelineCommitter) => void) => void;
+  offCommit: (cb: (committer: TimelineCommitter) => void) => void;
+  handleTick: (d: Date, clock: { start: Date; stop: Date }) => void;
+  tick: (() => Date | void | undefined) | undefined;
+};
+
+export type TimelineManagerRef = MutableRefObject<TimelineManager | undefined>;
+
+export type Timeline = {
+  current: Date;
+  start: Date;
+  stop: Date;
+};
+
+export type EngineClock = {
+  current: Date | undefined;
+  start: Date | undefined;
+  stop: Date | undefined;
+};
+
+type TimelineOptions = {
+  animation: boolean;
+  stepType: "rate" | "fixed";
+  multiplier: number;
+  rangeType?: "unbounded" | "clamped" | "bounced";
+};
+
+type PlayCommand = {
+  cmd: "PLAY";
+};
+type PauseCommand = {
+  cmd: "PAUSE";
+};
+type SetTimeCommand = {
+  cmd: "SET_TIME";
+  payload: {
+    current: Date | string;
+    start: Date | string;
+    stop: Date | string;
+  };
+};
+type SetOptionsCommand = {
+  cmd: "SET_OPTIONS";
+  payload: Partial<Pick<TimelineOptions, "multiplier" | "rangeType" | "stepType">>;
+};
+export type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetOptionsCommand) & {
+  committer: TimelineCommitter;
+};
+
+export type TimelineCommitter = {
+  source:
+    | "overrideSceneProperty"
+    | "widgetContext"
+    | "pluginAPI"
+    | "featureResource"
+    | "storyTimelineBlock"
+    | "storyPage";
+  id?: string;
+};
+
+export type TickEvent = (cb: TickEventCallback) => void;
+export type TickEventCallback = (current: Date, clock: { start: Date; stop: Date }) => void;
+
+const DEFAULT_RANGE = 86400000; // a day
+
+type Props = {
+  init?: {
+    current?: string;
+    start?: string;
+    stop?: string;
+    animation?: boolean;
+    step?: number;
+    stepType?: "rate" | "fixed";
+    multiplier?: number;
+    rangeType?: "unbounded" | "clamped" | "bounced";
+  };
+  engineRef?: RefObject<EngineRef>;
+  timelineManagerRef?: TimelineManagerRef;
+};
+
+export default ({ init, engineRef, timelineManagerRef }: Props) => {
+  const [time, setTime] = useState<Timeline>({
+    start: convertTime(init?.start) ?? new Date(),
+    stop: convertTime(init?.stop) ?? new Date(),
+    current: convertTime(init?.current) ?? new Date(),
+  });
+
+  const [options, setOptions] = useState<TimelineOptions>({
+    animation: init?.animation ?? false,
+    stepType: init?.stepType ?? "rate",
+    multiplier: init?.stepType === "fixed" ? init?.step ?? 1 : init?.multiplier ?? 1,
+    rangeType: init?.rangeType ?? "unbounded",
+  });
+
+  const computedTimeline = useMemo(() => {
+    const { start, stop, current } = time;
+    const startTime = start.getTime();
+    const stopTime = stop.getTime();
+    const currentTime = current.getTime();
+
+    const convertedStartTime = startTime > currentTime ? currentTime : startTime;
+    const convertedStopTime = stopTime <= currentTime ? currentTime + DEFAULT_RANGE : stopTime;
+
+    return {
+      start: new Date(convertedStartTime),
+      stop: new Date(convertedStopTime),
+      current: new Date(currentTime),
+    };
+  }, [time]);
+
+  const commit = useCallback((commit: TimelineCommit) => {
+    if (!commit.cmd) return;
+
+    if (commit.cmd === "PLAY") {
+      setOptions(o => ({ ...o, animation: true }));
+    } else if (commit.cmd === "PAUSE") {
+      setOptions(o => ({ ...o, animation: false }));
+    } else if (commit.cmd === "SET_TIME") {
+      setTime(t => ({
+        start: convertTime(commit.payload.start) ?? t.start,
+        stop: convertTime(commit.payload.stop) ?? t.stop,
+        current: convertTime(commit.payload.current) ?? t.current,
+      }));
+    } else if (commit.cmd === "SET_OPTIONS") {
+      setOptions(o => ({
+        ...o,
+        stepType: commit.payload?.stepType === undefined ? o.stepType : commit.payload.stepType,
+        multiplier:
+          commit.payload?.multiplier === undefined ? o.multiplier : commit.payload.multiplier,
+        rangeType: commit.payload?.rangeType === undefined ? o.rangeType : commit.payload.rangeType,
+      }));
+    }
+
+    commitEventCallbacks.current.forEach(cb => cb(commit.committer));
+  }, []);
+
+  const tickEventCallbacks = useRef<TickEventCallback[]>([]);
+  const onTick = useCallback((cb: TickEventCallback) => {
+    tickEventCallbacks.current.push(cb);
+  }, []);
+  const offTick = useCallback((cb: TickEventCallback) => {
+    tickEventCallbacks.current = tickEventCallbacks.current.filter(c => c !== cb);
+  }, []);
+
+  const commitEventCallbacks = useRef<((committer: TimelineCommitter) => void)[]>([]);
+  const onCommit = useCallback((cb: (committer: TimelineCommitter) => void) => {
+    commitEventCallbacks.current.push(cb);
+  }, []);
+  const offCommit = useCallback((cb: (committer: TimelineCommitter) => void) => {
+    commitEventCallbacks.current = commitEventCallbacks.current.filter(c => c !== cb);
+  }, []);
+
+  const handleTick = useCallback(() => {
+    tickEventCallbacks.current.forEach(cb => {
+      const engineClock = engineRef?.current?.getClock();
+      if (engineClock?.current && engineClock?.start && engineClock?.stop) {
+        cb(engineClock.current, { start: engineClock?.start, stop: engineClock?.stop });
+      }
+    });
+  }, [engineRef]);
+
+  const timelineManager = useMemo(() => {
+    return {
+      timeline: {
+        get start() {
+          return engineRef?.current?.getClock()?.start;
+        },
+        get stop() {
+          return engineRef?.current?.getClock()?.stop;
+        },
+        get current() {
+          return engineRef?.current?.getClock()?.current;
+        },
+      },
+      options,
+      computedTimeline,
+      commit,
+      onTick,
+      offTick,
+      onCommit,
+      offCommit,
+      handleTick,
+      tick: engineRef?.current?.tick,
+    };
+  }, [
+    options,
+    computedTimeline,
+    engineRef,
+    commit,
+    onTick,
+    offTick,
+    onCommit,
+    offCommit,
+    handleTick,
+  ]);
+
+  if (timelineManagerRef) {
+    timelineManagerRef.current = timelineManager;
+  }
+
+  return null;
+};

package/src/Map/utils.test.ts

@@ -0,0 +1,62 @@
+import { renderHook } from "@testing-library/react";
+import { expect, test } from "vitest";
+
+import { useGet, wrapRef } from "./utils";
+
+test("useGet", () => {
+  const obj = { a: 1 };
+  const { result } = renderHook(() => useGet(obj));
+  expect(result.current()).toBe(obj);
+  expect(result.current().a).toBe(1);
+
+  obj.a = 2;
+  expect(result.current()).toBe(obj);
+  expect(result.current().a).toBe(2);
+
+  const { result: result2, rerender: rerender2 } = renderHook(
+    props => {
+      return useGet(props);
+    },
+    {
+      initialProps: { b: 1 },
+    },
+  );
+  expect(result2.current()).toEqual({ b: 1 });
+  rerender2({ b: 2 });
+  expect(result2.current()).toEqual({ b: 2 });
+});
+
+test("wrapRef", () => {
+  const ref: {
+    current: {
+      a: (a: number, b: number) => number;
+      b: string;
+      c: (a: number, b: number) => number;
+    } | null;
+  } = {
+    current: null,
+  };
+
+  const res = wrapRef(ref, { a: 1, c: 1 });
+  expect(res).toEqual({
+    a: expect.any(Function),
+    b: undefined,
+    c: expect.any(Function),
+  });
+  expect(res.a(1, 2)).toBeUndefined();
+  expect((res as any).b).toBeUndefined();
+
+  ref.current = {
+    a: (a: number, b: number) => a + b,
+    b: "foobar",
+    c: (a: number, b: number) => a - b,
+  };
+  expect(res.a(1, 2)).toBe(3);
+  expect((res as any).b).toBeUndefined();
+  expect(res.c(1, 2)).toBe(-1);
+
+  ref.current = null;
+  expect(res.a(1, 2)).toBeUndefined();
+  expect((res as any).b).toBeUndefined();
+  expect(res.c(1, 2)).toBeUndefined();
+});

package/src/Map/utils.ts

@@ -0,0 +1,71 @@
+import { cloneDeep, mergeWith, omit } from "lodash-es";
+import { type RefObject, useCallback, useRef, useState, useMemo } from "react";
+
+export function useGet<T>(value: T): () => T {
+  const ref = useRef<T>(value);
+  ref.current = value;
+  return useCallback(() => ref.current, []);
+}
+
+export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef<T> {
+  return Object.fromEntries(
+    (Object.keys(keys) as (keyof T)[]).map(k => {
+      return [k, (...args: any[]) => (ref.current?.[k] as any)?.(...args)];
+    }),
+  ) as WrappedRef<T>;
+}
+
+export function mergeProperty(a: any, b: any) {
+  const a2 = cloneDeep(a);
+  return mergeWith(
+    a2,
+    b,
+    (s: any, v: any, _k: string | number | symbol, _obj: any, _src: any, stack: { size: number }) =>
+      stack.size > 0 || Array.isArray(v) ? v ?? s : undefined,
+  );
+}
+
+export function useOverriddenProperty<T extends {}>(
+  property: T | undefined,
+): [T, (pluginId: string, property: T) => void] {
+  const [overriddenProperties, setOverrideProperty] = useState<{
+    [pluginId: string]: any;
+  }>({});
+  const { overriddenPropertyCommon, overriddenProperty } = useMemo(() => {
+    const { "": overriddenPropertyCommon, ...overriddenProperty } = overriddenProperties;
+    return { overriddenPropertyCommon, overriddenProperty };
+  }, [overriddenProperties]);
+
+  const overrideProperty = useCallback((pluginId: string, property: any) => {
+    setOverrideProperty(p => (property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId)));
+  }, []);
+
+  const mergedProperty = useMemo(() => {
+    return [overriddenPropertyCommon, ...Object.values(overriddenProperty)].reduce(
+      (p, v) => mergeProperty(p, v),
+      property,
+    );
+  }, [property, overriddenPropertyCommon, overriddenProperty]);
+
+  return [mergedProperty, overrideProperty];
+}
+
+export type FunctionKeys<T> = {
+  [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: 1;
+};
+
+export type WrappedRef<T> = {
+  [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: T[P] extends (
+    ...args: infer A
+  ) => infer R
+    ? (...args: A) => R | undefined
+    : never;
+};
+
+export type Undefinable<T extends object> = {
+  [K in keyof T]: T[K] extends object
+    ? T[K] extends (...args: any[]) => any
+      ? T[K] | undefined
+      : Undefinable<T[K]> | undefined
+    : T[K] | undefined;
+};

package/src/Visualizer/DropHolder.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+export interface Props {
+  className?: string;
+}
+
+const draggableViewStyle = {
+  position: "absolute" as const,
+  // https://github.com/reearth/reearth/blob/d8d9f34dd90abd198c924ebbb8d3553bf8d31c85/web/src/services/theme/reearthTheme/common/zIndex.ts#L16
+  zIndex: 600,
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  // https://github.com/reearth/reearth/blob/714fb912927cfa370decad90ef9429a6d306950c/web/src/services/theme/reearthTheme/common/colors.ts#L3
+  background: "#3B3CD0",
+  opacity: 0.5,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const dragMessageStyle = {
+  // https://github.com/reearth/reearth/blob/7fff78c5c92473b30e756f33d5e6567c0f3c2545/web/src/services/theme/reearthTheme/darkTheme/index.ts#L21
+  color: "rgba(0,0,0,0.2)",
+  opacity: 1,
+};
+
+const DropHolder: React.FC<Props> = ({ className }) => {
+  // Memo: i18n is removed here
+  // since this ("Drop here") is the only place that i18n is used
+  // Maybe we don't need the text here.
+
+  return (
+    <div className={className} style={draggableViewStyle}>
+      <div style={dragMessageStyle}>Drop here</div>
+    </div>
+  );
+};
+
+export default DropHolder;

package/src/Visualizer/Error.tsx

@@ -0,0 +1,15 @@
+import type { FallbackProps } from "react-error-boundary";
+
+export default function Error({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div>
+      <h1>Oops! An Error Occurred</h1>
+      <p>{error.message}</p>
+      <p>
+        <button style={{ color: "#fff" }} onClick={resetErrorBoundary}>
+          Retry
+        </button>
+      </p>
+    </div>
+  );
+}

package/src/Visualizer/context.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren, RefObject, createContext, useContext, useMemo } from "react";
+
+import { MapRef } from "../Map";
+
+const context = createContext<RefObject<MapRef> | undefined>(undefined);
+
+export type Context = RefObject<MapRef>;
+
+export const useVisualizer = (): RefObject<MapRef> => {
+  const value = useContext(context);
+  if (!value) {
+    throw new Error("Visualizer is not declared. You have to use this hook inside of Visualizer");
+  }
+  return value;
+};
+
+const filterMapRefToContext = (mapRef: RefObject<MapRef>): Context => {
+  return mapRef as Context;
+};
+
+export const VisualizerProvider: FC<PropsWithChildren<{ mapRef: RefObject<MapRef> }>> = ({
+  mapRef,
+  children,
+}) => {
+  const value = useMemo(() => filterMapRefToContext(mapRef), [mapRef]);
+  return <context.Provider value={value}>{children}</context.Provider>;
+};

package/src/Visualizer/coreContext.tsx

@@ -0,0 +1,47 @@
+import { createContext } from "react";
+
+import {
+  LayerEditEvent,
+  LayerSelectionReason,
+  LayerVisibilityEvent,
+  SceneProperty,
+} from "../engines";
+import { ComputedFeature, ComputedLayer } from "../mantle";
+import {
+  LayerLoadEvent,
+  LayerSelectWithRectEnd,
+  LayerSelectWithRectMove,
+  LayerSelectWithRectStart,
+} from "../Map";
+import { SketchEventCallback, SketchType } from "../Map/Sketch/types";
+
+import { InteractionModeType } from "./interactionMode";
+import { Viewport } from "./useViewport";
+
+type CoreContext = {
+  interactionMode?: InteractionModeType;
+  selectedLayer?: {
+    layerId?: string | undefined;
+    featureId?: string | undefined;
+    layer?: ComputedLayer | undefined;
+    reason?: LayerSelectionReason | undefined;
+  };
+  selectedComputedFeature?: ComputedFeature | undefined;
+  viewport?: Viewport;
+  overriddenSceneProperty?: SceneProperty;
+  overrideSceneProperty?: (pluginId: string, property: SceneProperty) => void;
+  handleCameraForceHorizontalRollChange?: (enable?: boolean) => void;
+  handleInteractionModeChange?: (mode?: InteractionModeType | undefined) => void;
+  onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;
+  onSketchTypeChange?: (cb: (type: SketchType | undefined) => void) => void;
+  onLayerVisibility?: (cb: (e: LayerVisibilityEvent) => void) => void;
+  onLayerLoad?: (cb: (e: LayerLoadEvent) => void) => void;
+  onLayerEdit?: (cb: (e: LayerEditEvent) => void) => void;
+  onLayerSelectWithRectStart?: (cb: (e: LayerSelectWithRectStart) => void) => void;
+  onLayerSelectWithRectMove?: (cb: (e: LayerSelectWithRectMove) => void) => void;
+  onLayerSelectWithRectEnd?: (cb: (e: LayerSelectWithRectEnd) => void) => void;
+};
+
+const coreContext = createContext<CoreContext>({});
+
+export { coreContext };

package/src/Visualizer/engines.ts

@@ -0,0 +1,7 @@
+import { engine as cesium } from "../engines/Cesium";
+
+export const engines = {
+  cesium,
+};
+
+export type EngineType = keyof typeof engines;

package/src/Visualizer/featureFlags.ts

@@ -0,0 +1,9 @@
+export const FEATURE_FLAGS = {
+  CAMERA_MOVE: 1 << 0,
+  CAMERA_ZOOM: 1 << 1,
+  CAMERA_TILT: 1 << 2,
+  CAMERA_LOOK: 1 << 3,
+  SINGLE_SELECTION: 1 << 4,
+  MULTIPLE_SELECTION: 1 << 5,
+  SKETCH: 1 << 6,
+};