fix(web): missing type gltf support for model asset input (#1209)

reearth · Oct 31, 2024 · 33e66ed · 33e66ed
1 parent 1eba6e1
commit 33e66ed
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/web/src/beta/features/AssetsManager/constants.ts b/web/src/beta/features/AssetsManager/constants.ts
@@ -8,11 +8,12 @@ export const IMAGE_FILE_TYPES = [
   "webp"
 ] as const;
 
+export const MODEL_FILE_TYPES = ["glb", "gltf"] as const;
+
 export const GIS_FILE_TYPES = [
   "geojson",
   "topojson",
   "json",
-  "glb",
   "csv",
   "shp",
   "kml",
@@ -25,16 +26,19 @@ export const GIS_FILE_TYPES = [
 
 export type ImageType = (typeof IMAGE_FILE_TYPES)[number];
 export type GisType = (typeof GIS_FILE_TYPES)[number];
-export type FileType = ImageType | GisType;
+export type ModelType = (typeof MODEL_FILE_TYPES)[number];
+export type FileType = ImageType | GisType | ModelType;
 
-export type AcceptedAssetsTypes = ("image" | "file" | FileType)[];
+export type AcceptedAssetsTypes = ("image" | "file" | "model" | FileType)[];
 
 export const IMAGE_FILE_TYPE_ACCEPT_STRING = "." + IMAGE_FILE_TYPES.join(",.");
-
 export const GIS_FILE_TYPE_ACCEPT_STRING = "." + GIS_FILE_TYPES.join(",");
+export const MODEL_FILE_TYPE_ACCEPT_STRING = "." + MODEL_FILE_TYPES.join(",");
 
 export const GENERAL_FILE_TYPE_ACCEPT_STRING =
-  "." + [...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES].join(",.");
+  "." +
+  [...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES, ...MODEL_FILE_TYPES].join(",.");
 
 export const IMAGE_TYPES = ["image" as const];
 export const FILE_TYPES = ["file" as const];
+export const MODEL_TYPES = ["model" as const];
diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
@@ -8,10 +8,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useFileInput from "use-file-input";
 
 import {
+  AcceptedAssetsTypes,
   FileType,
   GENERAL_FILE_TYPE_ACCEPT_STRING,
   GIS_FILE_TYPES,
-  IMAGE_FILE_TYPES
+  IMAGE_FILE_TYPES,
+  MODEL_FILE_TYPES
 } from "./constants";
 import { Asset, sortOptionValue, SortType } from "./types";
 
@@ -32,7 +34,7 @@ export default ({
 }: {
   workspaceId?: string;
   allowMultipleSelection: boolean;
-  assetsTypes?: ("image" | "file" | FileType)[];
+  assetsTypes?: AcceptedAssetsTypes;
   onSelectChange?: (assets: Asset[]) => void;
 }) => {
   // sort
@@ -118,7 +120,13 @@ export default ({
     () =>
       assetsTypes
         ?.map((t) =>
-          t === "image" ? IMAGE_FILE_TYPES : t === "file" ? GIS_FILE_TYPES : t
+          t === "image"
+            ? IMAGE_FILE_TYPES
+            : t === "file"
+              ? GIS_FILE_TYPES
+              : t === "model"
+                ? MODEL_FILE_TYPES
+                : t
         )
         .flat(),
     [assetsTypes]

diff --git a/.../beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/Field/index.tsx b/.../beta/features/Editor/Map/LayerStylePanel/Editor/StyleInterface/StyleNode/Field/index.tsx
@@ -62,7 +62,7 @@ const fieldComponents = {
     <AssetField
       inputMethod="asset"
       value={props.value as string}
-      assetsTypes={["glb"]}
+      assetsTypes={["model"]}
       onChange={props.onUpdate}
     />
   )

diff --git a/web/src/beta/ui/fields/AssetField/index.tsx b/web/src/beta/ui/fields/AssetField/index.tsx
@@ -3,7 +3,8 @@ import {
   AcceptedAssetsTypes,
   type FileType,
   GIS_FILE_TYPES,
-  IMAGE_FILE_TYPES
+  IMAGE_FILE_TYPES,
+  MODEL_FILE_TYPES
 } from "@reearth/beta/features/AssetsManager/constants";
 import { TextInput, Button } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
@@ -43,11 +44,19 @@ const AssetField: FC<AssetFieldProps> = ({
       if (!url) {
         setCurrentValue(url);
         onChange?.(url, name);
-      } else if (
+        return;
+      }
+
+      const extension = (url.split(".").pop() ?? "").toLowerCase();
+      const acceptedTypes = [
+        ...IMAGE_FILE_TYPES,
+        ...GIS_FILE_TYPES,
+        ...MODEL_FILE_TYPES
+      ];
+
+      if (
         inputMethod === "asset" &&
-        ![...IMAGE_FILE_TYPES, ...GIS_FILE_TYPES].includes(
-          (url.split(".").pop() as FileType) ?? ""
-        )
+        !acceptedTypes.includes(extension as FileType)
       ) {
         setNotification({
           type: "error",

diff --git a/web/src/beta/ui/fields/AssetField/useAssetUpload.ts b/web/src/beta/ui/fields/AssetField/useAssetUpload.ts
@@ -2,7 +2,8 @@ import {
   type AcceptedAssetsTypes,
   GIS_FILE_TYPES,
   IMAGE_FILE_TYPES,
-  GENERAL_FILE_TYPE_ACCEPT_STRING
+  GENERAL_FILE_TYPE_ACCEPT_STRING,
+  MODEL_FILE_TYPES
 } from "@reearth/beta/features/AssetsManager/constants";
 import { useAssetsFetcher } from "@reearth/services/api";
 import { useCallback, useMemo } from "react";
@@ -30,7 +31,9 @@ export default ({
                 ? IMAGE_FILE_TYPES
                 : t === "file"
                   ? GIS_FILE_TYPES
-                  : t
+                  : t === "model"
+                    ? MODEL_FILE_TYPES
+                    : t
             )
             .flat()
             .join(",.")