getState

returns the reactive state object of Diagram Editor

Example

// returns the current state of the editor
const state = $$("editor").getState();

Related samples

The returned state object contains the following properties and methods:

{
  gridStep: 20,
  zoom: 20,
  selected: {
    id: 100
  }
}

If the selected element is a link, the selected object stores the following data:

{
  selected: {
    id: 25,
    link: true
  },
  //...
}

Properties

• gridStep (number) - defines a moving step for shapes being dragged (in pixels). 10 by default
• zoom (number) - defines the current zoom level. 1 by default
• selected (object) - stores object with ID and additional info (in case of a link) of the element being selected currently (either a block/shape or link).

Methods

• $observe (function) - a handler to listen to changes in the current state of the editor. It takes 2 parameters:
  • prop (string) - a reactive property to listen changes of
  • handler (function) - a function to execute when changes are made. It takes the only argument:
    • value (any) - the current value of the reactive property. The type of the value (string, array, etc) depends on a reactive property being observed.
• batch (function)- allows to set several properties at once. Takes the only parameter:
  • props (object) - an object containing the pairs of the property name and the value to set.