@reearth/core 0.0.7-alpha.17 → 0.0.7-alpha.19

package/dist/index.d.ts

@@ -608,6 +608,7 @@ export declare type EngineRef = {
     unselectFeatures: (layerId: string, featureId: string[]) => void;
     pickManyFromViewport: (windowPosition: [x: number, y: number], windowWidth: number, windowHeight: number, condition?: (f: PickedFeature) => boolean) => PickedFeature[] | undefined;
     calcRectangleControlPoint: (p1: Position3d, p2: Position3d, p3: Position3d) => [p1: Position3d, p2: Position3d, p3: Position3d];
+    getCredits: () => Credit[] | undefined;
 } & MouseEventHandles;
 
 export declare const engines: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.17",
+  "version": "0.0.7-alpha.19",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Map/ref.ts

@@ -91,6 +91,7 @@ const engineRefKeys: FunctionKeys<EngineRef> = {
   bringToFront: 1,
   sendToBack: 1,
   calcRectangleControlPoint: 1,
+  getCredits: 1,
 };
 
 const layersRefKeys: FunctionKeys<LayersRef> = {

package/src/Map/types/index.ts

@@ -211,6 +211,7 @@ export type EngineRef = {
     p2: Position3d,
     p3: Position3d,
   ) => [p1: Position3d, p2: Position3d, p3: Position3d];
+  getCredits: () => Credit[] | undefined;
 } & MouseEventHandles;
 
 export type EngineProps = {

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -448,7 +448,7 @@ export const useHooks = ({
 }) => {
   const { viewer } = useCesium();
   const tilesetRef = useRef<Cesium3DTilesetType>();
-  const { onLayerLoad } = useContext();
+  const { onLayerLoad, updateCredits } = useContext();
   const layerIdRef = useRef(layer?.id);
   layerIdRef.current = layer?.id;
 
@@ -500,8 +500,9 @@ export const useHooks = ({
     return prevPlanes.current;
   }, [_planes]);
   const clipDirection = direction === "inside" ? -1 : 1;
+
   // Create immutable object
-  const [clippingPlanes] = useState(
+  const [clippingPlanes, setClippingPlanes] = useState<CesiumClippingPlaneCollection>(
     () =>
       new CesiumClippingPlaneCollection({
         planes: planes?.map(
@@ -516,6 +517,27 @@ export const useHooks = ({
         edgeColor: toColor(edgeColor),
       }),
   );
+  // Initialize clipping planes
+  // This is workaround to reinitialize ClippingPlanes in strict mode.
+  useEffect(
+    () => () => {
+      setClippingPlanes(
+        new CesiumClippingPlaneCollection({
+          planes: planes?.map(
+            plane =>
+              new ClippingPlane(
+                new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+                (plane.distance || 0) * clipDirection,
+              ),
+          ),
+          unionClippingRegions: direction === "outside",
+          edgeWidth: edgeWidth,
+          edgeColor: toColor(edgeColor),
+        }),
+      );
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   const { drawClippingEnabled, drawClippingEdgeProps } = useDrawClipping({
     ...experimental_clipping?.draw,
@@ -779,6 +801,13 @@ export const useHooks = ({
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    updateCredits?.();
+    return () => {
+      updateCredits?.();
+    };
+  }, [type, updateCredits]);
+
   return {
     tilesetUrl,
     ref,

package/src/engines/Cesium/Feature/context.ts

@@ -26,6 +26,7 @@ export type Context = {
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
   isPositionVisible?: (position: [x: number, y: number, z: number]) => boolean;
+  updateCredits?: () => void;
 };
 
 export const context = createContext<Context>({});

package/src/engines/Cesium/common.ts

@@ -35,6 +35,8 @@ import {
   Plane,
   CameraEventType,
   KeyboardEventModifier,
+  CreditDisplay,
+  Credit as CesiumCredit,
 } from "cesium";
 import { MutableRefObject, useMemo } from "react";
 
@@ -898,3 +900,35 @@ export function getExtrudedHeight(
   }
   return;
 }
+
+export function getCredits(viewer: Viewer) {
+  if (!viewer) return;
+  const creditDisplay = viewer.creditDisplay as
+    | (CreditDisplay & {
+        _currentFrameCredits: {
+          lightboxCredits: { _array: { credit?: CesiumCredit }[] };
+          screenCredits: { _array: { credit?: CesiumCredit }[] };
+        };
+        _currentCesiumCredit: CesiumCredit;
+      })
+    | undefined;
+
+  if (!creditDisplay) return;
+
+  const { lightboxCredits, screenCredits } = creditDisplay?._currentFrameCredits || {};
+  const cesiumCredits = creditDisplay._currentCesiumCredit;
+
+  const credits: {
+    html?: string;
+  }[] = [
+    ...(cesiumCredits?.html ? [{ html: cesiumCredits.html }] : []),
+    ...Array.from(lightboxCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+    ...Array.from(screenCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+  ];
+
+  return credits;
+}

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

@@ -32,6 +32,7 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
+  getCredits,
 } from "../common";
 import { attachTag, getTag } from "../Feature";
 import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
@@ -974,6 +975,11 @@ export default function useEngineRef(
         const p5 = [pp5.x, pp5.y, pp5.z] as Position3d;
         return [p1, p2, p5];
       },
+      getCredits: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCredits(viewer);
+      },
     };
   }, [cesium]);
 

package/src/engines/Cesium/hooks.ts

@@ -12,8 +12,6 @@ import {
   GroundPrimitive,
   ShadowMap,
   ImageryLayer,
-  CreditDisplay,
-  Credit as CesiumCredit,
 } from "cesium";
 import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
@@ -40,7 +38,7 @@ import {
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
 import { FEATURE_FLAGS } from "../../Visualizer/featureFlags";
 
-import { isSelectable } from "./common";
+import { getCredits, isSelectable } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import { arrayToCartecian3 } from "./helpers/sphericalHaromic";
 import useCamera from "./hooks/useCamera";
@@ -653,6 +651,22 @@ export default ({
     viewer.scene.requestRender();
   }, []);
 
+  const onCreditsUpdateRef = useRef(onCreditsUpdate);
+  onCreditsUpdateRef.current = onCreditsUpdate;
+  const updateCredits = useCallback(() => {
+    if (!onCreditsUpdateRef.current) return;
+    // currently we don't have a proper way to get the credits update event
+    // wait for 3 seconds to get latest credits
+    // some internal property is been used here.
+    setTimeout(() => {
+      if (!onCreditsUpdateRef.current) return;
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return;
+      const credits: Credit[] = getCredits(viewer) ?? [];
+      onCreditsUpdateRef.current(credits);
+    }, 3000);
+  }, []);
+
   const context = useMemo<FeatureContext>(
     () => ({
       selectionReason,
@@ -667,8 +681,17 @@ export default ({
       toXYZ: engineAPI.toXYZ,
       toWindowPosition: engineAPI.toWindowPosition,
       isPositionVisible: engineAPI.isPositionVisible,
+      updateCredits,
     }),
-    [selectionReason, engineAPI, onLayerEdit, onLayerVisibility, onLayerLoad, timelineManagerRef],
+    [
+      selectionReason,
+      engineAPI,
+      onLayerEdit,
+      onLayerVisibility,
+      onLayerLoad,
+      timelineManagerRef,
+      updateCredits,
+    ],
   );
 
   useEffect(() => {
@@ -733,41 +756,6 @@ export default ({
     unmountCamera?.();
   }, [unmountCamera]);
 
-  const updateCredits = useCallback(() => {
-    if (!onCreditsUpdate) return;
-    // currently we don't have a proper way to get the credits update event
-    // wait for 3 seconds to get latest credits
-    // some internal property is been used here.
-    setTimeout(() => {
-      const creditDisplay = cesium.current?.cesiumElement?.creditDisplay as
-        | (CreditDisplay & {
-            _currentFrameCredits: {
-              lightboxCredits: { _array: { credit?: CesiumCredit }[] };
-              screenCredits: { _array: { credit?: CesiumCredit }[] };
-            };
-            _currentCesiumCredit: CesiumCredit;
-          })
-        | undefined;
-
-      if (!creditDisplay) return;
-
-      const { lightboxCredits, screenCredits } = creditDisplay?._currentFrameCredits || {};
-      const cesiumCredits = creditDisplay._currentCesiumCredit;
-
-      const credits: Credit[] = [
-        ...(cesiumCredits?.html ? [{ html: cesiumCredits.html }] : []),
-        ...Array.from(lightboxCredits?._array ?? []).map(c => ({
-          html: c?.credit?.html,
-        })),
-        ...Array.from(screenCredits?._array ?? []).map(c => ({
-          html: c?.credit?.html,
-        })),
-      ];
-
-      onCreditsUpdate(credits);
-    }, 3000);
-  }, [onCreditsUpdate]);
-
   const handleTilesChange = useCallback(() => {
     updateCredits();
   }, [updateCredits]);