alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
fix: skip resize handler updates when DOM node is not visible
This commit is contained in:
Peter Kogo
2025-09-02 11:52:31 +02:00
committed by GitHub
parent 3c18f121ea 86e8b49133
commit 4783957dbf
6 changed files with 75 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
examples/react/src/examples/Basic/index.tsx
View File

@@ -1,4 +1,4 @@
import { MouseEvent, useCallback } from 'react';
import { MouseEvent, useCallback, useState } from 'react';
import {
ReactFlow,
MiniMap,
@@ -134,47 +134,57 @@ const BasicFlow = () => {
});
fitView();
};
const [isHidden, setIsHidden] = useState(false);
const toggleVisibility = () => {
setIsHidden(!isHidden);
};
return (
<ReactFlow
defaultNodes={initialNodes}
defaultEdges={initialEdges}
onNodesChange={console.log}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onSelectionDragStart={printSelectionEvent('selection drag start')}
onSelectionDrag={printSelectionEvent('selection drag')}
onSelectionDragStop={printSelectionEvent('selection drag stop')}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
fitView
fitViewOptions={fitViewOptions}
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
elevateEdgesOnSelect
elevateNodesOnSelect={false}
nodeDragThreshold={0}
>
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
<Controls />
<>
<ReactFlow
defaultNodes={initialNodes}
defaultEdges={initialEdges}
onNodesChange={console.log}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onSelectionDragStart={printSelectionEvent('selection drag start')}
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
fitViewOptions={fitViewOptions}
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
elevateEdgesOnSelect
elevateNodesOnSelect={false}
nodeDragThreshold={0}
>
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
<Controls />
<Panel position="top-right">
<button onClick={resetTransform}>reset transform</button>
<button onClick={updatePos}>change pos</button>
<button onClick={toggleClassnames}>toggle classnames</button>
<button onClick={logToObject}>toObject</button>
<Panel position="top-right">
<button onClick={resetTransform}>reset transform</button>
<button onClick={updatePos}>change pos</button>
<button onClick={toggleClassnames}>toggle classnames</button>
<button onClick={logToObject}>toObject</button>
<button onClick={deleteSelectedElements}>deleteSelectedElements</button>
<button onClick={deleteSomeElements}>deleteSomeElements</button>
<button onClick={onSetNodes}>setNodes</button>
<button onClick={onUpdateNode}>updateNode</button>
<button onClick={addNode}>addNode</button>
</Panel>
</ReactFlow>
<button onClick={deleteSelectedElements}>deleteSelectedElements</button>
<button onClick={deleteSomeElements}>deleteSomeElements</button>
<button onClick={onSetNodes}>setNodes</button>
<button onClick={onUpdateNode}>updateNode</button>
<button onClick={addNode}>addNode</button>
</Panel>
</ReactFlow>
<button onClick={toggleVisibility} style={{ position: 'absolute', zIndex: 10, right: 10, top: 100 }}>
{isHidden ? 'Show' : 'Hide'} Flow
</button>
</>
);
};

16
examples/svelte/src/routes/examples/overview/Flow.svelte
View File

@@ -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;