File size: 3,409 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<svelte:options immutable />
<script>import { createEventDispatcher, setContext } from 'svelte';
import cc from 'classcat';
import { getMarkerId } from '@xyflow/system';
import { useStore } from '../../store';
import { BezierEdgeInternal } from '../edges';
import { useHandleEdgeSelect } from '../../hooks/useHandleEdgeSelect';
export let id;
export let type = 'default';
export let source = '';
export let target = '';
export let data = {};
export let style = undefined;
export let zIndex = undefined;
export let animated = false;
export let selected = false;
export let selectable = undefined;
export let deletable = undefined;
export let hidden = false;
export let label = undefined;
export let labelStyle = undefined;
export let markerStart = undefined;
export let markerEnd = undefined;
export let sourceHandle = undefined;
export let targetHandle = undefined;
export let sourceX;
export let sourceY;
export let targetX;
export let targetY;
export let sourcePosition;
export let targetPosition;
export let ariaLabel = undefined;
export let interactionWidth = undefined;
// @ todo: support edge updates
let className = '';
export { className as class };
setContext('svelteflow__edge_id', id);
const { edgeLookup, edgeTypes, flowId, elementsSelectable } = useStore();
const dispatch = createEventDispatcher();
$: edgeType = type || 'default';
$: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
$: markerStartUrl = markerStart ? `url('#${getMarkerId(markerStart, $flowId)}')` : undefined;
$: markerEndUrl = markerEnd ? `url('#${getMarkerId(markerEnd, $flowId)}')` : undefined;
$: isSelectable = selectable ?? $elementsSelectable;
const handleEdgeSelect = useHandleEdgeSelect();
function onClick(event) {
const edge = $edgeLookup.get(id);
if (edge) {
handleEdgeSelect(id);
dispatch('edgeclick', { event, edge });
}
}
function onMouseEvent(event, type) {
const edge = $edgeLookup.get(id);
if (edge) {
dispatch(type, { event, edge });
}
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
{#if !hidden}
<svg style:z-index={zIndex}>
<g
class={cc(['svelte-flow__edge', className])}
class:animated
class:selected
class:selectable={isSelectable}
data-id={id}
on:click={onClick}
on:contextmenu={(e) => {
onMouseEvent(e, 'edgecontextmenu');
}}
on:mouseenter={(e) => {
onMouseEvent(e, 'edgemouseenter');
}}
on:mouseleave={(e) => {
onMouseEvent(e, 'edgemouseleave');
}}
aria-label={ariaLabel === null
? undefined
: ariaLabel
? ariaLabel
: `Edge from ${source} to ${target}`}
role="img"
>
<svelte:component
this={edgeComponent}
{id}
{source}
{target}
{sourceX}
{sourceY}
{targetX}
{targetY}
{sourcePosition}
{targetPosition}
{animated}
{selected}
{label}
{labelStyle}
{data}
{style}
{interactionWidth}
selectable={isSelectable}
deletable={deletable ?? true}
type={edgeType}
sourceHandleId={sourceHandle}
targetHandleId={targetHandle}
markerStart={markerStartUrl}
markerEnd={markerEndUrl}
/>
</g>
</svg>
{/if}
|