Hello,

Is there an easy way to override the default context menu of a TabHandle?

I create a new Panel like this:
let messageDetail = new PanelContainer(document.getElementById("testComponent"), this.dockManager, PanelType.panel);
And override the contextmenu:
messageDetail.elementTitle.addEventListener('contextmenu', this.oncontextMenuClicked.bind(messageDetail.containerElement));
This works fine.

But as soon as I dock the Panel to the "main" dock-node, i only have the TabHandles, where i could call my own context menu from.
It currently always shows the options "Close all documents" and "Close all documents but this".
Is it possible to override this contextmenu?

Regards.

If you save a Layout with opened Dialogs, they are not correctly restored.

When resizing the browser window, sometimes it will glitch and not show some of the docked windows. I used Google Chrome.

see coderespawn/dock-spawn#10

I am evaluating this lib for my project.
Thereby, I encountered an issue in the es5 minified version: regeneratorRuntime is not defined

Indeed, the file contains a reference to regeneratorRuntime.
From my findings, this is a compatibility layer for async/await introduced by babel (or webpack, not sure).

Luckily, there is only a single use of async in PanelContainer.ts, introduced by commit d74fe1a

After downgrading to 2.301, the issue is gone, because there is no use of async/await in this version.

Please verify whether async is required in this project. Maybe a callback or Promise would be an alternative?
If it is indeed required, please change the ES5 code generation to include all dependencies.

how to close an undocked window? whenever we try to close the window it enables dock handles and dock it instead of closing

Trying to close a panel with at least 3 tabs causes the panel to not actually be removed. This causes several odd issues such as the panel to be closed "x" button remaining in place, thus disallowing removal of other tabs. To recreate, open IDE demo and dock infovis dock tree visualizer into outline/solution explorer panel area. Then, press the close button on the now docked tree visualizer tab. This leads me to suspect the issue is in the else block of the DockLayoutEngine close function.

else {
    // the node to be removed has 2 or more other siblings. So it is safe to continue
    // using the parent composite container.
    parentNode.performLayout(false);
    if (activetabClosed) {
        let nextActiveSibling = parentNode.children[Math.max(0, siblingIndex - 1)];
        if (nextActiveSibling != null)
            parentNode.container.setActiveChild(nextActiveSibling.container);
    }
 }`

Hello,
I would like to know if and how can I set the "data-panel-caption" dynamically (=bound it to my model)
thanks
l.

This may be a bug, I'm not too sure, but if you know of a way to work around it, please let me know.

I wanted to make a button that adds a panel back onto the screen after you close it. This seems to work fine if the panel is added to one of the docks (ex. docked on the left, right, etc). You can close it with the x button in the corner and reopen it by calling the same dockLeft, dockRight, etc command. I assume this is because when you close the node, it isn't actually destroying it?

Regardless, if you build a panel with floatDialog, close the panel, and then try to reopen it with the same floatDialog command, it just doesn't do anything. The element returns null, and a panel is not created.

Interestingly enough, if you dock the floating panel and then close it, you are able to reopen it with the same command. It does not work if you dock the panel, undock it, and then close it though.

Do you know of any work around for this?

It also might be because of how I'm checking to see if their panel already exists on the screen. Right now, it seems that when the panel has been closed, using getElementById on it returns null.
Here's my code for a basic add:

function toggleTools(){ console.log(document.getElementById("tools")); if(document.getElementById("tools") == null){ dockManager.floatDialog(tools, 50, 50); } }

I've noticed this issue when I dock new panels onto the screen. Its something that occurs with existing panels as well though. When docking the panels, like, say, on the right, I'd expect all the panels to shrink in order to make space for the new panel. However, this doesn't really happen. Instead the panels act strange, and they might expand or shrink.

Take this example on the IDE demo

Repeatedly putting this panel into the same place shrinks the panel itself.
Is there a way to set it as a steady number? Like make it always take up half the space?

It would be nice if we would have 3 new events for dialogs like:

onResizeStartDialog - when you engage in a resize operation (click down)
onResizeDialog - when you actually move the cursor
onResizeEndDialog - when you release the mouse and the final size is set up

Hi, we're using this with an Angular 9 project to create a genuine cloud based IDE...dock spawn was an awesome accelerator, thanks for this project! :)

But...I'm not sure how to properly do tab splitting, like if I have two tabs open...and I just want to drag one of them to be beside the other so I can view both at the same time, or one below the other, again to see both at the same time...it works...but the one I drag...is no longer tabbed. :(

Style gets messed up a bit and I can't close that one :( I guess what its implying is that when I drag a tab, I want it dock with another document manager now just the general top/down/left/right node.

How can I force the landing to become a tabbed window? I think I might be able to do it in initialization of the document window...but not sure, if you can give any pointers here it would be greatly appreciated. Being able to view tab content at the same time would be super valuable for us.

Is it possible to intercept clicking the close button in a panel to show something like a 'Do you want to save dialog' prior to really closing the panel?

https://node-projects.github.io/dock-spawn-ts/page/demo/ide/demo.html

When resizing the Toolbox, you will see the bug.

Btw, after resizing the Solution Explorer, the bug view will be fixed.

I'm using Chrome.

We create an extra element with is positioned absolutely accordingly to the layout. So we get a better perf, and do not cause relayout for example of hosted aggrid components (wich then looseing selection)

When undocking/dragging a tab which was docked in "fill" mode exceptions are raised in DockManager::_requestTabReorder.
The call to methode _findNodeFromContainer return "null".
The error is reproducible in de IDE demo (see attached screen shots).

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.

after loading the application, this demo does not work correctly:
http://127.0.0.1:8080/page/demo/demo_simple_es5.html

browser issues:
dock-spawn-ts.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined
at dock-spawn-ts.js:1:20198
at dock-spawn-ts.js:1:21001
at dock-spawn-ts.js:1:21185
at dock-spawn-ts.js:1:101970
(anonymous) @ dock-spawn-ts.js:1
(anonymous) @ dock-spawn-ts.js:1
(anonymous) @ dock-spawn-ts.js:1
(anonymous) @ dock-spawn-ts.js:1
demo_simple_es5.html:26 Uncaught TypeError: Cannot read properties of undefined (reading 'DockManager')
at window.onload (demo_simple_es5.html:26:47)

when we closed the dock spawn panels ,again I'm unable to open the panel. Can anyone tell me the solution

How can I load the json that has been saved (-of my changed layout..) using this.dockManager.saveState()
Also I would like to load this.dockManager.resumeLayout(panel)
using the build in functions - how can I do that?
thanks and have a great day for now

It would be great to be able to move a group of tabs together, perhaps by dragging on the empty space to the right of the tabs (if there aren't too many). And/or, have a panel with a header bar that you put tabs into, and then drag that.

Let me start by saying that this is an amazing job.

I would like to propose an improvement, when you drag a panel some icons appear and if you drop on them then the panel dock into the layout.

Would it be possible to make the dock process sticky by showing a preview area where the panel is going to snap?

There are a lot of examples but I can think of a few:

• golden layout
• Lumino

Setting the active panel via this.dockManager.activePanel = newActivePanel does not work. The GUI does not reflect the changes.
In the IDE demo lets say you want to set the "Outline" tab as the active tab and not "Solution Explorer" but you want the order of the tabs exactly as they are, how can this be achived? Setting this.dockManager.activePanel does not work.

sample-ifix-project.zip
node modules to be downloaded after downloading the sample project

Hi, I am trying to use the libraries with Vue project. I am a bit lost here. I have a vue project and I have added dock-spawn-ts libraries to it. Where should I write my integration code.

Create a Version wich uses webcomponents, so it's easier to use.
May the user then can use it without writing a line of javascript.

We need better documentation on how to install it from NPM and how to use it after doing so.

How can I receive the events of a resize between two docked panels? I can't find anything about events in the docs, here or Stack Overflow. I tried registering events to the dock manager, to the panel, directly to the divs inside the panel, and nothing is triggering. Source code seems to send the events, but they don't reach the places I listen to.

I need this event, because once it is resized, I must refresh a Three.js instance inside one of them. It works fine when listening to resize events of the window, but I can't get events from panels.

Awesome lib, it perfeclty matches my task, but is there any way yo use it with angular?

if (this.tabStripDirection === TabHostDirection.TOP && this.tabStripDirection === TabHostDirection.BOTTOM) {
this.hostElement.appendChild(this.tabListElement);
this.hostElement.appendChild(this.separatorElement);
this.hostElement.appendChild(this.contentElement);
}
at TabHost.js
tried to define it like this - so the tabListElement will always be on the top (-and not the bottom)
with no luck...
how come?

Hi we're using dock spawn ts in an Angular 9 project, to make a genuine cloud based IDE...its working great, thanks! But, when we change the size of panes internally, like by closing a pane or dragging a pane slider...the overall "resize" isn't always called, and the layout "cracks", it leaves gaps and you can see the background behind the dock manager.

There is a simple work around...I just resize the browser itself, and that seems to always force a resize of all the panels as needed, and the gaps disappear. But...would be much better if there was a way to ensure the dock spawn panels always update resizing when the size of any internal pane changes. maybe I did something wrong in initialization, or didn't register all the needed resize callbacks or something?

If you can give some pointers on that or suggest things I can try, would be greatly appreciated. Thanks again for this project, its a great head start on the whole dockable windows thing.

Would it be possible to package the various files in /lib/js into a single library that can be imported---e.g. jquery?

It would be nice if we could drag components defined outside (in some other div within the webpage for example) inside dockManager via a registering API of some sort or some other mechanism.

Lets say you have a panel which is docked "bottom". Then you drag another panel on top of the first one and dock it "filled". Then the two visible tabs are at the bottom edge of the panels. It would be great if this can be customized (for example put the tabs on the top border). It would be great if there was an option that all tabs of "filled" panels are presented like the tabs of dockFill panels that are directly under the documentNode (editor1 and editor2 in the IDE demo).
If the tabs are on the top border the "header line" would be redundant and could be removed.

Is it possible to disable resizing of a specific panel?

They can be Sticky at left, right, top or bottom (depends on their dock position)

look at ide demo

Hello,
While clicking on a pane\document in the dock manager and afterwards on the escape button the pane get closed
How can I prevent it?
thanks
l.

www.dockspawn.com is no longer working, and I've visited your webpage of https://node-projects.github.io/dock-spawn-ts/. Is there anywhere else to find some documentation on how to use this project? Like instructions of how to set a docked panel, so it can't be undocked.

see coderespawn/dock-spawn#11

That are still resizing issues, which is also present in the older project. When 1st grabbing the bar to the right of the middle window (right of the Steering.cpp), the resizing glitches. It's possibly from a resizing calculation issue.

Is there a way to restrict panel movement to a set of defined boundaries?

Like for an example, lets say I have a box on the screen, with a panel inside of it. When I move the panel, I can move it around freely like normal, however, I will not be able to move it outside of the box. I would only be able to move it within the boundaries of the box.

hello,
Is it possible to save the changed panes' positions ? If I want to have a mechanism that saves user's preferences for the layout...

It would be really useful for frameworks like React/Vue/Svelte integrations if docks spawn would have an exposed tree data structure with what is currently in play.

Something like:

[
  // browser windows - For future detachable windows support
  {
    id: 'browser window 0',
    floatingWindows: [
      {
     id: 'flaoting window 0',
     width: 300,
     height:300,
     topPos: 50,
     widthPos: 50,
     .... and so on
     },
     {
      id: 'flaoting window 1',
      width: 300,
      height:300,
      topPos: 50,
      widthPos: 50,
      .... and so on
      }
    ]
     rootPanel: {
      id: 'docked panel 0',
      children: [
        {
          id: 'docked panel 1',
          width: 100,
          height:300,
          percentage: 33
          .... and so on
        },
        {
          id: 'docked panel 2',
          width: 200,
          height:300,
          percentage: 66
          .... and so on,
          children: [
            {
              id: 'docked panel 3',
              width: 100,
              height:300,
              percentage: 50
              .... and so on
            },
            {
              id: 'docked panel 4',
              width: 100,
              height:300,
              percentage: 50
              .... and so on
              },
          ]
          },
      ]
     }
    
  }
]

Hello, and thanks again for this amazing dock-spawn-ts' project!

I can't really point it out but every once in a while, I get this error message and I can't run my project - Can you tell me the reason for this? Or maybe you could suggest to me how to handle this? or what is missing...

Thank you,
l.

Hello,
How can I set the dockspan-tab-handle-list-container on the upper side (-instead of the bottom)?