Visual/dynamic layout

[yeze322]

Description

fixes #1701

Make the node block size-sensitive in Visual Editor: action flow's layout will change along with a single node block's size automatically.
(leverages the react-measure lib as a new dependency)

More Context

Why we need this functionality?

In new action design, some $types have dynamic sizes. For example, when the prompt content inside a SendActivity node becomes very long, the node will have 2 or more lines to show full content.

This is a challenge to our layouter, we need to make the layout size-sensitive.

How it works?

1. Wrap a child node with the 'react-measure' lib, it will fire an onResize event whenever its DOM size changes;
2. Visual Editor maintains a layout computing chain, layout will be updated bottom-up via the onResize chain;
3. A size-sensitive parent node do several things:
   • remembers child nodes' size and position
   • observes child nodes' size & recompute the layout once it receives new size
   • recompute its layout (node positions, edge length) & report its new size to higher level
   • redraw itself with the new layout (saved as states)

What's changed?

1. style: update the css of FormCard to make basic node blocks can show multiline text
2. fix: reconnect the boundary propagation chain (onResize chain), it had been outdated for a while
3. refactor: extract common layout logic as a new hook useSmartLayout, used to observe node sizes and recompute new layout when needed
4. refactor: migrate widgets StepGroup, IfCondition, SwitchCondition, Foreach, Prompt to the new hook to make them size-sensitive

What's next?

1. Alan is working on new node design, we will have a PR for new version of visual nodes
2. I will keep optimizing UISchema especially the schema of ChoiceInput, hopefully in my next PR.
3. I plan to optimize the before-render size measurer to avoid flickering

Task Item

#1701

Screenshots

[github-actions]

Coverage increased (+0.3%) to 42.777% when pulling 9af7281 on visual/dynamic-layout into b58fa5b on master.