wip

rubenthoms · Aug 13, 2024 · 03838ed · 03838ed
1 parent 9a90e20
commit 03838ed
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 9 deletions.
diff --git a/frontend/src/lib/components/SortableList/sortableListGroup.tsx b/frontend/src/lib/components/SortableList/sortableListGroup.tsx
@@ -109,8 +109,8 @@ type HeaderProps = {
 
 function Header(props: HeaderProps): React.ReactNode {
     return (
-        <div className="sortable-list-item-header flex items-center gap-1 h-8 text-sm font-bold border-b border-b-gray-300">
-            <div className={resolveClassNames("sortable-list-element-indicator px-0.5 hover:cursor-grab")}>
+        <div className="sortable-list-item-header flex items-center gap-1 h-8 text-sm font-bold border-b border-b-gray-300 px-2">
+            <div className={resolveClassNames("sortable-list-element-indicator hover:cursor-grab")}>
                 <DragIndicator fontSize="inherit" className="pointer-events-none" />
             </div>
             <div

diff --git a/frontend/src/lib/components/SortableList/sortableListItem.tsx b/frontend/src/lib/components/SortableList/sortableListItem.tsx
@@ -93,8 +93,8 @@ type HeaderProps = {
 
 function Header(props: HeaderProps): React.ReactNode {
     return (
-        <div className="flex gap-1 h-8 bg-slate-100 hover:bg-blue-100 text-sm items-center border-b border-b-gray-300 pr-2">
-            <div className={resolveClassNames("sortable-list-element-indicator px-0.5 hover:cursor-grab")}>
+        <div className="flex gap-1 h-8 bg-slate-100 hover:bg-blue-100 text-sm items-center border-b border-b-gray-300 px-2">
+            <div className={resolveClassNames("sortable-list-element-indicator hover:cursor-grab")}>
                 <DragIndicator fontSize="inherit" className="pointer-events-none" />
             </div>
             <div className="flex items-center gap-2 flex-grow">

diff --git a/frontend/src/modules/_shared/components/Layers/addLayerDropdown.tsx b/frontend/src/modules/_shared/components/Layers/addLayerDropdown.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import { Menu } from "@lib/components/Menu";
+import { MenuItem } from "@lib/components/MenuItem";
+import { LayerGroup } from "@modules/_shared/layers/LayerGroup";
+import { LayerManager } from "@modules/_shared/layers/LayerManager";
+import { Dropdown, MenuButton } from "@mui/base";
+import { Add, ArrowDropDown } from "@mui/icons-material";
+
+import { LayerFactory } from "./layersPanel";
+
+export type AddLayerDropdownProps<TLayerType extends string> = {
+    parent: LayerGroup | LayerManager;
+    layerTypeToStringMapping: Record<TLayerType, string>;
+    layerFactory: LayerFactory<TLayerType>;
+};
+
+export function AddLayerDropdown<TLayerType extends string>(props: AddLayerDropdownProps<TLayerType>): React.ReactNode {
+    function handleAddLayer(type: TLayerType) {
+        props.parent.addLayer(props.layerFactory.makeLayer(type));
+    }
+
+    return (
+        <Dropdown>
+            <MenuButton>
+                <div className="hover:cursor-pointer hover:bg-blue-100 p-0.5 rounded text-sm flex items-center gap-2">
+                    <Add fontSize="inherit" />
+                    <span>Add layer</span>
+                    <ArrowDropDown fontSize="inherit" />
+                </div>
+            </MenuButton>
+            <Menu anchorOrigin="bottom-end" className="text-sm p-1">
+                {Object.keys(props.layerTypeToStringMapping).map((layerType, index) => {
+                    return (
+                        <MenuItem
+                            key={index}
+                            className="text-sm p-0.5"
+                            onClick={() => handleAddLayer(layerType as TLayerType)}
+                        >
+                            {props.layerTypeToStringMapping[layerType as TLayerType]}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        </Dropdown>
+    );
+}
diff --git a/frontend/src/modules/_shared/components/Layers/layerComponents.tsx b/frontend/src/modules/_shared/components/Layers/layerComponents.tsx
@@ -65,7 +65,7 @@ export function LayerStartAdornment(props: LayerStartAdornmentProps): React.Reac
 
     return (
         <div
-            className="px-0.5 hover:cursor-pointer rounded hover:text-blue-800"
+            className="hover:cursor-pointer rounded hover:text-blue-800"
             onClick={handleToggleLayerVisibility}
             title="Toggle visibility"
         >

diff --git a/frontend/src/modules/_shared/components/Layers/layerGroupComponents.tsx b/frontend/src/modules/_shared/components/Layers/layerGroupComponents.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 
 import { LayerGroup, LayerGroupTopic, useLayerGroupTopicValue } from "@modules/_shared/layers/LayerGroup";
-import { Folder, Visibility, VisibilityOff } from "@mui/icons-material";
+import { Delete, Folder, Remove, Visibility, VisibilityOff } from "@mui/icons-material";
 
-type LayerGroupStartAdornmentProps = {
+import { AddLayerDropdown } from "./addLayerDropdown";
+import { LayerFactory } from "./layersPanel";
+
+export type LayerGroupStartAdornmentProps = {
     group: LayerGroup;
 };
 
@@ -28,6 +31,38 @@ export function LayerGroupStartAdornment(props: LayerGroupStartAdornmentProps):
     );
 }
 
+export type LayerGroundEndAdornmentProps<TLayerType extends string> = {
+    group: LayerGroup;
+    layerTypeToStringMapping: Record<string, string>;
+    layerFactory: LayerFactory<TLayerType>;
+    onRemove: (groupId: string) => void;
+};
+
+export function LayerGroundEndAdornment<TLayerType extends string>(
+    props: LayerGroundEndAdornmentProps<TLayerType>
+): React.ReactNode {
+    function handleRemoveLayerGroup() {
+        props.onRemove(props.group.getId());
+    }
+
+    return (
+        <>
+            <AddLayerDropdown
+                parent={props.group}
+                layerFactory={props.layerFactory}
+                layerTypeToStringMapping={props.layerTypeToStringMapping}
+            />
+            <div
+                className="hover:cursor-pointer rounded hover:text-red-800"
+                onClick={handleRemoveLayerGroup}
+                title="Remove layer group"
+            >
+                <Delete fontSize="inherit" />
+            </div>
+        </>
+    );
+}
+
 type LayerNameProps = {
     group: LayerGroup;
 };

diff --git a/frontend/src/modules/_shared/components/Layers/layersPanel.tsx b/frontend/src/modules/_shared/components/Layers/layersPanel.tsx
@@ -20,7 +20,7 @@ import { Add, ArrowDropDown, CreateNewFolder } from "@mui/icons-material";
 import { isEqual } from "lodash";
 
 import { LayerName, LayerStartAdornment } from "./layerComponents";
-import { LayerGroupName, LayerGroupStartAdornment } from "./layerGroupComponents";
+import { LayerGroundEndAdornment, LayerGroupName, LayerGroupStartAdornment } from "./layerGroupComponents";
 
 export interface LayerFactory<TLayerType extends string> {
     makeLayer(layerType: TLayerType): BaseLayer<any, any>;
@@ -142,11 +142,21 @@ export function LayersPanel<TLayerType extends string>(props: LayersPanelProps<T
                 id={group.getId()}
                 title={<LayerGroupName group={group} />}
                 startAdornment={<LayerGroupStartAdornment group={group} />}
+                endAdornment={
+                    <LayerGroundEndAdornment
+                        group={group}
+                        onRemove={handleRemoveGroup}
+                        layerFactory={props.layerFactory}
+                        layerTypeToStringMapping={props.layerTypeToStringMapping}
+                    />
+                }
+                contentWhenEmpty={<div className="text-sm p-1.5">No layers in group</div>}
             >
                 {group.getLayers().map((layer) => makeLayerElement(layer))}
             </SortableListGroup>
         );
     }
+
     function makeLayersAndGroupsContent(): React.ReactElement<SortableListItemProps>[] {
         const nodes: React.ReactElement<SortableListItemProps>[] = [];
 

diff --git a/frontend/src/modules/_shared/layers/LayerManager.ts b/frontend/src/modules/_shared/layers/LayerManager.ts
@@ -3,7 +3,7 @@ import React from "react";
 import { QueryClient } from "@tanstack/query-core";
 
 import { BaseLayer } from "./BaseLayer";
-import { LayerGroup } from "./LayerGroup";
+import { LayerGroup, LayerGroupTopic } from "./LayerGroup";
 
 export enum LayerManagerTopic {
     ITEMS_CHANGED = "items-changed",
@@ -56,6 +56,9 @@ export class LayerManager {
         const group = new LayerGroup(uniqueName);
         this._items = [group, ...this._items];
         this.notifySubscribers(LayerManagerTopic.ITEMS_CHANGED);
+        group.subscribe(LayerGroupTopic.LAYERS_CHANGED, () => {
+            this.notifySubscribers(LayerManagerTopic.ITEMS_CHANGED);
+        });
     }
 
     insertGroup(group: LayerGroup, position: number): void {