Merge pull request #261 from eccenca/fix/nodeContentDimensionsReset-MT-54

Fix node content dimensions reset (MT-54)

Author: andreas-schultz

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

@@ -390,31 +390,31 @@ export function NodeContent<CONTENT_PROPS = any>({
         flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
     const saveOriginalSize = () => {
+        const currentClassNames = nodeContentRef.current.classList;
+        if (currentClassNames.contains("was-resized") && !width && !height) {
+            currentClassNames.remove("was-resized");
+        }
         originalSize.current.width = nodeContentRef.current.offsetWidth as number;
         originalSize.current.height = nodeContentRef.current.offsetHeight as number;
     }
 
     React.useEffect(() => {
-        if(nodeContentRef.current && !(originalSize.current.width || originalSize.current.height)) {
+        if(nodeContentRef.current && (!(originalSize.current.width || originalSize.current.height) || !(width || height))) {
             saveOriginalSize();
         }
-    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height)])
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)])
 
     // Update width and height when node dimensions parameters has changed
     React.useEffect(() => {
         const updateWidth = nodeDimensions?.width ? validateWidth(nodeDimensions?.width) : undefined;
         const updateHeight = nodeDimensions?.height ? validateHeight(nodeDimensions?.height) : undefined;
         setWidth(updateWidth);
         setHeight(updateHeight);
-        if (!nodeDimensions?.width && !nodeDimensions?.height) {
-            // provoke new measuring if no dimensions are set
-            saveOriginalSize();
-        }
     }, [nodeDimensions]);
 
     const isResizingActive = React.useCallback((): boolean => {
         const currentClassNames = nodeContentRef.current.classList;
-        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") &&
+        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
             resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
     }, [])
 
@@ -439,17 +439,17 @@ export function NodeContent<CONTENT_PROPS = any>({
 
         if (isResizable && !resizingActive) {
             if (currentClassNames.contains("is-resizable-horizontal")) {
-                nodeContentRef.current.classList.remove("is-resizable-horizontal");
+                currentClassNames.remove("is-resizable-horizontal");
             }
             if (currentClassNames.contains("is-resizable-vertical")) {
-                nodeContentRef.current.classList.remove("is-resizable-vertical");
+                currentClassNames.remove("is-resizable-vertical");
             }
-
+            
             if (resizeDirections.right) {
-                nodeContentRef.current.classList.add("is-resizable-horizontal");
+                currentClassNames.add("is-resizable-horizontal");
             }
             if (resizeDirections.bottom) {
-                nodeContentRef.current.classList.add("is-resizable-vertical");
+                currentClassNames.add("is-resizable-vertical");
             }
         }
     }); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
@@ -524,8 +524,8 @@ export function NodeContent<CONTENT_PROPS = any>({
             ? {
                   width,
                   height,
-                  maxWidth: resizeMaxDimensions?.width ?? undefined,
-                  maxHeight: resizeMaxDimensions?.height ?? undefined,
+                  maxWidth: resizeDirections.right ? resizeMaxDimensions?.width ?? undefined : undefined,
+                  maxHeight: resizeDirections.bottom ? resizeMaxDimensions?.height ?? undefined : undefined,
               }
             : {};
 
@@ -705,6 +705,10 @@ export function NodeContent<CONTENT_PROPS = any>({
                         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`;
                         }

src/extensions/react-flow/nodes/_nodes.scss

@@ -50,7 +50,7 @@
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
-    &.is-resizable-vertical {
+    &.was-resized.is-resizable-vertical {
         max-height: unset;
     }
 }

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

@@ -103,11 +103,12 @@ export default {
         },
         intent: {
             control: "select",
-            options: { "Not set": undefined, ...Definitions },
+            options: [ undefined, ...Object.values(Definitions) ],
         },
         highlightColor: {
             control: "select",
-            options: {
+            options: [ "Not set", "Default", "Alternate", "Default + alternate", "Custom (red)", "Default + Custom (red)", "Custom (green) + alternate", "Custom (purple) + custom (yellow)"],
+            mapping: {
                 "Not set": undefined,
                 Default: "default",
                 Alternate: "alternate",
@@ -118,8 +119,8 @@ export default {
                 "Custom (purple) + custom (yellow)": ["purple", "yellow"],
             },
         },
-        content: { control: "none" },
-        footerContent: { control: "none" },
+        content: { control: false },
+        footerContent: { control: false },
         isConnectable: { table: { disable: true } },
         targetPosition: { table: { disable: true } },
         sourcePosition: { table: { disable: true } },
@@ -128,17 +129,52 @@ export default {
     },
 } as Meta<typeof NodeContent>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
 
+    const defaultElement = {
+        id: "example-1",
+        type: "default",
+        data: args,
+        position: { x: 50, y: 50 },
+    };
+
     useEffect(() => {
+        const sizeReset = {}
+        if (args.resizeMaxDimensions && args.resizeDirections) {
+            sizeReset["onNodeResize"] = (dimensions) => {
+                // eslint-disable-next-line no-console
+                console.log("call onNodeResize method")
+                if (args.onNodeResize) {
+                    args.onNodeResize(dimensions);
+                }
+                if (dimensions?.width || dimensions?.height) {
+                    sizeReset["menuButtons"] = <IconButton name="item-reset" onClick={() => {
+                        // eslint-disable-next-line no-console
+                        console.log("reset size");
+                        setElements([
+                            {
+                                ...defaultElement,
+                                data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} }},
+                            },
+                        ] as Elements);
+
+                    }}/>;
+                }
+                setElements([
+                    {
+                        ...defaultElement,
+                        data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions }},
+                    },
+                ] as Elements);
+            }
+        }
         setElements([
             {
-                id: "example-1",
-                type: "default",
-                data: args,
-                position: { x: 50, y: 50 },
+                ...defaultElement,
+                data: {...defaultElement.data, ...sizeReset},
             },
         ] as Elements);
     }, [args]);
@@ -165,7 +201,7 @@ const NodeContentExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/  key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {