Shape
Definition
Package:@progress/kendo-react-diagram
Properties
adorner
any
The adorner used for visual feedback during interactions.
Array of connectors attached to this shape.
dataItem
any
The data item associated with this diagram element.
events
string[]
Array of event names that this observable supports.
id
string
The unique identifier of this diagram element.
isSelected
boolean
Indicates whether this element is currently selected.
options
any
Configuration options for the observable instance.
shapeVisual
any
The visual representation of the shape.
The type of the shape (e.g., 'rectangle', 'circle', 'text', etc.) or FlowchartShapeTypes.Extract.
visual
any
The visual representation (Group) of this diagram element.
Methods
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 shape bounds in model coordinates.
The shape bounds in model coordinates.
Gets the shape bounds using the specified coordinate representation.
The bounds representation to retrieve.
Returns:The shape bounds in the specified coordinate representation.
Gets connections of this shape based on type.
The type of connections to retrieve: 'in' for incoming, 'out' for outgoing, or undefined for all connections.
Returns:Array of connections
Gets the current content of the shape.
ShapeContent | ShapeRichTextContent
The current shape content.
Sets the content of the shape.
The new shape content.
Returns:ShapeContent | ShapeRichTextContent
The applied shape content.
Creates the visual representation of the shape based on its type and options. Supports custom templates, predefined shapes (rectangle, circle, text, image), and custom paths.
Destroys the observable instance and removes all event handlers. This method should be called when the observable is no longer needed to prevent memory leaks.
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
Gets a connector of this shape either by the connector's supposed name or via a Point in which case the closest connector will be returned.
Gets the position of the shape at a specific side.
The side to get position for (e.g., 'top', 'bottom', 'left', 'right', 'center')
Returns:The position point at the specified side
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
Redraws the shape with new options.
The options to apply when redrawing the shape
Redraws the shape's visual representation. Updates both the visual and content if present.
Refreshes the visual representation of the diagram element. Triggers a redraw of the visual component.
Refreshes all connections attached to this shape. Updates the visual representation of all connected connections.
Selects or deselects the shape.
Whether to select (true) or deselect (false) the shape. If not provided, defaults to true.
Returns:undefined | boolean
True if the selection state changed; otherwise undefined.
Serializes the diagram element to a JSON object.
{ options: any; dataItem?: string }
The element options and optional data item identifier.
Converts the shape to a JSON representation for serialization.
{ shapeId: string }
Object containing the shape's ID
Returns a string representation of the diagram element.
string
The element ID.
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
Updates the shape's bounds based on its visual representation and handles rotation and content alignment.
Updates the shape options from the model data.
The model data to extract options from
field?stringSpecific field to update, if any
Gets the visibility of the diagram element.
boolean
true when the element is visible; otherwise, false.
Sets the visibility of the diagram element.
Whether the element should be visible.