Text on multi connection link is reversed when layout is set to Left

[kanth609]

Hi @bumbeishvili, Thanks for the wonderful library. I feel we have a bug on the below mentioned scenario, can you please let me know if it's bug or am I doing something wrong.

Describe the bug Text on multi connection link is reversed when layout is set to left and when compact is set to false. I've forked an example to reproduce the scenario, Please check - link

To Reproduce Steps to reproduce the behaviour:

1. Click on Fit to screen
2. Click on Multi Node Connections
3. Click on Left Layout
4. See text on links, text is not proper.

Expected behavior Text should be proper on links.

Screenshots

Thanks!

[bumbeishvili]

Hi, it relies on an svg marker functionality to draw arrows and texts

If there is a bug, it can be fixed by overriding current defs generation function

chart.defs(function (state, visibleConnections) {
                return `<defs>
                    ${visibleConnections.map(conn => {
                    const labelWidth = this.getTextWidth(conn.label, { ctx: state.ctx, fontSize: 2, defaultFont: state.defaultFont });
                    return `
                       <marker id="${conn.from + "_" + conn.to}" refX="${conn._source.x < conn._target.x ? -7 : 7}" refY="5" markerWidth="500"  markerHeight="500"  orient="${conn._source.x < conn._target.x ? "auto" : "auto-start-reverse"}" >
                       <rect rx=0.5 width=${conn.label ? labelWidth + 3 : 0} height=3 y=1  fill="#E27396"></rect>
                       <text font-size="2px" x=1 fill="white" y=3>${conn.label || ''}</text>
                       </marker>

                       <marker id="arrow-${conn.from + "_" + conn.to}"  markerWidth="500"  markerHeight="500"  refY="2"  refX="1" orient="${conn._source.x < conn._target.x ? "auto" : "auto-start-reverse"}" >
                       <path transform="translate(0)" d='M0,0 V4 L2,2 Z' fill='#E27396' />
                       </marker>
                    `}).join("")}
                    </defs>
                    `})

[kanth609]

Thanks for the input @bumbeishvili , i'll try this solution and update here.

[kanth609]

I'll have to modify the orientation for the text in the defs, thanks @bumbeishvili it's working now.