Creates a new DiagramView instance.
The unique identifier for the diagram.
The HTML element or canvas where the diagram will be rendered.
Optionalinitial: Partial<Omit<IDiagram, "id">>Initial properties for the diagram.
Optionaloptions: DiagramViewOptionsConfiguration options for the diagram view.
The unique identifier of the diagram, which is used to reference the diagram within the application and for serialization purposes.
An array of nodes that belong to the diagram, which represent the entities and elements that can be connected and manipulated within the diagram.
An optional array of groups that belong to the diagram, which can be used to organize nodes into visual collections. Grouped nodes maintain their relative positions.
An array of layers that belong to the diagram, which can be used to organize nodes into different visual layers.
Optionalsheet_An optional identifier for the sheet associated with the diagram, which can be used to apply specific styles and configurations to the diagram's nodes and connections.
OptionalbackgroundAn optional background fill style for the diagram, which can be used to set the background color or gradient of the diagram area.
OptionalmetaAn optional metadata object for the diagram, which can be used to store additional information about the diagram that is not part of its core structure. This can include custom properties, annotations, or any other relevant data that is not related to diagram rendering.
Protected ReadonlyownsOptionalcontextOptional context menu invoked when the user right-clicks on the canvas. Assign a DiagramContextMenu or ContextMenu instance here.
ProtectedcoordinatesProtectedcacheProtectedhostProtectedcanvasProtectedcontextProtectedpixelProtectedcanvasProtected Readonlyevent_Protected OptionalresizeProtectedselected_ProtectedselectionProtectedfitProtectedanimationsProtectedguidesProtectedkeyboardProtecteddragProtecteddragProtected Optionalhover_Protected Optionalclick_Protected Optionaldouble_The diagram's sheet repository, for managing and applying spec sheets to the diagram and its nodes.
The SheetRepository instance associated with the diagram.
Sets the diagram's sheet repository, allowing for the management and application of spec sheets to the diagram and its nodes.
The SheetRepository instance to set for the diagram. Cannot be null or undefined.
The diagram's asset store, for registering and resolving image/SVG asset sources.
The AssetStore instance associated with the diagram.
Gets the metadata object for the diagram. If no metadata exists, an empty object is returned.
The metadata object for the diagram.
Sets the metadata object for the diagram. If a null or undefined value is provided, the metadata is cleared.
The metadata object to set for the diagram.
Gets the active render mode for this view.
The current render mode, either 'view' or 'editing'.
Retrieves a node by its ID.
The ID of the node to retrieve.
The node with the specified ID, or undefined if not found.
Returns a group by its ID.
The ID of the group to return.
The group with the specified ID, or undefined if not found.
Retrieves a layer by its ID.
The ID of the layer to retrieve.
The layer with the specified ID, or undefined if not found.
Add or remove a node from a group. If the groupId is undefined, the node is removed from any group it belongs to. A node can only belong to one group at a time. If the node is already in a different group, it will be removed from that group before being added to the new group.
The node or node ID to add to the group.
The ID of the group to add the node to, or undefined to remove the node from any group.
ProtectedgroupAdd or remove a node from a layer. If the layerId is undefined, the node is removed from any layer it belongs to. A node can only belong to one layer at a time. If the node is already in a different layer, it will be removed from that layer before being added to the new layer.
The node or node ID to add to the layer.
The ID of the layer to add the node to, or undefined to remove the node from any layer.
Deletes a group from the diagram. Effectively ungrouping nodes.
The ID of the group to delete.
Resolves the concrete image source for a node image reference.
Clears all in-memory image assets. Intended for teardown paths.
Gets the value of a specific metadata key for the diagram.
Optionalkey: stringThe key of the metadata to retrieve.
The value of the specified metadata key, or undefined if the key does not exist.
Sets the value of a specific metadata key for the diagram.
The key of the metadata to set.
The value to set for the specified metadata key.
Deletes a specific metadata key from the diagram.
Optionalkey: stringThe key of the metadata to delete. If not provided, all metadata for the diagram is deleted.
Gets the value of a specific metadata key for a node.
The node or node ID to retrieve metadata from.
The key of the metadata to retrieve.
The value of the specified metadata key, or undefined if the key does not exist.
Sets the value of a specific metadata key for a node.
The node or node ID to set metadata for.
The key of the metadata to set.
The value to set for the specified metadata key.
Deletes a specific metadata key from a node.
The node or node ID to delete metadata from.
Optionalkey: stringThe key of the metadata to delete. If not provided, all metadata for the node is deleted.
Loads the diagram data from a serialized JSON object.
The serialized diagram data.
Optionalserializer: ISerializerThe serializer to use for reading the data (optional if source is already an object).
The diagram instance.
Writes the diagram data to the specified serializer.
The serializer to use for writing the data.
The serialized diagram data.
Exports the current diagram in a native format. Supported formats are JSON text, UTF-8 bytes, and Blob (browser runtime).
The format to export the diagram in ('json', 'bytes', or 'blob'). (defaults to 'json')
Whether to pretty-print the output (applicable to JSON format). (defaults to true)
The serializer to use for exporting the diagram. (optional)
The exported diagram data in the specified format.
Saves the current diagram directly from the model. In Node.js this writes to the file system; in browsers this triggers a file download.
The options for saving the diagram, including path, file name, serializer, pretty-printing, and MIME type.
A promise that resolves to the path or download URL of the saved file.
ProtectedapplyProtectedserializeProtectedserializeProtectedcreateCreates a new layer with the specified properties.
The ID of the layer.
The name of the layer.
Whether the layer is visible.
The nodes within the layer.
The created layer.
Protected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleProtected ReadonlyhandleCleans up resources used by the DiagramView, including event listeners and the canvas element if it was created by the view.
Clears all nodes, layers, metadata, and assets from the diagram, effectively resetting it to an empty state while retaining the same ID. Intended for reuse scenarios where the diagram instance should be preserved but its content should be cleared.
Returns the cache used by the DiagramView.
The ViewCache instance storing precomputed values for efficient rendering.
Returns the coordinate system used by the DiagramView.
The CoordinateSystem instance managing transformations for this view.
Returns the keyboard manager used by the DiagramView.
The DiagramKeyboard instance managing keyboard interactions for this view.
Sets the keyboard manager for the DiagramView, allowing custom key mappings.
The DiagramKeyboard instance to set for this view.
Returns the canvas element used by the DiagramView.
Checks if a node is currently selected.
The node to check.
True if the node is selected, false otherwise.
Selects a node.
The node to select.
Determines whether to select related nodes or isolate the selection.
Deselects a node.
The node to deselect.
Determines whether to deselect related nodes or isolate the deselection.
Clears the selection of all nodes.
Selects all nodes in the diagram. Honors the enable_multi selection option to determine whether multiple nodes can be selected at once.
Toggles the selection state of a node.
The node to toggle.
void
Sets the viewport of the diagram with a given pan and/or zoom.
The viewport changes to apply.
Fits the diagram content to the width of the viewport, with optional padding and alignment.
Optionaloptions: { padding?: number; alignment?: FitAlign }Optional configuration for padding and alignment.
Fits the diagram content to the viewport, with optional padding and alignment.
Optionaloptions: { padding?: number; alignment?: FitAlign }Optional configuration for padding and alignment.
Set the zoom level directly, optionally around a canvas-space center point.
The desired zoom level.
OptionalcenterX: numberThe x coordinate (canvas space) to keep visually stable during zoom.
OptionalcenterY: numberThe y coordinate (canvas space) to keep visually stable during zoom.
The animation mode for the zoom operation.
Zoom the diagram by multiplying current zoom by a factor, optionally around a canvas-space center point.
The zoom multiplier. Values greater than 1 zoom in and values between 0 and 1 zoom out.
OptionalcenterX: numberThe x coordinate (canvas space) to keep visually stable during zoom.
OptionalcenterY: numberThe y coordinate (canvas space) to keep visually stable during zoom.
The animation mode for the zoom operation.
Pan the diagram by the specified delta values.
The amount to pan in the x direction.
The amount to pan in the y direction.
The animation mode for the pan operation.
Deletes a node from the diagram.
The ID of the node to delete.
Deletes a layer from the diagram.
The ID of the layer to delete.
Renders the diagram onto the canvas, including any selection markers.
By default, both nodes and selection markers are rendered, but this can be controlled with the what parameter.
Accepts the following:
A RenderScope indicating what to render.
ProtectedrenderUpdates the grid settings for the diagram and re-renders it to reflect the changes.
A partial object containing the grid properties to update. Only the provided properties will be updated, while the others will remain unchanged.
Updates the guides settings for the diagram.
A partial object containing the guide properties to update. Only the provided properties will be updated, while the others will remain unchanged.
Resets the viewport to the default position and zoom level, and clears the selection.
Exports the full visible diagram content as an image blob. This export is uncropped and ignores the current viewport pan/zoom. The exported image will be sized to fit the bounds of all visible nodes, plus optional padding.
The options for writing the image, including padding and MIME type.
The serializer to use for writing the image.
A promise that resolves to a Blob containing the exported image.
Exports and saves the full visible diagram content as an image file. In Node.js this writes to the file system; in browsers this triggers a download.
Calculate the bounding rectangle that encompasses all visible nodes in the diagram.
The bounding rectangle of all visible nodes, or undefined if there are no visible nodes.
ProtectedstartProtectedstopProtectedstopProtectedhitReturns the first node found at the specified coordinates, if any.
The x-coordinate to test.
The y-coordinate to test.
ProtectedhitReturns all nodes at the specified coordinates. Nodes are returned in order, so the topmost node is first in the array.
The x-coordinate to test.
The y-coordinate to test.
An ordered array of nodes at the specified coordinates.
ProtectedhitReturns the handle at the specified coordinates, if any.
The x-coordinate to test.
The y-coordinate to test.
Optionaltarget: INodeThe target node to test, if any.
The handle at the specified coordinates, or NodeHandle.NONE if none is found.
ProtectedhitReturns the connection-enabled handle at the specified coordinates, if any. Each node type can define its own connection handles, which may differ from the standard resize/move handles.
The x-coordinate to test.
The y-coordinate to test.
Optionaltarget: INodeThe target node to test, if any.
The connection-enabled handle at the specified coordinates, or { handle: NodeHandle.NONE, point: { x: 0, y: 0 } } if none is found.
ProtectedgetSelect the cursor style reflecting a node handle.
The node handle to determine the cursor style for.
The CSS cursor style for the specified node handle.
ProtectedsetProtectedemitProtectedpointerRespond to pointer down events on the canvas, handling selection and panning based on the event properties and current selection options.
The pointer event.
ProtectedpointerRespond to pointer move events on the canvas, updating the cursor style based on hit testing and handling panning if the primary button is pressed.
The pointer event.
ProtectedpointerRespond to pointer up events on the canvas, releasing pointer capture and re-rendering the diagram if necessary.
The pointer event.
ProtectedwheelRespond to wheel events on the canvas, handling zooming when the Ctrl or Meta key is pressed and panning otherwise.
The wheel event.
ProtecteddblRespond to double-click events on the canvas, invoking the double-click listener if one is set.
The pointer event.
ProtectedkeydownRespond to keydown events on the window, currently does nothing but can be used for keyboard shortcuts in the future.
The keyboard event.
ProtectedkeyupRespond to keyup events on the window.
The keyboard event.
ProtectedshouldProtectedcontextmenuRespond to context menu events on the canvas, preventing the default context menu from appearing.
The pointer event.
A class representing a diagram in 'view' mode. This class extends the base Diagram model and adds properties and methods specific to rendering and interacting with the diagram.
It includes a coordinate system for managing transformations and a cache for storing precomputed values related to nodes for efficient rendering.