fix: handle unexpected preset tile type (#93)

Author: airslice

example/constants.ts

@@ -22,6 +22,7 @@ export const TILES = [
   "esri_world_topo",
   "black_marble",
   "japan_gsi_standard",
+  "test_unexpected_type",
 ];
 
 export const SKETCH_TOOLS: SketchType[] = [

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

@@ -6,31 +6,36 @@ 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({
         tiles,
         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({});
 });

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.

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;