feat: support multi-line node block in Visual Editor

[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)
4. After a node is measured, its size will be cached in a global cache. This will improve the flickering problem significantly.

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
5. feat: implement a global DesignerCache class for caching calculated node sizes

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. lg hook is stll causing the flickering problem, waiting for Leilei's indexer work.

Task Item

#1701

Screenshots

[github-actions]

Coverage increased (+0.3%) to 42.783% when pulling fefd425 on yeze322:visual/dynamic-layout into 3a9b11b on microsoft:master.

[cwhitten]

Is there a limit to the vertical/horizontal growth potential of a node? It shouldn’t be unbounded.

…

On Tue, Feb 25, 2020 at 2:19 PM Andy Brown ***@***.***> wrote: Merged #2005 <#2005> into master. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#2005?email_source=notifications&email_token=AAI2MYFT4AVXPB5TH2XRIXDREWKPVA5CNFSM4KXG7IO2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOW4HWJNY#event-3071239351>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAI2MYDDGR2XDJ2GTXZW7DDREWKPVANCNFSM4KXG7IOQ> .

[yeze322]

@cwhitten No there isn't. Maybe we can add a max-height css property to limit the bounds?

[cwhitten]

Yes that sounds like a good idea. And we may need to truncate text on the final line when we hit that boundary. Thoughts?

…

On Tue, Feb 25, 2020 at 6:59 PM zeye ***@***.***> wrote: @cwhitten <https://github.com/cwhitten> No there isn't. Maybe we can add a max-height css property to limit the bounds? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2005?email_source=notifications&email_token=AAI2MYBOFIC2VGRU54PI7ODREXLIBA5CNFSM4KXG7IO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM6TCCA#issuecomment-591212808>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAI2MYBDXWDEE63SYHBLS5LREXLIBANCNFSM4KXG7IOQ> .

[yeze322]

@cwhitten that's right, let me update some css