feat: adding global import menu

MetacityTools · Nov 29, 2024 · 0b69c7a · 0b69c7a
1 parent 3d29e09
commit 0b69c7a
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 61 deletions.
diff --git a/app/app.css b/app/app.css
@@ -18,15 +18,6 @@ body {
   min-height: 100vh;
 }
 
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
 input,
 button,
 textarea,

diff --git a/app/core/components/Header.tsx b/app/core/components/Header.tsx
@@ -26,8 +26,8 @@ export default function Header(props: HeaderProps) {
       paddingY="size-100"
       backgroundColor="gray-50"
     >
-      <Flex direction="row" width="100%" gap="size-10" justifyContent="space-between" alignItems="center">
-        <Breadcrumbs marginX="size-100" flex="1">
+      <Flex direction="row" width="100%" gap="size-10" justifyContent="start" alignItems="center">
+        <Breadcrumbs marginX="size-100">
           {nav.map((item) => (
             <Item key={item.key} href={item.link}>
               {item.children}

diff --git a/app/features/editor-metadata/components/EditorMetadataValues.tsx b/app/features/editor-metadata/components/EditorMetadataValues.tsx
@@ -26,7 +26,7 @@ import { MdiSortAscending } from "@core/icons/MdiSortAscending";
 import { MdiTrash } from "@core/icons/MdiTrash";
 import useSelectedSubmodelCount from "@editor/hooks/useSelectedSubmodelCount";
 import { useEditorContext } from "@features/editor/hooks/useEditorContext";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import useMetadataContext from "../hooks/useMetadataContext";
 import useMetadataEdits from "../hooks/useMetadataEdits";
 import useMetadataSelection from "../hooks/useMetadataSelection";
@@ -71,6 +71,11 @@ export default function EditorMetadataValues() {
     }
   }, []);
 
+  const disabledKeysOnNoSelection = useMemo(
+    () => (selectedCount === 0 ? ["assignSingleValue"] : undefined),
+    [selectedCount]
+  );
+
   return (
     <PositioningContainer>
       <Flex direction="column" height="100%" gap="size-100" marginX="size-200">
@@ -145,7 +150,11 @@ export default function EditorMetadataValues() {
                   >
                     {typeof record.value} - {record.count} items, {record.selected} selected{" "}
                   </Text>
-                  <ActionGroup isQuiet onAction={(key) => handleItemAction(key, record.value)}>
+                  <ActionGroup
+                    isQuiet
+                    onAction={(key) => handleItemAction(key, record.value)}
+                    disabledKeys={disabledKeysOnNoSelection}
+                  >
                     <TooltipTrigger delay={0} placement="bottom">
                       <Item key="assignSingleValue" textValue="Assign Value">
                         <MdiArrowRightBold />

diff --git a/app/features/editor-models/components/EditorModels.tsx b/app/features/editor-models/components/EditorModels.tsx
@@ -32,7 +32,6 @@ import useSelectedSubmodelCount from "@features/editor/hooks/useSelectedSubmodel
 import { useSplitModel } from "@features/editor/hooks/useSplitModel";
 import Delete from "@spectrum-icons/workflow/Delete";
 import { Key, useCallback, useState } from "react";
-import EditorAddModeButton from "./EditorAddModelButton";
 import EditorProjectModelDialog from "./EditorProjectModelDialog";
 import EditorRenameModelDialog from "./EditorRenameModelDialog";
 
@@ -116,16 +115,16 @@ function EditorModelList() {
   return (
     <PositioningContainer>
       <Flex direction="column" height="100%" gap="size-100" marginX="size-200">
-        <View position="relative" overflow="hidden" marginTop="size-200">
+        {/* <View position="relative" overflow="hidden" marginTop="size-200">
           <EditorAddModeButton />
-        </View>
+        </View> */}
         <EditorRenameModelDialog close={() => setEditingModel(null)} model={editingModel} open={!!editingModel} />
         <EditorProjectModelDialog
           model={projectionSourceModel}
           open={!!projectionSourceModel}
           close={() => setProjectionSourceModel(null)}
         />
-        <View position="relative" flex height="100%" overflow="hidden" marginBottom="size-100">
+        <View position="relative" flex height="100%" overflow="hidden" marginBottom="size-100" marginTop="size-200">
           <ActionBarContainer height="100%" width="100%">
             <ListView
               selectionMode="multiple"

diff --git a/...odels/components/EditorAddModelButton.tsx → ...ditor/components/EditorAddModelButton.tsx b/...odels/components/EditorAddModelButton.tsx → ...ditor/components/EditorAddModelButton.tsx
diff --git a/app/features/editor/components/EditorHeader.tsx b/app/features/editor/components/EditorHeader.tsx
@@ -1,38 +1,28 @@
 import {
-  ActionGroup,
+  ActionButton,
   Content,
   Dialog,
   DialogContainer,
   Flex,
   Item,
   Key,
+  Menu,
+  MenuTrigger,
   ProgressCircle,
   Text,
 } from "@adobe/react-spectrum";
 import Header from "@core/components/Header";
+import { MdiCube } from "@core/icons/MdiCube";
+import { MdiTable } from "@core/icons/MdiTable";
 import { useCallback, useState } from "react";
 import { useExportModels } from "../hooks/useExportModels";
-import useLoadLatestVersion from "../hooks/useLoadLatestVersion";
+import useModelImport from "../hooks/useModelImport";
 import { useRenderer } from "../hooks/useRender";
 
 export default function EditorHeader() {
-  //TODO initialize data
-  const data = {};
-  const loadLatestVersion = useLoadLatestVersion();
   const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
   const [isSavingDialogOpen, setIsSavingDialogOpen] = useState(false);
 
-  //TODO do this after user uploads model
-  // useEffect(() => {
-  //   async function loadProject() {
-  //     setIsLoadingDialogOpen(true);
-  //     await loadLatestVersion();
-  //     setIsLoadingDialogOpen(false);
-  //   }
-  //   void loadProject();
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
   const exportModels = useExportModels();
   const renderer = useRenderer();
 
@@ -58,16 +48,24 @@ export default function EditorHeader() {
     };
   }, [renderer, exportModels]);
 
+  const handleModelLoad = useModelImport();
+
   const handleAction = useCallback(
     async (action: Key) => {
+      setIsLoadingDialogOpen(true);
       switch (action) {
-        case "save":
-          saveProject();
-        // break;
-        case "share":
-          // Share
+        case "shp":
+          await handleModelLoad([".shp", ".shx", ".dbf", ".prj", ".cpg"]);
+          break;
+        case "gltf":
+          await handleModelLoad([".gltf", ".glb"]);
+          break;
+        case "metacity":
+          await handleModelLoad([".metacity"]);
           break;
+        //TODO handle CSV import
       }
+      setIsLoadingDialogOpen(false);
     },
     [saveProject]
   );
@@ -82,17 +80,35 @@ export default function EditorHeader() {
           },
         ]}
       >
-        <ActionGroup isQuiet onAction={handleAction}>
-          <Item key="save">Save</Item>
-        </ActionGroup>
+        <MenuTrigger>
+          <ActionButton isQuiet>Import</ActionButton>
+          <Menu onAction={handleAction}>
+            <Item key="shp">
+              <MdiCube />
+              <Text>Import Shapefile</Text>
+            </Item>
+            <Item key="gltf">
+              <MdiCube />
+              <Text>Import GLTF</Text>
+            </Item>
+            <Item key="metacity">
+              <MdiCube />
+              <Text>Import Metacity</Text>
+            </Item>
+            <Item key="csv">
+              <MdiTable />
+              <Text>Import CSV</Text>
+            </Item>
+          </Menu>
+        </MenuTrigger>
       </Header>
       <DialogContainer onDismiss={() => {}}>
         {isLoadingDialogOpen && (
           <Dialog>
             <Content>
               <Flex direction="row" gap="size-200" alignItems="center">
                 <ProgressCircle aria-label="Loading…" isIndeterminate />
-                <Text>Loading project data</Text>
+                <Text>Loading model data</Text>
               </Flex>
             </Content>
           </Dialog>

diff --git a/app/features/editor/hooks/useLoadLatestVersion.ts b/app/features/editor/hooks/useLoadLatestVersion.ts
diff --git a/app/features/editor/hooks/useModelImport.ts b/app/features/editor/hooks/useModelImport.ts
@@ -0,0 +1,48 @@
+import { useImportModels } from "@features/editor/hooks/useImportModels";
+import { load } from "@features/editor/utils/formats/loader";
+import { ToastQueue } from "@react-spectrum/toast";
+import { useCallback } from "react";
+
+export default function useModelImport() {
+  const importModels = useImportModels();
+
+  const handleSubmit = useCallback(
+    async (files: FileList | null) => {
+      if (!files) return;
+      const modelList = Array.from(files);
+      if (modelList.length === 0) {
+        ToastQueue.info("No models selected");
+        return;
+      }
+      const fileMap = new Map<string, Blob>();
+      // Add models to project
+      for (const file of modelList) {
+        fileMap.set(file.name, file);
+      }
+      const data = await load(fileMap);
+      await importModels(data);
+    },
+    [importModels]
+  );
+
+  return useCallback(
+    (acceptedFormats: string[]) =>
+      new Promise<void>((resolve, reject) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = acceptedFormats.join(",");
+        input.multiple = true;
+        input.onchange = async () => {
+          await handleSubmit(input.files);
+          input.remove();
+          resolve();
+        };
+        input.oncancel = () => {
+          input.remove();
+          resolve();
+        };
+        input.click();
+      }),
+    [handleSubmit]
+  );
+}