MxGraph JavaScript: How to calculate edge length?

Question

I am looking for a way to calculate the length of the edges in one graph. As an example this image: The connecting edge contains three parts, (a,b and c) I have no idea how to retrieve this information that I can sum up the distances of a + b + c.

On a more complexe graph I want to calculate the length for each edge. There I would loop through all models of the graph, check with .isEdge if it is an edge and then calculate the length of each edge.

let cells = graph.getModel().cells;
            
for(let key in cells){
    let mxCell = cells[key];
    if(mxCell.isEdge())
        {
            calcLength(mxCell)
        } }

calcLength() is the function I need. This one should return the length of the edge.

I used the helloPorts example from jGraph.

Thanks in advance!!

Please provide enough code so others can better understand or reproduce the problem. — Ethan, Jun 15 '22 at 23:39
I understand. But it is more a problem what to look for. Thus I have no code to illustrate it but I tried to explain the problem more in detail. — Stefan Blazek, Jun 16 '22 at 08:16
What is your input (data structure)? Can you give sample input in JavaScript syntax? And then add what the expected results would be for that input? — trincot, Jun 16 '22 at 08:36
I added a short code snippet to illustrate how I want to access the data and where I want to use the function. — Stefan Blazek, Jun 16 '22 at 10:19

score 2 · Accepted Answer · answered Jun 24 '22 at 07:45

Back again,

together with a friend we found the solution. The information is stored under the graphView in the state as the length.

graphView.getState(mxCell).length

This is part of the mxCell object. If you are looking for the Euclidian length of an edge, this is stored under terminalDistance.

graphView.getState(edge).terminalDistance

The code would look like this to access it:

                let cells = graph.getModel().cells;
                let graphView = graph.getView();
                
                
                // The getModel needs to be triggered before the loop otherwise the the mxCell state is undefined
                graph.getModel().endUpdate();
                
                for(let key in cells){
                    let mxCell = cells[key];
                    if(mxCell.isEdge())
                    {
                        let state = graphView.getState(mxCell).length;
                    }
                    
                }

MxGraph JavaScript: How to calculate edge length?

1 Answers1