diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index b072f51d..7537d702 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"; @@ -210,6 +210,10 @@ export interface NodeContentProps * width and height dimensions of the node (Optional) */ nodeDimensions?: NodeDimensions; + /** if node is resizable, this allows direction of specificity */ + resizeDirections?: Enable; + /** determines how much width a node can be resized to */ + resizeMaxDimensions?: Partial; } interface MemoHandlerLegacyProps extends HandleProps { @@ -332,6 +336,8 @@ export function NodeContent({ letPassWheelEvents = false, // businessData is just being ignored businessData, + resizeDirections = { bottomRight: true }, + resizeMaxDimensions, // other props for DOM element ...otherDomProps }: NodeContentProps) { @@ -341,11 +347,12 @@ export function NodeContent({ const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps; - const isResizeable = !!onNodeResize && minimalShape === "none"; + 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" @@ -374,7 +381,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({ @@ -460,7 +467,9 @@ export function NodeContent({ ); const resizableStyles = - !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {}; + isResizable && width + (height || 0) > 0 + ? { width, minHeight: height, maxWidth: resizeMaxDimensions?.width } + : {}; const introductionStyles = introductionTime && !introductionDone @@ -487,6 +496,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 @@ -593,9 +603,12 @@ export function NodeContent({ const resizableNode = () => ( { if (nodeContentRef.current) { @@ -604,12 +617,14 @@ export function NodeContent({ } }} onResizeStop={(_0, _1, _2, d) => { - setWidth(width + d.width); - setHeight(height + d.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 && onNodeResize({ - height: height + d.height, - width: width + d.width, + height: nextHeight, + width: nextWidth, }); }} > @@ -617,7 +632,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 f7207f95..5dc06a3b 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