Resize panels while dragging

[trusktr]

Continued from PR #6, relevant changes in commits 9a1a0d2 and 30aab4f. The other commits are from previous PRs.

If you merge this PR, it will merge all the other PRs too.

Summary

The magic begins! Namely,

• resize panels while dragging, instead of resizing them only after we've stopped dragging

Also

• switch to more modern Pointer Events
• don't forget to cleanup events on component cleanup
• improve JSX types and turn on JS type checking
• improve README
• improve border style a bit (still needs a little work, but looks much better)
• remove the drag indicator because we now resize panels dynamically instead
• remove solid-styled-components and add a 2-line globalStyle function instead, reduce library size

Verify

Switch to using "solidjs-resizable-splitter-component": "file:../../", in demo/src/package.json to use the local version of the lib, then npm run demo.

Now you should be able to resize panels and they will change size in real-time while dragging.

[milahu]

resize panels while dragging

thanks for that feature

in my last commits i ...

• fix children of SplitItem
• fix container height. all containers have layout:flex, so with height:100% we get wrong heights. instead, we must put all containers inside a "root" layout:flex container and instead of height:100% use flex-grow:1. as "root" container, i added the component SplitRoot
• use absolute mouse positions. i assume this is more precise, because cumulating relative movements also cumulates rounding errors
• introduce props.resizeDebounce for different resize strategies. for now the default is "live resize" (or "resize panels while dragging"). my plan is to use a debounced version of this as default, as currently, this is too wasteful. currently we resize at full speed (60 FPS or so), but we only need 10 FPS. by setting props.resizeDebounce to 1/0 we get the resize strategy "live move only the handle, resize containers on mouseup"

todo:

• update readme. for usage, simply point to demo
• update demo
• implement debounce of calcLayout
• remove tests, tooling, checks, ... i want to keep this minimal: splitter.jsx, splitter.d.ts, demo