@reearth/core 0.0.1

package/src/engines/Cesium/hooks/useInstance.ts

@@ -0,0 +1,98 @@
+/**
+ * ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/cesium/src/useInstance.ts
+ */
+
+import { useEffect, useRef, useState } from "react";
+import invariant from "tiny-invariant";
+
+type DelegationEffect<T, Owner> = (instance: T, owner: Owner) => () => void;
+
+type InstanceDescriptor<
+  T,
+  CreatorFunction extends () => T | Promise<T>,
+  Keys extends unknown[],
+  Owner,
+> = {
+  keys: Keys;
+  create: CreatorFunction;
+} & (
+  | {
+      owner: Owner;
+      transferOwnership: DelegationEffect<T, Owner>;
+      destroy?: never;
+    }
+  | {
+      owner?: never;
+      transferOwnership?: never;
+      destroy?: ((instance: T) => void) | null;
+    }
+);
+
+type DisallowPromise<T> = T extends Promise<unknown> ? never : T;
+
+const hasMethod =
+  <K extends string | symbol>(name: K) =>
+  <R, T = unknown>(instance: T): instance is T & object & Record<K, R> =>
+    instance != null &&
+    typeof instance === "object" &&
+    name in instance &&
+    typeof instance[name as unknown as keyof typeof instance] === "function";
+
+function createDestructor<T, Keys extends unknown[], Owner>(
+  descriptor: InstanceDescriptor<T, () => T | Promise<T>, Keys, Owner>,
+  instance: T,
+): () => void {
+  if (descriptor.owner != null) {
+    invariant(descriptor.transferOwnership != null);
+    const owner = descriptor.owner; // Capture the current owner
+    const destructor = descriptor.transferOwnership(instance, descriptor.owner);
+    return () => {
+      // Call destructor only when the owner is not destroyed.
+      if (!hasMethod("isDestroyed")<() => boolean>(owner) || !owner.isDestroyed()) {
+        destructor();
+      }
+    };
+  } else {
+    const destroy = descriptor.destroy; // Capture the current destroy callback
+    return () => {
+      // Let the callback destroy instance, otherwise assume the instance might
+      // have destroy() method and automatically invoke it.
+      if (typeof destroy === "function") {
+        destroy(instance);
+      } else if (destroy !== null && hasMethod("destroy")<() => void>(instance)) {
+        instance.destroy();
+      }
+    };
+  }
+}
+
+export function useInstance<T, Keys extends unknown[], Owner>(
+  descriptor: InstanceDescriptor<T, () => DisallowPromise<T>, Keys, Owner>,
+): T {
+  const [state, setState] = useState<T>();
+  const ref = useRef<T>();
+  if (ref.current == null) {
+    ref.current = descriptor.create();
+  }
+
+  // useEffect is called twice with *the previous state* in StrictMode and in
+  // the future, but many resources of Cesium are destroyed on removal from the
+  // collection, which cannot be called twice. Letting the effect destroy the
+  // instance and recreate it in the second call effectively compensate for it.
+  useEffect(() => {
+    if (ref.current == null) {
+      ref.current = descriptor.create();
+      setState(ref.current); // Need to trigger state update
+    }
+    const instance = ref.current;
+    const destructor = createDestructor(descriptor, instance);
+    return () => {
+      destructor();
+      ref.current = undefined;
+      setState(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [descriptor.owner, ...descriptor.keys]);
+
+  return state ?? ref.current;
+}

package/src/engines/Cesium/hooks/useLayerSelectWithRect.ts

@@ -0,0 +1,157 @@
+import { Viewer } from "cesium";
+import { RefObject, useCallback, useMemo, useRef } from "react";
+import { CesiumComponentRef, CesiumMovementEvent } from "resium";
+
+import { EngineRef } from "../..";
+import {
+  LayerSelectWithRect,
+  LayerSelectWithRectEnd,
+  LayerSelectWithRectMove,
+  LayerSelectWithRectStart,
+} from "../../../Map";
+import { INTERACTION_MODES } from "../../../Visualizer/interactionMode";
+import { makeMouseEventProps } from "../utils/mouse";
+
+export const useLayerSelectWithRect = ({
+  cesium,
+  engineAPI,
+  featureFlags,
+  onLayerSelectWithRectStart,
+  onLayerSelectWithRectMove,
+  onLayerSelectWithRectEnd,
+}: {
+  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  engineAPI: EngineRef;
+  featureFlags: number;
+  onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
+  onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
+  onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+}) => {
+  const startPositionRef = useRef<[x: number, y: number]>([0, 0]);
+  const isDragMovingRef = useRef(false);
+  const isDragStartingRef = useRef(false);
+  const handleLayerSelectWithRectStart = useCallback(
+    (e: CesiumMovementEvent, pressedKey?: LayerSelectWithRect["pressedKey"]) => {
+      if (isDragMovingRef.current || isDragStartingRef.current) return;
+      if (featureFlags !== INTERACTION_MODES.selection) return;
+      if (!cesium.current?.cesiumElement || cesium.current.cesiumElement.isDestroyed()) return;
+      const mouseProps = makeMouseEventProps(cesium.current.cesiumElement, e) ?? {};
+      startPositionRef.current = [mouseProps.x ?? 0, mouseProps.y ?? 0];
+      isDragStartingRef.current = true;
+      isDragMovingRef.current = false;
+      onLayerSelectWithRectStart?.({ ...mouseProps, pressedKey });
+    },
+    [onLayerSelectWithRectStart, cesium, featureFlags],
+  );
+  const handleLayerSelectWithRectMove = useCallback(
+    (
+      e: CesiumMovementEvent,
+      pressedKey?: LayerSelectWithRect["pressedKey"],
+      ignoreEvent?: boolean,
+    ): LayerSelectWithRectMove | undefined => {
+      if (!isDragStartingRef.current) return;
+      if (!cesium.current?.cesiumElement || cesium.current.cesiumElement.isDestroyed()) return;
+
+      const mouseProps = makeMouseEventProps(cesium.current.cesiumElement, e) ?? {};
+
+      let [x1, y1] = startPositionRef.current;
+      let [x2, y2] = [mouseProps.x ?? 0, mouseProps.y ?? 0];
+
+      if (x2 - x1 === 0 && y2 - y1 === 0) return mouseProps;
+
+      if (!ignoreEvent) {
+        isDragMovingRef.current = true;
+      }
+
+      if (x1 > x2) {
+        [x2, x1] = [x1, x2];
+      }
+      if (y1 > y2) {
+        [y2, y1] = [y1, y2];
+      }
+
+      const props = {
+        ...mouseProps,
+        pressedKey,
+        x: x2,
+        y: y2,
+        startX: x1,
+        startY: y1,
+        width: x2 - x1,
+        height: y2 - y1,
+      };
+
+      onLayerSelectWithRectMove?.(props);
+
+      return props;
+    },
+    [onLayerSelectWithRectMove, cesium],
+  );
+  const handleLayerSelectWithRectEnd = useCallback(
+    (e: CesiumMovementEvent, pressedKey?: LayerSelectWithRect["pressedKey"]) => {
+      if (!isDragStartingRef.current) return;
+      if (!cesium.current?.cesiumElement || cesium.current.cesiumElement.isDestroyed()) return;
+      const mouseProps = handleLayerSelectWithRectMove(e, pressedKey, true);
+
+      const { startX = 0, startY = 0, x = 0, y = 0, width = 0, height = 0 } = mouseProps ?? {};
+      const [centerX, centerY] = [startX + width / 2, startY + height / 2];
+
+      const features = isDragMovingRef.current
+        ? engineAPI.pickManyFromViewport([centerX, centerY], width, height)
+        : engineAPI.pickManyFromViewport([x, y], 1, 1);
+      onLayerSelectWithRectEnd?.({
+        ...mouseProps,
+        pressedKey,
+        features: features ?? [],
+        isClick: !isDragMovingRef.current,
+      });
+
+      isDragMovingRef.current = false;
+      isDragStartingRef.current = false;
+    },
+    [onLayerSelectWithRectEnd, cesium, engineAPI, handleLayerSelectWithRectMove],
+  );
+
+  const eventHandlers = useMemo(() => {
+    type Events = {
+      [K in "start" | "move" | "end"]: {
+        handler: (
+          e: CesiumMovementEvent,
+          pressedKey?: LayerSelectWithRect["pressedKey"],
+        ) => unknown;
+        keys: NonNullable<LayerSelectWithRect["pressedKey"]>[];
+      };
+    };
+    const events: Events = {
+      start: {
+        handler: handleLayerSelectWithRectStart,
+        keys: ["shift"],
+      },
+      move: {
+        handler: handleLayerSelectWithRectMove,
+        keys: ["shift"],
+      },
+      end: {
+        handler: handleLayerSelectWithRectEnd,
+        keys: ["shift"],
+      },
+    };
+    return Object.fromEntries(
+      Object.entries(events).map(([k, v]) => [
+        k,
+        {
+          handler: v.handler,
+          ...Object.fromEntries(v.keys.map(k => [k, (e: CesiumMovementEvent) => v.handler(e, k)])),
+        },
+      ]),
+    ) as {
+      [K in keyof Events]: { handler: Events[K]["handler"] } & {
+        [KEY in Events[K]["keys"][number]]: (
+          e: CesiumMovementEvent,
+        ) => ReturnType<Events[K]["handler"]>;
+      };
+    };
+  }, [handleLayerSelectWithRectEnd, handleLayerSelectWithRectMove, handleLayerSelectWithRectStart]);
+
+  return eventHandlers;
+};

package/src/engines/Cesium/hooks/useSceneEvent.ts

@@ -0,0 +1,47 @@
+/**
+ * ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/cesium/src/useSceneEvent.ts
+ */
+import { type Event, type JulianDate, type Scene } from "@cesium/engine";
+import { useLayoutEffect, useRef } from "react";
+import { useCesium } from "resium";
+
+export type SceneEventType = {
+  [K in keyof Scene]: Scene[K] extends Event ? K : never;
+}[keyof Scene];
+
+export type SceneEventListener = (scene: Scene, currentTime: JulianDate) => void;
+
+export function useSceneEvent(type: SceneEventType, callback: SceneEventListener): void {
+  const { viewer } = useCesium();
+  const scene = viewer?.scene;
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useLayoutEffect(() => {
+    return scene?.[type].addEventListener((scene: Scene, currentTime: JulianDate) => {
+      try {
+        callbackRef.current(scene, currentTime);
+      } catch (error) {
+        // WORKAROUND: Errors in scene event listeners silently terminates
+        // rendering.
+        // TODO: Maybe a configuration issue.
+        console.error(error);
+      }
+    });
+  }, [type, scene]);
+}
+
+export function usePreUpdate(callback: SceneEventListener): void {
+  useSceneEvent("preUpdate", callback);
+}
+
+export function usePostUpdate(callback: SceneEventListener): void {
+  useSceneEvent("postUpdate", callback);
+}
+
+export function usePreRender(callback: SceneEventListener): void {
+  useSceneEvent("preRender", callback);
+}
+
+export function usePostRender(callback: SceneEventListener): void {
+  useSceneEvent("postRender", callback);
+}