WIP

seasketch · Jan 22, 2024 · ab54eaa · ab54eaa
1 parent 49b9534
commit ab54eaa
Show file tree

Hide file tree

Showing 18 changed files with 1,056 additions and 468 deletions.
diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -24,6 +24,7 @@
     "@percy/cypress": "^3.1.2",
     "@popperjs/core": "^2.11.6",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-menubar": "^1.0.3",

diff --git a/packages/client/src/admin/data/DataSettings.tsx b/packages/client/src/admin/data/DataSettings.tsx
@@ -10,6 +10,8 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Legend, { LegendItem } from "../../dataLayers/Legend";
 import useCommonLegendProps from "../../dataLayers/useCommonLegendProps";
+import { TableOfContentsMetadataModalProvider } from "../../dataLayers/TableOfContentsMetadataModal";
+import { LayerEditingContextProvider } from "./LayerEditingContext";
 
 export default function DataSettings() {
   const { path } = useRouteMatch();
@@ -47,48 +49,52 @@ export default function DataSettings() {
     <>
       <DndProvider backend={HTML5Backend}>
         <MapContext.Provider value={mapContext}>
-          <Switch>
-            <Route path={`${path}`}>
-              <DataUploadDropzone
-                slug={slug}
-                className="flex flex-row h-screen"
-              >
-                <div className="h-full w-128">
-                  <LayerAdminSidebar />
-                </div>
-                <div className="flex-1 h-full">
-                  {legendState.items.length > 0 && (
-                    <Legend
-                      backdropBlur
-                      maxHeight={800}
-                      className="absolute ml-5 top-5 z-10"
-                      items={legendState.items}
-                      opacity={{}}
-                      zOrder={{}}
-                      map={mapContext.manager?.map}
-                      onZOrderChange={() => {}}
-                      {...legendProps}
-                    />
-                  )}
-                  {data?.projectBySlug && (
-                    <MapboxMap
-                      bounds={
-                        data?.projectBySlug
-                          ? (bbox(data.projectBySlug.region.geojson) as [
-                              number,
-                              number,
-                              number,
-                              number
-                            ])
-                          : undefined
-                      }
-                      className="h-full"
-                    />
-                  )}
-                </div>
-              </DataUploadDropzone>
-            </Route>
-          </Switch>
+          <TableOfContentsMetadataModalProvider>
+            <LayerEditingContextProvider>
+              <Switch>
+                <Route path={`${path}`}>
+                  <DataUploadDropzone
+                    slug={slug}
+                    className="flex flex-row h-screen"
+                  >
+                    <div className="h-full w-128">
+                      <LayerAdminSidebar />
+                    </div>
+                    <div className="flex-1 h-full">
+                      {legendState.items.length > 0 && (
+                        <Legend
+                          editable
+                          backdropBlur
+                          maxHeight={800}
+                          className="absolute ml-5 top-5 z-10"
+                          items={legendState.items}
+                          opacity={{}}
+                          zOrder={{}}
+                          map={mapContext.manager?.map}
+                          {...legendProps}
+                        />
+                      )}
+                      {data?.projectBySlug && (
+                        <MapboxMap
+                          bounds={
+                            data?.projectBySlug
+                              ? (bbox(data.projectBySlug.region.geojson) as [
+                                  number,
+                                  number,
+                                  number,
+                                  number
+                                ])
+                              : undefined
+                          }
+                          className="h-full"
+                        />
+                      )}
+                    </div>
+                  </DataUploadDropzone>
+                </Route>
+              </Switch>
+            </LayerEditingContextProvider>
+          </TableOfContentsMetadataModalProvider>
         </MapContext.Provider>
       </DndProvider>
     </>

diff --git a/packages/client/src/admin/data/FullScreenLoadingSpinner.tsx b/packages/client/src/admin/data/FullScreenLoadingSpinner.tsx
@@ -0,0 +1,14 @@
+import { createPortal } from "react-dom";
+import Spinner from "../../components/Spinner";
+
+export default function FullScreenLoadingSpinner() {
+  return createPortal(
+    <div
+      style={{ height: "100vh", backdropFilter: "blur(2px)" }}
+      className="w-full flex min-h-full h-96 justify-center text-center align-middle items-center content-center justify-items-center place-items-center place-content-center z-50 absolute top-0 left-0 bg-black bg-opacity-50"
+    >
+      <Spinner large color="white" />
+    </div>,
+    document.body
+  );
+}
diff --git a/packages/client/src/admin/data/LayerEditingContext.tsx b/packages/client/src/admin/data/LayerEditingContext.tsx
@@ -0,0 +1,47 @@
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useState,
+} from "react";
+
+export const LayerEditingContext = createContext<{
+  openEditor?: number;
+  setOpenEditor: (id: number | undefined) => void;
+  /**
+   * These are an optimization to immediately remove items from the legend or
+   * table of contents after deletion, without waiting to refetch the entire
+   * table of contents.
+   */
+  recentlyDeletedStableIds: string[];
+  setRecentlyDeletedStableIds: Dispatch<SetStateAction<string[]>>;
+}>({
+  setOpenEditor: (id: number | undefined) => {},
+  recentlyDeletedStableIds: [],
+  // set state action
+  setRecentlyDeletedStableIds: () => {},
+});
+
+export const LayerEditingContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [openEditor, setOpenEditor] = useState<number | undefined>(undefined);
+  const [recentlyDeletedItems, setRecentlyDeletedItems] = useState<string[]>(
+    []
+  );
+  return (
+    <LayerEditingContext.Provider
+      value={{
+        openEditor,
+        setOpenEditor,
+        recentlyDeletedStableIds: recentlyDeletedItems,
+        setRecentlyDeletedStableIds: setRecentlyDeletedItems,
+      }}
+    >
+      {children}
+    </LayerEditingContext.Provider>
+  );
+};
diff --git a/packages/client/src/admin/data/TableOfContentsEditor.tsx b/packages/client/src/admin/data/TableOfContentsEditor.tsx
@@ -3,7 +3,9 @@ import { Route, useHistory, useParams } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import Spinner from "../../components/Spinner";
 import { MapContext } from "../../dataLayers/MapContextManager";
-import TableOfContentsMetadataModal from "../../dataLayers/TableOfContentsMetadataModal";
+import TableOfContentsMetadataModal, {
+  TableOfContentsMetadataModalContext,
+} from "../../dataLayers/TableOfContentsMetadataModal";
 import {
   useDeleteBranchMutation,
   useDraftStatusSubscription,
@@ -42,6 +44,10 @@ import React from "react";
 import { CustomGLSource } from "@seasketch/mapbox-gl-esri-sources";
 import { createPortal } from "react-dom";
 import { ZIndexEditableList } from "./ZIndexEditableList";
+import { LayerEditingContext } from "./LayerEditingContext";
+import FullScreenLoadingSpinner from "./FullScreenLoadingSpinner";
+import { TableOfContentsItemMenu } from "./TableOfContentsItemMenu";
+import * as ContextMenu from "@radix-ui/react-context-menu";
 
 const LazyArcGISCartModal = React.lazy(
   () =>
@@ -76,20 +82,11 @@ export default function TableOfContentsEditor() {
   const tocQuery = useDraftTableOfContentsQuery({
     variables: { slug },
   });
-  const [openLayerItemId, setOpenLayerItemId] = useState<number>();
   const [createNewFolderModalOpen, setCreateNewFolderModalOpen] =
     useState<boolean>(false);
   const [updateChildrenMutation] =
     useUpdateTableOfContentsItemChildrenMutation();
   const [folderId, setFolderId] = useState<number>();
-  const [openMetadataViewerState, setOpenMetadataViewerState] = useState<
-    | undefined
-    | {
-        itemId: number;
-        sublayerId?: string;
-        customGLSource?: CustomGLSource<any>;
-      }
-  >();
   const [openMetadataItemId, setOpenMetadataItemId] = useState<number>();
   const [publishOpen, setPublishOpen] = useState(false);
   const [deleteItem] = useDeleteBranchMutation();
@@ -102,6 +99,8 @@ export default function TableOfContentsEditor() {
     shouldResubscribe: true,
   });
 
+  const layerEditingContext = useContext(LayerEditingContext);
+
   const layersAndSources = useLayersAndSourcesForItemsQuery({
     variables: {
       slug,
@@ -147,6 +146,7 @@ export default function TableOfContentsEditor() {
   );
 
   const { confirmDelete } = useDialog();
+  const metadataModal = useContext(TableOfContentsMetadataModalContext);
 
   const getContextMenuItems = useCallback(
     (treeItem: TreeItem) => {
@@ -179,7 +179,7 @@ export default function TableOfContentsEditor() {
               if (item.dataLayerId) {
                 manager?.showTocItems([item.stableId]);
               }
-              setOpenLayerItemId(item.id);
+              layerEditingContext.setOpenEditor(item.id);
             }
           },
         });
@@ -188,9 +188,7 @@ export default function TableOfContentsEditor() {
             id: "metadata",
             label: t("Metadata"),
             onClick: () => {
-              setOpenMetadataViewerState({
-                itemId: item.id,
-              });
+              metadataModal.open(item.id);
             },
           });
           // if (item.isFolder) {
@@ -450,6 +448,27 @@ export default function TableOfContentsEditor() {
             sortable
             getContextMenuItems={getContextMenuItems}
             onSortEnd={onSortEnd}
+            getContextMenuContent={(treeItemId, clickEvent) => {
+              const item =
+                tocQuery.data?.projectBySlug?.draftTableOfContentsItems?.find(
+                  (item) => item.stableId === treeItemId
+                );
+              if (item) {
+                return (
+                  <TableOfContentsItemMenu
+                    items={[item]}
+                    type={ContextMenu}
+                    editable
+                    transform={{
+                      x: clickEvent.clientX,
+                      y: clickEvent.clientY,
+                    }}
+                  />
+                );
+              } else {
+                return null;
+              }
+            }}
           />
         </Route>
         <Route path={`/${slug}/admin/data/zindex`}>
@@ -468,10 +487,10 @@ export default function TableOfContentsEditor() {
           />
         </Route>
       </div>
-      {openLayerItemId && (
+      {layerEditingContext.openEditor && (
         <LayerTableOfContentsItemEditor
-          onRequestClose={() => setOpenLayerItemId(undefined)}
-          itemId={openLayerItemId}
+          onRequestClose={() => layerEditingContext.setOpenEditor(undefined)}
+          itemId={layerEditingContext.openEditor}
         />
       )}
       {openMetadataItemId && (
@@ -480,24 +499,8 @@ export default function TableOfContentsEditor() {
           onRequestClose={() => setOpenMetadataItemId(undefined)}
         />
       )}
-      {openMetadataViewerState && (
-        <TableOfContentsMetadataModal
-          id={openMetadataViewerState.itemId}
-          onRequestClose={() => setOpenMetadataViewerState(undefined)}
-        />
-      )}
       {arcgisCartOpen && (
-        <Suspense
-          fallback={createPortal(
-            <div
-              style={{ height: "100vh", backdropFilter: "blur(2px)" }}
-              className="w-full flex min-h-full h-96 justify-center text-center align-middle items-center content-center justify-items-center place-items-center place-content-center z-50 absolute top-0 left-0 bg-black bg-opacity-50"
-            >
-              <Spinner large color="white" />
-            </div>,
-            document.body
-          )}
-        >
+        <Suspense fallback={<FullScreenLoadingSpinner />}>
           <LazyArcGISCartModal
             projectId={tocQuery.data?.projectBySlug?.id as number}
             region={tocQuery.data?.projectBySlug?.region.geojson}