Setting Target port in ConnectorDrawingTool mouseUp

[Ryan Dunn]

We are trying to customize the connection drawing tool to auto assign ports using the following code.

//Defines the clone tool used to copy Node/Connector
class CustomConnectorDrawingTool extends ConnectorDrawingTool {
  public diagram: Diagram = null;
  private node: NodeModel;
  public mouseMove(args: MouseEventArgs): boolean {
    return super.mouseMove(args);
  }

  public mouseUp(args: MouseEventArgs): Promise<void> {
    args.source = this.node as IElement;
    if (args.source) args.sourceWrapper = args.source.wrapper;
    let portId = null;
    console.log(args)
    let target = args.target as any as NodeModel;
    for(let port of target.ports as Port[]){
      if((port.constraints & PortConstraints.OutConnect) && !port.outEdges || port.outEdges.length == 0){
        portId = port.id;
        break;
      }
    }
    (this.drawingObject as ConnectorModel).targetPortID = portId;
    let superReturn = super.mouseUp(args);

    return superReturn;
  }

  mouseLeave(args: MouseEventArgs): void {
    args.source = this.node as IElement;
    if (args.source) args.sourceWrapper = args.source.wrapper;
  }

  public mouseDown(args: MouseEventArgs): Promise<void> {
    this.node = this.diagram.selectedItems.nodes[0] as IElement;
    //find an open port
    let portId = null;
    if(this.node.id != "start") {
      for (let port of this.node.ports as Port[]) {
        if ((port.constraints & PortConstraints.InConnect) && !port.outEdges || port.outEdges.length == 0) {
          portId = port.id;
          break;
        }
      }
    }

    args.position = {
      x: this.node.offsetX,
      y: this.node.offsetY
    };
    args.source = this.node as IElement;
    args.actualObject = this.node as IElement;
    if (args.source) args.sourceWrapper = args.source.wrapper;
    let connectionModel: ConnectorModel = {
      type: "Orthogonal",
      constraints: ConnectorConstraints.Default | ConnectorConstraints.LineRouting,
      sourceID: args.actualObject.wrapper.id,
      sourcePortID: portId,
    }
    this.diagram.drawingObject = connectionModel;
    return super.mouseDown(args);
  }

We are having trouble setting the target port id during the mouse up event. How should we accomplish this?

Thanks,

Ryan 

[Aravind Ravi]

Hi Ryan, 

 

Thanks for your interest in Syncfusion products. 

 

On analyzing the provided code snippet and query , we suspect that you need to create a new connector from port. If so, we have created a sample to create a connection from port using port constraints. By using port constraints Draw we can able to draw a connector from one port and connect it to the another port of another node. The following code snippets illustrate how to enable port to port connection via PortConstraints. 

 

public nodeDefaults(node: NodeModel): NodeModel { 

    let obj: NodeModel = {}; 

    //sets height and width for nodes 

    obj.height = 65; 

    obj.width = 100; 

    obj.style = { fill: "#ebf8fb", strokeColor: "#baeaf5" }; 

    for (let i: number = 0; i < node.ports.length; i++) { 

      //sets styles for the ports 

      node.ports[i].style = { 

        fill: "#366f8c", 

        strokeColor: "#366f8c" 

      }; 

      node.ports[i].width = 10; 

      node.ports[i].height = 10; 

      node.ports[i].visibility = PortVisibility.Visible; 

      node.ports[i].constraints = 

        PortConstraints.Default | PortConstraints.Draw; 

    } 

    return obj; 

  } 

  

We have attached a video demonstration of how connector created from port on mouse down. Please find the video in below link 

 

Video: https://www.syncfusion.com/downloads/support/forum/163569/ze/Port-Draw-1387878309 

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-nilsw1 

 

Regards 

Aravind Ravi 

[Ryan Dunn]

That doesn't relate to my question. We are extending the ConnectionDrawingTool class, and on the mouseUp event we want to assign which port the connection gets connected to programatically. For example if the connection is not dragged into any port we'd want to connect it to one. How can we do that? 

Thanks,

Ryan

[Gowtham Gunashekar]

Hi Ryan, 

 

We have added a sample link  and video link to demonstrate how to extend the ConnectorDrawingTool and add the functionality like change the drawing connector’s source port id and target port id. 

 

Sample Link: https://stackblitz.com/edit/angular-xum1fx-a3ak39?file=app.component.ts 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/customTool100820793.zip 

 

Regards, 

Gowtham 

[Ryan Dunn]

Ok I see my error I was getting ports i couldn't connect to, the code should have been

for(let port of target.ports as Port[]){
  if((port.constraints & PortConstraints.InConnect) && (!port.inEdges || port.inEdges.length == 0)){
    portId = port.id;
    break;
  }
}

Thanks for the help,

Ryan 

[Gowtham Gunashekar]

Hi Ryan,  

 

Please let us know whether you need any further assistance on this. 

 

Regards  

Gowtham