feat: Add .lm_dragging to .lm_root and style nested dragging, also style default empty dashboard

packages/dashboard/src/Dashboard.scss

@@ -1,3 +1,12 @@
 .dashboard-container {
   position: relative;
 }
+
+.dashboard-empty {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  inset: 0;
+  color: var(--dh-color-neutral);
+  font-size: 1.5rem;
+}

packages/dashboard/src/DashboardLayout.tsx

@@ -82,7 +82,7 @@ type DashboardLayoutProps = React.PropsWithChildren<{
 export function DashboardLayout({
   id,
   children,
-  emptyDashboard = <div>Dashboard is empty.</div>,
+  emptyDashboard = <div className="dashboard-empty">Dashboard is empty.</div>,
   layout,
   layoutConfig = DEFAULT_LAYOUT_CONFIG,
   onLayoutChange = DEFAULT_CALLBACK,

packages/golden-layout/scss/goldenlayout-dark-theme.scss

@@ -59,6 +59,19 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
   }
 }
 
+// give visual indication of the bounds of a nested golden-layout while dragging
+.lm_goldenlayout .lm_goldenlayout.lm_dragging {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    background: var(--dh-color-highlight-selected);
+    border: 1px dashed var(--dh-color-hover-border);
+    pointer-events: none;
+    z-index: 9999;
+  }
+}
+
 // Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
 .lm_goldenlayout {
   background: $background;

packages/golden-layout/src/controls/DragSource.ts

@@ -34,7 +34,11 @@ export default class DragSource {
    * Called initially and after every drag
    */
   _createDragListener() {
-    this._dragListener = new DragListener(this._element, true);
+    this._dragListener = new DragListener(
+      this._element,
+      this._layoutManager.root,
+      true
+    );
     this._dragListener.on('dragStart', this._onDragStart, this);
     this._dragListener.on('dragStop', this._createDragListener, this);
     return this._dragListener;

packages/golden-layout/src/controls/DragSourceFromEvent.ts

@@ -42,7 +42,15 @@ export default class DragSourceFromEvent {
       return;
     }
 
-    this._dragListener = new DragListener(this._element, true);
+    if (!this._layoutManager) {
+      return;
+    }
+
+    this._dragListener = new DragListener(
+      this._element,
+      this._layoutManager.root,
+      true
+    );
     this._dragListener.on('dragStart', this._onDragStart, this);
     this._dragListener.on('dragStop', this._destroy, this);
 

packages/golden-layout/src/controls/Tab.ts

@@ -50,7 +50,10 @@ export default class Tab {
       this._layoutManager.config.settings?.reorderEnabled &&
       contentItem.config.reorderEnabled
     ) {
-      this._dragListener = new DragListener(this.element);
+      this._dragListener = new DragListener(
+        this.element,
+        this._layoutManager.root
+      );
       this._dragListener.on('dragStart', this._onDragStart, this);
       this.contentItem.on(
         'destroy',

packages/golden-layout/src/utils/DragListener.ts

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import EventEmitter from './EventEmitter';
+import { Root } from '../items';
 
 export type DragListenerEvent = Pick<
   JQuery.TriggeredEvent,
@@ -10,7 +11,7 @@ class DragListener extends EventEmitter {
   private _eElement: JQuery<HTMLElement> | undefined;
   private _oDocument: JQuery<Document> | undefined;
   private _eBody: JQuery<HTMLElement> | undefined;
-
+  private _root: Root | undefined;
   private _destroyAfterMouseUp: boolean;
 
   /**
@@ -34,12 +35,17 @@ class DragListener extends EventEmitter {
 
   private _bDragging = false;
 
-  constructor(eElement: JQuery<HTMLElement>, destroyAfterMouseUp = false) {
+  constructor(
+    eElement: JQuery<HTMLElement>,
+    root?: Root,
+    destroyAfterMouseUp = false
+  ) {
     super();
 
     this._eElement = eElement;
     this._oDocument = $(document);
     this._eBody = $(document.body);
+    this._root = root;
     // used by drag sources, to destroy listener at the right time
     this._destroyAfterMouseUp = destroyAfterMouseUp;
 
@@ -119,6 +125,7 @@ class DragListener extends EventEmitter {
       // after dragStop, so that .lm_dragging is removed after size is processed
       // and any overflow: hidden remains applied during the calculations
       this._eBody?.removeClass('lm_dragging');
+      this._root?.childElementContainer.removeClass('lm_dragging');
       if (!(this._eElement instanceof Window)) {
         this._eElement?.removeClass('lm_dragging');
       }
@@ -132,6 +139,7 @@ class DragListener extends EventEmitter {
     this._bDragging = true;
     this._eBody?.addClass('lm_dragging');
     this._eElement?.addClass('lm_dragging');
+    this._root?.childElementContainer.addClass('lm_dragging');
     this._oDocument?.find('iframe')?.css('pointer-events', 'none');
     this.emit('dragStart', this._nOriginalX, this._nOriginalY);
   }