Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenthoms
rubenthoms committed Aug 13, 2024
1 parent 3eb1008 commit 9a90e20
Show file tree
Hide file tree
Showing 11 changed files with 344 additions and 932 deletions.
11 changes: 8 additions & 3 deletions frontend/src/lib/components/SortableList/sortableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ type HoveredItemIdAndArea = {
area: HoveredArea;
};

const ELEMENT_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT = 50;
const ITEM_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT = 50;
const GROUP_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT = 30;

export type SortableListProps = {
contentWhenEmpty?: React.ReactNode;
Expand Down Expand Up @@ -280,15 +281,19 @@ export function SortableList(props: SortableListProps): React.ReactNode {
}

function getHoveredAreaOfItem(item: HTMLElement, e: PointerEvent): HoveredArea {
let factor = ITEM_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT / 100;
if (getItemType(item) === ItemType.CONTAINER) {
factor = GROUP_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT / 100;
}
const rect = item.getBoundingClientRect();
const topAreaTop = rect.top;
const topAreaBottom = rect.top + (ELEMENT_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT / 100) * rect.height;
const topAreaBottom = rect.top + factor * rect.height;

if (e.clientY >= topAreaTop && e.clientY <= topAreaBottom) {
return HoveredArea.TOP;
}

const bottomAreaTop = rect.bottom - (ELEMENT_TOP_AND_CENTER_AREA_SIZE_IN_PERCENT / 100) * rect.height;
const bottomAreaTop = rect.bottom - factor * rect.height;
const bottomAreaBottom = rect.bottom;

if (e.clientY >= bottomAreaTop && e.clientY <= bottomAreaBottom) {
Expand Down
14 changes: 8 additions & 6 deletions frontend/src/lib/components/SortableList/sortableListGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ import { SortableListItemProps } from "./sortableListItem";

export type SortableListGroupProps = {
id: string;
title: string;
title: React.ReactNode;
initiallyExpanded?: boolean;
startAdornment?: React.ReactNode;
endAdornment?: React.ReactNode;
contentWhenEmpty?: React.ReactNode;
children: React.ReactElement<SortableListItemProps>[];
children?: React.ReactElement<SortableListItemProps>[];
};

/**
*
* @param {SortableListGroupProps} props Object of properties for the SortableListGroup component (see below for details).
* @param {string} props.id ID that is unique among all components inside the sortable list.
* @param {string} props.title Title of the list item.
* @param {React.ReactNode} props.title Title of the list item.
* @param {boolean} props.initiallyExpanded Whether the group should be expanded by default.
* @param {React.ReactNode} props.startAdornment Start adornment to display to the left of the title.
* @param {React.ReactNode} props.endAdornment End adornment to display to the right of the title.
Expand Down Expand Up @@ -88,7 +88,9 @@ export function SortableListGroup(props: SortableListGroupProps): React.ReactNod
}
)}
>
{props.children.length === 0 ? props.contentWhenEmpty : props.children}
{props.children === undefined || props.children.length === 0
? props.contentWhenEmpty
: props.children}
</div>
</div>
{isHovered && sortableListContext.hoveredArea === HoveredArea.BOTTOM && <SortableListDropIndicator />}
Expand All @@ -97,7 +99,7 @@ export function SortableListGroup(props: SortableListGroupProps): React.ReactNod
}

type HeaderProps = {
title: string;
title: React.ReactNode;
expanded: boolean;
onToggleExpanded?: () => void;
icon?: React.ReactNode;
Expand All @@ -118,7 +120,7 @@ function Header(props: HeaderProps): React.ReactNode {
>
{props.expanded ? <ExpandLess fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-grow">
{props.startAdornment}
<div className="flex-grow">{props.title}</div>
{props.endAdornment}
Expand Down
37 changes: 27 additions & 10 deletions frontend/src/lib/components/SortableList/sortableListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import React from "react";
import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
import { createPortal } from "@lib/utils/createPortal";
import { resolveClassNames } from "@lib/utils/resolveClassNames";
import { DragIndicator } from "@mui/icons-material";
import { DragIndicator, ExpandLess, ExpandMore } from "@mui/icons-material";

import { HoveredArea, SortableListContext } from "./sortableList";
import { SortableListDropIndicator } from "./sortableListDropIndicator";

export type SortableListItemProps = {
id: string;
title: string;
title: React.ReactNode;
initiallyExpanded?: boolean;
startAdornment?: React.ReactNode;
endAdornment?: React.ReactNode;
children: React.ReactNode;
Expand All @@ -20,14 +21,16 @@ export type SortableListItemProps = {
*
* @param {SortableListItemProps} props Object of properties for the SortableListItem component (see below for details).
* @param {string} props.id ID that is unique among all components inside the sortable list.
* @param {string} props.title Title of the list item.
* @param {React.ReactNode} props.title Title component of the list item.
* @param {React.ReactNode} props.startAdornment Start adornment to display to the left of the title.
* @param {React.ReactNode} props.endAdornment End adornment to display to the right of the title.
* @param {React.ReactNode} props.children Child components to display as the content of the list item.
*
* @returns {React.ReactNode} A sortable list item component.
*/
export function SortableListItem(props: SortableListItemProps): React.ReactNode {
const [isExpanded, setIsExpanded] = React.useState<boolean>(props.initiallyExpanded ?? true);

const divRef = React.useRef<HTMLDivElement>(null);
const boundingClientRect = useElementBoundingRect(divRef);

Expand All @@ -37,6 +40,10 @@ export function SortableListItem(props: SortableListItemProps): React.ReactNode
const isDragging = sortableListContext.draggedElementId === props.id;
const dragPosition = sortableListContext.dragPosition;

function handleToggleExpanded() {
setIsExpanded(!isExpanded);
}

return (
<>
{isHovered && sortableListContext.hoveredArea === HoveredArea.TOP && <SortableListDropIndicator />}
Expand All @@ -50,7 +57,7 @@ export function SortableListItem(props: SortableListItemProps): React.ReactNode
hidden: !isDragging,
})}
></div>
<Header {...props} />
<Header expanded={isExpanded} onToggleExpanded={handleToggleExpanded} {...props} />
{isDragging &&
dragPosition &&
createPortal(
Expand All @@ -64,34 +71,44 @@ export function SortableListItem(props: SortableListItemProps): React.ReactNode
width: isDragging ? boundingClientRect.width : undefined,
}}
>
<Header {...props} />
<Header expanded={isExpanded} {...props} />
</div>
)}
<div className="flex flex-col gap-2 bg-white border-b shadow-inner p-2">{props.children}</div>
<div className={resolveClassNames("bg-white border-b shadow-inner", { hidden: !isExpanded })}>
{props.children}
</div>
</div>
{isHovered && sortableListContext.hoveredArea === HoveredArea.BOTTOM && <SortableListDropIndicator />}
</>
);
}

type HeaderProps = {
icon?: React.ReactNode;
title: string;
title: React.ReactNode;
expanded: boolean;
onToggleExpanded?: () => void;
startAdornment?: React.ReactNode;
endAdornment?: React.ReactNode;
};

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">
<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")}>
<DragIndicator fontSize="inherit" className="pointer-events-none" />
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-grow">
{props.startAdornment}
<div className="flex-grow">{props.title}</div>
{props.endAdornment}
</div>
<div
className="hover:cursor-pointer hover:text-blue-800 p-0.5 rounded"
onClick={props.onToggleExpanded}
title={props.expanded ? "Hide children" : "Show children"}
>
{props.expanded ? <ExpandLess fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
</div>
</div>
);
}
4 changes: 2 additions & 2 deletions frontend/src/modules/2DViewer/view/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import { BaseLayer, LayerStatus, useLayersStatuses } from "@modules/_shared/laye
import { LayerManagerTopic, useLayerManagerTopicValue } from "@modules/_shared/layers/LayerManager";
import { ViewportType } from "@webviz/subsurface-viewer";
import SubsurfaceViewer, { ViewsType } from "@webviz/subsurface-viewer/dist/SubsurfaceViewer";
import { MapLayer } from "@webviz/subsurface-viewer/dist/layers";

import { SurfaceLayer } from "../layers/SurfaceLayer";
import { SettingsToViewInterface } from "../settingsToViewInterface";
import { State } from "../state";

Expand All @@ -24,6 +22,7 @@ export function View(props: ModuleViewProps<State, SettingsToViewInterface>): Re

const groupLayersMap: Map<string, Layer[]> = new Map();

/*
for (const layer of layers) {
const groupId = layerManager.getGroupOfLayer(layer.getId())?.getId() ?? "main";
let layerArr = groupLayersMap.get(groupId);
Expand Down Expand Up @@ -57,6 +56,7 @@ export function View(props: ModuleViewProps<State, SettingsToViewInterface>): Re
}
}
}
*/

const numCols = Math.ceil(Math.sqrt(groupLayersMap.size));
const numRows = Math.ceil(groupLayersMap.size / numCols);
Expand Down
Loading

0 comments on commit 9a90e20

Please sign in to comment.