DiagramWidget
Definition
Package:@progress/kendo-react-diagram
Properties
The layer group that contains adorners for selection and editing.
canvas
any
The canvas element used for rendering the diagram.
Array of all connections in the diagram.
element
HTMLElement
The HTML element that contains the diagram.
events
string[]
Array of event names that this observable supports.
id
string
The unique identifier of the diagram.
options
any
Configuration options for the observable instance.
pauseMouseHandlers
boolean
Indicates whether mouse handlers should be paused.
scrollable
any
The scrollable container element.
scroller
any
The scroller component for panning.
selector
Selector
The selector tool for area selection.
size?
{ width: number; height: number }
The current size of the diagram viewport.
toolService
ToolService
The tool service that manages diagram tools and interactions.
Service for managing undo/redo operations.
wrapper
HTMLElement
The wrapper element for the diagram content.
Methods
Adds a connection to the diagram.
The connection to add.
undoable?booleanWhether the operation can be undone. Defaults to true.
The newly created connection.
Adds a shape to the diagram.
A Shape instance or shape configuration used to create one. If a plain object is passed, a new Shape is created from it e.g. { x: 10, y: 10, width: 100, height: 50 }.
Indicates whether the operation should be added to the undo stack.
Returns:The newly created shape.
Aligns shapes in the specified direction.
The alignment direction ('left', 'right', 'top', 'bottom')
Binds event handlers to one or more events.
The event name(s) to bind to, or an object mapping event names to handlers
handlers?EventHandlersThe event handler(s) to bind. Can be a function or an object mapping event names to handlers
one?booleanIf true, the handler will be executed only once and then automatically unbound
Returns:this
The Observable instance for method chaining
Gets the bounding rectangle of the given items.
Shape, Connection or array of Shape and Connection instances.
origin?booleanBoolean. Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
Returns:The bounding rectangle of the items.
Brings the specified items or rectangle into view.
A shape, connection, array of diagram items, or rectangle to bring into view.
options?{ animate?: boolean; align?: string }Options that control alignment and whether the pan is animated.
Clears the diagram by removing all selections and elements, then reinitializes.
Creates a connection between two endpoints (shapes, connectors, or points).
The source endpoint
targetDiagramConnectionEndpointThe target endpoint
options?Partial<ConnectionOptionsBase>Optional connection configuration
Returns:The newly created connection
Determines whether two diagram endpoints are connected.
The source shape, connector, or point.
targetDiagramConnectionEndpointThe target shape, connector, or point.
Returns:boolean
true when the endpoints are connected; otherwise, false.
Copies the currently selected items to the clipboard.
Cuts the currently selected items to the clipboard and removes them from the diagram.
Deselects items from the current selection.
The item(s) to deselect. If not provided, deselects all items.
Destroys the diagram and cleans up all resources. Removes event listeners, destroys components, and clears all elements.
Destroys the scroller component and removes its element.
Exports the diagram's DOM visual representation for rendering or export purposes. Creates a clipped group containing the canvas content with proper transformations.
Group
A drawing Group element containing the exported DOM visual
Exports the diagram's visual representation with proper scaling based on zoom level. Creates a scaled group containing the main layer content.
Group
A drawing Group element containing the exported visual with inverse zoom scaling
Binds event handlers to be executed first (prepends to the handlers list). These handlers will be called before any previously bound handlers for the same event.
The event name(s) to bind to
handlersEventHandlersThe event handler(s) to bind
Returns:this
The Observable instance for method chaining
Sets focus to the diagram element.
undefined | boolean
True if focus was set, undefined otherwise
Gets a shape or connection by its unique identifier.
The unique identifier of the diagram item
Returns:undefined | DiagramSelectionItem
The matching shape or connection, or undefined if not found
Gets a shape by its model ID.
The model ID of the shape
Returns:undefined | Shape
The shape with the specified model ID, or undefined if not found
Gets a shape by its model UID.
The model UID of the shape
Returns:undefined | Shape
The shape with the specified model UID, or undefined if not found
Performs a diagram layout of the given type.
Layout-specific options.
Loads diagram data and recreates shapes and connections.
The diagram options containing shapes and connections data
Binds event handlers that will be executed only once. After execution, the handlers are automatically unbound.
The event name(s) to bind to
handlersEventHandlersThe event handler(s) to bind
Returns:this
The Observable instance for method chaining
Sets the pan offset of the diagram.
The new pan offset.
animate?booleanWhether to animate the pan operation.
Gets whether pan mode is enabled.
boolean
true when pan mode is enabled; otherwise, false.
Enables or disables pan mode. When enabled, the diagram can be panned by dragging the background.
Whether to enable pan mode.
Pastes items from the clipboard into the diagram.
Executes the previous undoable action on top of the redo stack if any.
Removes items (or single item) from the diagram.
Shape, Connection or array of Shape and Connection instances.
undoable?booleanIndicates whether the operation should be added to the undo stack.
Serializes the diagram to a JSON object containing shapes and connections.
{ shapes: ShapeOptionsBase[]; connections: ConnectionOptionsBase[] }
Object with shapes and connections arrays
Gets the currently selected diagram items.
The currently selected items.
Selects or deselects diagram items.
The item or items to select, or false to deselect all items.
The selection options.
Selects all shapes and connections in the diagram.
Selects shapes and connections within a rectangular area.
The rectangular area to select items within
Sets options for the diagram by deep extending the current options.
The options to merge with current diagram options
Sends to back the passed items.
Shape, Connection or array of Shape and Connection instances. If omitted, the current selection is used.
undoable?booleanWhether the operation can be undone. Defaults to true.
Brings to front the passed items.
Shape, Connection or array of Shape and Connection instances. If omitted, the current selection is used.
undoable?booleanWhether the operation can be undone. Defaults to true.
Triggers an event, calling all bound handlers for that event.
The name of the event to trigger
eventArgs?anyOptional event arguments to pass to the handlers
Returns:boolean
True if any handler called preventDefault(), false otherwise
Removes event handlers from events.
The event name to unbind from. If undefined, all events are unbound
handler?EventHandlersThe specific handler to remove. If undefined, all handlers for the event are removed
Returns:this
The Observable instance for method chaining
Executes the next undoable action on top of the undo stack if any.
Gets the viewport rectangle of the diagram.
A Rect representing the current viewport
Gets the current zoom level of the diagram.
number
The current zoom level.