Files
xyflow/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
T

58 lines
1.6 KiB
Svelte

<script lang="ts">
import { onMount } from 'svelte';
import { EdgeWrapper } from '$lib/components/EdgeWrapper';
import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
import { useStore } from '$lib/store';
import type { DefaultEdgeOptions } from '$lib/types';
export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
const {
elementsSelectable,
visibleEdges,
edges: { setDefaultOptions }
} = useStore();
onMount(() => {
if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
});
</script>
<div class="svelte-flow__edges">
<svg class="svelte-flow__marker">
<MarkerDefinition />
</svg>
{#each $visibleEdges as edge (edge.id)}
<EdgeWrapper
id={edge.id}
source={edge.source}
target={edge.target}
data={edge.data}
style={edge.style}
animated={edge.animated}
selected={edge.selected}
hidden={edge.hidden}
label={edge.label}
labelStyle={edge.labelStyle}
markerStart={edge.markerStart}
markerEnd={edge.markerEnd}
sourceHandle={edge.sourceHandle}
targetHandle={edge.targetHandle}
sourceX={edge.sourceX}
sourceY={edge.sourceY}
targetX={edge.targetX}
targetY={edge.targetY}
sourcePosition={edge.sourcePosition}
targetPosition={edge.targetPosition}
ariaLabel={edge.ariaLabel}
interactionWidth={edge.interactionWidth}
class={edge.class}
type={edge.type || 'default'}
zIndex={edge.zIndex}
on:edgeclick
on:edgecontextmenu
/>
{/each}
</div>