How to Rotate and Move Shapes While Using the Continuous Draw Tool in Angular Diagram

In Angular Diagram, the Continuous Draw mode allows users to draw multiple shapes consecutively without re-selecting the tool. However, you may still need to interact with existing shapes—such as moving or rotating them—without leaving the drawing flow.

This article explains how to temporarily switch tools based on what’s under the mouse to achieve this.

Diagram Tools

API: diagram.tool - Set this property to a combination of DiagramTools flags.

ContinuousDraw: Keeps the drawing tool active until toggled off.
Default: Enables standard interactions—select, move, resize, and rotate.

Dynamic Toggling:

You can dynamically switch the diagram tool depending on the element detected beneath the mouse. This approach lets users move, rotate, and resize shapes while maintaining continuous draw mode.

How it works:

When the mouse moves over an existing shape, its rotation handle, or resize handle, temporarily switch the tool to Default mode.
When the mouse is not over these elements, restore the Continuous Draw tool.

This behavior ensures users can seamlessly manipulate shapes without exiting continuous draw mode, improving workflow efficiency.

Code Snippet:


@ViewChild('diagram')
public diagram: DiagramComponent;

private onMove = (evt: MouseEvent): void => {
 const id: string = (evt.target as HTMLElement)?.id || '';

 // Default tool handles node rotate, resize, dragging, and connector endpoint dragging
 const over: boolean =
   id === 'rotateThumb' ||
   id.startsWith('node') ||
   id.startsWith('resize') ||
   id.includes('SourceThumb') ||
   id.includes('TargetThumb');

 this.diagram.tool = over
   ? DiagramTools.Default
   : DiagramTools.Default | DiagramTools.ContinuousDraw;

 this.diagram.dataBind();
};

ngAfterViewInit(): void {
 this.diagram.element.addEventListener('mousemove', this.onMove);
}

ngOnDestroy(): void {
 this.diagram.element.removeEventListener('mousemove', this.onMove);
}

Refer to the working sample for additional details: View Sample

Conclusion

We hope this article helped you learn how to rotate and move shapes while using the continuous draw tool 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!

Did you find this information helpful?

Yes

Comments (0)