User handle for connections

[Ryan Dunn]

were trying to modify the following example: 

https://ej2.syncfusion.com/angular/demos/#/material/diagram/quick-commands

to start drawing a connection for a node when the user handle is clicked.

The following is what we've come up with so far.

public handles: UserHandleModel[] = [
  {
    name: 'CustomConnectorDrawingTool',
    pathData:
      'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,' +
      '0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z ' +
      'M68.5,72.5h-30V34.4h30V72.5z',
    visible: true,
    offset: 0,
    side: 'Bottom',
    margin: {top: 0, bottom: 0, left: 0, right: 0}
  }
];

public getTool(action: string): ToolBase {
  let tool: ToolBase;
  if (action === 'CustomConnectorDrawingTool') {
    let currNode = this.diagram.selectedItems.nodes[0];
    console.log(currNode)
    let cloneTool: CustomConnectorDrawingTool = new CustomConnectorDrawingTool(this.diagram.commandHandler, '', currNode as any);
    cloneTool.diagram = this.diagram;
    cloneTool.node = currNode;
    return cloneTool;
  }
  return tool;
}

class CustomConnectorDrawingTool extends ConnectorDrawingTool {
  public diagram: Diagram = null;
  public node:NodeModel = null

  public mouseMove(args: MouseEventArgs): boolean {
    console.log(this)
    //if (!this.diagram.drawingObject) return false;
    return super.mouseMove(args);
  }

  public mouseUp(args: MouseEventArgs): Promise<void> {
    args.source = this.node as any as IElement;
    if(args.source) args.sourceWrapper = args.source.wrapper;
    let superReturn = super.mouseUp(args);
    return superReturn;
  }

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

  public mouseDown(args: MouseEventArgs): Promise<void> {
    console.log(args);
    args.startTouches;
    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;
    return super.mouseDown(args);
    ;
  }

}

about 50% of the time we get an error when we try to draw a connection. we are also unable to figure out how to properly set the source node of the connector. The code provided above starts the connector at the point where the user handle was and isn't attached to any node.   

Thanks,

Ryan 

[Senthil Kumar Venkatesan]

Hi Ryann , 

I have checked the sample snippet  you provided and prepared the sample and we too faced the issue . On further analysis we found that drawingObject is not assigned and as a result the issue raises . During the connection drawing too we need to assign drawing object to the diagram . We have modified the sample and attached below for your reference .  

Sample : https://stackblitz.com/edit/angular-7z4ehx-hgufny?file=app.component.ts 

UG link : https://ej2.syncfusion.com/angular/documentation/diagram/tools/#tools 

  

  

Regards, 

Senthil Kumar V 

[Ryan Dunn]

Hi Senthil,

This is helpful, however in your example the source is still not set correctly. if you drag the source node after making a connection via the user handle the connector is left behind and it appears to be connected to he handle not the node.

Thanks,

Ryan

[Gowtham Gunashekar]

Hi Ryan , 

For the actual object we have to assign the sourceID ,so that connector will be drawn and the connection will be established from the source node and the target node . We have modified the sample below for your better understanding .  

Sample : https://stackblitz.com/edit/angular-7z4ehx-vrekpl?file=app.component.ts 

Code snippet: 

public mouseMove(args: MouseEventArgs): boolean { 

    console.log(this); 

    if (this.diagram.drawingObject === undefined) { 

      this.diagram.drawingObject = { 

        type: "Straight", 

        sourceID: args.actualObject.id // Code added  

      }; 

    } 

    //if (!this.diagram.drawingObject) return false; 

    return super.mouseMove(args); 

  } 

Regards,  

Gowtham 

[Ryan Dunn]

That works, Thanks

[Gowtham Gunashekar]

Hi Ryan ,  

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

 

Regards  

 

Gowtham