<script setup>
import {computed} from 'vue'
const props=defineProps({
    id: {
        type: String,
        required: true,
    },
    position: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
    color: {
        type: String,
    },
    baseSize: {
        type: Number,
        required: true,
    },
})

const pathMap = {
  arrow: 'M0,0 L10,5 0,10 Z',
}
const rotateMap = {
  'arrow-start': 180,
  'arrow-end': 0,
}

const path=computed(()=>{
    return pathMap[props.type]
})
const rotate=computed(()=>{
    return rotateMap[`${props.type}-${props.position}`] || 0
})
const size=computed(()=>{
    return props.baseSize < 2 ? 2 : props.baseSize
})

</script>
<template>
    <marker 
        :id="`${id}-${type}-${position}`" 
        orient="auto" 
        markerUnits="userSpaceOnUse"
        :markerWidth="size * 5" 
        :markerHeight="size * 5" 
        :refX="size*2.5" 
        :refY="size*2.5"
    >
		<path 
            :d="path" 
            :fill="color"
            :transform="`scale(${size*0.5}) rotate(${rotate}, 5, 5)`"
        ></path>
	</marker>
</template>

