@eccenca/gui-elements 24.4.1 → 25.0.0-rc.1

package/src/extensions/react-flow/markers/_markers.scss

@@ -0,0 +1,31 @@
+marker[id|="react-flow__marker"] {
+    color: var(--marker-intent-color);
+
+    &.#{$eccgui}-intent--none {
+        --marker-intent-color: #{$reactflow-edge-stroke-color-default};
+    }
+
+    &.#{$eccgui}-intent--primary {
+        --marker-intent-color: #{$eccgui-color-primary};
+    }
+
+    &.#{$eccgui}-intent--accent {
+        --marker-intent-color: #{$eccgui-color-accent};
+    }
+
+    &.#{$eccgui}-intent--info {
+        --marker-intent-color: #{$eccgui-color-info-text};
+    }
+
+    &.#{$eccgui}-intent--success {
+        --marker-intent-color: #{$eccgui-color-success-text};
+    }
+
+    &.#{$eccgui}-intent--warning {
+        --marker-intent-color: #{$eccgui-color-warning-text};
+    }
+
+    &.#{$eccgui}-intent--danger {
+        --marker-intent-color: #{$eccgui-color-danger-text};
+    }
+}

package/src/extensions/react-flow/minimap/MiniMap.stories.tsx

@@ -1,32 +1,26 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Background, BackgroundVariant, Elements } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
 
-import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
+import { ApplicationContainer, MiniMap, MiniMapProps, ReactFlowExtended } from "./../../../index";
 
 export default {
     title: "Extensions/React Flow/MiniMap",
-    component: MiniMapElement,
+    component: MiniMap,
     argTypes: {},
-} as Meta<typeof MiniMapElement>;
+} as Meta<typeof MiniMap>;
 
 const MiniMapExample: FC<MiniMapProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(undefined);
     const [elements, setElements] = useState([] as Elements);
-    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
     const nodeExamples = ReactFlowExample.nodeExamples.workflow;
 
     useEffect(() => {
-        setElements(nodeExamples as Elements);
+        setElements([...nodeExamples.nodes, ...nodeExamples.edges] as Elements);
     }, [args]);
 
-    // Helper methods for nodes and edges
-    const isNode = (element: FlowElement & { source?: string }): boolean => !element.source;
-    const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element);
-
     const onLoad = useCallback((rfi) => {
         if (!reactflowInstance) {
             setReactflowInstance(rfi);
@@ -34,23 +28,23 @@ const MiniMapExample: FC<MiniMapProps> = (args) => {
     }, []);
 
     return (
-        <OverlaysProvider>
-            <ReactFlow
+        <ApplicationContainer style={{ background: "white" }}>
+            <ReactFlowExtended
                 configuration={"workflow"}
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
                 defaultZoom={1}
             >
-                <MiniMapElement flowInstance={reactflowInstance} {...args} />
+                <MiniMap flowInstance={reactflowInstance} {...args} />
                 <Background variant={BackgroundVariant.Lines} gap={16} />
-            </ReactFlow>
-            {edgeTools}
-        </OverlaysProvider>
+            </ReactFlowExtended>
+        </ApplicationContainer>
     );
 };
 
-const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const Template: StoryFn<MiniMapProps> = (args) => <MiniMapExample {...args} key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -1,14 +1,16 @@
 import React, { memo, useEffect } from "react";
-import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
+import {
+    MiniMap as ReactFlowMiniMapV9,
+    MiniMapProps as ReactFlowMiniMapV9Props,
+    OnLoadParams
+} from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "../minimap/utils";
+import { miniMapUtils } from "./utils";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
 
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -23,6 +25,15 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
     >;
 }
 
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
+
 interface configParams {
     // Key has been pressed down over the mini-map and navigation mode has thus started
     navigationOn: boolean;
@@ -40,6 +51,28 @@ let minimapCalcConf: configParams = {
 
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
 export const MiniMap = memo(
+    ({
+        flowVersion,
+        ...otherProps
+    }: MiniMapProps) => {
+        const flowVersionCheck = flowVersion || useReactFlowVersion();
+        
+        switch (flowVersionCheck) {
+            case ReactFlowVersions.V9:
+                return <MiniMapV9 {...otherProps as MiniMapV9Props} />;
+            case ReactFlowVersions.V12:
+                return <MiniMapV12 {...otherProps as MiniMapV12Props} />;
+            default:
+                return <></>; // cannot exit on its own
+        }
+    }
+);
+
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export const MiniMapV9 = memo(
     ({
         flowInstance,
         enableNavigation = false,
@@ -49,7 +82,7 @@ export const MiniMap = memo(
         nodeStrokeColor = miniMapUtils.borderColor,
         wrapperProps,
         ...minimapProps
-    }: MiniMapProps) => {
+    }: MiniMapV9Props) => {
         const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
 
         useEffect(() => {
@@ -130,7 +163,7 @@ export const MiniMap = memo(
                         : wrapperProps?.style
                 }
             >
-                <ReactFlowMiniMap
+                <ReactFlowMiniMapV9
                     maskColor={maskColor}
                     nodeClassName={nodeClassName}
                     nodeColor={nodeColor}
@@ -141,3 +174,5 @@ export const MiniMap = memo(
         );
     }
 );
+
+export default MiniMap;

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -0,0 +1,39 @@
+import React, { memo } from "react";
+import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
+
+import { miniMapUtils } from "./utils";
+import { MiniMapBasicProps } from "./MiniMap";
+
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
+}
+
+/**
+ * Mini-map support for for React Flow v12.
+ * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ */
+export const MiniMapV12 = memo(
+    ({
+        enableNavigation = false,
+        nodeClassName = miniMapUtils.nodeClassName,
+        nodeColor = miniMapUtils.nodeColor,
+        nodeStrokeColor = miniMapUtils.borderColor,
+        wrapperProps,
+        ...minimapProps
+    }: MiniMapV12Props) => {
+        return (
+            <div
+                {...wrapperProps}
+                style={enableNavigation ? { ...(wrapperProps?.style ?? {}), cursor: "grab" } : wrapperProps?.style}
+            >
+                <ReactFlowMiniMap
+                    nodeClassName={nodeClassName}
+                    nodeColor={nodeColor}
+                    nodeStrokeColor={nodeStrokeColor}
+                    {...minimapProps}
+                    zoomable={enableNavigation}
+                    pannable={enableNavigation}
+                />
+            </div>
+        );
+    }
+);

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -1,3 +1,17 @@
+.react-flow__minimap {
+    right: $eccgui-size-block-whitespace * 0.5 !important;
+    bottom: $eccgui-size-block-whitespace !important;
+    border: solid 1px $eccgui-color-separation-divider;
+
+    & > svg {
+        display: block;
+    }
+}
+
+.react-flow__minimap-mask {
+    fill: rgba($eccgui-color-separation-divider, $eccgui-opacity-muted);
+}
+
 .#{$eccgui}-graphviz__minimap__node--default {
     &:not([fill]) {
         fill: $reactflow-node-background-color;

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
-import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
-import { useStore as useStoreFlowV12 } from "@xyflow/react";
+import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer";
+import { useStore as getStoreStateFlowV12 } from "@xyflow/react";
 import Color from "color";
 import { Resizable } from "re-resizable";
 
@@ -9,24 +8,18 @@ import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Depiction, HandleDefaultProps, Icon, OverflowText } from "../../../index";
-import { HandleDefault, HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
-import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
+import { Depiction, Icon, OverflowText } from "../../../index";
+import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
+import { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
 
-type NodeContentHandleLegacyProps = HandleProps;
-
-type NodeContentHandleNextProps = HandleNextProps;
-
-type NodeContentHandleV12Props = HandleV12Props;
-
-export type NodeContentHandleProps =
-    | NodeContentHandleLegacyProps
-    | NodeContentHandleNextProps
-    | NodeContentHandleV12Props;
+/**
+ * @deprecated (v26) use `HandleDefaultProps`
+ */
+export type NodeContentHandleProps = HandleDefaultProps;
 
 export type NodeDimensions = {
     width?: number;
@@ -92,7 +85,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     footerContent?: React.ReactNode;
 }
 
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
+export interface NodeContentProps<CONTENT_PROPS = any>
     extends NodeContentData,
         ReacFlowVersionSupportProps,
         Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
@@ -144,9 +137,9 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Set of defined buttons and icons that can be displayed.
      */
     executionButtons?: (
-        adjustedContentProps: Partial<NODE_CONTENT_PROPS>,
-        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>
-    ) => React.ReactElement<NODE_CONTENT_PROPS>;
+        adjustedContentProps: Partial<CONTENT_PROPS>,
+        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>
+    ) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -156,7 +149,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: NodeContentHandleProps[];
+    handles?: HandleDefaultProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -169,7 +162,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<CONTENT_PROPS>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -183,8 +176,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      */
     introductionTime?: number | IntroductionTime;
 
-    /** Additional data stored in the node. */
-    businessData?: NODE_DATA;
+    /**
+     * Additional data stored in the node.
+     * @deprecated (v26) is not used anymore.
+     */
+    businessData?: never;
 
     // we need to forward some ReactFlowNodeProps here
 
@@ -227,37 +223,20 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     resizeMaxDimensions?: Partial<NodeDimensions>;
 }
 
-interface MemoHandlerLegacyProps extends HandleProps {
-    posdirection: string;
-    style: React.CSSProperties;
-    flowVersion: "legacy";
-}
-
-interface MemoHandlerNextProps extends HandleNextProps {
-    posdirection: string;
+type MemoHandlerProps = HandleDefaultProps & {
+    posdirection: "left" | "top";
     style: React.CSSProperties;
-    flowVersion: "next";
-}
-
-interface MemoHandlerV12Props extends HandleV12Props {
-    posdirection: string;
-    style: React.CSSProperties;
-    flowVersion: "v12";
-}
+};
 
-type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps | MemoHandlerV12Props;
+type HandleStack = { [key: string]: HandleDefaultProps[] };
 
 const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): NodeContentHandleProps[] => {
     switch (flowVersion) {
-        case "legacy":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleLegacyProps[];
-        case "next":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
+        case "v9":
         case "v12":
-            return [{ type: "target" }, { type: "source" }] as NodeContentHandleV12Props[];
-
+            return [{ type: "target" }, { type: "source" }] as HandleDefaultProps[];
         default:
-            return [];
+            return [] as HandleDefaultProps[];
     }
 };
 
@@ -271,17 +250,17 @@ const getDefaultMinimalTooltipData = (node: any) => {
 };
 
 const addHandles = (
-    handles: any,
-    position: any,
-    posDirection: any,
-    isConnectable: any,
-    nodeStyle: any,
-    flowVersion: any = "legacy"
+    handles: HandleStack,
+    position: MemoHandlerProps["position"],
+    posDirection: MemoHandlerProps["posdirection"],
+    isConnectable: MemoHandlerProps["isConnectable"],
+    nodeStyle: MemoHandlerProps["style"],
+    flowVersion: ReacFlowVersionSupportProps["flowVersion"] = ReactFlowVersions.V9
 ) => {
     return handles[position].map((handle: HandleDefaultProps, idx: number) => {
         // FIXME: remove? orig v12 change: return handles[position].map((handle: any, idx: any) => {
         const { style = {}, ...otherHandleProps } = handle;
-        const styleAdditions: { [key: string]: string } = {
+        const styleAdditions: MemoHandlerProps["style"] = {
             color: nodeStyle.borderColor ?? undefined,
         };
         styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%";
@@ -294,8 +273,10 @@ const addHandles = (
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
             },
         };
-
-        return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
+        return (
+            <MemoHandler flowVersion={flowVersion} {...(handleProperties as MemoHandlerProps)} key={"handle" + idx} />
+        );
+        // FIXME: remove? orig v12 change: return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
     });
 };
 
@@ -317,11 +298,12 @@ const MemoHandler = React.memo(
     }
 );
 
+const DEFAULT_RESIZE_DIRECTIONS: ResizeDirections = { bottom: true, right: true }
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export function NodeContent<CONTENT_PROPS = any>({
+export function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({
     flowVersion,
     iconName,
     depiction,
@@ -354,7 +336,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     // resizing
     onNodeResize,
     nodeDimensions,
-    resizeDirections = { bottom: true, right: true },
+    resizeDirections = DEFAULT_RESIZE_DIRECTIONS,
     resizeMaxDimensions,
     // forwarded props
     targetPosition = Position.Left,
@@ -366,11 +348,15 @@ export function NodeContent<CONTENT_PROPS = any>({
     businessData,
     // other props for DOM element
     ...otherDomProps
-}: NodeContentProps<any>) {
+}: NodeContentProps<CONTENT_PROPS>) {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
     const [introductionDone, setIntroductionDone] = React.useState(false);
 
+    // ignore some properties for now (remove them later)
+    // if (otherDomProps.businessData) { delete otherDomProps.businessData }
+    // if (otherDomProps.getMinimalTooltipData) { delete otherDomProps.getMinimalTooltipData }
+
     const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps;
 
     const hasValidResizeDirection = resizeDirections.bottom || resizeDirections.right;
@@ -385,16 +371,13 @@ export function NodeContent<CONTENT_PROPS = any>({
     if (isResizable)
         try {
             switch (flowVersionCheck) {
-                case "legacy":
-                    [, , zoom] = getStoreStateFlowLegacy((state) => state.transform);
-                    break;
-                case "next":
-                    [, , zoom] = getStoreStateFlowNext((state) => state.transform);
+                case "v9":
+                    [, , zoom] = getStoreStateFlowV9((state) => state.transform);
                     break;
                 case "v12":
                     // we are calling a hook here conditionally. Not recommended, by the flowversion check is
                     // is basically compile time determined. So we just do it.
-                    [, , zoom] = useStoreFlowV12((state) => state.transform);
+                    [, , zoom] = getStoreStateFlowV12((state) => state.transform);
                     break;
             }
         } catch (error) {
@@ -523,19 +506,23 @@ export function NodeContent<CONTENT_PROPS = any>({
                 return 0;
             })
             .forEach((handle) => {
-                if ("category" in handle && handle.category === "configuration") {
-                    handleStack[Position.Top].push(handle);
-                } else if (handle.position) {
-                    handleStack[handle.position].push(handle);
+                let position: HandleDefaultProps["position"] = handle.position;
+
+                // force position regarding special configuration
+                if (handle.category === "configuration") {
+                    position = Position.Top;
                 } else {
                     const handleType = handle as { type?: string };
                     if (handleType.type === "target") {
-                        handleStack[targetPosition].push(handle);
+                        position = targetPosition;
                     }
                     if (handleType.type === "source") {
-                        handleStack[sourcePosition].push(handle);
+                        position = sourcePosition;
                     }
                 }
+
+                handle.position = position;
+                handleStack[position].push(handle);
             });
     }
     const styleExpandDimensions: { [key: string]: string | number } = Object.create(null);
@@ -589,6 +576,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                 }}
                 className={
                     `${eccgui}-graphviz__node` +
+                    ` ${eccgui}-graphviz__node--${flowVersionCheck}` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
                     (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
@@ -686,10 +674,38 @@ export function NodeContent<CONTENT_PROPS = any>({
             </section>
             {!!handles && (
                 <>
-                    {addHandles(handleStack, Position.Top, "left", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Right, "top", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style, flowVersionCheck)}
-                    {addHandles(handleStack, Position.Left, "top", isConnectable, style, flowVersionCheck)}
+                    {addHandles(
+                        handleStack,
+                        Position.Top,
+                        "left",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Right,
+                        "top",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Bottom,
+                        "left",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
+                    {addHandles(
+                        handleStack,
+                        Position.Left,
+                        "top",
+                        isConnectable,
+                        style as MemoHandlerProps["style"],
+                        flowVersionCheck
+                    )}
                 </>
             )}
         </>
@@ -719,53 +735,59 @@ export function NodeContent<CONTENT_PROPS = any>({
         return validatedHeight;
     };
 
+    const onResize = React.useCallback((_0, _1, _2, d) => {
+        if (nodeContentRef.current) {
+            const nextWidth = resizeDirections.right
+                ? (width ?? originalSize.current.width ?? 0) + d.width
+                : undefined;
+            const nextHeight = resizeDirections.bottom
+                ? (height ?? originalSize.current.height ?? 0) + d.height
+                : undefined;
+            if (nextWidth || nextHeight) {
+                const currentClassNames = nodeContentRef.current.classList;
+                currentClassNames.add("was-resized");
+            }
+            if (nextWidth) {
+                nodeContentRef.current.style.width = `${nextWidth}px`;
+            }
+            if (nextHeight) {
+                nodeContentRef.current.style.height = `${nextHeight}px`;
+            }
+        }
+    }, [resizeDirections, originalSize, width, height])
+
+    const onResizeStop = React.useCallback((_0, _1, _2, d) => {
+        const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
+        const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
+        setWidth(nextWidth);
+        setHeight(nextHeight);
+        if (onNodeResize) {
+            onNodeResize({
+                height: nextHeight,
+                width: nextWidth,
+            });
+        }
+    }, [onNodeResize, width, height, originalSize]);
+
+    const resizableSize = React.useMemo(() => ({ height: height ?? "auto", width: width ?? "auto" }), [height, width]);
+    const enableResize = React.useMemo(() => resizeDirections!.bottom && resizeDirections!.right ? { bottomRight: true } : resizeDirections, [resizeDirections]);
+
     const resizableNode = () => {
-        const size = { height: height ?? "auto", width: width ?? "auto" };
         return (
             <Resizable
                 className={
                     `${eccgui}-graphviz__node__resizer` +
-                    (resizeDirections.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
-                    (resizeDirections.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
+                    (resizeDirections!.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
+                    (resizeDirections!.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
                 }
                 handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles` + " nodrag"}
-                size={size}
+                size={resizableSize}
                 maxHeight={resizeMaxDimensions?.height ?? undefined}
                 maxWidth={resizeMaxDimensions?.width ?? undefined}
-                enable={resizeDirections.bottom && resizeDirections.right ? { bottomRight: true } : resizeDirections}
+                enable={enableResize}
                 scale={zoom}
-                onResize={(_0, _1, _2, d) => {
-                    if (nodeContentRef.current) {
-                        const nextWidth = resizeDirections.right
-                            ? (width ?? originalSize.current.width ?? 0) + d.width
-                            : undefined;
-                        const nextHeight = resizeDirections.bottom
-                            ? (height ?? originalSize.current.height ?? 0) + d.height
-                            : undefined;
-                        if (nextWidth || nextHeight) {
-                            const currentClassNames = nodeContentRef.current.classList;
-                            currentClassNames.add("was-resized");
-                        }
-                        if (nextWidth) {
-                            nodeContentRef.current.style.width = `${nextWidth}px`;
-                        }
-                        if (nextHeight) {
-                            nodeContentRef.current.style.height = `${nextHeight}px`;
-                        }
-                    }
-                }}
-                onResizeStop={(_0, _1, _2, d) => {
-                    const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
-                    const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
-                    setWidth(nextWidth);
-                    setHeight(nextHeight);
-                    if (onNodeResize) {
-                        onNodeResize({
-                            height: nextHeight,
-                            width: nextWidth,
-                        });
-                    }
-                }}
+                onResize={onResize}
+                onResizeStop={onResizeStop}
             >
                 {nodeContent}
             </Resizable>