Angular Diagram Events Example

This sample visualize what are the client side events are available in the diagram.

Basic Shapes

Connectors

Client-side events

Drag enter
Drag leave
Drag over
Click
History change
Double click
Text edit
Scroll change
Selection change
Size change
Connection change
SourcePoint change
TargetPoint change
Position change
Rotate change
Collection change
Mouse enter
Mouse leave
Mouse over
Context menu open
Context menu before item render
Context menu click

Event Trace

Description

Diagram events are the actions that can be detected by JavaScript and the event argument are the information about the event that has occurred. Some time we want to execute some JavaScript when and event occurs, such as when the user clicks on the node. We can achieve this scenario using click event of the diagram. So, in this shows how to hook all the diagram events and how to handle its arguments.

Example of Events in Angular Diagram Component