This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new d164434b072 NO-ISSUE: DMN Editor: Overlay modal can't be scrolled
(#2352)
d164434b072 is described below
commit d164434b0725957337fed42a98a38d3b31611b9b
Author: Daniel José dos Santos <[email protected]>
AuthorDate: Wed May 22 14:30:46 2024 -0300
NO-ISSUE: DMN Editor: Overlay modal can't be scrolled (#2352)
---
packages/dmn-editor/src/diagram/Diagram.tsx | 22 +++++++++++++-----
.../dmn-editor/src/overlaysPanel/OverlaysPanel.tsx | 26 +++++++++++++++++++---
2 files changed, 40 insertions(+), 8 deletions(-)
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx
b/packages/dmn-editor/src/diagram/Diagram.tsx
index 6f91f452982..f27ffe60278 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -129,6 +129,8 @@ export const DEFAULT_VIEWPORT = { x: 100, y: 100, zoom: 1 };
const DELETE_NODE_KEY_CODES = ["Backspace", "Delete"];
+const AREA_ABOVE_OVERLAYS_PANEL = 120;
+
const nodeTypes: Record<NodeType, any> = {
[NODE_TYPES.decisionService]: DecisionServiceNode,
[NODE_TYPES.group]: GroupNode,
@@ -434,7 +436,10 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
drdIndex: state.computed(state).getDrdIndex(),
nodeType,
shape: {
- "@_dmnElementRef": buildXmlQName({ type: "xml-qname",
localPart: drgElement["@_id"]! }),
+ "@_dmnElementRef": buildXmlQName({
+ type: "xml-qname",
+ localPart: drgElement["@_id"]!,
+ }),
"@_isCollapsed": false,
"dc:Bounds": {
"@_x": dropPoint.x,
@@ -919,7 +924,10 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
edge: { id: change.id, dmnObject: edge.data.dmnObject },
mode: EdgeDeletionMode.FROM_DRG_AND_ALL_DRDS,
});
- state.dispatch(state).diagram.setEdgeStatus(change.id, {
selected: false, draggingWaypoint: false });
+ state.dispatch(state).diagram.setEdgeStatus(change.id, {
+ selected: false,
+ draggingWaypoint: false,
+ });
}
break;
case "add":
@@ -1170,7 +1178,7 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
>
<SelectionStatus />
<Palette pulse={isEmptyStateShowing} />
- <TopRightCornerPanels />
+ <TopRightCornerPanels
availableHeight={container.current?.offsetHeight} />
<DiagramCommands />
{!isFirefox && <RF.Background />}
<RF.Controls fitViewOptions={FIT_VIEW_OPTIONS}
position={"bottom-right"} />
@@ -1358,7 +1366,11 @@ export function SetConnectionToReactFlowStore(props: {})
{
return <></>;
}
-export function TopRightCornerPanels() {
+interface TopRightCornerPanelsProps {
+ availableHeight?: number | undefined;
+}
+
+export function TopRightCornerPanels({ availableHeight }:
TopRightCornerPanelsProps) {
const diagram = useDmnEditorStore((s) => s.diagram);
const dmnEditorStoreApi = useDmnEditorStoreApi();
@@ -1404,7 +1416,7 @@ export function TopRightCornerPanels() {
flipBehavior={["bottom-end"]}
hideOnOutsideClick={false}
isVisible={diagram.overlaysPanel.isOpen}
- bodyContent={<OverlaysPanel />}
+ bodyContent={<OverlaysPanel availableHeight={(availableHeight ??
0) - AREA_ABOVE_OVERLAYS_PANEL} />}
>
<button
className={"kie-dmn-editor--overlays-panel-toggle-button"}
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
index 63901c773d7..f66be9aa90a 100644
--- a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
+++ b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -23,17 +23,37 @@ import { Form, FormGroup } from
"@patternfly/react-core/dist/js/components/Form"
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
import { Slider } from "@patternfly/react-core/dist/js/components/Slider";
import { useDmnEditorStore, useDmnEditorStoreApi } from
"../store/StoreContext";
+import { useLayoutEffect, useRef } from "react";
const MIN_SNAP = 5;
const MAX_SNAP = 50;
const SNAP_STEP = 5;
+const BOTTOM_MARGIN = 10;
-export function OverlaysPanel() {
+interface OverlaysPanelProps {
+ availableHeight?: number;
+}
+
+export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
const diagram = useDmnEditorStore((s) => s.diagram);
const dmnEditorStoreApi = useDmnEditorStoreApi();
+ const overlayPanelContainer = useRef<HTMLDivElement>(null);
+ useLayoutEffect(() => {
+ if (overlayPanelContainer.current && availableHeight) {
+ const bounds = overlayPanelContainer.current.getBoundingClientRect();
+ const currentHeight = bounds.height;
+ const yPos = bounds.y;
+ if (currentHeight + yPos >= availableHeight) {
+ overlayPanelContainer.current.style.height = availableHeight -
BOTTOM_MARGIN + "px";
+ overlayPanelContainer.current.style.overflowY = "scroll";
+ } else {
+ overlayPanelContainer.current.style.overflowY = "visible";
+ }
+ }
+ });
return (
- <>
+ <div ref={overlayPanelContainer}>
<Form
onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow
KeyboardShortcuts from triggering when editing stuff on Overlays Panel
>
@@ -140,6 +160,6 @@ export function OverlaysPanel() {
/>
</FormGroup>
</Form>
- </>
+ </div>
);
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
