React-diagrams: Control number of links that can be connected to a port

[mcnewbk]

Is there a way to control the number of links that can come from/to a port. For example, I would like to limit my ports to only be able to have one link attached at any time.

[dylanvorster]

not yet without some hacks unfortunately. I would suggest doing a recursive check on all the node ports for the entire diagram model and then just pop them off if a user ever tries to do it. Im also looking at allowing a preventDefault on the new events system in the open PR, which could prevent this.

[tomitrescak]

For those interested I solved it like this:

const model = new DiagramModel();
const maxLinks = 1;

model.addListener({
    linksUpdated: e => {
      if (e.isCreated) {
        e.link.addListener({
          targetPortChanged: f => {
            if (Object.keys(f.port.links).length > maxLinks) {\
                e.link.sourcePort.removeLink(e.link);
        e.link.targetPort.removeLink(e.link);
        model.removeLink(e.link);
            }
          }
        });
      }
    }
  });

[ianchanning]

There is a canLinkToPort property on the PortModel.ts that you could use, see https://github.com/projectstorm/react-diagrams/blob/a95010652dc16bd47375d7e4715cd02953ea75c2/src/models/PortModel.ts#L94

[sinanyaman95]

any updates on this feature? Should we still use the same work around to limit the number of links for a port?

[renato-bohler]

Here's how I implemented it on my project (logossim).