How can I connect 2 Nodes together without connecting from one node's port to the other, I just want to hover and find the port myself

[manhvd161]

I have 2 nodes with big size. I want to connect them but I can only connect them by connecting from one port to another, I just want to connect from port of one node and hover on the other node will automatically find the port for me.
This mechanism is similar to astah.

[renato-bohler]

This is doable. You will have to implement a custom DragNewLinkState and change the fire callback function on the MOUSE_UP action.

react-diagrams/packages/react-diagrams-core/src/states/DragNewLinkState.ts

Lines 66 to 83 in 361fbe4

	fire: (event: ActionEvent<MouseEvent>) => {
	const model = this.engine.getMouseElement(event.event);
	// check to see if we connected to a new port
	if (model instanceof PortModel) {
	if (this.port.canLinkToPort(model)) {
	this.link.setTargetPort(model);
	model.reportPosition();
	this.engine.repaintCanvas();
	return;
	}
	}
	if (this.isNearbySourcePort(event.event) || !this.config.allowLooseLinks) {
	this.link.remove();
	this.engine.repaintCanvas();
	}
	}

You could change it to something like this:

fire: (event) => {
  const model = this.engine.getMouseElement(event.event); 
  if (!(model instanceof NodeModel)) return;

  const targetPort = Object.values(model.getPorts())[0]; // just grabbing the first port of the node
  if (this.port.canLinkToPort(targetPort)) { 
    this.link.setTargetPort(targetPort); 
    targetPort.reportPosition(); 
    this.engine.repaintCanvas();
  }
}

[dylanvorster]

@renato-bohler thanks for helping @Sieusaosieungo