<script lang="ts">
  import {getBezierPath, useConnection} from '@xyflow/svelte';
  import FlowLinePath from './FlowLinePath.svelte';
  import FlowMarkerDefs from './FlowMarkerDefs.svelte';

  const connection = useConnection();
    const markerId = 'tf-flow-connection-arrow-closed';

    const path = $derived.by(() => {
        const current = connection.current;
        if (!current.inProgress) {
            return '';
        }
        const [linePath] = getBezierPath({
            sourceX: current.from.x,
            sourceY: current.from.y,
            sourcePosition: current.fromPosition,
            targetX: current.to.x,
            targetY: current.to.y,
            targetPosition: current.toPosition
        });
        return linePath;
    });
</script>

{#if connection.current.inProgress && path}
    <FlowMarkerDefs id={markerId} />
    <FlowLinePath
        class="svelte-flow__connection-path"
        {path}
        markerEnd={`url(#${markerId})`}
        animated={false}
    />
{/if}
