Ability to bring a floating-window in the Dock-Manager to the foreground

[D-Biela]

Is your feature request related to a problem? Please describe.

Id like to have the possibility to bring a floating window, hidden behind other floating windows, to the foreground. Its essential for our new app, which relies heavily on a windows-like ui with potentially multiple simultaneous floating windows.

Describe the solution you'd like

A Method to focus / bring a floating pane to the foreground. Something like this:

this.dockingComponent!.layout.floatingPanes?.find((pane) => ...).focus();

Describe alternatives you've considered

An alternative would be to dig in the dockmanager shadow-dom with JS and set the z-index of the desired floatingPane to 1. This is an ugly workaround we prefer not to use.

[onlyexeption]

@D-Biela In order to address the problem accurately, I would appreciate if you could provide some additional information regarding your requirements. We can implement a method that takes a pane's contentId and focus it's parent, thus bringing it on top. Could you please confirm if this approach would be sufficient for your specific use case?

[D-Biela]

Hey @onlyexeption Thanks for the response!

Lets take this layout as an example:

{
  "rootPane": {
    "type": "splitPane",
    "orientation": "horizontal",
    "panes": [
    ],
    "id": "befe5d33-6e41-448c-ac52-e069a8cdf4d2"
  },
  "floatingPanes": [
    {
      "type": "splitPane",
      "orientation": "horizontal",
      "floatingHeight": 919.46484375,
      "floatingWidth": 813.5078125,
      "floatingLocation": {
        "x": 829.87109375,
        "y": 204.9921875
      },
      "panes": [
        {
          "allowPinning": false,
          "type": "contentPane",
          "contentId": "debug",
          "header": "Todo & Debug-Window",
          "id": "53e7cd31-7e24-4e9d-8b45-17b6de0e5f72"
        }
      ],
      "id": "294a90f2-1b6c-43ed-b705-9736cb42643c"
    },
    {
      "type": "splitPane",
      "orientation": "vertical",
      "panes": [
        {
          "allowPinning": false,
          "type": "contentPane",
          "contentId": "auction-details",
          "header": "Auktion - Details",
          "id": "9ffe9829-432f-49a2-b21b-aa9a1c62a9e5"
        }
      ],
      "floatingLocation": {
        "x": 143.375,
        "y": 250.3125
      },
      "floatingWidth": 590.671875,
      "floatingHeight": 418.875,
      "id": "811cbd48-c7c9-4dc7-806b-925715f7e9fc"
    }
  ]

}

Assume that the current layout with the example above looks like this:

I would like to focus and bring the floating split-pane to the foreground which is atm nearly completely covered by the "ToDo & Debug-Window"-floating-pane (as seen in the screenshot), without actively clicking ON the specific floating-pane.

Another use case would be when an event, triggered by a websocket connection, subsequently triggers the focusing of the relevant floating window for the user. This would bring it to the foreground, enabling the user to immediately notice that there is something that needs attention.

As I mentioned earlier, an approach like this would be cool: this.dockingComponent!.layout.floatingPanes?.find((pane) => ...).focus();

Alternatively, as you suggested, we could have a method that accepts the contentId as a parameter: this.dockingComponent.focusPane(contentId)

[igdmdimitrov]

Added method focusPane in v1.13.0