Persist open state for list items during session

[pinussilvestrus]

Is your feature request related to a problem? Please describe

This is a follow up of: https://github.com/bpmn-io/properties-panel/issues/86

Introducing #86, list items are completely unique per id. Therefore they have their own state depending on what element is selected. Since the items are unique per id, they got rerendered when a new element got selected.+

That causes that the state got lost when switching from one element to another and switch back again (the item is closed, no matter it was opened after the switch).

Describe the solution you'd like

For a smoother editing experience and to avoid opening list items multiple times during element switches, it should be possible to persist the opened state per item during a session (or multiple sessions).

We have the LayoutContext which was meant for exactly this purpose, but we are currently not using it.

Describe alternatives you've considered

• keep things as they are
• next to list items state, we could potentially persist any other layout changes (cf. bpmn-io/bpmn-properties-panel#61)
• persist layout not only during runtime, but also make it possible to persist them anywhere, cf. propertiesPanel.layoutChanged.

Additional context

Cf. #86

[pinussilvestrus]

A sketch of how to use the LayoutContext to persist the open state (cf. this branch)

import {
  useContext,
  useMemo,
  useState
} from 'preact/hooks';

import {
  LayoutContext
} from '../../context';

export default function CollapsibleEntry(props) {

  const {
    // ...
    open: shouldOpen
  } = props;

  const {
    layout,
    setLayoutForKey
  } = useContext(LayoutContext);

  const layoutKey = useMemo(() => {
    return `collapsible-${id}`;
  }, [ id ]);

  const collapsibleLayout = layout[layoutKey] || {};

  const [ open, setOpen ] = useState(shouldOpen || collapsibleLayout.open);

  const toggleOpen = () => {
    setOpen(!open);
    setLayoutForKey(layoutKey, {
      ...collapsibleLayout,
      open: !open
    });
  };

  // ...
}

{
  "collapsible-StartEvent_1-output-0": {
    "open": true
  },
  "collapsible-StartEvent_1-output-1": {
    "open": false
  },
  "collapsible-StartEvent_1-output-2": {
    "open": true
  },
  "collapsible-Task_1-output-0": {
    "open": false
  },
  "collapsible-StartEvent_1-output-3": {
    "open": false
  }
}

[pinussilvestrus]

Open for discussion:

• How should the layout API look like?
• How to properly store the data inside the context?
• For which components does it make sense?
• Should we promote this? Event listeners (propertiesPanel.layoutChanged)?

[pinussilvestrus]

With https://github.com/bpmn-io/properties-panel/pull/99 we've built a fundamental to use the layout context for individual components. Let's use that for list items (and nested list items) as well 👍