Update getInternalNodesBounds and examples

This commit is contained in:
Alessandro
2025-10-14 11:33:10 +02:00
parent 4f77447ab5
commit a67f2992b1
5 changed files with 60 additions and 37 deletions

View File

@@ -17,6 +17,7 @@
'handle-connect',
'interaction',
'intersections',
'minimap-bug',
'node-toolbar',
'node-resizer',
'overview',

View File

@@ -4,15 +4,17 @@
Background,
Controls,
MiniMap,
Panel,
type Node,
type Edge,
type Edge
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import CustomMiniMapNode from './CustomMiniMapNode.svelte';
let nodes = $state.raw<Node[]>([]);
let edges = $state.raw<Edge[]>([]);
let hideAllNodes = $state(false);
function addRandomNode() {
const nodeId = (nodes.length + 1).toString();
@@ -21,28 +23,33 @@
data: { label: `Node: ${nodeId}` },
position: {
x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 800),
y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 600),
y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 600)
},
type: 'default'
type: 'default',
hidden: hideAllNodes
};
nodes = [...nodes, newNode];
}
function toggleHideAllNodes() {
hideAllNodes = !hideAllNodes;
nodes = nodes.map((node) => ({
...node,
hidden: hideAllNodes
}));
}
</script>
<SvelteFlow
bind:nodes
bind:edges
onlyRenderVisibleElements={true}
>
<SvelteFlow bind:nodes bind:edges onlyRenderVisibleElements={true}>
<Controls />
<Background />
<MiniMap nodeComponent={CustomMiniMapNode} />
<button
type="button"
onclick={addRandomNode}
style="position: absolute; left: 10px; top: 10px; z-index: 4;"
>
add node
</button>
<Panel position="top-left">
<button type="button" onclick={addRandomNode}> add node </button>
<button type="button" onclick={toggleHideAllNodes}>
{hideAllNodes ? 'show all nodes' : 'hide all nodes'}
</button>
</Panel>
</SvelteFlow>