Shape

Name	Type	Default	Description
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.
diagram	Diagram		The diagram that contains this shape.
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.
type	ShapeType | FlowchartShapeType		The type of the shape (e.g., 'rectangle', 'circle', 'text', etc.) or FlowchartShapeTypes.Extract.
visual	any		The visual representation (Group) of this diagram element.

Constructors

Shape

(options: any, diagram: any)

Creates a new Shape instance.

Parameters

options

any

Configuration options for the shape

diagram

any

The diagram that will contain this shape

Methods

bind
Binds event handlers to one or more events.
Parameters event EventNames | {[key: string]: Handler} The event name(s) to bind to, or an object mapping event names to handlers handlers? EventHandlers The event handler(s) to bind. Can be a function or an object mapping event names to handlers one? boolean If true, the handler will be executed only once and then automatically unbound
Returns Shape The Observable instance for method chaining

bounds
Gets or sets the bounds of the shape.
Parameters value? any 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

clone
Returns a clone of this shape.
Returns Shape A new Shape instance that is a copy of this shape

connections
Gets connections of this shape based on type.
Parameters type? any The type of connections to retrieve: 'in' for incoming, 'out' for outgoing, or undefined for all connections.
Returns any[] Array of connections

content
Gets or sets the content of the shape.
Parameters content? any The content to set. If not provided, returns the current content.
Returns any The current content when used as a getter

createShapeVisual
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.

destroy
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.

first
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.
Parameters eventName EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Shape The Observable instance for method chaining

getConnector
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.
Parameters nameOrPoint any The name of a Connector or a Point.
Returns any The connector matching the name or closest to the point

getPosition
Gets the position of the shape at a specific side.
Parameters side any The side to get position for (e.g., 'top', 'bottom', 'left', 'right', 'center')
Returns any The position point at the specified side

one
Binds event handlers that will be executed only once. After execution, the handlers are automatically unbound.
Parameters eventNames EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Shape The Observable instance for method chaining

position
Gets or sets the position of the shape.
Parameters point any The position to set. If not provided, returns the current position.
Returns Point The current position when used as a getter

redraw
Redraws the shape with new options.
Parameters options any The options to apply when redrawing the shape

redrawVisual
Redraws the shape's visual representation. Updates both the visual and content if present.

refresh
Refreshes the visual representation of the diagram element. Triggers a redraw of the visual component.

refreshConnections
Refreshes all connections attached to this shape. Updates the visual representation of all connected connections.

rotate
Rotates the shape by the specified angle.
Parameters angle? any The rotation angle in degrees. If not provided, returns the current rotation. center? any The center point for rotation. If not provided, uses the shape's center. undoable? any Whether the rotation should be undoable. Defaults to true.
Returns any The current rotation when used as a getter

select
Selects or deselects the shape.
Parameters value any 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

serialize
Serializes the diagram element to a JSON object.
Returns any An object containing the element's options and data item information

toJSON
Converts the shape to a JSON representation for serialization.
Returns { shapeId: any; } Object containing the shape's ID

toString
Returns a string representation of the diagram element.
Returns any The ID of the element as a string

trigger
Triggers an event, calling all bound handlers for that event.
Parameters eventName string The name of the event to trigger eventArgs? any Optional event arguments to pass to the handlers
Returns boolean True if any handler called preventDefault(), false otherwise

unbind
Removes event handlers from events.
Parameters eventName? string The event name to unbind from. If undefined, all events are unbound handler? EventHandlers The specific handler to remove. If undefined, all handlers for the event are removed
Returns Shape The Observable instance for method chaining

updateBounds
Updates the shape's bounds based on its visual representation and handles rotation and content alignment.

updateModel
Updates the shape's model data and optionally synchronizes changes.
Parameters syncChanges any Whether to synchronize changes immediately

updateOptionsFromModel
Updates the shape options from the model data.
Parameters model? any The model data to extract options from field? any Specific field to update, if any

visible
Gets or sets the visibility of the diagram element.
Parameters value? any If provided, sets the visibility. If undefined, returns the current visibility.
Returns boolean | void The current visibility when used as a getter