search

node-projects / dock-spawn-ts

A TypeScript HTML Docking Framework (fork of dock-spawn)
MIT License
127 stars 29 forks source link

How to understand the different grid elements. #75

Open abalter opened 1 year ago

abalter commented 1 year ago

There seem to be at least two different kinds of grid elements. In the IDE demo, there is an area with some source code tabs, with the tabs at the top. There are also panels which have a persistent header at the top and tabs at the bottom. When one of those tabs is clicked the header title changes to reflect which was chosen. Also, in these (the inverted tabs with header), the close "X" is at the top right of the header, but applies to the currently active tab.

It would be great to have some documentation about the different kinds of panels and tabs, as well as how to integrate other features such as menus, etc.

jogibear9988 commented 1 year ago

There is a bit of documentation here: https://node-projects.github.io/dock-spawn-ts/

But if you'd like, feel free to add more :-) They UI mostly likes to mimic the UI of Visual Studio. So you have similar containers as there.

abalter commented 1 year ago

If I can figure out how to do things I'll make notes and maybe could create a read-the-docs page.

jogibear9988 commented 1 year ago

Have you also seen our designer, where we use dockspawn-ts in the sample? see: https://node-projects.github.io/web-component-designer-demo/index.html

abalter commented 1 year ago

I did, but it wasn't working. I just tried it in Edge as opposed to Firefox, and now I see! I'll play around with it. Looks exciting.

...Later... That is really cool! I think you are on your way to filling a great niche between BoxySVG and Gravit and just working in code. I've used those two programs for designing SVG stuff (like for my wife's website), but I was always going back and forth between the graphical and a code editor.

Also, other than two things, I think this has all of the capabilities I'm looking for.

1) Your app, like most apps, including data science apps, has a global nav/menu across the top. Not a deal breaker. However, almost all the controls generally apply only to the source code edition. I would like to be able to put a menu on the header bar of a collection (of text or non-text panels), or maybe even the title bar of each non-text panel. It seems like this could save space.

2) Being able to move groups of panels together as in #72. The reason is that I might want to move the source editing to a different section of the app. I should be able to move them together. Or, if I have a group of non-text panels (say file explorer, help files, package manager) that I like to have together, I'd like to be able to move them as a block to a new area. Also not a deal breaker.

Based on what I see here, I think I'm going to actually start building this out.

Also, I may use one of these FOSS Vanilla JS UI libraries for specific elements:

This will only be just the framework. I have very little idea how I will implement any functionality---especially when I'm not really an app programmer. My hope is that if I can show proof-of-principle, I can motivate others to jump onboard.

jogibear9988 commented 1 year ago

The designer works also in firefox, but only nightly at the moment. Cause I use "import assertions" wich have not yet landed in normal firefox. But if someone uses a build chain to deploy their site, it is no problem for them. The Designer sample, also is no full application it's only a demonstration whats possible.

The move of tab groups is not so easy, as I've written. The multi Slection is the easy part, but that we do not support docking in dialogs is the deal braker. It could be possible, but I don't know how many refactoring would be needed at the moment.

It would be no hard task to add the posibility to change the tab headers. If you know exactly what you need, we can look how to add this.

The contextmenu change is already possible: TabHandle.createContextMenuContentCallback, but maybe there should be a better approach, something in the config. It was something early I added, and maybe this should be changed now.

abalter commented 1 year ago

@jogibear9988 -- this is a great discussion! Over the next week or two (I have a full-time job, family, and lots of other stuff), I'm going to put together a draft of the kind of application I want to make using dock-spawn-ts and we can discuss what might or might not be possible for some of the features I want.