Interpreting edge label position about klayjs

[uruuru]

Looks like a bug in the position application code. I'll look into it. Thanks for mentioning the issue.

[uruuru]

The expected behavior would be that both labels are relative to the parent node of their corresponding source node. In this case that is the invisible root node.
There's an example model which illustrates what coordinates are relative to.

Note that for us a label's coordinates denote the top-left corner, I'm not sure if that's the case for svg text as well.

[jbeard4]

Thank you @uruuru, the documentation you linked to is what I was looking for. Unfortunately, the edge label coordinates do not appear to include the correct offset. Please see the attached screenshot, which illustrates label position in the root element coordinate space:

Here is the SVG as a reference:

<svg class="schviz2 ng-isolate-scope" display-model="displayModel" viewBox="0 -10 109.78124904632568 53">
    <desc>Created with Snap</desc><defs></defs>
    <g>
        <g class="node compound">
            <rect></rect>
            <g id="off" transform="matrix(1,0,0,1,87.7812,20.6667)" class="node leaf highlighted">
                <rect x="0" y="0" width="10" height="10"></rect><text x="2.5" y="6.5">off</text>
            </g>
            <path d="M87.78124904632568 24  L22 24" class="link"></path>
            <text x="37.99999952316284" y="0">touch</text>
            <g id="on" transform="matrix(1,0,0,1,12,20.6667)" class="node leaf">
                <rect x="0" y="0" width="10" height="10"></rect><text x="2.5" y="6.5">on</text>
            </g>
            <path d="M22 27.333333333333332 L35.99999976158142 27.333333333333332 L35.99999976158142 40 L73.78124928474426 40 L73.78124928474426 27.333333333333336  L87.78124904632568 27.333333333333336" class="link"></path>
            <text x="37.99999952316284" y="16">touch</text>
        </g>
    </g>
    <defs>
        <marker id="end" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="3" markerHeight="5" orient="auto">
            <path d="M0,-5L10,0L0,5"></path>
        </marker>
    </defs>
</svg>

Is it possible this is a bug in the edge label positioning algorithm? Thank you.

[uruuru]

I pushed a new version that hopefully fixes the issue. Let me know if it helps.

[jbeard4]

I will review and let you know.

[jbeard4]

Thank you for looking into this. The issue persists. Please see the attached screenshots:

And SVG:

<svg class="schviz2 ng-isolate-scope" display-model="displayModel" viewBox="0 0 109.78124904632568 53">
    <desc>Created with Snap</desc>
    <defs/>
    <g>
        <g class="node compound">
            <rect/>
            <g id="off" transform="matrix(1,0,0,1,87.7812,20.6667)" class="node leaf highlighted">
                <rect x="0" y="0" width="10" height="10"/>
                <text x="2.5" y="6.5">off</text>
            </g>
            <path d="M87.78124904632568 24  L22 24" class="link"/>
            <text x="49.99999952316284" y="12">touch</text>
            <g id="on" transform="matrix(1,0,0,1,12,20.6667)" class="node leaf">
                <rect x="0" y="0" width="10" height="10"/>
                <text x="2.5" y="6.5">on</text>
            </g>
            <path d="M22 27.333333333333332 L35.99999976158142 27.333333333333332 L35.99999976158142 40 L73.78124928474426 40 L73.78124928474426 27.333333333333336  L87.78124904632568 27.333333333333336" class="link"/>
            <text x="49.99999952316284" y="28">touch</text>
        </g>
    </g>
    <defs>
        <marker id="end" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="3" markerHeight="5" orient="auto">
            <path d="M0,-5L10,0L0,5"/>
        </marker>
    </defs>
</svg>

[uruuru]

The positions look correct to me. The upper touch label is at ~50, 12, where 12 is the default distance to the border. Is it possible that the svg's text coordinates refer to the bottom-left corner and you have to add the height of the label?

[jbeard4]

Hi @uruuru. You are correct. I had to set dominant-baseline="text-before-edge" on the SVG text element in order to make the x, y coordinates equivalent to the top left corner of the text. This returns a good result. Here is the output, with option { labelSpacing : 1}.

Thank you for your assistance resolving this.

[jbeard4]

I opened a related issue here: #9. Thank you.