feat(bpmn): persist layout across sessions

[marstamm]

closes #2638

[nikku]

I'm wondering: Shall we also persist DMN and FORM properties panel state? I don't see a reason we should not.

[nikku]

I can confirm that it works as expected. Good stuff!

However I found an annoying flicker that degrades the perceived utility of this feature: The app feels shaky, as demonstrated by the following screen capture (switching between two tabs):

Is there a way we can avoid this? One way could be to update the properties panel layout pre-mount? Potentially other options exist.

[marstamm]

It looks like it marks headers as sticky for one frame. My guess is that because we change the layout before mounting, the scroll position in an unmounted state is always "out of screen". I'll check if we can disable sticky headers checks when the properties panel is unmounted and if this fixes it

[barmac]

My gut feeling is some problems may come from this: https://github.com/bpmn-io/properties-panel/blob/main/src/hooks/useStickyIntersectionObserver.js

[nikku]

useLayoutEffect could be worth a try (cf. explaination).

[marstamm]

I can confirm that this is not caused by applying the layout, In Camunda Modeler 5.10.0 opened Groups are also initially rendered as sticky:

[marstamm]

So you are both right @barmac and @nikku 🎉

• The header is sticky, which is caused by the stickyIntersection hook
• The Group is also rendered in it previous state for 1 render cycle, which is fixed by useLayoutEffect

Thank you for your inputs, the fixes in the properties panel are here: bpmn-io/properties-panel#238

[marstamm]

I updated the branch with the changes made in the properties panel. Feel free to try it out again

[nikku]

I'm kinda still impressed how natural (aka intuitive, not bad) this feels. Thanks for getting that done @marstamm!

I also like how this naturally just works with connector templates:

---

As a follow up in the UX department I'd suggest the following:

• Introduce error indicators for closed sections
• Hook up connector template errors with our linting infrastructure

[nikku]

Added @YanaSegal and @christian-konrad as reviewers so that both are in the loop here (non-blocking).

[christian-konrad]

Great contribution, improving the QoL of both new and power users!

Hook up connector template errors with our linting infrastructure

We have an (soon to be defined) epic for it: https://github.com/camunda/product-hub/issues/498

Introduce error indicators for closed sections

I like that idea, remembered we discussed that quite a while ago @YanaSegal