@reearth/core 0.0.7-alpha.42 → 0.0.7-alpha.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.42",
+  "version": "0.0.7-alpha.44",
   "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/Visualizer/hooks.ts

@@ -82,7 +82,7 @@ export default function useHooks(
       info: SelectedFeatureInfo | undefined,
     ) => {
       const isSketchLayer =
-        selectedLayer.layer?.layer.type === "simple" &&
+        selectedLayer.layer?.layer?.type === "simple" &&
         selectedLayer.layer?.layer?.data?.isSketchLayer;
       // Sketch layer feature has a fixed featureId, we need to exclude it from the skip condition
       if (

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

@@ -177,7 +177,7 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 
 const useFeature = ({
   id,
-  tileset,
+  tilesetRef,
   idProperty,
   layer,
   viewer,
@@ -189,7 +189,7 @@ const useFeature = ({
   isTilesetReady,
 }: {
   id?: string;
-  tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
   idProperty?: string;
   layer?: ComputedLayer;
   viewer?: Viewer;
@@ -327,10 +327,10 @@ const useFeature = ({
   handleTilesetLoadRef.current = handleTilesetLoad;
   useEffect(
     () =>
-      tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
         handleTilesetLoadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   const handleTilesetUnload = useCallback(
@@ -346,10 +346,10 @@ const useFeature = ({
   handleTilesetUnloadRef.current = handleTilesetUnload;
   useEffect(
     () =>
-      tileset.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
         handleTilesetUnloadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   useEffect(() => {
@@ -487,6 +487,8 @@ export const useHooks = ({
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
+  const [isTilesetCompReady, setIsTilesetCompReady] = useState(false);
+  const [isTilesetRefReady, setIsTilesetRefReady] = useState(false);
 
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
@@ -566,6 +568,7 @@ export const useHooks = ({
         (tileset?.cesiumElement as any)[layerIdField] = layer.id;
       }
       tilesetRef.current = tileset?.cesiumElement;
+      setIsTilesetRefReady(!!tileset?.cesiumElement);
     },
     [id, layer?.id, featureIndex, shouldUseFeatureIndex],
   );
@@ -602,7 +605,7 @@ export const useHooks = ({
 
   useFeature({
     id,
-    tileset: tilesetRef,
+    tilesetRef,
     layer,
     idProperty,
     viewer,
@@ -806,13 +809,18 @@ export const useHooks = ({
 
   const handleReady = useCallback(
     (tileset: Cesium3DTileset) => {
-      setIsTilesetReady(true);
+      setIsTilesetCompReady(true);
       onLayerFetch?.({ properties: tileset.properties });
       onLayerLoad?.({ layerId: layerIdRef.current });
     },
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    if (!isTilesetCompReady || !isTilesetRefReady) return;
+    setIsTilesetReady(true);
+  }, [isTilesetCompReady, isTilesetRefReady]);
+
   useEffect(() => {
     updateCredits?.();
     return () => {

package/src/engines/Cesium/core/Imagery.test.ts

@@ -6,7 +6,7 @@ import { type Tile, useImageryProviders } from "./Imagery";
 test("useImageryProviders", () => {
   const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
   const provider2 = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge2: url }));
-  const presets = { default: provider, foobar: provider2 };
+  const presets = { default: provider, default_label: provider2 };
   const { result, rerender } = renderHook(
     ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
       useImageryProviders({
@@ -14,23 +14,28 @@ test("useImageryProviders", () => {
         presets,
         cesiumIonAccessToken,
       }),
-    { initialProps: { tiles: [{ id: "1", type: "default" }] } },
+    { initialProps: { tiles: [{ id: "1", type: "default" }], cesiumIonAccessToken: undefined } },
   );
 
+  const typedRerender = rerender as (props: {
+    tiles: Tile[];
+    cesiumIonAccessToken?: string;
+  }) => void;
+
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(1);
   const prevImageryProvider = result.current.providers["1"][2];
 
   // re-render with same tiles
-  rerender({ tiles: [{ id: "1", type: "default" }] });
+  typedRerender({ tiles: [{ id: "1", type: "default" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
   expect(provider).toBeCalledTimes(1);
 
   // update a tile URL
-  rerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
+  typedRerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
@@ -40,7 +45,7 @@ test("useImageryProviders", () => {
   const prevImageryProvider2 = result.current.providers["1"][2];
 
   // add a tile with URL
-  rerender({
+  typedRerender({
     tiles: [
       { id: "2", type: "default" },
       { id: "1", type: "default", url: "a" },
@@ -56,7 +61,7 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(3);
 
   // sort tiles
-  rerender({
+  typedRerender({
     tiles: [
       { id: "1", type: "default", url: "a" },
       { id: "2", type: "default" },
@@ -72,7 +77,7 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(3);
 
   // delete a tile
-  rerender({
+  typedRerender({
     tiles: [{ id: "1", type: "default", url: "a" }],
     cesiumIonAccessToken: "a",
   });
@@ -85,18 +90,31 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(4);
 
   // update a tile type
-  rerender({
-    tiles: [{ id: "1", type: "foobar", url: "u" }],
+  typedRerender({
+    tiles: [{ id: "1", type: "default_label", url: "u" }],
     cesiumIonAccessToken: "a",
   });
 
   expect(result.current.providers).toEqual({
-    "1": ["foobar", "u", { hoge2: "u" }],
+    "1": ["default_label", "u", { hoge2: "u" }],
   });
   expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(4);
   expect(provider2).toBeCalledTimes(1);
 
-  rerender({ tiles: [] });
+  // update a tile type to unexpected type
+  typedRerender({
+    tiles: [{ id: "1", type: "unexpected_type", url: "u" }],
+  });
+
+  expect(result.current.providers).toEqual({
+    // unexpected type is treated as "default"
+    "1": ["unexpected_type", "u", { hoge: "u" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(5);
+  expect(provider2).toBeCalledTimes(1);
+
+  typedRerender({ tiles: [] });
   expect(result.current.providers).toEqual({});
 });

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

@@ -8,7 +8,7 @@ import { isEqual } from "lodash-es";
 import { useCallback, useMemo, useRef, useLayoutEffect, useState, useEffect } from "react";
 import { ImageryLayer } from "resium";
 
-import { tiles as tilePresets } from "./presets";
+import { isValidPresetTileType, PresetTileType, tiles as tilePresets } from "./presets";
 
 export type ImageryLayerData = {
   id: string;
@@ -90,7 +90,7 @@ export function useImageryProviders({
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
   presets: {
-    [key: string]: (opts?: {
+    [K in PresetTileType]: (opts?: {
       url?: string;
       cesiumIonAccessToken?: string;
       heatmap?: boolean;
@@ -100,7 +100,7 @@ export function useImageryProviders({
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
     (t: Tile, ciat?: string) =>
-      presets[t.type || "default"]({
+      presets[isValidPresetTileType(t.type) ? t.type : "default"]({
         url: t.url,
         cesiumIonAccessToken: ciat,
         heatmap: t.heatmap,
@@ -113,11 +113,14 @@ export function useImageryProviders({
   const tileKeys = tiles.map(t => t.id).join(",");
   const prevTileKeys = useRef(tileKeys);
   const prevProviders = useRef<Providers>({});
-  const zoomLevels = useMemo(() => tiles.map(t => {
-      if (t.id && t.zoomLevel) return { [t.id]: t.zoomLevel };
-      return
-  }),
-  [tiles]);
+  const zoomLevels = useMemo(
+    () =>
+      tiles.map(t => {
+        if (t.id && t.zoomLevel) return { [t.id]: t.zoomLevel };
+        return;
+      }),
+    [tiles],
+  );
   const prevZoomLevels = useRef(zoomLevels);
 
   // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.

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

@@ -10,6 +10,22 @@ import {
 
 import { JapanGSIOptimalBVmapLabelImageryProvider } from "./labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider";
 
+const PRESET_TILE_TYPES = [
+  "default",
+  "default_label",
+  "default_road",
+  "open_street_map",
+  "black_marble",
+  "japan_gsi_standard",
+  "url",
+];
+
+export type PresetTileType = (typeof PRESET_TILE_TYPES)[number];
+
+export const isValidPresetTileType = (type: string | undefined): type is PresetTileType => {
+  return PRESET_TILE_TYPES.includes(type as PresetTileType);
+};
+
 export const tiles = {
   default: ({ cesiumIonAccessToken } = {}) =>
     IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
@@ -26,8 +42,7 @@ export const tiles = {
   open_street_map: () =>
     new OpenStreetMapImageryProvider({
       url: "https://tile.openstreetmap.org",
-      credit:
-        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      credit: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }),
   black_marble: ({ cesiumIonAccessToken } = {}) =>
     IonImageryProvider.fromAssetId(3812, {
@@ -43,15 +58,13 @@ export const tiles = {
     url
       ? new UrlTemplateImageryProvider({
           url,
-          tileDiscardPolicy: heatmap
-            ? new DiscardEmptyTileImagePolicy()
-            : undefined,
+          tileDiscardPolicy: heatmap ? new DiscardEmptyTileImagePolicy() : undefined,
           minimumLevel: tile_zoomLevel?.[0],
           maximumLevel: tile_zoomLevel?.[1],
         })
       : null,
 } as {
-  [key: string]: (opts?: {
+  [K in PresetTileType]: (opts?: {
     url?: string;
     cesiumIonAccessToken?: string;
     heatmap?: boolean;