Drag Start/End Events

Description

This example demonstrates how to listen to fDragStarted and fDragEnded so you can react to user movement in real time. These events are useful when the editor needs to show helper UI, update external state, log analytics, or coordinate drag behavior with other parts of the application.

Drag lifecycle events become especially valuable in production editors where the graph is only one part of the interface. A sidebar, inspector, minimap, or validation layer may all need to react when dragging starts or ends.

Used well, these hooks help you build cleaner state transitions instead of burying UI logic inside generic pointer handlers.

Example

What this solves

• Show or hide helper UI during drag interactions.
• Trigger analytics or custom business logic around drag lifecycle.
• Coordinate graph movement with external Angular state.

This is a practical example for teams building richer editing workflows rather than static diagram demos.

Related docs

• Event System
• Draggable Directive
• Node Selection Example
• Selection Area Example