update(edges): implement new marker props

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/EdgeRenderer/Marker.vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-interface MarkerProps {
+import type { MarkerProps } from '../../types/edge'
-  id: string
-}
 
-const props = defineProps<MarkerProps>()
+const props = withDefaults(defineProps<MarkerProps>(), {
+  width: 12.5,
+  height: 12.5,
+  markerUnits: 'strokeWidth',
+  orient: 'auto',
+  strokeWidth: 1,
+  color: 'none',
+})
 </script>
 <script lang="ts">
 export default {
@@ -14,13 +19,31 @@ export default {
   <marker
     :id="props.id"
     class="vue-flow__arrowhead"
-    markerWidth="12.5"
-    markerHeight="12.5"
     viewBox="-10 -10 20 20"
-    orient="auto"
     refX="0"
     refY="0"
+    :marker-width="`${props.width}`"
+    :marker-height="`${props.height}`"
+    :marker-units="props.markerUnits"
+    :orient="props.orient"
   >
-    <slot></slot>
+    <polyline
+      v-if="props.type === 'arrowclosed'"
+      :stroke="props.color"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      :stroke-width="props.strokeWidth"
+      :fill="props.color"
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+    <polyline
+      v-if="props.type === 'arrow'"
+      :stroke="props.color"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      :stroke-width="props.strokeWidth"
+      fill="none"
+      points="-5,-4 0,0 -5,4"
+    />
   </marker>
 </template>

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -1,12 +1,33 @@
 <script lang="ts" setup>
+import { useStore } from '../../composables'
+import type { MarkerProps } from '../../types/edge'
 import Marker from './Marker.vue'
+import { getMarkerId } from '~/utils'
 
 interface MarkerDefinitionsProps {
-  color: string
+  defaultColor: string
 }
 
 const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
-  color: '',
+  defaultColor: '',
+})
+const store = useStore()
+
+const markers = computed(() => {
+  const ids: string[] = []
+
+  return store.edges.reduce<MarkerProps[]>((markers, edge) => {
+    ;[edge.markerStart, edge.markerEnd].forEach((marker) => {
+      if (marker && typeof marker === 'object') {
+        const markerId = getMarkerId(marker)
+        if (!ids.includes(markerId)) {
+          markers.push({ id: markerId, color: marker.color || props.defaultColor, ...marker })
+          ids.push(markerId)
+        }
+      }
+    })
+    return markers.sort((a, b) => a.id.localeCompare(b.id))
+  }, [])
 })
 </script>
 <script lang="ts">
@@ -16,25 +37,17 @@ export default {
 </script>
 <template>
   <defs>
-    <Marker id="vue-flow__arrowclosed">
+    <Marker
-      <polyline
+      v-for="marker of markers"
-        :stroke="props.color"
+      :id="marker.id"
-        stroke-linecap="round"
+      :key="marker.id"
-        stroke-linejoin="round"
+      :type="marker.type"
-        stroke-width="1"
+      :color="marker.color"
-        :fill="props.color"
+      :width="marker.width"
-        points="-5,-4 0,0 -5,4 -5,-4"
+      :height="marker.height"
-      />
+      :markerUnits="marker.markerUnits"
-    </Marker>
+      :stroke-width="marker.strokeWidth"
-    <Marker id="vue-flow__arrow">
+      :orient="marker.orient"
-      <polyline
+    />
-        :stroke="props.color"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-        fill="none"
-        points="-5,-4 0,0 -5,4"
-      />
-    </Marker>
   </defs>
 </template>