Update getInternalNodesBounds and examples
This commit is contained in:
@@ -17,6 +17,7 @@
|
||||
'handle-connect',
|
||||
'interaction',
|
||||
'intersections',
|
||||
'minimap-bug',
|
||||
'node-toolbar',
|
||||
'node-resizer',
|
||||
'overview',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user