From 61f849e140704841bc63b11c46201fe441d3ba80 Mon Sep 17 00:00:00 2001 From: arausly Date: Sun, 20 Oct 2024 23:28:00 +0100 Subject: [PATCH 1/8] added adaptation to change resize direction --- src/extensions/react-flow/nodes/NodeContent.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index ed79f808..02d77f27 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer"; import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts"; import Color from "color"; -import { Resizable } from "re-resizable"; +import { Enable, Resizable } from "re-resizable"; import { intentClassName, IntentTypes } from "../../../common/Intent"; import { DepictionProps } from "../../../components/Depiction/Depiction"; @@ -222,7 +222,9 @@ export interface NodeContentProps /** * width and height dimensions of the node (Optional) */ - nodeDimensions?: NodeDimensions; + nodeDimensions?: any; + /** if node is resizable, this allows direction of specificity */ + resizeDirections?: Enable; } interface MemoHandlerLegacyProps extends HandleProps { @@ -351,6 +353,7 @@ export function NodeContent({ letPassWheelEvents = false, // businessData is just being ignored businessData, + resizeDirections = { bottomRight: true }, // other props for DOM element ...otherDomProps }: NodeContentProps) { @@ -615,9 +618,11 @@ export function NodeContent({ const resizableNode = () => ( { if (nodeContentRef.current) { From fa6fb3d3e8bc5c4ecbe99a3fcc46802b24b38850 Mon Sep 17 00:00:00 2001 From: arausly Date: Mon, 28 Oct 2024 18:07:50 +0100 Subject: [PATCH 2/8] started logic for setting max-wdith for resizable nodes --- src/extensions/react-flow/nodes/NodeContent.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 02d77f27..35315b8b 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -222,9 +222,11 @@ export interface NodeContentProps /** * width and height dimensions of the node (Optional) */ - nodeDimensions?: any; + nodeDimensions?: NodeDimensions; /** if node is resizable, this allows direction of specificity */ resizeDirections?: Enable; + /** determines how much width a node can be resized to */ + resizeMaxWidth?: number; } interface MemoHandlerLegacyProps extends HandleProps { @@ -354,6 +356,7 @@ export function NodeContent({ // businessData is just being ignored businessData, resizeDirections = { bottomRight: true }, + resizeMaxWidth = Infinity, // other props for DOM element ...otherDomProps }: NodeContentProps) { @@ -631,12 +634,16 @@ export function NodeContent({ } }} onResizeStop={(_0, _1, _2, d) => { - setWidth(width + d.width); + const nextWidthSize = width + d.width; + console.log("NEXT WIDTH ==>", nextWidthSize); + const changeOrRetainWidth = (prevWidth: number) => + nextWidthSize < resizeMaxWidth ? nextWidthSize : prevWidth; + setWidth(changeOrRetainWidth); setHeight(height + d.height); onNodeResize && onNodeResize({ height: height + d.height, - width: width + d.width, + width: changeOrRetainWidth(width), }); }} > From b8efa4afd64b7a93d618dad5cf04586caba74ad7 Mon Sep 17 00:00:00 2001 From: arausly Date: Tue, 5 Nov 2024 17:47:54 +0100 Subject: [PATCH 3/8] fixed undo/redo for resizable nodes --- src/extensions/react-flow/nodes/NodeContent.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 35315b8b..32d5e4cd 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -485,7 +485,7 @@ export function NodeContent({ ); const resizableStyles = - !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {}; + !!onNodeResize === true && minimalShape === "none" && width + (height || 0) > 0 ? { width, height } : {}; const introductionStyles = introductionTime && !introductionDone @@ -624,7 +624,7 @@ export function NodeContent({ handleWrapperClass={ `${resizeDirections.bottomRight ? `${eccgui}-graphviz__node__resizer--cursorhandles` : ""}` + " nodrag" } - size={{ height, width }} + size={{ height: height || "100%", width }} enable={resizeDirections} scale={zoom} onResize={(_0, _1, _2, d) => { @@ -635,9 +635,8 @@ export function NodeContent({ }} onResizeStop={(_0, _1, _2, d) => { const nextWidthSize = width + d.width; - console.log("NEXT WIDTH ==>", nextWidthSize); const changeOrRetainWidth = (prevWidth: number) => - nextWidthSize < resizeMaxWidth ? nextWidthSize : prevWidth; + nextWidthSize < resizeMaxWidth ? nextWidthSize : prevWidth - 1; setWidth(changeOrRetainWidth); setHeight(height + d.height); onNodeResize && From 6c61b90b2e635872dce419634f560ded0929c403 Mon Sep 17 00:00:00 2001 From: arausly Date: Wed, 13 Nov 2024 07:09:17 +0100 Subject: [PATCH 4/8] refactors --- .../react-flow/nodes/NodeContent.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 32d5e4cd..a91e3dc6 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -226,7 +226,7 @@ export interface NodeContentProps /** if node is resizable, this allows direction of specificity */ resizeDirections?: Enable; /** determines how much width a node can be resized to */ - resizeMaxWidth?: number; + resizeMaxDimensions?: Partial; } interface MemoHandlerLegacyProps extends HandleProps { @@ -356,7 +356,7 @@ export function NodeContent({ // businessData is just being ignored businessData, resizeDirections = { bottomRight: true }, - resizeMaxWidth = Infinity, + resizeMaxDimensions = { width: Infinity, height: Infinity }, // other props for DOM element ...otherDomProps }: NodeContentProps) { @@ -624,7 +624,7 @@ export function NodeContent({ handleWrapperClass={ `${resizeDirections.bottomRight ? `${eccgui}-graphviz__node__resizer--cursorhandles` : ""}` + " nodrag" } - size={{ height: height || "100%", width }} + size={{ height, width }} enable={resizeDirections} scale={zoom} onResize={(_0, _1, _2, d) => { @@ -634,15 +634,14 @@ export function NodeContent({ } }} onResizeStop={(_0, _1, _2, d) => { - const nextWidthSize = width + d.width; - const changeOrRetainWidth = (prevWidth: number) => - nextWidthSize < resizeMaxWidth ? nextWidthSize : prevWidth - 1; - setWidth(changeOrRetainWidth); - setHeight(height + d.height); + const nextWidth = Math.min(width + d.width, resizeMaxDimensions.width!); + const nextHeight = Math.min(height + d.height, resizeMaxDimensions.height!); + setWidth(nextWidth); + setHeight(nextHeight); onNodeResize && onNodeResize({ - height: height + d.height, - width: changeOrRetainWidth(width), + height: nextHeight, + width: nextWidth, }); }} > From d0aada47d2f21252024a617cf0ddc1cfec7b761d Mon Sep 17 00:00:00 2001 From: arausly Date: Mon, 18 Nov 2024 10:00:49 +0100 Subject: [PATCH 5/8] refactors and changes --- src/extensions/react-flow/nodes/NodeContent.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index a91e3dc6..621e4fc0 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -356,7 +356,7 @@ export function NodeContent({ // businessData is just being ignored businessData, resizeDirections = { bottomRight: true }, - resizeMaxDimensions = { width: Infinity, height: Infinity }, + resizeMaxDimensions, // other props for DOM element ...otherDomProps }: NodeContentProps) { @@ -367,6 +367,7 @@ export function NodeContent({ const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps; const isResizeable = !!onNodeResize && minimalShape === "none"; + const isNotStickyNoteResizableNode = isResizeable && (resizeMaxDimensions?.width || resizeMaxDimensions?.height); const [width, setWidth] = React.useState(nodeDimensions?.width ?? 0); const [height, setHeight] = React.useState(nodeDimensions?.height ?? 0); let zoom = 1; @@ -484,8 +485,11 @@ export function NodeContent({ highlightColor ); + const resizableForNonStickyNodes = isNotStickyNoteResizableNode ? { height: "auto", minHeight: height } : {}; const resizableStyles = - !!onNodeResize === true && minimalShape === "none" && width + (height || 0) > 0 ? { width, height } : {}; + isResizeable && width + (height || 0) > 0 + ? { width, height, maxWidth: resizeMaxDimensions?.width, ...resizableForNonStickyNodes } + : {}; const introductionStyles = introductionTime && !introductionDone @@ -634,8 +638,8 @@ export function NodeContent({ } }} onResizeStop={(_0, _1, _2, d) => { - const nextWidth = Math.min(width + d.width, resizeMaxDimensions.width!); - const nextHeight = Math.min(height + d.height, resizeMaxDimensions.height!); + const nextWidth = Math.min(width + d.width, resizeMaxDimensions?.width ?? Infinity); + const nextHeight = Math.min(height + d.height, resizeMaxDimensions?.height ?? Infinity); setWidth(nextWidth); setHeight(nextHeight); onNodeResize && From 1998848236bfaee7365512e94ad3b051c066a970 Mon Sep 17 00:00:00 2001 From: arausly Date: Tue, 19 Nov 2024 09:48:53 +0100 Subject: [PATCH 6/8] fixed horizontally overflowing evaluation results --- src/extensions/react-flow/nodes/NodeContent.tsx | 14 +++++++------- src/extensions/react-flow/nodes/_nodes.scss | 4 ++++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 621e4fc0..590125af 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -366,12 +366,12 @@ export function NodeContent({ const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps; - const isResizeable = !!onNodeResize && minimalShape === "none"; - const isNotStickyNoteResizableNode = isResizeable && (resizeMaxDimensions?.width || resizeMaxDimensions?.height); + const isResizable = !!onNodeResize && minimalShape === "none"; + const isNonStickyNodeResizable = isResizable && (!!resizeMaxDimensions?.height || !!resizeMaxDimensions?.width); //cannot expand infinitely like sticky notes const [width, setWidth] = React.useState(nodeDimensions?.width ?? 0); const [height, setHeight] = React.useState(nodeDimensions?.height ?? 0); let zoom = 1; - if (isResizeable) + if (isResizable) try { [, , zoom] = flowVersionCheck === "legacy" @@ -485,10 +485,9 @@ export function NodeContent({ highlightColor ); - const resizableForNonStickyNodes = isNotStickyNoteResizableNode ? { height: "auto", minHeight: height } : {}; const resizableStyles = - isResizeable && width + (height || 0) > 0 - ? { width, height, maxWidth: resizeMaxDimensions?.width, ...resizableForNonStickyNodes } + isResizable && width + (height || 0) > 0 + ? { width, minHeight: height, maxWidth: resizeMaxDimensions?.width } : {}; const introductionStyles = @@ -516,6 +515,7 @@ export function NodeContent({ ` ${eccgui}-graphviz__node--${size}` + ` ${eccgui}-graphviz__node--minimal-${minimalShape}` + (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") + + (isNonStickyNodeResizable ? ` ${eccgui}-graphviz__node--flexible-height` : "") + (border ? ` ${eccgui}-graphviz__node--border-${border}` : "") + (intent ? ` ${intentClassName(intent)}` : "") + (highlightClassNameSuffix.length > 0 @@ -653,7 +653,7 @@ export function NodeContent({ ); - return isResizeable ? resizableNode() : nodeContent; + return isResizable ? resizableNode() : nodeContent; } const evaluateHighlightColors = ( diff --git a/src/extensions/react-flow/nodes/_nodes.scss b/src/extensions/react-flow/nodes/_nodes.scss index 5d707bf0..c33c076f 100644 --- a/src/extensions/react-flow/nodes/_nodes.scss +++ b/src/extensions/react-flow/nodes/_nodes.scss @@ -51,6 +51,10 @@ } } +.#{$eccgui}-graphviz__node--flexible-height { + height: auto !important; +} + .#{$eccgui}-graphviz__node--minimal-rectangular, .#{$eccgui}-graphviz__node--minimal-circular { /* FIXME: does not work correctly with tooltips around From bc6aa05290ea3b14e929391d6260ec782b3f5c1d Mon Sep 17 00:00:00 2001 From: arausly Date: Tue, 19 Nov 2024 18:24:14 +0100 Subject: [PATCH 7/8] resizable wrapper fix --- src/extensions/react-flow/nodes/NodeContent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 590125af..181f1c0c 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -628,7 +628,8 @@ export function NodeContent({ handleWrapperClass={ `${resizeDirections.bottomRight ? `${eccgui}-graphviz__node__resizer--cursorhandles` : ""}` + " nodrag" } - size={{ height, width }} + size={{ height: "auto", width }} + style={{ minHeight: height }} enable={resizeDirections} scale={zoom} onResize={(_0, _1, _2, d) => { From 7d7bd4565ed661a1dd20666b25b09815275b52b8 Mon Sep 17 00:00:00 2001 From: arausly Date: Thu, 21 Nov 2024 09:52:07 +0100 Subject: [PATCH 8/8] added resizable feature to linking editor and removed height from being saved --- src/extensions/react-flow/nodes/NodeContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 181f1c0c..012f1f6e 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -400,7 +400,7 @@ export function NodeContent({ // initial dimension before resize React.useEffect(() => { if (!!onNodeResize && minimalShape === "none") { - if (!nodeDimensions) { + if (!nodeDimensions?.width) { setWidth(nodeContentRef.current.offsetWidth); setHeight(nodeContentRef.current.offsetHeight); onNodeResize({