dockview-core 1.8.1 → 1.8.3

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.8.1
+ * @version 1.8.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -274,9 +274,6 @@
       get isDisposed() {
           return this._isDisposed;
       }
-      static from(...args) {
-          return new CompositeDisposable(...args);
-      }
       constructor(...args) {
           this._isDisposed = false;
           this._disposables = args;
@@ -2480,6 +2477,12 @@
       get onDidDrop() {
           return this.component.onDidDrop;
       }
+      get onWillDragGroup() {
+          return this.component.onWillDragGroup;
+      }
+      get onWillDragPanel() {
+          return this.component.onWillDragPanel;
+      }
       get panels() {
           return this.component.panels;
       }
@@ -2942,7 +2945,7 @@
       }
       configure() {
           this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-              if (this.isCancelled(event)) {
+              if (event.defaultPrevented || this.isCancelled(event)) {
                   event.preventDefault();
                   return;
               }
@@ -2962,19 +2965,23 @@
               }
               this.el.classList.add('dv-dragged');
               setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-              this.dataDisposable.value = this.getData(event.dataTransfer);
+              this.dataDisposable.value = this.getData(event);
+              this._onDragStart.fire(event);
               if (event.dataTransfer) {
                   event.dataTransfer.effectAllowed = 'move';
-                  /**
-                   * Although this is not used by dockview many third party dnd libraries will check
-                   * dataTransfer.types to determine valid drag events.
-                   *
-                   * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                   * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                   * dnd logic. You can see the code at
-                   * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                   */
-                  event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                  const hasData = event.dataTransfer.items.length > 0;
+                  if (!hasData) {
+                      /**
+                       * Although this is not used by dockview many third party dnd libraries will check
+                       * dataTransfer.types to determine valid drag events.
+                       *
+                       * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                       * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                       * dnd logic. You can see the code at
+                       * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                       */
+                      event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                  }
               }
           }), addDisposableListener(this.el, 'dragend', () => {
               this.pointerEventsDisposable.dispose();
@@ -2983,44 +2990,45 @@
       }
   }
 
+  class TabDragHandler extends DragHandler {
+      constructor(element, accessor, group, panel) {
+          super(element);
+          this.accessor = accessor;
+          this.group = group;
+          this.panel = panel;
+          this.panelTransfer = LocalSelectionTransfer.getInstance();
+      }
+      getData(event) {
+          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+          return {
+              dispose: () => {
+                  this.panelTransfer.clearData(PanelTransfer.prototype);
+              },
+          };
+      }
+  }
   class Tab extends CompositeDisposable {
       get element() {
           return this._element;
       }
-      constructor(panelId, accessor, group) {
+      constructor(panel, accessor, group) {
           super();
-          this.panelId = panelId;
+          this.panel = panel;
           this.accessor = accessor;
           this.group = group;
+          this.content = undefined;
           this._onChanged = new Emitter();
           this.onChanged = this._onChanged.event;
           this._onDropped = new Emitter();
           this.onDrop = this._onDropped.event;
+          this._onDragStart = new Emitter();
+          this.onDragStart = this._onDragStart.event;
           this._element = document.createElement('div');
           this._element.className = 'tab';
           this._element.tabIndex = 0;
           this._element.draggable = true;
           toggleClass(this.element, 'inactive-tab', true);
-          this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
-              constructor() {
-                  super(...arguments);
-                  this.panelTransfer = LocalSelectionTransfer.getInstance();
-              }
-              getData() {
-                  this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
-                  return {
-                      dispose: () => {
-                          this.panelTransfer.clearData(PanelTransfer.prototype);
-                      },
-                  };
-              }
-          })(this._element));
-          this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
-              if (event.defaultPrevented) {
-                  return;
-              }
-              this._onChanged.fire(event);
-          }));
+          const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
           this.droptarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
@@ -3034,12 +3042,19 @@
                           // don't allow group move to drop on self
                           return false;
                       }
-                      return this.panelId !== data.panelId;
+                      return this.panel.id !== data.panelId;
                   }
                   return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
               },
           });
-          this.addDisposables(this.droptarget.onDrop((event) => {
+          this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+              this._onDragStart.fire(event);
+          }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  return;
+              }
+              this._onChanged.fire(event);
+          }), this.droptarget.onDrop((event) => {
               this._onDropped.fire(event);
           }), this.droptarget);
       }
@@ -3071,9 +3086,9 @@
   }
 
   class GroupDragHandler extends DragHandler {
-      constructor(element, accessorId, group) {
+      constructor(element, accessor, group) {
           super(element);
-          this.accessorId = accessorId;
+          this.accessor = accessor;
           this.group = group;
           this.panelTransfer = LocalSelectionTransfer.getInstance();
           this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
@@ -3093,8 +3108,9 @@
           }
           return false;
       }
-      getData(dataTransfer) {
-          this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+      getData(dragEvent) {
+          const dataTransfer = dragEvent.dataTransfer;
+          this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
           const style = window.getComputedStyle(this.el);
           const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
           const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
@@ -3129,14 +3145,16 @@
           this.group = group;
           this._onDrop = new Emitter();
           this.onDrop = this._onDrop.event;
+          this._onDragStart = new Emitter();
+          this.onDragStart = this._onDragStart.event;
           this._element = document.createElement('div');
           this._element.className = 'void-container';
           this._element.tabIndex = 0;
           this._element.draggable = true;
-          this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+          this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
               this.accessor.doSetGroupActive(this.group);
           }));
-          const handler = new GroupDragHandler(this._element, accessor.id, group);
+          const handler = new GroupDragHandler(this._element, accessor, group);
           this.voidDropTarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
@@ -3154,7 +3172,9 @@
                   return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
               },
           });
-          this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+          this.addDisposables(handler, handler.onDragStart((event) => {
+              this._onDragStart.fire(event);
+          }), this.voidDropTarget.onDrop((event) => {
               this._onDrop.fire(event);
           }), this.voidDropTarget);
       }
@@ -3162,7 +3182,7 @@
 
   class TabsContainer extends CompositeDisposable {
       get panels() {
-          return this.tabs.map((_) => _.value.panelId);
+          return this.tabs.map((_) => _.value.panel.id);
       }
       get size() {
           return this.tabs.length;
@@ -3216,7 +3236,7 @@
               this.tabs[this.selectedIndex].value === tab);
       }
       indexOf(id) {
-          return this.tabs.findIndex((tab) => tab.value.panelId === id);
+          return this.tabs.findIndex((tab) => tab.value.panel.id === id);
       }
       constructor(accessor, group) {
           super();
@@ -3227,7 +3247,11 @@
           this._hidden = false;
           this._onDrop = new Emitter();
           this.onDrop = this._onDrop.event;
-          this.addDisposables(this._onDrop);
+          this._onTabDragStart = new Emitter();
+          this.onTabDragStart = this._onTabDragStart.event;
+          this._onGroupDragStart = new Emitter();
+          this.onGroupDragStart = this._onGroupDragStart.event;
+          this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
           this._element = document.createElement('div');
           this._element.className = 'tabs-and-actions-container';
           toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
@@ -3251,7 +3275,12 @@
           this._element.appendChild(this.leftActionsContainer);
           this._element.appendChild(this.voidContainer.element);
           this._element.appendChild(this.rightActionsContainer);
-          this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+          this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+              this._onGroupDragStart.fire({
+                  nativeEvent: event,
+                  group: this.group,
+              });
+          }), this.voidContainer.onDrop((event) => {
               this._onDrop.fire({
                   event: event.nativeEvent,
                   index: this.tabs.length,
@@ -3297,7 +3326,7 @@
           }
       }
       delete(id) {
-          const index = this.tabs.findIndex((tab) => tab.value.panelId === id);
+          const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
           const tabToRemove = this.tabs.splice(index, 1)[0];
           const { value, disposable } = tabToRemove;
           disposable.dispose();
@@ -3306,21 +3335,23 @@
       }
       setActivePanel(panel) {
           this.tabs.forEach((tab) => {
-              const isActivePanel = panel.id === tab.value.panelId;
+              const isActivePanel = panel.id === tab.value.panel.id;
               tab.value.setActive(isActivePanel);
           });
       }
       openPanel(panel, index = this.tabs.length) {
           var _a;
-          if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
+          if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
               return;
           }
-          const tabToAdd = new Tab(panel.id, this.accessor, this.group);
+          const tab = new Tab(panel, this.accessor, this.group);
           if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
               throw new Error('invalid header component');
           }
-          tabToAdd.setContent(panel.view.tab);
-          const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
+          tab.setContent(panel.view.tab);
+          const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+              this._onTabDragStart.fire({ nativeEvent: event, panel });
+          }), tab.onChanged((event) => {
               var _a;
               const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
               const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
@@ -3328,8 +3359,8 @@
                   !isFloatingWithOnePanel &&
                   event.shiftKey) {
                   event.preventDefault();
-                  const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
-                  const { top, left } = tabToAdd.element.getBoundingClientRect();
+                  const panel = this.accessor.getGroupPanel(tab.panel.id);
+                  const { top, left } = tab.element.getBoundingClientRect();
                   const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
                   this.accessor.addFloatingGroup(panel, {
                       x: left - rootLeft,
@@ -3346,13 +3377,13 @@
               this.group.model.openPanel(panel, {
                   skipFocus: alreadyFocused,
               });
-          }), tabToAdd.onDrop((event) => {
+          }), tab.onDrop((event) => {
               this._onDrop.fire({
                   event: event.nativeEvent,
-                  index: this.tabs.findIndex((x) => x.value === tabToAdd),
+                  index: this.tabs.findIndex((x) => x.value === tab),
               });
           }));
-          const value = { value: tabToAdd, disposable };
+          const value = { value: tab, disposable };
           this.addTab(value, index);
       }
       closePanel(panel) {
@@ -3380,7 +3411,7 @@
       }
       set locked(value) {
           this._locked = value;
-          toggleClass(this.container, 'locked-groupview', value);
+          toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
       }
       get isActive() {
           return this._isGroupActive;
@@ -3437,6 +3468,10 @@
           this.onMove = this._onMove.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onTabDragStart = new Emitter();
+          this.onTabDragStart = this._onTabDragStart.event;
+          this._onGroupDragStart = new Emitter();
+          this.onGroupDragStart = this._onGroupDragStart.event;
           this._onDidAddPanel = new Emitter();
           this.onDidAddPanel = this._onDidAddPanel.event;
           this._onDidRemovePanel = new Emitter();
@@ -3449,7 +3484,8 @@
           this.dropTarget = new Droptarget(this.contentContainer.element, {
               acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
               canDisplayOverlay: (event, position) => {
-                  if (this.locked && position === 'center') {
+                  if (this.locked === 'no-drop-target' ||
+                      (this.locked && position === 'center')) {
                       return false;
                   }
                   const data = getPanelData();
@@ -3475,8 +3511,12 @@
           });
           container.append(this.tabsContainer.element, this.contentContainer.element);
           this.header.hidden = !!options.hideHeader;
-          this.locked = !!options.locked;
-          this.addDisposables(this.tabsContainer.onDrop((event) => {
+          this.locked = options.locked || false;
+          this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+              this._onTabDragStart.fire(event);
+          }), this.tabsContainer.onGroupDragStart((event) => {
+              this._onGroupDragStart.fire(event);
+          }), this.tabsContainer.onDrop((event) => {
               this.handleDropEvent(event.event, 'center', event.index);
           }), this.contentContainer.onDidFocus(() => {
               this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3531,8 +3571,8 @@
               activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
               id: this.id,
           };
-          if (this.locked) {
-              result.locked = true;
+          if (this.locked !== false) {
+              result.locked = this.locked;
           }
           if (this.header.hidden) {
               result.hideHeader = true;
@@ -3782,6 +3822,9 @@
           return false;
       }
       handleDropEvent(event, position, index) {
+          if (this.locked === 'no-drop-target') {
+              return;
+          }
           const data = getPanelData();
           if (data && data.viewId === this.accessor.id) {
               if (data.panelId === null) {
@@ -5239,6 +5282,12 @@
       return pushToTop;
   })();
   class Overlay extends CompositeDisposable {
+      set minimumInViewportWidth(value) {
+          this.options.minimumInViewportWidth = value;
+      }
+      set minimumInViewportHeight(value) {
+          this.options.minimumInViewportHeight = value;
+      }
       constructor(options) {
           super();
           this.options = options;
@@ -5284,9 +5333,11 @@
           const overlayRect = this._element.getBoundingClientRect();
           // region: ensure bounds within allowable limits
           // a minimum width of minimumViewportWidth must be inside the viewport
-          const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+          const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
           // a minimum height of minimumViewportHeight must be inside the viewport
-          const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+          const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+              ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+              : 0;
           const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
           const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
           this._element.style.left = `${left}px`;
@@ -5332,9 +5383,10 @@
                           y: e.clientY - overlayRect.top,
                       };
                   }
-                  const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
-                  const yOffset = Math.max(0, overlayRect.height -
-                      this.options.minimumInViewportHeight);
+                  const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+                  const yOffset = Math.max(0, this.options.minimumInViewportHeight
+                      ? this.getMinimumHeight(overlayRect.height)
+                      : 0);
                   const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
                   const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                   this.setBounds({ top, left });
@@ -5408,14 +5460,11 @@
                   let height = undefined;
                   let left = undefined;
                   let width = undefined;
-                  const minimumInViewportHeight = this.options.minimumInViewportHeight;
-                  const minimumInViewportWidth = this.options.minimumInViewportWidth;
-                  function moveTop() {
+                  const moveTop = () => {
                       top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                           startPosition.originalHeight >
                           containerRect.height
-                          ? containerRect.height -
-                              minimumInViewportHeight
+                          ? this.getMinimumHeight(containerRect.height)
                           : Math.max(0, startPosition.originalY +
                               startPosition.originalHeight -
                               Overlay.MINIMUM_HEIGHT));
@@ -5423,21 +5472,23 @@
                           startPosition.originalY +
                               startPosition.originalHeight -
                               top;
-                  }
-                  function moveBottom() {
+                  };
+                  const moveBottom = () => {
                       top =
                           startPosition.originalY -
                               startPosition.originalHeight;
-                      height = clamp(y - top, top < 0
-                          ? -top + minimumInViewportHeight
+                      height = clamp(y - top, top < 0 &&
+                          typeof this.options
+                              .minimumInViewportHeight === 'number'
+                          ? -top +
+                              this.options.minimumInViewportHeight
                           : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                  }
-                  function moveLeft() {
+                  };
+                  const moveLeft = () => {
                       left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
                           startPosition.originalWidth >
                           containerRect.width
-                          ? containerRect.width -
-                              minimumInViewportWidth
+                          ? this.getMinimumWidth(containerRect.width)
                           : Math.max(0, startPosition.originalX +
                               startPosition.originalWidth -
                               Overlay.MINIMUM_WIDTH));
@@ -5445,15 +5496,18 @@
                           startPosition.originalX +
                               startPosition.originalWidth -
                               left;
-                  }
-                  function moveRight() {
+                  };
+                  const moveRight = () => {
                       left =
                           startPosition.originalX -
                               startPosition.originalWidth;
-                      width = clamp(x - left, left < 0
-                          ? -left + minimumInViewportWidth
+                      width = clamp(x - left, left < 0 &&
+                          typeof this.options
+                              .minimumInViewportWidth === 'number'
+                          ? -left +
+                              this.options.minimumInViewportWidth
                           : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                  }
+                  };
                   switch (direction) {
                       case 'top':
                           moveTop();
@@ -5497,6 +5551,18 @@
               }));
           }));
       }
+      getMinimumWidth(width) {
+          if (typeof this.options.minimumInViewportWidth === 'number') {
+              return width - this.options.minimumInViewportWidth;
+          }
+          return 0;
+      }
+      getMinimumHeight(height) {
+          if (typeof this.options.minimumInViewportHeight === 'number') {
+              return height - this.options.minimumInViewportHeight;
+          }
+          return height;
+      }
       dispose() {
           this._element.remove();
           super.dispose();
@@ -5517,6 +5583,7 @@
       }
   }
 
+  const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
   class DockviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -5547,6 +5614,10 @@
           this.nextGroupId = sequentialNumberGenerator();
           this._deserializer = new DefaultDockviewDeserialzier(this);
           this.watermark = null;
+          this._onWillDragPanel = new Emitter();
+          this.onWillDragPanel = this._onWillDragPanel.event;
+          this._onWillDragGroup = new Emitter();
+          this.onWillDragGroup = this._onWillDragGroup.event;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
           this._onDidRemovePanel = new Emitter();
@@ -5559,7 +5630,7 @@
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
           this.floatingGroups = [];
           toggleClass(this.gridview.element, 'dv-dockview', true);
-          this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+          this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
               this.updateWatermark();
           }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
               this._bufferOnDidLayoutChange.fire();
@@ -5596,7 +5667,7 @@
                       return true;
                   }
                   if (this.options.showDndOverlay) {
-                      if (position === 'center') {
+                      if (position === 'center' && this.gridview.length !== 0) {
                           /**
                            * for external events only show the four-corner drag overlays, disable
                            * the center position so that external drag events can fall through to the group
@@ -5632,7 +5703,7 @@
           this.updateWatermark();
       }
       addFloatingGroup(item, coord, options) {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           let group;
           if (item instanceof DockviewPanel) {
               group = this.createGroup();
@@ -5660,8 +5731,12 @@
               width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
               left: overlayLeft,
               top: overlayTop,
-              minimumInViewportWidth: 100,
-              minimumInViewportHeight: 100,
+              minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                  ? undefined
+                  : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+              minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                  ? undefined
+                  : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
           });
           const el = group.element.querySelector('.void-container');
           if (!el) {
@@ -5732,12 +5807,37 @@
           }
       }
       updateOptions(options) {
+          var _a, _b;
           const hasOrientationChanged = typeof options.orientation === 'string' &&
               this.gridview.orientation !== options.orientation;
+          const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+              options.floatingGroupBounds !== this.options.floatingGroupBounds;
           this._options = Object.assign(Object.assign({}, this.options), options);
           if (hasOrientationChanged) {
               this.gridview.orientation = options.orientation;
           }
+          if (hasFloatingGroupOptionsChanged) {
+              for (const group of this.floatingGroups) {
+                  switch (this.options.floatingGroupBounds) {
+                      case 'boundedWithinViewport':
+                          group.overlay.minimumInViewportHeight = undefined;
+                          group.overlay.minimumInViewportWidth = undefined;
+                          break;
+                      case undefined:
+                          group.overlay.minimumInViewportHeight =
+                              DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                          group.overlay.minimumInViewportWidth =
+                              DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                          break;
+                      default:
+                          group.overlay.minimumInViewportHeight =
+                              (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                          group.overlay.minimumInViewportWidth =
+                              (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                  }
+                  group.overlay.setBounds({});
+              }
+          }
           this.layout(this.gridview.width, this.gridview.height, true);
       }
       layout(width, height, forceResize) {
@@ -6220,7 +6320,11 @@
           const view = new DockviewGroupPanel(this, id, options);
           view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
           if (!this._groups.has(view.id)) {
-              const disposable = new CompositeDisposable(view.model.onMove((event) => {
+              const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
+                  this._onWillDragPanel.fire(event);
+              }), view.model.onGroupDragStart((event) => {
+                  this._onWillDragGroup.fire(event);
+              }), view.model.onMove((event) => {
                   const { groupId, itemId, target, index } = event;
                   this.moveGroupOrPanel(view, groupId, itemId, target, index);
               }), view.model.onDidDrop((event) => {
@@ -6259,13 +6363,6 @@
           var _a;
           return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
       }
-      dispose() {
-          this._onDidActivePanelChange.dispose();
-          this._onDidAddPanel.dispose();
-          this._onDidRemovePanel.dispose();
-          this._onDidLayoutFromJSON.dispose();
-          super.dispose();
-      }
   }
 
   class GridviewComponent extends BaseGrid {