Initial resizable implementation

[megheaiulian]

Initial implementation

Implement a pionjs component that can be used in a container to resize 2 adjacent elements.

The component itself is just going to be a simple line.
On hover the line should get a bit thicker and the cursor should change to resize.
Upon dragging it should resize the containers.
The resize should be a simple function that receives the element mouse/touch position.
It should take into consideration how the elements are already sized.

Why not use splitjs https://split.js.org/

Its more complicated then what we need.
We don't need more then 2 adjacent container.
No complicated multi columns/rows setup.
We need it to work with the default values set via CSS.
Must work in Shadow DOM.
Must be able to transform between percentages and pixel units.

Structure

Overall the repo should have the same structure as https://github.com/Neovici/cosmoz-slider and include:

• stories
• tests
• all code in typescript
• linting

[megheaiulian]

@admirceric

At least in the initial version the component itself must be just the resize handle line itself.
Some usage idea (must be refined).

import {html} from '@pionjs/pion';
import { resizeElement }  from './resizers';
return html`
<re-sizable .resizer=${resizeElement({ direction: horizontal})  }></re-sizable>
`

Inside the resizable component we will handle styling, mouse up, mousedown and mousemove.
Mouse move will call resizer with some properties to calculate and apply the sizing.