How to add custom actions to user handles in Angular Diagram?

There are default handles in the node and connector in the diagram. For example, the endpoint drag, segment editing, and resize handles are the default handles used to execute certain actions. The user handles are icons that are placed around the node to run the frequently used commands, and that icons can be the path, image, or native content. To perform regular scenarios in diagrams such as copy, add, or remove, you should add a handle around the selector and execute those actions. Here, one of the frequent scenarios that are clone has explained. When the handle is clicked, the operation will be performed. Please refer to the following code example for how to add a user handle for the node in the diagram.

//Defines the userHandle collection for nodes in the diagram
  public handles: UserHandleModel[] = [
    {
      name: 'clone',
      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,
    }
  ];

The user handle property of the selected items is used to add the user handle to the diagram.  Please refer to the following code example for how to add a user handle to the diagram.

  public selectedItems: SelectorModel = {
    constraints: SelectorConstraints.UserHandle,
//Add userHandles
    userHandles: this.handles
  };

By using the getTool method, you can enable the necessary action to the user handle. The getTool() will be called when the mouse hovers on each userHandle. Every userHandle has a respective name, the action will be assigned to the handle based on the userHandle name. Here, the code sample has provided for the user’s one of the frequent actions, clone. On clicking the handle, the tool will be initialized by generating a new instance to the cloneTool and returning the tool. Please refer to the following code example.

//Enable the clone tool for userHandle
  public getTool(action: string): ToolBase {
    let tool: ToolBase;
    if (action === 'clone') {
//Create a new instance to CloneTool
      let cloneTool: CloneTool = new CloneTool(this.diagram.commandHandler);
      cloneTool.diagram = this.diagram;
      return cloneTool;
    }
    return tool;
  }

When the userHandle is clicked, the corresponding tool will be enabled. The clonetool is extended from the move tool, where all the mouse events like mouse up, mouse down, and mouse move have written. For this scenario, you write a mouse down event alone. The selected node gets cloned by calling the cloneObject method. The RandomId method is called to set the id to the cloned node and it will be pasted to the diagram by calling the paste method with the cloned node as an argument. Please refer to the following code example.

 
//Defines the clone tool used to copy Node/Connector
class CloneTool extends MoveTool {
  public diagram: Diagram = null;
  public mouseDown(args: MouseEventArgs): void {
    let newObject: NodeModel | ConnectorModel;
    if (this.diagram.selectedItems.nodes.length > 0) {
      newObject = cloneObject(this.diagram.selectedItems.nodes[0]) as NodeModel;
    } else {
      newObject = cloneObject(
        this.diagram.selectedItems.connectors[0]
      ) as ConnectorModel;
    }
    newObject.id += randomId();
    this.diagram.paste([newObject]);
    args.source = this.diagram.nodes[this.diagram.nodes.length - 1] as IElement;
    args.sourceWrapper = args.source.wrapper;
    super.mouseDown(args);
    this.inAction = true;
  }
}

Sample:

https://stackblitz.com/edit/angular-qnm1px-c9eehs?file=app.component.ts

Conclusion

I hope you enjoyed learning about how to add custom actions to user handles in Angular Diagram.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our 
Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!