dockview-core 1.8.2 → 1.8.4

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.8.2
+ * @version 1.8.4
  * @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;
@@ -905,7 +902,17 @@
           size = typeof size === 'number' ? size : item.size;
           size = clamp(size, item.minimumSize, item.maximumSize);
           item.size = size;
-          this.relayout([index]);
+          const indexes = range(this.viewItems.length).filter((i) => i !== index);
+          const lowPriorityIndexes = [
+              ...indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low),
+              index,
+          ];
+          const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+          /**
+           * add this view we are changing to the low-index list since we have determined the size
+           * here and don't want it changed
+           */
+          this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
       }
       addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
           const container = document.createElement('div');
@@ -1662,6 +1669,7 @@
                   orientation: this.orientation,
                   descriptor,
                   proportionalLayout,
+                  styles,
               });
           }
           this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2173,6 +2181,14 @@
                   const child = sibling.children[i];
                   grandParent.addChild(child, child.size, parentIndex + i);
               }
+              /**
+               * clean down the branch node since we need to dipose of it and
+               * when .dispose() it called on a branch it will dispose of any
+               * views it is holding onto.
+               */
+              while (sibling.children.length > 0) {
+                  sibling.removeChild(0);
+              }
           }
           else {
               // otherwise create a new leaf node and add that to the grandparent
@@ -2480,6 +2496,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 +2964,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 +2984,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 +3009,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 +3061,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 +3105,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 +3127,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 +3164,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 +3191,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 +3201,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;
@@ -3208,6 +3247,19 @@
               this.leftActions = element;
           }
       }
+      setPrefixActionsElement(element) {
+          if (this.preActions === element) {
+              return;
+          }
+          if (this.preActions) {
+              this.preActions.remove();
+              this.preActions = undefined;
+          }
+          if (element) {
+              this.preActionsContainer.appendChild(element);
+              this.preActions = element;
+          }
+      }
       get element() {
           return this._element;
       }
@@ -3216,7 +3268,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 +3279,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');
@@ -3244,14 +3300,22 @@
           this.rightActionsContainer.className = 'right-actions-container';
           this.leftActionsContainer = document.createElement('div');
           this.leftActionsContainer.className = 'left-actions-container';
+          this.preActionsContainer = document.createElement('div');
+          this.preActionsContainer.className = 'pre-actions-container';
           this.tabContainer = document.createElement('div');
           this.tabContainer.className = 'tabs-container';
           this.voidContainer = new VoidContainer(this.accessor, this.group);
+          this._element.appendChild(this.preActionsContainer);
           this._element.appendChild(this.tabContainer);
           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 +3361,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 +3370,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 +3394,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 +3412,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 +3446,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 +3503,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 +3519,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 +3546,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);
@@ -3520,6 +3595,16 @@
               });
               this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
           }
+          if (this.accessor.options.createPrefixHeaderActionsElement) {
+              this._prefixHeaderActions =
+                  this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+              this.addDisposables(this._prefixHeaderActions);
+              this._prefixHeaderActions.init({
+                  containerApi: new DockviewApi(this.accessor),
+                  api: this.groupPanel.api,
+              });
+              this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+          }
       }
       indexOf(panel) {
           return this.tabsContainer.indexOf(panel.id);
@@ -3531,8 +3616,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 +3867,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) {
@@ -3859,6 +3947,14 @@
                    */
                   return;
               }
+              if (!document.body.contains(this._element)) {
+                  /**
+                   * since the event is dispatched through requestAnimationFrame there is a small chance
+                   * the component is no longer attached to the DOM, if that is the case the dimensions
+                   * are mostly likely all zero and meaningless. we should skip this case.
+                   */
+                  return;
+              }
               const { width, height } = entry.contentRect;
               this.layout(width, height);
           }));
@@ -5239,6 +5335,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 +5386,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 +5436,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 +5513,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 +5525,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 +5549,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 +5604,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 +5636,7 @@
       }
   }
 
+  const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
   class DockviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -5547,6 +5667,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 +5683,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();
@@ -5632,7 +5756,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 +5784,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 +5860,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) {
@@ -5830,61 +5983,114 @@
       fromJSON(data) {
           var _a;
           this.clear();
+          if (typeof data !== 'object' || data === null) {
+              throw new Error('serialized layout must be a non-null object');
+          }
           const { grid, panels, activeGroup } = data;
           if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
               throw new Error('root must be of type branch');
           }
-          // take note of the existing dimensions
-          const width = this.width;
-          const height = this.height;
-          const createGroupFromSerializedState = (data) => {
-              const { id, locked, hideHeader, views, activeView } = data;
-              const group = this.createGroup({
-                  id,
-                  locked: !!locked,
-                  hideHeader: !!hideHeader,
-              });
-              this._onDidAddGroup.fire(group);
-              for (const child of views) {
-                  const panel = this._deserializer.fromJSON(panels[child], group);
-                  const isActive = typeof activeView === 'string' && activeView === panel.id;
-                  group.model.openPanel(panel, {
-                      skipSetPanelActive: !isActive,
-                      skipSetGroupActive: true,
+          try {
+              // take note of the existing dimensions
+              const width = this.width;
+              const height = this.height;
+              const createGroupFromSerializedState = (data) => {
+                  const { id, locked, hideHeader, views, activeView } = data;
+                  if (typeof id !== 'string') {
+                      throw new Error('group id must be of type string');
+                  }
+                  const group = this.createGroup({
+                      id,
+                      locked: !!locked,
+                      hideHeader: !!hideHeader,
                   });
+                  const createdPanels = [];
+                  for (const child of views) {
+                      /**
+                       * Run the deserializer step seperately since this may fail to due corrupted external state.
+                       * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                       * due to a corruption of input data.
+                       */
+                      const panel = this._deserializer.fromJSON(panels[child], group);
+                      createdPanels.push(panel);
+                  }
+                  this._onDidAddGroup.fire(group);
+                  for (let i = 0; i < views.length; i++) {
+                      const panel = createdPanels[i];
+                      const isActive = typeof activeView === 'string' &&
+                          activeView === panel.id;
+                      group.model.openPanel(panel, {
+                          skipSetPanelActive: !isActive,
+                          skipSetGroupActive: true,
+                      });
+                  }
+                  if (!group.activePanel && group.panels.length > 0) {
+                      group.model.openPanel(group.panels[group.panels.length - 1], {
+                          skipSetGroupActive: true,
+                      });
+                  }
+                  return group;
+              };
+              this.gridview.deserialize(grid, {
+                  fromJSON: (node) => {
+                      return createGroupFromSerializedState(node.data);
+                  },
+              });
+              this.layout(width, height, true);
+              const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+              for (const serializedFloatingGroup of serializedFloatingGroups) {
+                  const { data, position } = serializedFloatingGroup;
+                  const group = createGroupFromSerializedState(data);
+                  this.addFloatingGroup(group, {
+                      x: position.left,
+                      y: position.top,
+                      height: position.height,
+                      width: position.width,
+                  }, { skipRemoveGroup: true, inDragMode: false });
+              }
+              for (const floatingGroup of this.floatingGroups) {
+                  floatingGroup.overlay.setBounds();
+              }
+              if (typeof activeGroup === 'string') {
+                  const panel = this.getPanel(activeGroup);
+                  if (panel) {
+                      this.doSetGroupActive(panel);
+                  }
               }
-              if (!group.activePanel && group.panels.length > 0) {
-                  group.model.openPanel(group.panels[group.panels.length - 1], {
-                      skipSetGroupActive: true,
-                  });
+          }
+          catch (err) {
+              /**
+               * Takes all the successfully created groups and remove all of their panels.
+               */
+              for (const group of this.groups) {
+                  for (const panel of group.panels) {
+                      this.removePanel(panel, {
+                          removeEmptyGroup: false,
+                          skipDispose: false,
+                      });
+                  }
               }
-              return group;
-          };
-          this.gridview.deserialize(grid, {
-              fromJSON: (node) => {
-                  return createGroupFromSerializedState(node.data);
-              },
-          });
-          this.layout(width, height, true);
-          const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
-          for (const serializedFloatingGroup of serializedFloatingGroups) {
-              const { data, position } = serializedFloatingGroup;
-              const group = createGroupFromSerializedState(data);
-              this.addFloatingGroup(group, {
-                  x: position.left,
-                  y: position.top,
-                  height: position.height,
-                  width: position.width,
-              }, { skipRemoveGroup: true, inDragMode: false });
-          }
-          for (const floatingGroup of this.floatingGroups) {
-              floatingGroup.overlay.setBounds();
-          }
-          if (typeof activeGroup === 'string') {
-              const panel = this.getPanel(activeGroup);
-              if (panel) {
-                  this.doSetGroupActive(panel);
+              /**
+               * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+               * the underlying HTMLElement existing in the Gridview.
+               */
+              for (const group of this.groups) {
+                  group.dispose();
+                  this._groups.delete(group.id);
+                  this._onDidRemoveGroup.fire(group);
               }
+              // iterate over a reassigned array since original array will be modified
+              for (const floatingGroup of [...this.floatingGroups]) {
+                  floatingGroup.dispose();
+              }
+              // fires clean-up events and clears the underlying HTML gridview.
+              this.clear();
+              /**
+               * even though we have cleaned-up we still want to inform the caller of their error
+               * and we'll do this through re-throwing the original error since afterall you would
+               * expect trying to load a corrupted layout to result in an error and not silently fail...
+               */
+              throw err;
           }
           this._onDidLayoutFromJSON.fire();
       }
@@ -6098,6 +6304,7 @@
               if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                   floatingGroup.group.dispose();
                   this._groups.delete(group.id);
+                  // TODO: fire group removed event?
               }
               floatingGroup.dispose();
               return floatingGroup.group;
@@ -6220,7 +6427,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 +6470,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 {
@@ -6341,43 +6545,64 @@
       fromJSON(serializedGridview) {
           this.clear();
           const { grid, activePanel } = serializedGridview;
-          const queue = [];
-          // take note of the existing dimensions
-          const width = this.width;
-          const height = this.height;
-          this.gridview.deserialize(grid, {
-              fromJSON: (node) => {
-                  const { data } = node;
-                  const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                      ? {
-                          createComponent: this.options.frameworkComponentFactory
-                              .createComponent,
-                      }
-                      : undefined);
-                  queue.push(() => view.init({
-                      params: data.params,
-                      minimumWidth: data.minimumWidth,
-                      maximumWidth: data.maximumWidth,
-                      minimumHeight: data.minimumHeight,
-                      maximumHeight: data.maximumHeight,
-                      priority: data.priority,
-                      snap: !!data.snap,
-                      accessor: this,
-                      isVisible: node.visible,
-                  }));
-                  this._onDidAddGroup.fire(view);
-                  this.registerPanel(view);
-                  return view;
-              },
-          });
-          this.layout(width, height, true);
-          queue.forEach((f) => f());
-          if (typeof activePanel === 'string') {
-              const panel = this.getPanel(activePanel);
-              if (panel) {
-                  this.doSetGroupActive(panel);
+          try {
+              const queue = [];
+              // take note of the existing dimensions
+              const width = this.width;
+              const height = this.height;
+              this.gridview.deserialize(grid, {
+                  fromJSON: (node) => {
+                      const { data } = node;
+                      const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                          ? {
+                              createComponent: this.options.frameworkComponentFactory
+                                  .createComponent,
+                          }
+                          : undefined);
+                      queue.push(() => view.init({
+                          params: data.params,
+                          minimumWidth: data.minimumWidth,
+                          maximumWidth: data.maximumWidth,
+                          minimumHeight: data.minimumHeight,
+                          maximumHeight: data.maximumHeight,
+                          priority: data.priority,
+                          snap: !!data.snap,
+                          accessor: this,
+                          isVisible: node.visible,
+                      }));
+                      this._onDidAddGroup.fire(view);
+                      this.registerPanel(view);
+                      return view;
+                  },
+              });
+              this.layout(width, height, true);
+              queue.forEach((f) => f());
+              if (typeof activePanel === 'string') {
+                  const panel = this.getPanel(activePanel);
+                  if (panel) {
+                      this.doSetGroupActive(panel);
+                  }
               }
           }
+          catch (err) {
+              /**
+               * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+               * the underlying HTMLElement existing in the Gridview.
+               */
+              for (const group of this.groups) {
+                  group.dispose();
+                  this._groups.delete(group.id);
+                  this._onDidRemoveGroup.fire(group);
+              }
+              // fires clean-up events and clears the underlying HTML gridview.
+              this.clear();
+              /**
+               * even though we have cleaned-up we still want to inform the caller of their error
+               * and we'll do this through re-throwing the original error since afterall you would
+               * expect trying to load a corrupted layout to result in an error and not silently fail...
+               */
+              throw err;
+          }
           this._onDidLayoutfromJSON.fire();
       }
       clear() {