search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.69k stars 1.17k forks source link

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 #770

Closed manhvd161 closed 3 years ago

manhvd161 commented 3 years ago

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.

Screen Shot 2020-11-23 at 14 31 10
renato-bohler commented 3 years ago

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

https://github.com/projectstorm/react-diagrams/blob/361fbe4ffed7d5b485c9d7e871cf891c55d6c4d7/packages%2Freact-diagrams-core%2Fsrc%2Fstates%2FDragNewLinkState.ts#L66-L83

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 commented 3 years ago

@renato-bohler thanks for helping @Sieusaosieungo