Shape
Definition
Package:@progress/kendo-angular-diagrams
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 or sets the bounds of the shape.
The bounds to set, or a string constant for different bound types ('TRANSFORMED', 'ABSOLUTE', 'ROTATED'). If not provided, returns the current bounds.
Returns:any
The bounds of the shape
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:any[]
Array of connections
Gets or sets the content of the shape.
The content to set. If not provided, returns the current content.
Returns:any
The current content when used as a getter
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.
The name of a Connector or a Point.
Returns:any
The connector matching the name or closest to the point
Gets the position of the shape at a specific side.
The side to get position for (e.g., 'top', 'bottom', 'left', 'right', 'center')
Returns:any
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
Gets or sets the position of the shape.
The position to set. If not provided, returns the current position.
Returns:The current position when used as a getter
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.
Rotates the shape by the specified angle.
The rotation angle in degrees. If not provided, returns the current rotation.
center?anyThe center point for rotation. If not provided, uses the shape's center.
undoable?anyWhether the rotation should be undoable. Defaults to true.
Returns:any
The current rotation when used as a getter
Selects or deselects the shape.
Whether to select (true) or deselect (false) the shape. If not provided, defaults to true.
Returns:boolean
True if the selection state changed, false otherwise
Serializes the diagram element to a JSON object.
any
An object containing the element's options and data item information
Converts the shape to a JSON representation for serialization.
{ shapeId: any }
Object containing the shape's ID
Returns a string representation of the diagram element.
any
The ID of the element as a string
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's model data and optionally synchronizes changes.
Whether to synchronize changes immediately
Updates the shape options from the model data.
The model data to extract options from
field?anySpecific field to update, if any
Gets or sets the visibility of the diagram element.
If provided, sets the visibility. If undefined, returns the current visibility.
Returns:boolean | void
The current visibility when used as a getter
Properties
adorner
any
The adorner used for visual feedback during interactions.
connectors
any[]
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.