How to re-order ports with link positions

[sinanyaman95]

I want to re-order ports, however links won't update their positions to be inline with the relocated port. I can successfully move the ports, and links move with them, just not visually. I tried something like this:

const reorderPorts = (node) => {
  const sortedInputs = node.getInPorts().sort((p1, p2) => {
    if (p1.getOptions().extras.type === "enable") {
      if (p2.getOptions().extras.type !== "enable") return -1
    } else if (p2.getOptions().extras.type === "enable") return 1
    return 0
  })
  node.portsIn = sortedInputs
  const sortedOutputs = node.getOutPorts().sort((p1, p2) => {
    if (p1.getOptions().extras.type === "forward") {
      if (p2.getOptions().extras.type !== "forward") return 1
    } else if (p2.getOptions().extras.type === "forward") return -1
    return 0
  })
  node.portsOut = sortedOutputs
}

I also tried removing all ports, then adding the sorted ones:

const ports = node.getPorts()
Object.keys(ports).forEach(key => node.removePort(ports[key]))
sortedInputs.forEach(port => node.addInPort(port))
sortedOutputs.forEach(port => node.addOutPort(port))

and no luck with that also. engine.repaintCanvas() doesn't help. Anyone happen to know the solution to this or the proper way of doing this?

[dgurkaynak]

@sinanyaman95, I also came across the same issue. My current fix is manually updating changed port's coordinates, but after the repaint:

diagramEngine.repaintCanvas();

port.updateCoords(diagramEngine.getPortCoords(port));

After updating coordinates, you don't need to repaint the canvas again.

[sinanyaman95]

Wow, that is a function I didn't know existed. Thanks for pointing out. I changed my use case, however I will try that once I need the same thing