Diagram properties in TypeScript

18 Nov 20182 minutes to read

Get diagram bounds

The get the diagram bounds, the getDiagramBounds method is used. The following code example shows how to get the diagram bounds

   /**
   * Retrieves the bounding rectangle that encloses the entire diagram
   */
  let bounds = diagram.getDiagramBounds();

Refresh diagram

Refreshing the diagram will re-render the entire diagram component while preserving all the property changes you have made. The refresh method is used to refresh the diagram.

   /**
   * Refresh the diagram
   */
 diagram.refresh();

Clear diagram

The clear method is used to clear the diagram. It removes all nodes and objects, making the diagram empty.

   /**
   * Clears the diagram
   */
 diagram.clear();

Destroy diagram

The destroy method is used to completely remove the diagram component from the DOM and free up any associated resources. This method is useful when you no longer need the diagram and want to ensure that all memory and resources allocated to it are properly released.

   /**
   * Destroys the diagram
   */
 diagram.destroy();

Custom cursor

The customCursor collection specified in the diagram is called on every mouse movement within the diagram is used to set the cursor based on the action. The getCursor function is then utilized to retrieve the cursor style for the specified action.

The following example demonstrates how to apply custom cursors for the Select and Drag tools using the customCursor property.

Get custom tool

The getCustomtTool function is called when a mouse down event occurs on diagram elements. This function allows you to specify the tool to use based on the action. The getTool method is used to retrieve the tool that handles a particular action.

In the following example, getCustomTool is used to clone a node when clicking on the user handle.

Background color

The backgroundColor property of the diagram is used to set the background color for the entire diagram area. This property accepts various color formats such as color names, hex codes, RGB, or RGBA values.

AddInfo

The addInfo property of the diagram is used to store additional information or metadata related to the diagram. This property can hold custom data that may be useful for various purposes.

In the following example, both backgroundColor and addInfo are set for the diagram:

Mode

There are two types of mode available for rendering diagrams:

• SVG Mode: Renders the diagram objects as SVG elements.
• Canvas Mode: Renders the diagram in a canvas.

NodeDefaults and ConnectorDefaults

The getNodeDefaults and getConnectorDefaults properties are used to assign default values to nodes and connectors, respectively. The properties set in getNodeDefaults and getConnectorDefaults have higher priority when setting default values.

The following example demonstrates how to set getNodeDefaults and getConnectorDefaults.

Diagram settings

The inversedAlignment property in diagramSettings controls the alignment of labels and ports in a node. By default, inversedAlignment is set to true.

The example below demonstrates how to set inversedAlignment for a diagram to align node labels accordingly.