Flyer53 / jsPanel4

A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.
https://jspanel.de/
Other
317 stars 57 forks source link

Nested panels within a grid that automatically resize. #197

Open abalter opened 2 years ago

abalter commented 2 years ago

Thinking about using jspanel for an ide type app. Is it possible to have nested panels that automatically resize in a grid. For example, like golden layout.

I looked through the examples, and I couldn't find any with nested panels.

Flyer53 commented 2 years ago

Hi there,

Well, I did not design any feature with this in mind particularly. But I think a few things are possible with the current jsPanel version.

I created a very basic example that positions some panels in a css grid. The panels adjust their size when the window is resized. But as soon as you drag or resize a panel "by hand" it will not respond to the grid as you would want. I guess it could be improved a lot with some custom code ...

Take a look at the demo (and its source code) and let me know what you think.

https://alpha.jspanel.de/docs/demos/test-grid.html

Flyer53 commented 1 year ago

@abalter Any news on this topic? Did you try anything more?

abalter commented 1 year ago

@Flyer53 unfortunately, the dynamic and responsive panel accommodation is essential to what I'm trying to achieve.

https://github.com/vitmalina/w2ui/issues/2341#issuecomment-1336762380

abalter commented 1 year ago

Hey @Flyer53. I happened upon a codepen that seems to have a pretty simple algorithm for expanding a panel into a parent div. I wonder if this would provide a simple way to make docking jspanels? Something like these libraries? https://golden-layout.com/ https://node-projects.github.io/dock-spawn-ts/#

Flyer53 commented 1 year ago

Hi Ariel, thanks for the link to this nice pen. I just wonder whether you ever took a look at the regular jsPanel snap feature. It seems to be very similar to what the pen does:

https://jspanel.de/#options/dragitsnap

Let me know what you think ...

Regards, Stefan