State management

An entire diagram's state and triggering of React components rerendering on each changes in the state is managed by the state management library called MobX. There are multiple ways how to get diagram's state:

1. Using storeRef.

   function YourDiagram () {
    const storeRef = useRef<RootStore>(null);
   
    // After store will be set you can use it like this:
    console.log(storeRef.current?.selectionState.selectedNodes)
   
    return (
      <Diagram
        storeRef={storeRef}
        initState={{ ... }}
      />
    );
   }

2. Using props provided to your custom component, like in this link example, where props contains link's entity.

3. Using useRootStore hook, which takes state from React context.

Mobx related

In order to make your component react on changes in state you have to wrap it into the observer, which you can import like this import { observer } from 'mobx-react-lite';. This way your component will be subscribed on changes in values you use. You can read more in MobX Documentation.

Thanks to MobX you can also subscribe on any changes in the state. In this example you can find how to log currently selected nodes on each changes.