55 lines
1.5 KiB
Svelte
55 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import cc from 'classcat';
|
|
import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
|
|
import type { BaseEdgeProps } from './types';
|
|
|
|
type $$Props = BaseEdgeProps;
|
|
|
|
export let id: $$Props['id'] = undefined;
|
|
export let path: $$Props['path'];
|
|
export let label: $$Props['label'] = undefined;
|
|
export let labelX: $$Props['labelX'] = undefined;
|
|
export let labelY: $$Props['labelY'] = undefined;
|
|
export let labelStyle: $$Props['labelStyle'] = undefined;
|
|
export let markerStart: $$Props['markerStart'] = undefined;
|
|
export let markerEnd: $$Props['markerEnd'] = undefined;
|
|
export let style: $$Props['style'] = undefined;
|
|
export let interactionWidth: $$Props['interactionWidth'] = 20;
|
|
let className: $$Props['class'] = undefined;
|
|
export { className as class };
|
|
|
|
// @todo, why is interactionWidth undefined after first re-render?
|
|
let interactionWidthValue = interactionWidth === undefined ? 20 : interactionWidth;
|
|
</script>
|
|
|
|
<path
|
|
d={path}
|
|
class={cc(['svelte-flow__edge-path', className])}
|
|
marker-start={markerStart}
|
|
marker-end={markerEnd}
|
|
fill="none"
|
|
{style}
|
|
/>
|
|
|
|
{#if interactionWidthValue}
|
|
<path
|
|
d={path}
|
|
stroke-opacity={0}
|
|
stroke-width={interactionWidthValue}
|
|
fill="none"
|
|
class="svelte-flow__edge-interaction"
|
|
/>
|
|
{/if}
|
|
|
|
{#if label}
|
|
<EdgeLabelRenderer>
|
|
<div
|
|
class="svelte-flow__edge-label"
|
|
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
|
|
style={labelStyle}
|
|
>
|
|
{label}
|
|
</div>
|
|
</EdgeLabelRenderer>
|
|
{/if}
|