@reearth/core 0.0.7-alpha.15 → 0.0.7-alpha.16

package/dist/index.d.ts

@@ -356,6 +356,7 @@ export declare type CoreVisualizerProps = {
     ready?: boolean;
     hiddenLayers?: string[];
     zoomedLayerId?: string;
+    displayCredits?: boolean;
     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;
@@ -367,6 +368,11 @@ export declare type CoreVisualizerProps = {
     onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
     onInteractionModeChange?: (mode: InteractionModeType) => void;
     onAPIReady?: () => void;
+    onCreditsUpdate?: (credits: Credit[]) => void;
+};
+
+export declare type Credit = {
+    html?: string;
 };
 
 export declare type CursorType = "auto" | "grab" | "crosshair";
@@ -496,6 +502,7 @@ export declare type EngineProps = {
     isLayerDragging?: boolean;
     shouldRender?: boolean;
     meta?: Record<string, unknown>;
+    displayCredits?: boolean;
     layersRef?: RefObject<LayersRef>;
     requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
     timelineManagerRef?: TimelineManagerRef;
@@ -510,6 +517,7 @@ export declare type EngineProps = {
     onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
     onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
     onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+    onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export declare type EngineRef = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.15",
+  "version": "0.0.7-alpha.16",
   "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/types/index.ts

@@ -235,6 +235,7 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  displayCredits?: boolean;
   layersRef?: RefObject<LayersRef>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
@@ -258,6 +259,7 @@ export type EngineProps = {
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export type LayerEditEvent = {
@@ -381,3 +383,7 @@ export type SketchRef = {
   deleteFeature: (layerId: string, featureId: string) => void;
   onEditFeatureChange: (cb: SketchEditFeatureChangeCb) => void;
 };
+
+export type Credit = {
+  html?: string;
+};

package/src/Visualizer/index.tsx

@@ -12,6 +12,7 @@ import {
   type LatLng,
   type Cluster,
   type ComputedLayer,
+  type Credit,
 } from "../Map";
 import { SketchFeature, SketchType } from "../Map/Sketch/types";
 
@@ -46,6 +47,7 @@ export type CoreVisualizerProps = {
   ready?: boolean;
   hiddenLayers?: string[];
   zoomedLayerId?: string;
+  displayCredits?: boolean;
   onCameraChange?: (camera: Camera) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
@@ -62,6 +64,7 @@ export type CoreVisualizerProps = {
   onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
   onInteractionModeChange?: (mode: InteractionModeType) => void;
   onAPIReady?: () => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export const CoreVisualizer = memo(
@@ -82,6 +85,7 @@ export const CoreVisualizer = memo(
         interactionMode,
         shouldRender,
         meta,
+        displayCredits = true,
         style,
         zoomedLayerId,
         children,
@@ -96,6 +100,7 @@ export const CoreVisualizer = memo(
         onSketchFeatureUpdate,
         onSketchFeatureDelete,
         onAPIReady,
+        onCreditsUpdate,
       },
       ref: Ref<MapRef | null>,
     ) => {
@@ -160,6 +165,7 @@ export const CoreVisualizer = memo(
                 isLayerDragging={isLayerDragging}
                 isLayerDraggable={isEditable}
                 meta={meta}
+                displayCredits={displayCredits}
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
@@ -191,6 +197,7 @@ export const CoreVisualizer = memo(
                 onLayerSelectWithRectMove={handleLayerSelectWithRectMove}
                 onLayerSelectWithRectEnd={handleLayerSelectWithRectEnd}
                 onAPIReady={onAPIReady}
+                onCreditsUpdate={onCreditsUpdate}
               />
               <coreContext.Provider value={coreContextValue}>{children}</coreContext.Provider>
             </div>

package/src/engines/Cesium/core/Globe.tsx

@@ -5,7 +5,7 @@ import {
   IonResource,
   TerrainProvider,
 } from "cesium";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Globe as CesiumGlobe } from "resium";
 
 import type { ViewerProperty, TerrainProperty } from "../..";
@@ -15,9 +15,14 @@ import { toColor } from "../common";
 export type Props = {
   property?: ViewerProperty;
   cesiumIonAccessToken?: string;
+  onTerrainProviderChange?: () => void;
 };
 
-export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.Element | null {
+export default function Globe({
+  property,
+  cesiumIonAccessToken,
+  onTerrainProviderChange,
+}: Props): JSX.Element | null {
   const terrainProperty = useMemo(
     (): TerrainProperty => ({
       ...property?.terrain,
@@ -51,6 +56,10 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
     [property?.globe?.baseColor],
   );
 
+  useEffect(() => {
+    onTerrainProviderChange?.();
+  }, [terrainProvider, onTerrainProviderChange]);
+
   return (
     <CesiumGlobe
       baseColor={baseColor}

package/src/engines/Cesium/core/Imagery.tsx

@@ -5,7 +5,7 @@ import {
   TextureMinificationFilter,
 } from "cesium";
 import { isEqual } from "lodash-es";
-import { useCallback, useMemo, useRef, useLayoutEffect, useState } from "react";
+import { useCallback, useMemo, useRef, useLayoutEffect, useState, useEffect } from "react";
 import { ImageryLayer } from "resium";
 
 import { tiles as tilePresets } from "./presets";
@@ -31,9 +31,10 @@ export type Tile = {
 export type Props = {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  onTilesChange?: () => void;
 };
 
-export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
+export default function ImageryLayers({ tiles, cesiumIonAccessToken, onTilesChange }: Props) {
   const { providers, updated } = useImageryProviders({
     tiles,
     cesiumIonAccessToken,
@@ -47,6 +48,10 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
     if (updated) setCounter(c => c + 1);
   }, [providers, updated]);
 
+  useEffect(() => {
+    onTilesChange?.();
+  }, [tiles, counter, onTilesChange]);
+
   return (
     <>
       {tiles

package/src/engines/Cesium/core/presets.ts

@@ -24,17 +24,6 @@ export const tiles = {
     IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
       accessToken: cesiumIonAccessToken,
     }).catch(console.error),
-  stamen_watercolor: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-      fileExtension: "jpg",
-    }),
-  stamen_toner: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/toner/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-    }),
   open_street_map: () =>
     new OpenStreetMapImageryProvider({
       url: "https://a.tile.openstreetmap.org/",

package/src/engines/Cesium/hooks.ts

@@ -12,6 +12,8 @@ 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";
@@ -27,6 +29,7 @@ import type {
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
+  Credit,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -89,6 +92,7 @@ export default ({
   onLayerLoad,
   onCameraChange,
   onMount,
+  onCreditsUpdate,
 }: {
   ref: React.ForwardedRef<EngineRef>;
   property?: ViewerProperty;
@@ -128,6 +132,7 @@ export default ({
   onLayerLoad?: (e: LayerLoadEvent) => void;
   onCameraChange?: (camera: Camera) => void;
   onMount?: () => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
 
@@ -728,6 +733,49 @@ 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]);
+
+  const handleTerrainProviderChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
   return {
     cesium,
     cesiumIonAccessToken,
@@ -747,6 +795,8 @@ export default ({
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   };
 };
 

package/src/engines/Cesium/index.tsx

@@ -47,6 +47,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    displayCredits,
     layersRef,
     featureFlags,
     requestingRenderMode,
@@ -63,6 +64,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onMount,
     onLayerVisibility,
     onLayerLoad,
+    onCreditsUpdate,
   },
   ref,
 ) => {
@@ -85,6 +87,8 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   } = useHooks({
     ref,
     property,
@@ -112,6 +116,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onLayerLoad,
     onCameraChange,
     onMount,
+    onCreditsUpdate,
   });
 
   return (
@@ -133,7 +138,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       navigationHelpButton={false}
       projectionPicker={false}
       sceneModePicker={false}
-      creditContainer={creditContainer}
+      creditContainer={displayCredits ? undefined : creditContainer}
       style={{
         width: small ? "300px" : "auto",
         height: small ? "300px" : "100%",
@@ -158,7 +163,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       onWheel={mouseEventHandles.wheel}>
       <Event onMount={handleMount} onUnmount={handleUnmount} />
       <Clock timelineManagerRef={timelineManagerRef} />
-      <ImageryLayers tiles={property?.tiles} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <ImageryLayers
+        tiles={property?.tiles}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTilesChange={handleTilesChange}
+      />
       <LabelImageryLayers tileLabels={property?.tileLabels} />
       <Indicator property={property} timelineManagerRef={timelineManagerRef} />
       <ScreenSpaceEventHandler useDefault>
@@ -252,7 +261,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         saturationShift={property?.sky?.skyAtmosphere?.saturationShift}
         brightnessShift={property?.sky?.skyAtmosphere?.brightnessShift}
       />
-      <Globe property={property} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <Globe
+        property={property}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTerrainProviderChange={handleTerrainProviderChange}
+      />
       <featureContext.Provider value={context}>{ready ? children : null}</featureContext.Provider>
       <AmbientOcclusion
         {...AMBIENT_OCCLUSION_QUALITY[property?.render?.ambientOcclusion?.quality || "low"]}