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

This article explains 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 frequently used commands, and those icons can be a 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 to execute those actions. Here, one of the frequent scenarios, cloning, is explained. When the handle is clicked, the operation will be performed.

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 for the user handle. The getTool() will be called when the mouse hovers over each userHandle. Every userHandle has a respective name, and the action will be assigned to the handle based on the userHandle name. Here, a code sample is provided for one of the user’s frequent actions, clone. On clicking the handle, the tool will be initialized by generating a new instance of 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 clone tool is extended from the move tool, where all the mouse events like mouse up, mouse down, and mouse move are 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 of the cloned node, and it will be pasted into the diagram by calling the paste method with the cloned node as an argument.

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;
  }
}

Refer to the working sample for additional details and implementation:[Sample]

Conclusion

We hope you enjoyed learning how to set the cursor to the diagram node in Angular.

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, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

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

Conclusion

Access denied