79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { derived } from 'svelte/store';
|
|
import { isEdgeVisible, getEdgePosition, getEdgeZIndex } from '@xyflow/system';
|
|
|
|
import type { EdgeLayouted } from '$lib/types';
|
|
import type { SvelteFlowStoreState } from './types';
|
|
|
|
export function getVisibleEdges(store: SvelteFlowStoreState) {
|
|
const visibleEdges = derived(
|
|
[
|
|
store.edges,
|
|
store.nodes,
|
|
store.nodeLookup,
|
|
store.onlyRenderVisibleElements,
|
|
store.viewport,
|
|
store.width,
|
|
store.height
|
|
],
|
|
([edges, , nodeLookup, onlyRenderVisibleElements, viewport, width, height]) => {
|
|
const visibleEdges =
|
|
onlyRenderVisibleElements && width && height
|
|
? edges.filter((edge) => {
|
|
const sourceNode = nodeLookup.get(edge.source);
|
|
const targetNode = nodeLookup.get(edge.target);
|
|
|
|
return (
|
|
sourceNode &&
|
|
targetNode &&
|
|
isEdgeVisible({
|
|
sourceNode,
|
|
targetNode,
|
|
width,
|
|
height,
|
|
transform: [viewport.x, viewport.y, viewport.zoom]
|
|
})
|
|
);
|
|
})
|
|
: edges;
|
|
|
|
return visibleEdges;
|
|
}
|
|
);
|
|
|
|
return derived(
|
|
[visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onerror],
|
|
([visibleEdges, , nodeLookup, connectionMode, onerror]) => {
|
|
const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
|
|
const sourceNode = nodeLookup.get(edge.source);
|
|
const targetNode = nodeLookup.get(edge.target);
|
|
|
|
if (!sourceNode || !targetNode) {
|
|
return res;
|
|
}
|
|
|
|
const edgePosition = getEdgePosition({
|
|
id: edge.id,
|
|
sourceNode,
|
|
targetNode,
|
|
sourceHandle: edge.sourceHandle || null,
|
|
targetHandle: edge.targetHandle || null,
|
|
connectionMode,
|
|
onError: onerror
|
|
});
|
|
|
|
if (edgePosition) {
|
|
res.push({
|
|
...edge,
|
|
zIndex: getEdgeZIndex(edge.selected, edge.zIndex, sourceNode, targetNode, false),
|
|
...edgePosition
|
|
});
|
|
}
|
|
|
|
return res;
|
|
}, []);
|
|
|
|
return layoutedEdges;
|
|
}
|
|
);
|
|
}
|