mathuo / dockview

Zero dependency Docking Layout Manager. Supports Vanilla TypeScript, React and Vue.
https://dockview.dev
MIT License
651 stars 46 forks source link

Dynamic grids/panels to house tabs. #160

Open abalter opened 1 year ago

abalter commented 1 year ago

I would like to be able to have something like a panels with headers that I can add/close/min/max/drag/drop/reorder, but that can also have tab groups nexted within them.

I can't tell if this functionality already exists or not.

  1. Can a gridview panel have a header?
  2. Can a gridnew panel have controls?
  3. Can a gridview panel reorder/resize?
  4. Can a gridview panel nest tabs?

The example under https://dockview.dev/docs/components/dockview#group-header appears to show an empty panel or grid block that is closeable and one that is not. Neither are moveable. They are resizeable. They will not nest tabs.

mathuo commented 1 year ago

Hey - sorry for the late reply.

I believe the Dockview component may be what you are refering to (https://dockview.dev/docs/components/dockview)? This allows panels to be tabbed, where each panel has it's own header (the tab) and the order can be changed through either the API or user drag-and-drop interactions.

You can nest a seperate dockview control within a tab of another dockview control. An example of that can be found at https://dockview.dev/docs/components/dockview/#nested-dockviews. You shouldn't need additional code, it should "just work" whereby the two controls have indepedant drag and drop behaviours and interactions.

Let me know if the above is what you was referring too, otherwise if you can give me a bit more information happy to look further into the request?

abalter commented 1 year ago

NP! Yes, this is most of what I was looking for!

The "header" idea I was thinking about would be like if a panel was like an embedded "app." Imagine the panel had a menu with File>New, and that created a new nested tab. But you could also drag and drop the whole panel to a different position in the layout. So in the nested dockerview example, if the master "panel_3" instead of being a tab, had a full header like

-------------------------------------------------------------------  
| File  Edit  Etc.                                      _   ☐  ☒ |  
------------------------------------------------------------------  
| panel 1   X | panel 2   X |                                     |  
|             ----------------------------------------------------|
|    words words words                                            |
|    words words words                                            |
|    words words words                                            |
|    words words words                                            |
|                                                                 |
-------------------------------------------------------------------

How's that for some egregiously bad ascii art!

mathuo commented 1 year ago

Hey - there are some changes in the upcoming release that may help with this problem. I haven't completely finished writting the docs for the new changes but I've published them in their current state to give you an indication of the changes.

Please see https://dockview.dev/docs/next/components/dockview/#full-width-tabs

Let me know if this is along the lines of what you was originally looking for.

abalter commented 1 year ago

Yes! That is very cool!

Is it possible to have tab groups that aren't inside a "window" (which I think most people refer to as a "panel").

abalter commented 1 year ago

Also, just curious of it would be possible to use [jspanel] as the panels?

abalter commented 1 year ago

Also, I just noticed that you can't drag tabs between panels. Is that something that could be an option? I can situations where I would want to enable or disable that.