jgraph / mxgraph

mxGraph is a fully client side JavaScript diagramming library
Other
6.81k stars 2.06k forks source link

Odd behavior of label position on edge #510

Closed nbelyh closed 3 years ago

nbelyh commented 3 years ago

If you have an edge, and add a label to it (either at the end or below, see the image) and then try to move things around, label position is changed unexpectedly. Any idea why and how to fix this behavior?

I mean, if you place the label "pin" on the line, it's okay, but as soon as it's just on the end of the line a bit beyond the line, the bug appears:

image

I would expect the label to behave the same, independently from the side of the end point it's located (to the lest of to the right). It looks like there is some trigger on positioning (relative/absolute) that fires incorrectly for this case

nbelyh commented 3 years ago

I think I found the reason, but not sure and therefore would like a developer's feedback. Here it iterates over segments. The thing is , p0 is set too late (and the first point goes wrong)

https://github.com/jgraph/mxgraph/blob/2ddf5448eaf396653d0d387b5a6c7b3196f8a789/javascript/src/js/view/mxGraphView.js#L2111-L2126

Shouldn't it be:

            for (var i = 2; i < pointCount; i++)
            {
                tmp += segments[i - 2];
                p0 = pe; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<< here ?
                pe = edgeState.absolutePoints[i];
                var dist = mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y);

                if (dist <= minDist)
                {
                    minDist = dist;
                    index = i - 1;
                    length = tmp;
                }

            }

If I change it like this, the issue seems to be gone 😄

Please note that this applies (is reproducible) with https://app.diagrams.net/ Example: https://app.diagrams.net/?title=Untitled%20Diagram.drawio#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D15aWkaTGpIoZNVGC-XVqIdbghfQh1hRvZ%26export%3Ddownload