default connection line to be an arrow at the end

[AmosSzust]

Hi
(How) is it possible to make the default connection line to be an arrow?
When the user drags the mouse from one node's edge to another one, I want it to appear as an arrow.
I read the documentation but mainly read about edges, I didn't see anything about connection lines. What am I missing?
Thanks

[bcakmakoglu]

You can use a custom connection line.

The implementation details of the "arrow" are up to you though.

[AmosSzust]

To start with, I tried to copy the code as it is from the sample but couldn't see the result as in the page itself, maybe because I use my own css for the component.

I read here #1000
The user is talking about customizing the arrow as if it's built in feature and he just want to style it differently. So is there a way to make the line/edge like an arrow without the custom connection line tag?

There's also this part

markerEnd: {
		type: MarkerType.Arrow,

as if I just need to define it as an arrow and it will appear like it.

[bcakmakoglu]

You gotta be more explicit with your questios; markerStart / markerEnd only adds an arrow to the start/end of an edge / connection line, it doesn't make the line itself an arrow, which is what I assumed you wanted since that's what I read from your question 😅

You can use the connectionLineOptions prop to specify what sort of marker your connection line should have.

<VueFlow v-model="elementst" :connection-line-options="{ markerEnd: MarkerType.Arrow }">...

[AmosSzust]

Thanks, I tried the following, hoping that width/height of 50 will make it noticeable but it looks as if it had no effect whatsoever, the arrow remains small and hidden behind the edge. What am I missing?

import "@vue-flow/core/dist/style.css";
import "@vue-flow/core/dist/theme-default.css";


    <VueFlow
      v-model="flowBlocks"
      style="height: calc(100vh - 110px)"
      fit-view-on-init
      auto-connect
      :connection-line-options="{ markerEnd: { type: MarkerType.Arrow, width: 50, height: 50 } }"
      @pane-ready="paneReady"
    />

[bcakmakoglu]

This is a bug - the marker id is not properly generated and passed to the connection line component.

A fix is ready #1243 and will be released with 1.29.0 - probably some time this week.

[bcakmakoglu]

Fix is released with 1.29.0