dockview 1.8.2 → 1.8.4

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.2
+ * @version 1.8.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
+var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dv-react-tab-close-btn {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -271,9 +271,6 @@ class CompositeDisposable {
     get isDisposed() {
         return this._isDisposed;
     }
-    static from(...args) {
-        return new CompositeDisposable(...args);
-    }
     constructor(...args) {
         this._isDisposed = false;
         this._disposables = args;
@@ -902,7 +899,17 @@ class Splitview {
         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 === LayoutPriority.Low),
+            index,
+        ];
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === 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');
@@ -1659,6 +1666,7 @@ class BranchNode extends CompositeDisposable {
                 orientation: this.orientation,
                 descriptor,
                 proportionalLayout,
+                styles,
             });
         }
         this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2170,6 +2178,14 @@ class Gridview {
                 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
@@ -2477,6 +2493,12 @@ class DockviewApi {
     get onDidDrop() {
         return this.component.onDidDrop;
     }
+    get onWillDragGroup() {
+        return this.component.onWillDragGroup;
+    }
+    get onWillDragPanel() {
+        return this.component.onWillDragPanel;
+    }
     get panels() {
         return this.component.panels;
     }
@@ -2939,7 +2961,7 @@ class DragHandler extends CompositeDisposable {
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (this.isCancelled(event)) {
+            if (event.defaultPrevented || this.isCancelled(event)) {
                 event.preventDefault();
                 return;
             }
@@ -2959,19 +2981,23 @@ class DragHandler extends CompositeDisposable {
             }
             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();
@@ -2980,44 +3006,45 @@ class DragHandler extends CompositeDisposable {
     }
 }
 
+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) => {
@@ -3031,12 +3058,19 @@ class Tab extends CompositeDisposable {
                         // 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, 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);
     }
@@ -3068,9 +3102,9 @@ function addGhostImage(dataTransfer, ghostElement) {
 }
 
 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) => {
@@ -3090,8 +3124,9 @@ class GroupDragHandler extends DragHandler {
         }
         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');
@@ -3126,14 +3161,16 @@ class VoidContainer extends CompositeDisposable {
         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) => {
@@ -3151,7 +3188,9 @@ class VoidContainer extends CompositeDisposable {
                 return group.model.canDisplayOverlay(event, position, 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);
     }
@@ -3159,7 +3198,7 @@ class VoidContainer extends CompositeDisposable {
 
 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;
@@ -3205,6 +3244,19 @@ class TabsContainer extends CompositeDisposable {
             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;
     }
@@ -3213,7 +3265,7 @@ class TabsContainer extends CompositeDisposable {
             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();
@@ -3224,7 +3276,11 @@ class TabsContainer extends CompositeDisposable {
         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');
@@ -3241,14 +3297,22 @@ class TabsContainer extends CompositeDisposable {
         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,
@@ -3294,7 +3358,7 @@ class TabsContainer extends CompositeDisposable {
         }
     }
     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();
@@ -3303,21 +3367,23 @@ class TabsContainer extends CompositeDisposable {
     }
     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;
@@ -3325,8 +3391,8 @@ class TabsContainer extends CompositeDisposable {
                 !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,
@@ -3343,13 +3409,13 @@ class TabsContainer extends CompositeDisposable {
             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) {
@@ -3377,7 +3443,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     }
     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;
@@ -3434,6 +3500,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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();
@@ -3446,7 +3516,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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();
@@ -3472,8 +3543,12 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         });
         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);
@@ -3517,6 +3592,16 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             });
             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);
@@ -3528,8 +3613,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             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;
@@ -3779,6 +3864,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         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) {
@@ -3856,6 +3944,14 @@ class Resizable extends CompositeDisposable {
                  */
                 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);
         }));
@@ -5236,6 +5332,12 @@ const bringElementToFront = (() => {
     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;
@@ -5281,9 +5383,11 @@ class Overlay extends CompositeDisposable {
         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`;
@@ -5329,9 +5433,10 @@ class Overlay extends CompositeDisposable {
                         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 });
@@ -5405,14 +5510,11 @@ class Overlay extends CompositeDisposable {
                 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));
@@ -5420,21 +5522,23 @@ class Overlay extends CompositeDisposable {
                         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));
@@ -5442,15 +5546,18 @@ class Overlay extends CompositeDisposable {
                         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();
@@ -5494,6 +5601,18 @@ class Overlay extends CompositeDisposable {
             }));
         }));
     }
+    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();
@@ -5514,6 +5633,7 @@ class DockviewFloatingGroupPanel extends CompositeDisposable {
     }
 }
 
+const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -5544,6 +5664,10 @@ class DockviewComponent extends BaseGrid {
         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();
@@ -5556,7 +5680,7 @@ class DockviewComponent extends BaseGrid {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this.floatingGroups = [];
         toggleClass(this.gridview.element, 'dv-dockview', true);
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -5629,7 +5753,7 @@ class DockviewComponent extends BaseGrid {
         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();
@@ -5657,8 +5781,12 @@ class DockviewComponent extends BaseGrid {
             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) {
@@ -5729,12 +5857,37 @@ class DockviewComponent extends BaseGrid {
         }
     }
     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) {
@@ -5827,61 +5980,114 @@ class DockviewComponent extends BaseGrid {
     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();
     }
@@ -6095,6 +6301,7 @@ class DockviewComponent extends BaseGrid {
             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;
@@ -6217,7 +6424,11 @@ class DockviewComponent extends BaseGrid {
         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) => {
@@ -6256,13 +6467,6 @@ class DockviewComponent extends BaseGrid {
         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 {
@@ -6338,42 +6542,63 @@ class GridviewComponent extends BaseGrid {
     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();
     }
@@ -7558,8 +7783,10 @@ const DockviewReact = React.forwardRef((props, ref) => {
             showDndOverlay: props.showDndOverlay,
             createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
             createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
             singleTabMode: props.singleTabMode,
             disableFloatingGroups: props.disableFloatingGroups,
+            floatingGroupBounds: props.floatingGroupBounds,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
@@ -7594,6 +7821,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            floatingGroupBounds: props.floatingGroupBounds,
+        });
+    }, [props.floatingGroupBounds]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -7658,6 +7893,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
     }, [props.leftHeaderActionsComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+        });
+    }, [props.prefixHeaderActionsComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';
@@ -7700,25 +7943,32 @@ const CloseButton = () => (React.createElement("svg", { height: "11", width: "11
     React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
 
 const DockviewDefaultTab = (_a) => {
-    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+    var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
     const onClose = React.useCallback((event) => {
-        event.stopPropagation();
-        api.close();
-    }, [api]);
+        event.preventDefault();
+        if (closeActionOverride) {
+            closeActionOverride();
+        }
+        else {
+            api.close();
+        }
+    }, [api, closeActionOverride]);
+    const onMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+    }, []);
     const onClick = React.useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
         api.setActive();
         if (rest.onClick) {
             rest.onClick(event);
         }
     }, [api, rest.onClick]);
-    const iconClassname = React.useMemo(() => {
-        const cn = ['dockview-react-tab-action'];
-        return cn.join(',');
-    }, []);
-    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+    return (React.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
         React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        React.createElement("div", { className: iconClassname, onClick: onClose },
-            React.createElement(CloseButton, null))));
+        !hideClose && (React.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
+            React.createElement(CloseButton, null)))));
 };
 
 class ReactPanelView extends SplitviewPanel {