File size: 2,570 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<script>import { onDestroy } from 'svelte';
import { nodeHasDimensions } from '@xyflow/system';
import { NodeWrapper } from '../../components/NodeWrapper';
import { useStore } from '../../store';
export let nodeClickDistance = 0;
const { visibleNodes, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeInternals, parentLookup } = useStore();
const resizeObserver = typeof ResizeObserver === 'undefined'
? null
: new ResizeObserver((entries) => {
const updates = new Map();
entries.forEach((entry) => {
const id = entry.target.getAttribute('data-id');
updates.set(id, {
id,
nodeElement: entry.target,
force: true
});
});
updateNodeInternals(updates);
});
onDestroy(() => {
resizeObserver?.disconnect();
});
</script>
<div class="svelte-flow__nodes">
{#each $visibleNodes as node (node.id)}
<NodeWrapper
{node}
id={node.id}
data={node.data}
selected={!!node.selected}
hidden={!!node.hidden}
draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
selectable={!!(
node.selectable ||
($elementsSelectable && typeof node.selectable === 'undefined')
)}
connectable={!!(
node.connectable ||
($nodesConnectable && typeof node.connectable === 'undefined')
)}
deletable={node.deletable ?? true}
positionX={node.internals.positionAbsolute.x}
positionY={node.internals.positionAbsolute.y}
isParent={$parentLookup.has(node.id)}
style={node.style}
class={node.class}
type={node.type ?? 'default'}
sourcePosition={node.sourcePosition}
targetPosition={node.targetPosition}
dragging={node.dragging}
zIndex={node.internals.z ?? 0}
dragHandle={node.dragHandle}
initialized={nodeHasDimensions(node)}
width={node.width}
height={node.height}
initialWidth={node.initialWidth}
initialHeight={node.initialHeight}
measuredWidth={node.measured.width}
measuredHeight={node.measured.height}
parentId={node.parentId}
{resizeObserver}
{nodeClickDistance}
on:nodeclick
on:nodemouseenter
on:nodemousemove
on:nodemouseleave
on:nodedrag
on:nodedragstart
on:nodedragstop
on:nodecontextmenu
/>
{/each}
</div>
<style>
.svelte-flow__nodes {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
|