Window manager

[KyDenZ]

Hello,

I have looked at your library and I wanted to congratulate you for your work!

I am interested in several of your components and I would like to know if you plan to add a window manager system later, a bit like this : https://github.com/nomcopter/react-mosaic

You have very good performances and I like your structure very much. It could be interesting for you to propose a window manager system, it stays in the style of your other components.

[mathuo]

Hi - Thanks for checking it out!

I think I understand what you are saying but to confirm, this would kind of be like having a GridView component (https://dockview.dev/docs/components/gridview) but where each component has some kind of header components and is draggable. In this scenario we would have a similar behaviour to what is supported in react-mosaic?

[KyDenZ]

Yes it is !

With a magnet system on the sides to put a panel on the whole length/width of the gille:

[abalter]

I would like this too.

[jccq]

Is this not exactly the docview? https://dockview.dev/docs/components/dockview

[mathuo]

Thanks for the comments. I've linked a PR here which will allow users to drag entire groups as well as individual tabs as is already supported, although each group will container 1+ tabs. I will add a link to a sandbox once I have an experimental build.

Here's a GIF of the entire group dnd feature.

Does this description sound along the lines of what you may be talking about here?

[KyDenZ]

Thanks for your feedback.

I tested your branch locally, I think we will need these features for a window manager:

• Only one tab per window (therefore prevent the drag of a tab on another), taking the whole width of the container (so the cross to close the tab would be on the right (keeping the possibility to add actions on the left of the cross)

example:

• The selected window should disappear from the dock while moving. This would allow the user to see the new rendering. (see the previous gif)

• With a magnet system on the sides to put a panel on the whole length/width of the grid (see the previous gif)

Thank you!

[mathuo]

Updates: Version 1.6.0

• Drag and Drop allows for dropping on the boundaries of the component, a magnetic snap to edge. It also allows for the drag of entire groups in one movement. https://dockview.dev/docs/components/dockview#drag-and-drop
• Full width tab mode allows a tab to occupy the entire width of the header when there is only one tab. https://dockview.dev/docs/components/dockview#full-width-tabs

To be investigated still:

• Allow an option that will remove the panel from the component whilst dragging, this would be an optional flag.

[abalter]

I've still noticed a few inconsistencies in behavior. I'll try to test and document them for you.

Also, I'd still love to see some sort of standalone example that has the minimum requirements in terms of linked files (js and CSS).

[mathuo]

Thank you, let me know if you do find anything and I will take a look.

Yes, I was thinking that the examples on the docs would be much better with a link to an interactive example with something like CodeSandbox, will take a look at getting something like this setup.

[mathuo]

This is a barebones running example using TypeScript just to help with any testing.

https://codesandbox.io/s/dockview-example-q21vuc

I will investigate a solution for sharing the examples you see in the docs too.

[abalter]

Thats great! It would be stupendous if it didn't depend on react. Some of us aren't really web developers but want to play around with building apps. I don't program in typescript or react. But I like to build stuff using javascript.

[mathuo]

Currently working on isolating the React code portion, making good progress on that. Hopefully should have an example soon.

I will try and produce some purely JavaScript examples too (without TypeScript) for those not using TypeScript.