MXGraph adding edges

Question

In MXGraph, edges can be added using graph.addEdge() but this requires passing 2 vertices as arguments. I want to create an edge which can be randomly placed on the graph, without the need to the vertices, just like in draw.io or graph editor. After googling, mxCell can be used for the same but I am not able to understand the usage. Please Help.

Answer 1

Whenever you use mxCells, you need to set TerminalPoints for each of the sides if you are using it as an Edge. After Adding and setting it as an edge you need to insert it into the cells array which has been done by the fireEvent function.

  var cell = new mxCell('your text', new mxGeometry(0, 0, 50, 50), 'curved=1;endArrow=classic;html=1;');
  cell.geometry.setTerminalPoint(new mxPoint(50, 150), true);
  cell.geometry.setTerminalPoint(new mxPoint(150, 50), false);

  cell.geometry.relative = true;
  cell.edge = true;

  cell = graph.addCell(cell);
  graph.fireEvent(new mxEventObject('cellsInserted', 'cells', [cell]));