Actions
An Action
represents an interaction with the diagram. It is a plain data structure and is transferable between the client and the server.
It holds information about the type of action in the kind
property, which is a unique string identifier for the action type.
A basic Action
is a “fire and forget” message and does not require a response. If a response is required, the RequestAction
interface should be used.
export interface Action {
kind: string;
}
A RequestAction
should ultimately be answered by a ResponseAction
. The requestId
property is used to match the request with the response.
export interface RequestAction extends Action {
requestId: string;
}
A ResponseAction
is sent as a response to a RequestAction
. The responseId
property is used to match the response with the request.
export interface ResponseAction extends Action {
responseId: string;
}
A RejectAction
should be fired to indicate when a request has failed. It contains a message
property with a human-readable error message and an optional detail
property with additional information.
export interface RejectAction extends ResponseAction {
kind: typeof RejectAction.KIND // 'rejectRequest'
message: string
detail?: JsonAny
}
A RequestModelAction
is used by the client to request the server to request a model. This is usually the first message to be sent to the source and is also used to initiate the communication.
export interface RequestModelAction extends RequestAction<SetModelAction> {
kind: typeof RequestModelAction.KIND // 'requestModel'
options?: JsonMap
}
A SetModelAction
is used by the server to send the client the model to be set. If a model is already present, it will be replaced by the one held in the newRoot
property.
export interface SetModelAction extends ResponseAction {
kind: typeof SetModelAction.KIND // 'setModel'
newRoot: SModelRoot
}
Associated Command: SetModelCommand
An UpdateModelAction
is used to update the model on the client side. If no model is present, it behaves as a SetModelAction
. If a model is present, the newRoot
property is used to update the model. The matches
property is used to match the new model elements with the existing ones. If animate
is set to true
, the model update will be animated. The cause
property can be used to specify the action that caused the model update.
export interface UpdateModelAction {
kind: typeof UpdateModelAction.KIND // 'updateModel'
newRoot?: SModelRoot
matches?: Match[]
animate?: boolean
cause?: Action
}
Associated Command: `UpdateModelCommand`
## RequestPopupModelAction
A `RequestPopupModelAction` is triggered when the mouse pointer overs an element and the client requests the server to provide a popup model for the element. The `elementId` property is used to identify the element being hovered, and the `bounds` property is used to specify the bounds of the popup.
```typescript
export interface RequestPopupModelAction extends RequestAction<SetPopupModelAction> {
kind: typeof RequestPopupModelAction.KIND // 'requestPopupModel'
elementId: string
bounds: Bounds
}
A SetPopupModelAction
is used by the server to send the client the popup model to be set. The newRoot
property holds the popup model. An EMPTY_ROOT
can be used as the newRoot
to remove the popup.
export interface SetPopupModelAction extends ResponseAction {
kind: typeof SetPopupModelAction.KIND // 'setPopupModel'
newRoot: SModelRoot
}
Associated Command: SetPopupModelCommand
A SetBoundsAction
is used to set the bounds of the elements in the model. The bounds
property holds an array of ElementAndBounds
objects, each of which contains the elementId
and the position
and size
of the element.
export interface SetBoundsAction extends Action {
kind: typeof SetBoundsAction.KIND // 'setBounds'
bounds: ElementAndBounds[]
}
Associated Command: SetBoundsCommand
A RequestBoundsAction
is sent from the server to the client to request the bounds of all elements in the model. The model is rendered invisibly so that the bounds can be derived from the DOM.
export interface RequestBoundsAction extends RequestAction<ComputedBoundsAction> {
kind: typeof RequestBoundsAction.KIND
newRoot: SModelRoot
}
Associated Command: RequestBoundsCommand
A ComputedBoundsAction
is used by the client to send the server the computed bounds of the elements in the model as a response to a RequestBoundsAction
.
export interface ComputedBoundsAction extends ResponseAction {
kind: typeof ComputedBoundsAction.KIND
bounds: ElementAndBounds[]
revision?: number
alignments?: ElementAndAlignment[]
}
A LoggingAction
is used to transmit logging data from one place to another.
export interface LoggingAction extends Action {
kind: typeof LoggingAction.KIND;
severity: string
time: string
caller: string
message: string
params: string[]
}
A SelectAction
is triggered when the user changes the selection in the diagram. The selectedElementsIDs
property holds the IDs of the elements that have been selected, and the deselectedElementsIDs
property holds the IDs of the elements that have been deselected.
The action can be forwarded to the server so it can react to the selection change.
This action can also be sent from the server to the client to update the selection state programmatically.
export interface SelectAction {
kind: typeof SelectAction.KIND
selectedElementsIDs: string[]
deselectedElementsIDs: string[]
}
Associated Command: SelectCommand
A SelectAllAction
is used to select or deselect all elements in the model. The select
property is used to specify whether the elements should be selected or deselected.
export interface SelectAllAction {
kind: typeof SelectAllAction.KIND
select: boolean
}
Associated Command: SelectAllCommand
A GetSelectionAction
is used to request the server to send the client the current selection state.
export interface GetSelectionAction extends RequestAction<SelectionResult> {
kind: typeof GetSelectionAction.KIND
}
Associated Command: GetSelectionCommand
A SelectionResult
is the response from a GetSelectionAction
. It contains the selectedElementsIDs
property, which holds the IDs of the selected elements.
export interface SelectionResult extends ResponseAction {
kind: typeof SelectionResult.KIND
selectedElementsIDs: string[]
}
A CollapseExpandAction
is sent from the client to the server to recalculate the diagram when the expansion state of elements change on the client side. The expandIds
property holds the IDs of the elements that have been expanded, and the collapseIds
property holds the IDs of the elements that have been collapsed.
export interface CollapseExpandAction {
kind: typeof CollapseExpandAction.KIND
expandIds: string[]
collapseIds: string[]
}
A CollapseExpandAllAction
is used to collapse or expand all elements in the model. The expand
property is used to specify whether the elements should be expanded or collapsed.
export interface CollapseExpandAllAction {
kind: typeof CollapseExpandAllAction.KIND
expand: boolean
}
An OpenAction
is triggered when the user double-clicks an element which has the openFeature
enabled. What should happen when this action is fired is highly application-specific and should be implemented on a per-application basis. The elementId
property holds the ID of the element that has been double-clicked.
export interface OpenAction {
kind: typeof OpenAction.KIND
elementId: string
}
A LayoutAction
is used to trigger a layout calculation on the entire diagram or on a subset of elements.
export interface LayoutAction {
kind: typeof LayoutAction.KIND
layoutType?: string
elementIds?: string[]
}
A CenterAction
is used to center the view on a set of elements. The elementIds
property holds the IDs of the elements to center on. The animate
property is used to specify whether the centering should be animated. The retainZoom
property is used to specify whether the zoom level should be retained, otherwise the zoom level is reset to its initial value. The zoomScale
property is used to specify the zoom level.
If elementIds
is empty, the action centers on the entire diagram.
export interface CenterAction extends Action {
kind: typeof CenterAction.KIND
elementIds: string[]
animate: boolean
retainZoom: boolean
zoomScale?: number
}
Associated Command: CenterCommand
A FitToScreenAction
is used to fit the selected set of elements to the current available drawing area. The elementIds
property holds the IDs of the elements to fit to the screen. The padding
property is used to specify the padding around the elements. The maxZoom
property is used to specify the maximum zoom level. The animate
property is used to specify whether the fit to screen should be animated.
If elementIds
is empty, the action fits the entire diagram to the screen.
export interface FitToScreenAction extends Action {
kind: typeof FitToScreenAction.KIND;
elementIds: string[]
padding?: number
maxZoom?: number
animate: boolean
}
Associated Command: FitToScreenCommand
A SetViewportAction
is used to set the viewport scroll and zoom values of the diagram. The elementId
property holds the ID of the viewport to manipulate (usually the root element). The newViewport
property holds the new scroll and zoom values. The animate
property is used to specify whether the centering should be animated.
export interface SetViewportAction extends Action {
kind: typeof SetViewportAction.KIND;
elementId: string
newViewport: Viewport
animate: boolean
}
Associated Command: SetViewportCommand
A GetViewportAction
is used to request the current viewport scroll and zoom values, and canvas bounds.
export interface GetViewportAction extends RequestAction<ViewportResult> {
kind: typeof GetViewportAction.KIND;
}
Associated Command: GetViewportCommand
A ViewportResult
is the response from a GetViewportAction
. It contains the viewport
property, which holds the scroll and zoom values, and the canvasBounds
property, which holds the canvas bounds.
export interface ViewportResult extends ResponseAction {
kind: typeof ViewportResult.KIND;
viewport: Viewport
canvasBounds: Bounds
}
A BringToFrontAction
is used to bring a set of elements to the front. The elementIDs
property holds the IDs of the elements to bring to the front.
SVG elements are rendered using the “painter algorithm” meaning that the rendering obeys the order of the elements in the DOM. This action manipulates the order of the elements in the DOM so that they are placed at the end and therefore rendered on top of other elements.
export interface BringToFrontAction extends Action {
kind: typeof BringToFrontAction.KIND;
elementIDs: string[]
}
An UndoAction
is used to undo the last operation on the stack of operations.
export interface UndoAction extends Action {
kind: typeof UndoAction.KIND;
}
A RedoAction
is used to redo the last undone operation.
export interface RedoAction extends Action {
kind: typeof RedoAction.KIND;
}
A MoveAction
is used to move a set of elements to new positions. The moves
property holds the moves to be performed. The animate
property is used to specify whether the moves should be animated. The finished
property is used to specify whether the moves are finished. The stoppable
property is used to specify whether the moves can be stopped.
export interface MoveAction extends Action {
kind: typeof MoveAction.KIND
moves: ElementMove[]
animate: boolean
finished: boolean
stoppable: boolean
}
Associated Command: MoveCommand
A HoverFeedbackAction
is triggered when the mouse pointer hovers over an element. The mouseoverElement
property holds the ID of the element the mouse is over, and the mouseIsOver
property is used to specify whether the mouse is over the element.
export interface HoverFeedbackAction extends Action {
kind: typeof HoverFeedbackAction.KIND
mouseoverElement: string
mouseIsOver: boolean
}
Associated Command: HoverFeedbackCommand
A CreateElementAction
is used to create a new element in the model. The containerId
property holds the ID of the container (a.k.a the parent element) in which the new element should be created, and the elementSchema
property holds the schema of the new element.
export interface CreateElementAction extends Action {
kind: typeof CreateElementAction.KIND
containerId: string
elementSchema: SModelElement
}
Associated Command: CreateElementCommand
A DeleteElementAction
is used to delete a set of elements from the model. The elementIds
property holds the IDs of the elements to be deleted.
export interface DeleteElementAction extends Action {
kind: typeof DeleteElementAction.KIND
elementIds: string[]
}
Associated Command: DeleteElementCommand
An ApplyLabelEditAction
is used to apply a label edit to a label element. The labelId
property holds the ID of the label to be edited, and the text
property holds the new text for the label.
export interface ApplyLabelEditAction extends Action {
kind: typeof ApplyLabelEditAction.KIND;
labelId: string,
text: string
}
Associated Command: ApplyLabelEditCommand
A ReconnectAction
is used to change the source and target of a routable element (e.g. edge). The routableId
property holds the ID of the routable element, and the newSourceId
and newTargetId
properties hold the IDs of the new source and target elements.
export interface ReconnectAction extends Action {
kind: typeof ReconnectAction.KIND
routableId: string
newSourceId?: string
newTargetId?: string
}
Associated Command: ReconnectCommand
An InitializeCanvasBoundsAction
is used to set the initial bounds of the canvas. The newCanvasBounds
property holds the new bounds for the canvas.
export interface InitializeCanvasBoundsAction extends Action {
kind: typeof InitializeCanvasBoundsAction.KIND
newCanvasBounds: Bounds
}
Associated Command: InitializeCanvasBoundsCommand
A SetUIExtensionVisibilityAction
is used to set the visibility of a UI extension. The extensionId
property holds the ID of the extension, and the visible
property is used to specify whether the extension should be visible. The contextElementsId
property holds the IDs of the elements that are subject to the action, for example the label target by an edit.
export interface SetUIExtensionVisibilityAction extends Action {
kind: typeof SetUIExtensionVisibilityAction.KIND;
extensionId: string
visible: boolean
contextElementsId: string[]
}
Associated Command: SetUIExtensionVisibilityCommand
An EditLabelAction
is used to trigger the editing of a label. The labelId
property holds the ID of the label to be edited.
export interface EditLabelAction extends Action {
kind: typeof EditLabelAction.KIND
labelId: string
}
A SwitchEditModeAction
is used to switch the edit mode, for example when moving an edge routing handle. The elementsToActivate
property holds the IDs of the elements to activate, and the elementsToDeactivate
property holds the IDs of the elements to deactivate.
export interface SwitchEditModeAction extends Action {
kind: typeof SwitchEditModeAction.KIND;
elementsToActivate: string[]
elementsToDeactivate: string[]
}
Associated Command: SwitchEditModeCommand
An AddRemoveBezierSegmentAction
is used to add or remove a bezier segment from an edge. The targetId
property holds the ID of the edge, and the actionTask
property is used to specify whether the segment should be added or removed.
export interface AddRemoveBezierSegmentAction extends Action {
kind: typeof AddRemoveBezierSegmentAction.KIND
targetId: string
actionTask: 'add' | 'remove'
}
Associated Command: AddRemoveBezierSegmentCommand
A CommitModelAction
is used to commit the current model state to the model source. The SModel (internal model) contains transitional states such as intermediate move positions, added handles, etc. When a user interaction that spans multiple commands finishes, the CommitModelAction
is fired to write the final state to the model source.
export interface CommitModelAction extends Action {
kind: typeof CommitModelAction.KIND
}
Associated Command: CommitModelCommand
A RequestExportSvgAction
is used to request the server to export the diagram to an SVG string.
export interface RequestExportSvgAction extends RequestAction<ExportSvgAction> {
kind: typeof RequestExportSvgAction.KIND
}
Associated Command: ExportSvgCommand
An ExportSvgAction
is used to send the SVG string of the exported diagram as a response to a RequestExportSvgAction
.
export interface ExportSvgAction extends ResponseAction {
kind: typeof ExportSvgAction.KIND
svg: string
}