Split layout: controlled handle position and event

vscode-elements / elements

Web component library for developing Visual Studio Code extensions

https://vscode-elements.github.io

MIT License

156 stars 27 forks source link

Split layout: controlled handle position and event #212

Closed RedGlow closed 3 weeks ago

RedGlow commented 3 weeks ago

Hello, I've had the need to handle the split layout position programmatically, and because of this I've made some modifications in a local branch. I have thought it could be useful for the component in general.

The change I'm proposing is a new property and event for the split layout:

a position property, as a 0-100 percentage representing the position of the handle, that can be both read and written;
a vsc-split-layout-position-changed event that is raised whenever the position of the handle changes.

If there are better ways to approach this feature, I'm available to make changes!

bendera commented 3 weeks ago

Hi, Thank you for your contribution! These are great ideas. Actually, the position could replace the initial-handle-position property.

I have a few thoughts about your code, I'll add some comments in a moment.

bendera commented 3 weeks ago

A few ideas came to mind, so I've created a new feature branch instead. It seems you committed with your working email. Is that okay with you?

RedGlow commented 3 weeks ago

A few ideas came to mind, so I've created a new feature branch instead. It seems you committed with your working email. Is that okay with you?

Yes, it's no problem!

RedGlow commented 3 weeks ago

btw, I'm not particularly expert with GitHub's pull request workflow, so please tell me in case if there's any change I can perform and what's the best way to do it (e.g.: the one about renaming the event).

bendera commented 3 weeks ago

Me neither...

So, what I planned are

Renaming the event (it's done in my local branch, I haven't published yet)
Dispatching the event only when a user interaction happens, practically on the mouse up, when the resizing has been finished. It's done in my local branch.
I'm thinking about the data type of the position property. It should be string, because I want to add the ability to set this value as a percentage or in pixels. The two types behave differently when the container itself is also resizable, and both are valid use cases. Once the component is set to use percentage, it will continue using percentage values from then on, and the same with pixels. That's clear. But what should happen when the initial-handle-position is a percentage value but position is pixel-based? This is my dilemma.