113 lines
3.1 KiB
Svelte
113 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher, type SvelteComponentTyped } from 'svelte';
|
|
import { Position } from '@xyflow/system';
|
|
import { getMarkerId } from '@xyflow/system';
|
|
|
|
import { useStore } from '$lib/store';
|
|
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
|
|
import type { EdgeProps, EdgeLayouted } from '$lib/types';
|
|
|
|
type $$Props = EdgeLayouted;
|
|
|
|
export let id: $$Props['id'];
|
|
export let type: $$Props['type'] = 'default';
|
|
export let source: $$Props['source'] = '';
|
|
export let target: $$Props['target'] = '';
|
|
export let sourceX: $$Props['sourceX'] = 0;
|
|
export let sourceY: $$Props['sourceY'] = 0;
|
|
export let targetX: $$Props['targetX'] = 0;
|
|
export let targetY: $$Props['targetY'] = 0;
|
|
export let data: $$Props['data'] = {};
|
|
export let style: $$Props['style'] = undefined;
|
|
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
|
|
export let targetPosition: $$Props['targetPosition'] = Position.Top;
|
|
export let animated: $$Props['animated'] = false;
|
|
export let selected: $$Props['selected'] = false;
|
|
export let selectable: $$Props['selectable'] = true;
|
|
export let label: $$Props['label'] = undefined;
|
|
export let labelStyle: $$Props['labelStyle'] = undefined;
|
|
export let markerStart: $$Props['markerStart'] = undefined;
|
|
export let markerEnd: $$Props['markerEnd'] = undefined;
|
|
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
|
|
export let targetHandleId: $$Props['targetHandleId'] = undefined;
|
|
|
|
// @ todo: support edge updates
|
|
|
|
const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
|
|
const dispatch = createEventDispatcher();
|
|
|
|
const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
|
|
|
|
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
|
|
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
|
|
|
|
function onClick() {
|
|
if (selectable) {
|
|
addSelectedEdges([id]);
|
|
}
|
|
|
|
const edge = $edges.find(e => e.id === id);
|
|
dispatch('edge:click', edge);
|
|
}
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<g
|
|
class="svelte-flow__edge"
|
|
class:animated
|
|
class:selected
|
|
data-id={id}
|
|
on:click={onClick}
|
|
>
|
|
<svelte:component
|
|
this={edgeComponent}
|
|
{id}
|
|
{source}
|
|
{target}
|
|
{sourceX}
|
|
{sourceY}
|
|
{targetX}
|
|
{targetY}
|
|
{sourcePosition}
|
|
{targetPosition}
|
|
{animated}
|
|
{selected}
|
|
{label}
|
|
{labelStyle}
|
|
{data}
|
|
{style}
|
|
{sourceHandleId}
|
|
{targetHandleId}
|
|
markerStart={markerStartUrl}
|
|
markerEnd={markerEndUrl}
|
|
/>
|
|
</g>
|
|
|
|
<style>
|
|
.svelte-flow__edge {
|
|
pointer-events: visibleStroke;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.svelte-flow__edge :global(.svelte-flow__edge-path) {
|
|
stroke: #ccc;
|
|
stroke-width: 1;
|
|
fill: none;
|
|
}
|
|
|
|
.selected :global(.svelte-flow__edge-path) {
|
|
stroke: #555;
|
|
}
|
|
|
|
.animated :global(.svelte-flow__edge-path) {
|
|
stroke-dasharray: 5;
|
|
animation: dashdraw 0.5s linear infinite;
|
|
}
|
|
|
|
@keyframes dashdraw {
|
|
from {
|
|
stroke-dashoffset: 10;
|
|
}
|
|
}
|
|
</style>
|