getState

returns the reactive state object of Diagram Editor

object getState();

object

state object

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

Details

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
  },
  //...
}

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

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