<script lang="ts">
    let {
        id,
        markerWidth = 20,
        markerHeight = 20,
        markerUnits = 'strokeWidth'
    }: {
        id: string;
        markerWidth?: number;
        markerHeight?: number;
        markerUnits?: 'strokeWidth' | 'userSpaceOnUse';
    } = $props();
</script>

<defs>
    <marker
        class="svelte-flow__arrowhead"
        {id}
        markerWidth={`${markerWidth}`}
        markerHeight={`${markerHeight}`}
        viewBox="-10 -10 20 20"
        orient="auto-start-reverse"
        {markerUnits}
        refX="0"
        refY="0"
    >
        <polyline
            class="arrowclosed tf-flow-line-arrow-closed"
            points="-5,-4 0,0 -5,4 -5,-4"
        ></polyline>
    </marker>
</defs>

<style>
    .tf-flow-line-arrow-closed {
        stroke: var(--xy-edge-stroke);
        fill: var(--xy-edge-stroke);
        stroke-linecap: round;
        stroke-linejoin: round;
    }
</style>
