refactor(edges)!: Replace getMarkerEnd utility with getMarkerId

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

src/container/EdgeRenderer/Marker.vue

@@ -22,9 +22,9 @@ export default {
     viewBox="-10 -10 20 20"
     refX="0"
     refY="0"
-    :marker-width="`${props.width}`"
-    :marker-height="`${props.height}`"
-    :marker-units="props.markerUnits"
+    :markerWidth="`${props.width}`"
+    :markerHeight="`${props.height}`"
+    :markerUnits="props.markerUnits"
     :orient="props.orient"
   >
     <polyline

src/index.ts

@@ -2,7 +2,7 @@ export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export * from './components/Edges'
 export * from './components/Nodes'
-export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'
+export { getBezierPath, getSmoothStepPath, getCenter as getEdgeCenter } from './components/Edges/utils'
 
 export {
   isNode,
@@ -16,6 +16,7 @@ export {
   getRectOfNodes,
   graphPosToZoomedPos,
   getNodesInside,
+  getMarkerId,
 } from './utils/graph'
 export { defaultEdgeTypes, defaultNodeTypes } from './store'
 export { default as useZoomPanHelper } from './composables/useZoomPanHelper'

src/utils/graph.ts

@@ -344,16 +344,11 @@ export const isParentSelected = (node: GraphNode): boolean => {
 }
 
 export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
-  if (typeof marker === 'undefined') {
-    return ''
-  }
-
-  if (typeof marker === 'string') {
-    return marker
-  }
+  if (typeof marker === 'undefined') return ''
+  if (typeof marker === 'string') return marker
 
   return Object.keys(marker)
     .sort()
-    .map((key: string) => `${key}=${(marker as any)[key]}`)
+    .map((key) => `${key}=${marker[<keyof EdgeMarkerType>key]}`)
     .join('&')
 }