How to limit out-ports to only have a single link, allow moving of links, and how to delete a link

I am using v6.2.0 of this amazing library. I want a system with nodes that have a single in-port and multiple out-ports. I want to restrict this such that the user can only link an out-port to an in-port (i.e. the source port of a link must be an out-port and the target port must be an in-port). The user should not be able to create “loose links” (i.e. links that have one end not connected to any port). In addition, each out-port can only have a single link attached to it. I have managed to achieve this by doing the following:

...
  const engine = createEngine();
  const state = engine.getStateMachine().getCurrentState();
  if (state instanceof DefaultDiagramState) {
    state.dragNewLink.config.allowLooseLinks = false;
  }
...
  const model = new DiagramModel();
  ...
  model.registerListener({
    linksUpdated: (e: any) => {
      if (e.isCreated) {
        const link = e.link;
        const sourcePort = link.getSourcePort() as DefaultPortModel;

        if (Object.keys(sourcePort.getLinks()).length > 1) {
          link.remove();
        } else if (sourcePort.getOptions().in) {
          link.remove();
        }
      }
    }
  });
  engine.setModel(model);
...

Here is an example of what I can create so far:

Questions

1. Is this the best way of achieving this?

2. I also want the ability for the user to drag the endpoint of a link from one out-port to another out-port (or from one in-port to another in-port). How can this be done?

3. I am using the DefaultLinkModel and see that when you click on a link it adds a new control point to it. However, the nice Bezier curves then turn into straight lines. Is there a way to keep these lines as curves when additional control points are added? With a new point added, I can press the delete key on the keyboard to delete that point if I want to. However, I cannot work out how to just select a link so that I can delete it using the same mechanism. Could you please explain how to delete links?

[asnaseer-resilient]

@ShrutiChandak19 I have managed to restrict the number of links to 1 by providing my own port model that extends this libraries PortModel. In the constructor of this, I call the super class and pass it some options, one of which is maximumLinks: 1.

Here is some sample code that might illustrate this better:

import { PortModel, PortModelGenerics, PortModelOptions } from '@projectstorm/react-diagrams';
...

export class MyPortModel extends PortModel<PortModelGenerics> {
  constructor(options: PortModelOptions) {
    super({ ...options, maximumLinks: 1 });
  }
  ...
}

Hope that helps.

[vivek-verse]

That’s how I did it

const model = new DiagramModel();
model.registerListener({
	linksUpdated:(event : any) => {
		const { link, isCreated } = event;
		link.registerListener({
			targetPortChanged:(link  :any) => {
				if(isCreated){
					const {sourcePort, targetPort} = link.entity;
					if(Object.keys(targetPort.getLinks()).length > 1){
						model.removeLink(link.entity);
					}else{
						let { parent : 
								{ options : sourceOptions }
							} = sourcePort;

						let { parent : 
								{ options : targetOptions }
							} = targetPort;

						if(sourceOptions.dataType === 'start' && targetOptions.dataType === 'value'){
							model.removeLink(link.entity);
						}
					}
				}
			}
		});				
	  }
})

Thanks