Diagram Events

The diagram raises various events to notify you of the effects of user's actions, such as nodeCreated, nodeModified, nodeDeleted, etc. Events are represented by the EventDispatcher class and are accessible as properties of the corresponding objects (Diagram or DiagramView). Event listeners are attached through the addEventListener method and removed through the removeEventListener method.

The following sample code attaches an event listener to the nodeCreated event of a Diagram control. The variable diagram identifies a Diagram instance and onNodeCreated is the name of the event handler function:

JavaScript

diagram.nodeCreated.addEventListener(onNodeCreated);

All event handlers receive two arguments. The first 'sender' argument specifies the object that emits the event, and the second 'args' argument is an instance of an EventArgs -derived class:

JavaScript

function onNodeCreated(sender, args)
{
    // ...
}

While some events are raised to notify you that the user has performed an action, like the nodeCreated event, validation events let you accept or reject user actions before actually changing the diagram. Validation event names usually end in '-ing' suffix, such as nodeCreating. The args parameter passed to their handler functions is an instance of a CancelEventArgs -derived class. Validation event handlers are expected to set the value of args' cancel property either to true if it should be rejected or false (the default) if it should be accepted.

The following code handles the nodeDeleting event and, if the node to be deleted is a TableNode instance, cancels the action:

JavaScript

diagram.nodeDeleting.addEventListener(
    (sender, args) =>
    {
        args.cancel = args.node instanceof TableNode;
    });