<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>

<script>

const pathMap = {
  arrow: 'M0,0 L10,5 0,10 Z',
}
const rotateMap = {
  'arrow-start': 180,
  'arrow-end': 0,
}
export default{
  name: 'line-marker',
  props: {
    id: {
      type: String,
      required: true,
    },
    position: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    color: {
      type: String,
    },
    baseSize: {
      type: Number,
      required: true,
    },
  },
  computed:{
    path(){
      return pathMap[this.type]
    },
    rotate(){
      return rotateMap[`${this.type}-${this.position}`] || 0
    },
    size(){
      return this.baseSize < 2 ? 2 : this.baseSize
    }
  }
}
</script>