Merge pull request #5455 from Sec-ant/fix/check-visibility

fix: skip resize handler updates when DOM node is not visible

.changeset/stupid-lizards-wash.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix warning when display is set to none on the wrapper div

.changeset/wet-beds-greet.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix style attribute not being propagated to wrapper

examples/react/src/examples/Basic/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -134,8 +134,13 @@ const BasicFlow = () => {
     });
     fitView();
   };
+  const [isHidden, setIsHidden] = useState(false);
 
+  const toggleVisibility = () => {
+    setIsHidden(!isHidden);
+  };
   return (
+    <>
       <ReactFlow
         defaultNodes={initialNodes}
         defaultEdges={initialEdges}
@@ -148,6 +153,7 @@ const BasicFlow = () => {
         onSelectionDrag={printSelectionEvent('selection drag')}
         onSelectionDragStop={printSelectionEvent('selection drag stop')}
         className="react-flow-basic-example"
+        style={{ display: isHidden ? 'none' : 'block' }}
         minZoom={0.2}
         maxZoom={4}
         fitView
@@ -175,6 +181,10 @@ const BasicFlow = () => {
           <button onClick={addNode}>addNode</button>
         </Panel>
       </ReactFlow>
+      <button onClick={toggleVisibility} style={{ position: 'absolute', zIndex: 10, right: 10, top: 100 }}>
+        {isHidden ? 'Show' : 'Hide'} Flow
+      </button>
+    </>
   );
 };
 

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -155,6 +155,8 @@
 		// console.log(edges.map((edge) => ({ id: edge.id, selected: edge.selected })));
 		edges.forEach((edge) => console.log({ id: edge.id, selected: edge.selected }));
 	});
+
+	let hidden = $state(false);
 </script>
 
 <!-- oninit={() => console.log('on init')}
@@ -197,6 +199,7 @@
 	}} -->
 
 <SvelteFlow
+	style="display:{hidden ? 'none' : 'block'}"
 	bind:nodes
 	bind:edges
 	{nodeTypes}
@@ -247,7 +250,20 @@
 	<InitTracker />
 </SvelteFlow>
 
+<button
+	class="hide"
+	onclick={() => {
+		hidden = !hidden;
+	}}>Hide/Unhide</button
+>
+
 <style>
+	.hide {
+		position: absolute;
+		top: 80px;
+		right: 15px;
+	}
+
 	:root {
 		/* --background-color: #ffffdd; */
 		--background-pattern-color: #5050ff;

packages/react/src/hooks/useResizeHandler.ts

@@ -13,7 +13,7 @@ export function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null
 
   useEffect(() => {
     const updateDimensions = () => {
-      if (!domNode.current) {
+      if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {
         return false;
       }
       const size = getDimensions(domNode.current);

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -80,7 +80,6 @@
     autoPanOnConnect,
     autoPanOnNodeDrag,
     colorModeSSR,
-    style,
     defaultEdgeOptions,
     elevateNodesOnSelect,
     elevateEdgesOnSelect,