wip

rubenthoms · Oct 10, 2024 · 3ca83ed · 3ca83ed
1 parent 218376e
commit 3ca83ed
Show file tree

Hide file tree

Showing 24 changed files with 421 additions and 169 deletions.
diff --git a/frontend/src/lib/components/Input/input.tsx b/frontend/src/lib/components/Input/input.tsx
@@ -106,6 +106,22 @@ export const Input = React.forwardRef((props: InputProps, ref: React.ForwardedRe
         setValue(event.target.value);
 
         if (props.onChange) {
+            if (props.type === "number") {
+                let newValue = 0;
+
+                if (!isNaN(parseFloat(event.target.value as string))) {
+                    newValue = parseFloat((event.target.value as string) || "0");
+                    if (props.min !== undefined) {
+                        newValue = Math.max(props.min, newValue);
+                    }
+
+                    if (props.max !== undefined) {
+                        newValue = Math.min(props.max, newValue);
+                    }
+                }
+
+                event.target.value = newValue.toString();
+            }
             props.onChange(event);
         }
     }

diff --git a/frontend/src/modules/2DViewer/layers/DeltaSurface.ts b/frontend/src/modules/2DViewer/layers/DeltaSurface.ts
@@ -0,0 +1,22 @@
+import { GroupDelegate } from "./delegates/GroupDelegate";
+import { ItemDelegate } from "./delegates/ItemDelegate";
+import { Group } from "./interfaces";
+
+export class DeltaSurface implements Group {
+    private _itemDelegate: ItemDelegate;
+    private _groupDelegate: GroupDelegate;
+
+    constructor(name: string) {
+        this._groupDelegate = new GroupDelegate(this);
+        this._groupDelegate.setColor("rgb(220, 210, 180)");
+        this._itemDelegate = new ItemDelegate(name);
+    }
+
+    getItemDelegate(): ItemDelegate {
+        return this._itemDelegate;
+    }
+
+    getGroupDelegate(): GroupDelegate {
+        return this._groupDelegate;
+    }
+}
diff --git a/frontend/src/modules/2DViewer/layers/LayerManager.ts b/frontend/src/modules/2DViewer/layers/LayerManager.ts
@@ -4,9 +4,9 @@ import { QueryClient } from "@tanstack/react-query";
 
 import { isEqual } from "lodash";
 
-import { PublishSubscribe, PublishSubscribeHandler } from "./PublishSubscribeHandler";
 import { GroupDelegate } from "./delegates/GroupDelegate";
 import { ItemDelegate } from "./delegates/ItemDelegate";
+import { PublishSubscribe, PublishSubscribeDelegate } from "./delegates/PublishSubscribeDelegate";
 import { Group, Item } from "./interfaces";
 
 export enum LayerManagerTopic {
@@ -34,7 +34,7 @@ export class LayerManager implements Group, PublishSubscribe<LayerManagerTopic,
     private _workbenchSettings: WorkbenchSettings;
     private _groupDelegate: GroupDelegate;
     private _queryClient: QueryClient;
-    private _publishSubscribeHandler = new PublishSubscribeHandler<LayerManagerTopic>();
+    private _publishSubscribeHandler = new PublishSubscribeDelegate<LayerManagerTopic>();
     private _itemDelegate: ItemDelegate;
     private _layerDataRevision: number = 0;
     private _globalSettings: GlobalSettings = {
@@ -110,7 +110,7 @@ export class LayerManager implements Group, PublishSubscribe<LayerManagerTopic,
         return snapshotGetter;
     }
 
-    getPublishSubscribeHandler(): PublishSubscribeHandler<LayerManagerTopic> {
+    getPublishSubscribeHandler(): PublishSubscribeDelegate<LayerManagerTopic> {
         return this._publishSubscribeHandler;
     }
 }
diff --git a/frontend/src/modules/2DViewer/layers/components/ColorScaleComponent.tsx b/frontend/src/modules/2DViewer/layers/components/ColorScaleComponent.tsx
@@ -12,8 +12,8 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { RemoveButton } from "./RemoveButton";
 
 import { ColorScale } from "../ColorScale";
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 
 export type ColorScaleComponentProps = {
     colorScale: ColorScale;

diff --git a/frontend/src/modules/2DViewer/layers/components/DeltaSurfaceComponent.tsx b/frontend/src/modules/2DViewer/layers/components/DeltaSurfaceComponent.tsx
@@ -0,0 +1,72 @@
+import { SortableListGroup } from "@lib/components/SortableList";
+
+import { EditName } from "./EditName";
+import { EmptyContent } from "./EmptyContent";
+import { ExpandCollapseAllButton } from "./ExpandCollapseAllButton";
+import { LayersActionGroup, LayersActions } from "./LayersActions";
+import { RemoveButton } from "./RemoveButton";
+import { VisibilityToggle } from "./VisibilityToggle";
+import { makeComponent } from "./utils";
+
+import { DeltaSurface } from "../DeltaSurface";
+import { GroupDelegateTopic } from "../delegates/GroupDelegate";
+import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
+import { Group, Item, instanceofLayer } from "../interfaces";
+
+export type DeltaSurfaceComponentProps = {
+    deltaSurface: DeltaSurface;
+    actions?: LayersActionGroup[];
+    onActionClick?: (actionIdentifier: string, group: Group) => void;
+};
+
+export function DeltaSurfaceComponent(props: DeltaSurfaceComponentProps): React.ReactNode {
+    const children = usePublishSubscribeTopicValue(props.deltaSurface.getGroupDelegate(), GroupDelegateTopic.CHILDREN);
+    const isExpanded = usePublishSubscribeTopicValue(props.deltaSurface.getItemDelegate(), ItemDelegateTopic.EXPANDED);
+    const color = props.deltaSurface.getGroupDelegate().getColor();
+
+    function handleActionClick(actionIdentifier: string) {
+        if (props.onActionClick) {
+            props.onActionClick(actionIdentifier, props.deltaSurface);
+        }
+    }
+
+    function makeEndAdornment() {
+        const adornment: React.ReactNode[] = [];
+        if (
+            props.actions &&
+            props.deltaSurface.getGroupDelegate().findChildren((item) => instanceofLayer(item)).length < 2
+        ) {
+            adornment.push(<LayersActions layersActionGroups={props.actions} onActionClick={handleActionClick} />);
+        }
+        adornment.push(<ExpandCollapseAllButton group={props.deltaSurface} />);
+        adornment.push(<RemoveButton item={props.deltaSurface} />);
+        return adornment;
+    }
+
+    return (
+        <SortableListGroup
+            key={props.deltaSurface.getItemDelegate().getId()}
+            id={props.deltaSurface.getItemDelegate().getId()}
+            title={<EditName item={props.deltaSurface} />}
+            contentStyle={{
+                backgroundColor: color ?? undefined,
+            }}
+            headerStyle={{
+                backgroundColor: color ?? undefined,
+            }}
+            startAdornment={
+                <div className="flex items-center gap-2">
+                    <VisibilityToggle item={props.deltaSurface} />
+                </div>
+            }
+            endAdornment={<>{makeEndAdornment()}</>}
+            contentWhenEmpty={
+                <EmptyContent>Drag two surface layers inside to calculate the difference between them.</EmptyContent>
+            }
+            expanded={isExpanded}
+        >
+            {children.map((child: Item) => makeComponent(child, props.actions, props.onActionClick))}
+        </SortableListGroup>
+    );
+}
diff --git a/frontend/src/modules/2DViewer/layers/components/EditName.tsx b/frontend/src/modules/2DViewer/layers/components/EditName.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
+import { Edit } from "@mui/icons-material";
+
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Item } from "../interfaces";
 
 type EditItemNameProps = {
@@ -36,7 +38,7 @@ export function EditName(props: EditItemNameProps): React.ReactNode {
 
     return (
         <div
-            className="flex-grow font-bold flex items-center pt-1"
+            className="flex-grow font-bold flex items-center gap-2 group"
             onDoubleClick={handleNameDoubleClick}
             title="Double-click to edit name"
         >
@@ -51,7 +53,14 @@ export function EditName(props: EditItemNameProps): React.ReactNode {
                     autoFocus
                 />
             ) : (
-                itemName
+                <>
+                    {itemName}
+                    <Edit
+                        fontSize="inherit"
+                        className="opacity-0 group-hover:opacity-50 cursor-pointer"
+                        onClick={handleNameDoubleClick}
+                    />
+                </>
             )}
         </div>
     );

diff --git a/frontend/src/modules/2DViewer/layers/components/LayerComponent.tsx b/frontend/src/modules/2DViewer/layers/components/LayerComponent.tsx
@@ -5,16 +5,16 @@ import { CircularProgress } from "@lib/components/CircularProgress";
 import { DenseIconButton } from "@lib/components/DenseIconButton";
 import { SortableListItem } from "@lib/components/SortableList";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
-import { Check, CheckCircle, Error, ErrorOutline, ExpandLess, ExpandMore } from "@mui/icons-material";
+import { CheckCircle, Error, ExpandLess, ExpandMore } from "@mui/icons-material";
 
 import { EditName } from "./EditName";
 import { RemoveButton } from "./RemoveButton";
 import { SettingComponent } from "./SettingComponent";
 import { VisibilityToggle } from "./VisibilityToggle";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
 import { LayerDelegateTopic } from "../delegates/LayerDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Layer, LayerStatus, Setting } from "../interfaces";
 
 export type LayerComponentProps = {

diff --git a/frontend/src/modules/2DViewer/layers/components/SettingComponent.tsx b/frontend/src/modules/2DViewer/layers/components/SettingComponent.tsx
@@ -1,11 +1,9 @@
 import React from "react";
 
-import { WorkbenchSession } from "@framework/WorkbenchSession";
-import { WorkbenchSettings } from "@framework/WorkbenchSettings";
 import { PendingWrapper } from "@lib/components/PendingWrapper";
 
 import { LayerManager, LayerManagerTopic } from "../LayerManager";
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Setting, SettingComponentProps as SettingComponentPropsInterface, SettingTopic } from "../interfaces";
 
 export type SettingComponentProps<TValue> = {

diff --git a/frontend/src/modules/2DViewer/layers/components/SettingsGroupComponent.tsx b/frontend/src/modules/2DViewer/layers/components/SettingsGroupComponent.tsx
@@ -7,9 +7,9 @@ import { LayersActionGroup, LayersActions } from "./LayersActions";
 import { RemoveButton } from "./RemoveButton";
 import { makeComponent } from "./utils";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { GroupDelegateTopic } from "../delegates/GroupDelegate";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Group, Item } from "../interfaces";
 
 export type SettingsGroupComponentProps = {

diff --git a/frontend/src/modules/2DViewer/layers/components/SharedSettingComponent.tsx b/frontend/src/modules/2DViewer/layers/components/SharedSettingComponent.tsx
@@ -7,9 +7,9 @@ import { Delete, ExpandLess, ExpandMore, Link } from "@mui/icons-material";
 
 import { SettingComponent } from "./SettingComponent";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { SharedSetting } from "../SharedSetting";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 
 export type SharedSettingComponentProps = {
     sharedSetting: SharedSetting;

diff --git a/frontend/src/modules/2DViewer/layers/components/ViewComponent.tsx b/frontend/src/modules/2DViewer/layers/components/ViewComponent.tsx
@@ -8,9 +8,9 @@ import { RemoveButton } from "./RemoveButton";
 import { VisibilityToggle } from "./VisibilityToggle";
 import { makeComponent } from "./utils";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { GroupDelegateTopic } from "../delegates/GroupDelegate";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Group, Item } from "../interfaces";
 
 export type ViewComponentProps = {

diff --git a/frontend/src/modules/2DViewer/layers/components/VisibilityToggle.tsx b/frontend/src/modules/2DViewer/layers/components/VisibilityToggle.tsx
@@ -1,8 +1,8 @@
 import { DenseIconButton } from "@lib/components/DenseIconButton";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 
-import { usePublishSubscribeTopicValue } from "../PublishSubscribeHandler";
 import { ItemDelegateTopic } from "../delegates/ItemDelegate";
+import { usePublishSubscribeTopicValue } from "../delegates/PublishSubscribeDelegate";
 import { Item } from "../interfaces";
 
 export type VisibilityToggleProps = {

diff --git a/frontend/src/modules/2DViewer/layers/components/utils.tsx b/frontend/src/modules/2DViewer/layers/components/utils.tsx
@@ -1,13 +1,15 @@
 import { SortableListItemProps } from "@lib/components/SortableList";
 
 import { ColorScaleComponent } from "./ColorScaleComponent";
+import { DeltaSurfaceComponent } from "./DeltaSurfaceComponent";
 import { LayerComponent } from "./LayerComponent";
 import { LayersActionGroup } from "./LayersActions";
 import { SettingsGroupComponent } from "./SettingsGroupComponent";
 import { SharedSettingComponent } from "./SharedSettingComponent";
 import { ViewComponent } from "./ViewComponent";
 
 import { ColorScale } from "../ColorScale";
+import { DeltaSurface } from "../DeltaSurface";
 import { SettingsGroup } from "../SettingsGroup";
 import { SharedSetting } from "../SharedSetting";
 import { View } from "../View";
@@ -40,6 +42,15 @@ export function makeComponent(
                     onActionClick={onActionClick}
                 />
             );
+        } else if (item instanceof DeltaSurface) {
+            return (
+                <DeltaSurfaceComponent
+                    key={item.getItemDelegate().getId()}
+                    deltaSurface={item}
+                    actions={layerActions ? filterAwayNonSurfaceActions(layerActions) : undefined}
+                    onActionClick={onActionClick}
+                />
+            );
         }
     }
     if (item instanceof SharedSetting) {
@@ -57,3 +68,26 @@ function filterAwayViewActions(actions: LayersActionGroup[]): LayersActionGroup[
         children: group.children.filter((child) => child.label !== "View"),
     }));
 }
+
+function filterAwayNonSurfaceActions(actions: LayersActionGroup[]): LayersActionGroup[] {
+    const result: LayersActionGroup[] = [];
+
+    for (const group of actions) {
+        if (group.label === "Shared Settings") {
+            result.push(group);
+            continue;
+        }
+        if (group.label !== "Layers") {
+            continue;
+        }
+        const children = group.children.filter((child) => child.label.includes("Surface"));
+        if (children.length > 0) {
+            result.push({
+                ...group,
+                children,
+            });
+        }
+    }
+
+    return result;
+}
diff --git a/frontend/src/modules/2DViewer/layers/delegates/GroupDelegate.ts b/frontend/src/modules/2DViewer/layers/delegates/GroupDelegate.ts
@@ -1,7 +1,7 @@
 import { ItemDelegateTopic } from "./ItemDelegate";
+import { PublishSubscribe, PublishSubscribeDelegate } from "./PublishSubscribeDelegate";
 
 import { LayerManagerTopic } from "../LayerManager";
-import { PublishSubscribe, PublishSubscribeHandler } from "../PublishSubscribeHandler";
 import { Item, instanceofGroup, instanceofLayer } from "../interfaces";
 
 export enum GroupDelegateTopic {
@@ -20,7 +20,7 @@ export class GroupDelegate implements PublishSubscribe<GroupDelegateTopic, Group
     private _owner: Item | null;
     private _color: string | null = null;
     private _children: Item[] = [];
-    private _publishSubscribeHandler = new PublishSubscribeHandler<GroupDelegateTopic>();
+    private _publishSubscribeHandler = new PublishSubscribeDelegate<GroupDelegateTopic>();
     private _subscriptions: Map<string, Set<() => void>> = new Map();
     private _treeRevisionNumber: number = 0;
 
@@ -223,7 +223,7 @@ export class GroupDelegate implements PublishSubscribe<GroupDelegateTopic, Group
         return snapshotGetter;
     }
 
-    getPublishSubscribeHandler(): PublishSubscribeHandler<GroupDelegateTopic> {
+    getPublishSubscribeHandler(): PublishSubscribeDelegate<GroupDelegateTopic> {
         return this._publishSubscribeHandler;
     }
 }
diff --git a/frontend/src/modules/2DViewer/layers/delegates/ItemDelegate.ts b/frontend/src/modules/2DViewer/layers/delegates/ItemDelegate.ts
@@ -1,9 +1,9 @@
 import { v4 } from "uuid";
 
 import { GroupDelegate } from "./GroupDelegate";
+import { PublishSubscribe, PublishSubscribeDelegate } from "./PublishSubscribeDelegate";
 
 import { LayerManager, LayerManagerTopic } from "../LayerManager";
-import { PublishSubscribe, PublishSubscribeHandler } from "../PublishSubscribeHandler";
 
 export enum ItemDelegateTopic {
     NAME = "NAME",
@@ -26,7 +26,7 @@ export class ItemDelegate implements PublishSubscribe<ItemDelegateTopic, ItemDel
     private _expanded: boolean = true;
     private _parentGroup: GroupDelegate | null = null;
     private _layerManager: LayerManager | null = null;
-    private _publishSubscribeHandler = new PublishSubscribeHandler<ItemDelegateTopic>();
+    private _publishSubscribeHandler = new PublishSubscribeDelegate<ItemDelegateTopic>();
 
     constructor(name: string) {
         this._id = v4();
@@ -105,7 +105,7 @@ export class ItemDelegate implements PublishSubscribe<ItemDelegateTopic, ItemDel
         return snapshotGetter;
     }
 
-    getPublishSubscribeHandler(): PublishSubscribeHandler<ItemDelegateTopic> {
+    getPublishSubscribeHandler(): PublishSubscribeDelegate<ItemDelegateTopic> {
         return this._publishSubscribeHandler;
     }
 }