Custom marker ends & starts?

[shsmad]

Hi.

I use custom edge via

<template #edge-…="props">
    <BaseEdge :id="…" :path="…" :marker-end="…" :marker-start="…"/>
</template>

It automatically renders defs for markers (in MarkerDefinitions.vue you create <def> for markers defined in Marker.vue).

The problem is that it includes polyline only for MarkerType.ArrowClosed or MarkerType.Arrow.

Is there any way to inject or define polyline for custom markers?

[bcakmakoglu]

You'll have to add your own marker defs to your component.

Some thing like

 <svg :style="{ position: 'absolute', top: 0, left: 0 }">
        <defs>
          <marker
            id="logo"
            viewBox="0 0 40 40"
            markerHeight="20"
            markerWidth="20"
            refX="20"
            refY="40"
          >
			<!-- marker here -->

...

<VueFlow ...> ...</VueFlow>

[shsmad]

Great, thanks!

[bcakmakoglu]

For completion, after you have added your custom marker into the HTML, you need to use it like this

// some edge in your edges ref
  {
    id: 'E->F',
    source: 'E',
    target: 'F',
    markerEnd: 'logo',
    label: 'custom marker',
  },

Or whatever id you give to your marker :)

[shsmad]

addon after practical usage:

position: 'absolute', top: 0, left: 0 can in some cases lead to unexpected behaviour (related to z-index), so I recommend to use left: -1000px

[radusuciu]

If you're like me, you may have missed the fact that the svg block containing the marker defs is outside the VueFlow component. The following snippet from the edge markers example main.css is also useful if your marker is obscured by the node handles.

<style>
.vue-flow__handle {
    opacity:0;
    height:0!important;
    width:0!important;
    min-width:0!important;
    min-height:0!important
}

.vue-flow__edges {
    z-index:9999!important
}
</style>