dockview 1.0.3 → 1.1.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.3
+ * @version 1.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -61,7 +61,6 @@
                     if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
                         listener(this._last);
                     }
-                    this._listeners.length === 0;
                     this._listeners.push(listener);
                     return {
                         dispose: () => {
@@ -77,9 +76,9 @@
         }
         fire(e) {
             this._last = e;
-            this._listeners.forEach((listener) => {
+            for (const listener of this._listeners) {
                 listener(e);
-            });
+            }
         }
         dispose() {
             this._listeners = [];
@@ -137,7 +136,7 @@
             return new CompositeDisposable(...args);
         }
         addDisposables(...args) {
-            args === null || args === void 0 ? void 0 : args.forEach((arg) => this.disposables.push(arg));
+            args.forEach((arg) => this.disposables.push(arg));
         }
         dispose() {
             this.disposables.forEach((arg) => arg.dispose());
@@ -156,20 +155,11 @@
         dispose() {
             if (this._disposable) {
                 this._disposable.dispose();
+                this._disposable = exports.Disposable.NONE;
             }
         }
     }
 
-    function tryParseJSON(text, reviver) {
-        try {
-            return JSON.parse(text, reviver);
-        }
-        catch (err) {
-            console.warn('failed to parse JSON');
-            return undefined;
-        }
-    }
-
     class TransferObject {
         constructor() {
             //
@@ -190,45 +180,6 @@
             this.paneId = paneId;
         }
     }
-    const DATA_KEY = 'splitview/transfer';
-    const isPanelTransferEvent = (event) => {
-        if (!event.dataTransfer) {
-            return false;
-        }
-        return event.dataTransfer.types.includes(DATA_KEY);
-    };
-    exports.DragType = void 0;
-    (function (DragType) {
-        DragType["DOCKVIEW_TAB"] = "dockview_tab";
-        DragType["EXTERNAL"] = "external_group_drag";
-    })(exports.DragType || (exports.DragType = {}));
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * dragging a tab component
-     */
-    const isTabDragEvent = (data) => {
-        return data.type === exports.DragType.DOCKVIEW_TAB;
-    };
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * a custom drag-enable component
-     */
-    const isCustomDragEvent = (data) => {
-        return data.type === exports.DragType.EXTERNAL;
-    };
-    const extractData = (event) => {
-        if (!event.dataTransfer) {
-            return null;
-        }
-        const data = tryParseJSON(event.dataTransfer.getData(DATA_KEY));
-        if (!data) {
-            console.warn(`[dragEvent] ${DATA_KEY} data is missing`);
-        }
-        if (typeof data.type !== 'string') {
-            console.warn(`[dragEvent] invalid type ${data.type}`);
-        }
-        return data;
-    };
     /**
      * A singleton to store transfer data during drag & drop operations that are only valid within the application.
      */
@@ -298,6 +249,9 @@
         get length() {
             return this.component.length;
         }
+        get orientation() {
+            return this.component.orientation;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -307,9 +261,6 @@
         get onDidRemoveView() {
             return this.component.onDidRemoveView;
         }
-        get orientation() {
-            return this.component.orientation;
-        }
         updateOptions(options) {
             this.component.updateOptions(options);
         }
@@ -354,18 +305,18 @@
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumSize() {
             return this.component.minimumSize;
         }
         get maximumSize() {
             return this.component.maximumSize;
         }
+        get height() {
+            return this.component.height;
+        }
+        get width() {
+            return this.component.width;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -421,12 +372,6 @@
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumHeight() {
             return this.component.minimumHeight;
         }
@@ -439,12 +384,30 @@
         get maximumWidth() {
             return this.component.maximumWidth;
         }
+        get width() {
+            return this.component.width;
+        }
+        get height() {
+            return this.component.height;
+        }
         get onGridEvent() {
             return this.component.onGridEvent;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
         get panels() {
             return this.component.groups;
         }
@@ -522,6 +485,27 @@
         get onGridEvent() {
             return this.component.onGridEvent;
         }
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActivePanelChange() {
+            return this.component.onDidActivePanelChange;
+        }
+        get onDidAddPanel() {
+            return this.component.onDidAddPanel;
+        }
+        get onDidRemovePanel() {
+            return this.component.onDidRemovePanel;
+        }
+        get onDidLayoutfromJSON() {
+            return this.component.onDidLayoutfromJSON;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -549,18 +533,12 @@
         getPanel(id) {
             return this.component.getGroupPanel(id);
         }
-        setActivePanel(panel) {
-            this.component.setActivePanel(panel);
-        }
         layout(width, height, force = false) {
             this.component.layout(width, height, force);
         }
         addPanel(options) {
             return this.component.addPanel(options);
         }
-        removePanel(panel) {
-            this.component.removePanel(panel);
-        }
         addEmptyGroup(options) {
             this.component.addEmptyGroup(options);
         }
@@ -1580,7 +1558,7 @@
                 this.paneItems.push(paneItem);
                 pane.orthogonalSize = this.splitview.orthogonalSize;
             });
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }), this.splitview.onDidAddView(() => {
                 this._onDidChange.fire();
@@ -1741,7 +1719,7 @@
             this.options = options;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
-            this.addDisposables(new DragAndDropObserver(this.element, {
+            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
                 onDragEnter: (e) => undefined,
                 onDragOver: (e) => {
                     if (isBooleanValue(this.options.canDisplayOverlay)) {
@@ -1777,51 +1755,11 @@
                     const y = e.offsetY;
                     const xp = (100 * x) / width;
                     const yp = (100 * y) / height;
-                    let isRight = false;
-                    let isLeft = false;
-                    let isTop = false;
-                    let isBottom = false;
-                    switch (this.options.validOverlays) {
-                        case 'all':
-                            isRight = xp > 80;
-                            isLeft = xp < 20;
-                            isTop = !isRight && !isLeft && yp < 20;
-                            isBottom = !isRight && !isLeft && yp > 80;
-                            break;
-                        case 'vertical':
-                            isTop = yp < 50;
-                            isBottom = yp >= 50;
-                            break;
-                        case 'horizontal':
-                            isLeft = xp < 50;
-                            isRight = xp >= 50;
-                            break;
-                    }
+                    const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                     const isSmallX = width < 100;
                     const isSmallY = height < 100;
-                    toggleClass(this.overlay, 'right', !isSmallX && isRight);
-                    toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                    toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                    toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-                    toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-                    toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                    toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                    toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-                    if (isRight) {
-                        this._state = exports.Position.Right;
-                    }
-                    else if (isLeft) {
-                        this._state = exports.Position.Left;
-                    }
-                    else if (isTop) {
-                        this._state = exports.Position.Top;
-                    }
-                    else if (isBottom) {
-                        this._state = exports.Position.Bottom;
-                    }
-                    else {
-                        this._state = exports.Position.Center;
-                    }
+                    this.toggleClasses(quadrant, isSmallX, isSmallY);
+                    this.setState(quadrant);
                 },
                 onDragLeave: (e) => {
                     this.removeDropTarget();
@@ -1850,9 +1788,73 @@
             this.options.canDisplayOverlay = value;
         }
         dispose() {
-            this._onDrop.dispose();
             this.removeDropTarget();
         }
+        toggleClasses(quadrant, isSmallX, isSmallY) {
+            if (!this.overlay) {
+                return;
+            }
+            const isLeft = quadrant === 'left';
+            const isRight = quadrant === 'right';
+            const isTop = quadrant === 'top';
+            const isBottom = quadrant === 'bottom';
+            toggleClass(this.overlay, 'right', !isSmallX && isRight);
+            toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+            toggleClass(this.overlay, 'top', !isSmallY && isTop);
+            toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+            toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+            toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+            toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+            toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+        }
+        setState(quadrant) {
+            switch (quadrant) {
+                case 'top':
+                    this._state = exports.Position.Top;
+                    break;
+                case 'left':
+                    this._state = exports.Position.Left;
+                    break;
+                case 'bottom':
+                    this._state = exports.Position.Bottom;
+                    break;
+                case 'right':
+                    this._state = exports.Position.Right;
+                    break;
+                default:
+                    this._state = exports.Position.Center;
+                    break;
+            }
+        }
+        calculateQuadrant(overlayType, xp, yp) {
+            switch (overlayType) {
+                case 'all':
+                    if (xp < 20) {
+                        return 'left';
+                    }
+                    if (xp > 80) {
+                        return 'right';
+                    }
+                    if (yp < 20) {
+                        return 'top';
+                    }
+                    if (yp > 80) {
+                        return 'bottom';
+                    }
+                    break;
+                case 'vertical':
+                    if (yp < 50) {
+                        return 'top';
+                    }
+                    return 'bottom';
+                case 'horizontal':
+                    if (xp < 50) {
+                        return 'left';
+                    }
+                    return 'right';
+            }
+            return null;
+        }
         removeDropTarget() {
             if (this.target) {
                 this._state = undefined;
@@ -1955,6 +1957,7 @@
             this.view.layout(this.width, this.height);
         }
         dispose() {
+            this._onDidChange.dispose();
             this._disposable.dispose();
         }
     }
@@ -2006,7 +2009,7 @@
                     proportionalLayout,
                 });
             }
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }));
             this.setupChildrenEvents();
@@ -2178,6 +2181,15 @@
      * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
      * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
      *--------------------------------------------------------------------------------------------*/
+    function findLeaf(candiateNode, last) {
+        if (candiateNode instanceof LeafNode) {
+            return candiateNode;
+        }
+        if (candiateNode instanceof BranchNode) {
+            return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+        }
+        throw new Error('invalid node');
+    }
     function flipNode(node, size, orthogonalSize) {
         if (node instanceof BranchNode) {
             const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
@@ -2316,13 +2328,13 @@
         }
         deserialize(json, deserializer) {
             const orientation = json.orientation;
-            const height = json.height;
+            const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
             this._deserialize(json.root, orientation, deserializer, height);
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
-            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
+            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
         }
-        _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+        _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
             let result;
             if (node.type === 'branch') {
                 const serializedChildren = node.data;
@@ -2332,7 +2344,9 @@
                         visible: serializedChild.visible,
                     };
                 });
-                result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, orthogonalSize, children);
+                // HORIZONTAL => height=orthogonalsize width=size
+                // VERTICAL => height=size width=orthogonalsize
+                result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
             }
             else {
                 result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2393,15 +2407,6 @@
             if (!(node instanceof LeafNode)) {
                 throw new Error('invalid location');
             }
-            const findLeaf = (candiateNode, last) => {
-                if (candiateNode instanceof LeafNode) {
-                    return candiateNode;
-                }
-                if (candiateNode instanceof BranchNode) {
-                    return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-                }
-                throw new Error('invalid node');
-            };
             for (let i = path.length - 1; i > -1; i--) {
                 const n = path[i];
                 const l = location[i] || 0;
@@ -2503,9 +2508,9 @@
             if (parent.children.length > 1) {
                 return node.view;
             }
+            const sibling = parent.children[0];
             if (pathToParent.length === 0) {
                 // parent is root
-                const sibling = parent.children[0];
                 if (sibling instanceof LeafNode) {
                     return node.view;
                 }
@@ -2516,7 +2521,6 @@
             }
             const [grandParent, ..._] = [...pathToParent].reverse();
             const [parentIndex, ...__] = [...rest].reverse();
-            const sibling = parent.children[0];
             const isSiblingVisible = parent.isChildVisible(0);
             parent.removeChild(0, sizing);
             const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
@@ -2563,31 +2567,6 @@
         }
     }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     class ContentContainer extends CompositeDisposable {
         constructor() {
             super();
@@ -2599,6 +2578,7 @@
             this._element = document.createElement('div');
             this._element.className = 'content-container';
             this._element.tabIndex = -1;
+            this.addDisposables(this._onDidFocus, this._onDidBlur);
             // for hosted containers
             // 1) register a drop target on the host
             // 2) register window dragStart events to disable pointer events
@@ -2665,6 +2645,41 @@
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
     })(DockviewDropTargets || (DockviewDropTargets = {}));
 
+    class DragHandler extends CompositeDisposable {
+        constructor(el) {
+            super();
+            this.el = el;
+            this.disposable = new MutableDisposable();
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this.iframes = [];
+            this.configure();
+        }
+        configure() {
+            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+                this.iframes = [
+                    ...getElementsByTagName('iframe'),
+                    ...getElementsByTagName('webview'),
+                ];
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'none';
+                }
+                this.el.classList.add('dragged');
+                setTimeout(() => this.el.classList.remove('dragged'), 0);
+                this.disposable.value = this.getData();
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                }
+            }), addDisposableListener(this.el, 'dragend', (ev) => {
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'auto';
+                }
+                this.iframes = [];
+                this.disposable.dispose();
+            }));
+        }
+    }
+
     exports.MouseEventKind = void 0;
     (function (MouseEventKind) {
         MouseEventKind["CLICK"] = "CLICK";
@@ -2674,42 +2689,34 @@
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
-            this.accessor = accessor;
             this.group = group;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
-            this.iframes = [];
             this.addDisposables(this._onChanged, this._onDropped);
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
+            this.addDisposables(new (class Handler extends DragHandler {
+                constructor() {
+                    super(...arguments);
+                    this.panelTransfer = LocalSelectionTransfer.getInstance();
                 }
-                this.element.classList.add('dragged');
-                setTimeout(() => this.element.classList.remove('dragged'), 0);
-                this.panelTransfer.setData([
-                    new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-                ], PanelTransfer.prototype);
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
+                getData() {
+                    this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            this.panelTransfer.clearData(PanelTransfer.prototype);
+                        },
+                    };
                 }
-            }), addDisposableListener(this._element, 'dragend', (ev) => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
+                dispose() {
+                    //
                 }
-                this.iframes = [];
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            }), addDisposableListener(this._element, 'mousedown', (event) => {
+            })(this._element));
+            this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -2911,12 +2918,10 @@
                 if (!isLeftClick || event.event.defaultPrevented) {
                     return;
                 }
-                switch (event.kind) {
-                    case exports.MouseEventKind.CLICK:
-                        this.group.model.openPanel(panel, {
-                            skipFocus: alreadyFocused,
-                        });
-                        break;
+                if (event.kind === exports.MouseEventKind.CLICK) {
+                    this.group.model.openPanel(panel, {
+                        skipFocus: alreadyFocused,
+                    });
                 }
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
@@ -2945,7 +2950,6 @@
         GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
         GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
         GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
     })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
     class Groupview extends CompositeDisposable {
         constructor(container, accessor, id, options, parent) {
@@ -2966,15 +2970,10 @@
             this.onMove = this._onMove.event;
             this._onDidGroupChange = new Emitter();
             this.onDidGroupChange = this._onDidGroupChange.event;
-            this.closePanel = (panel) => __awaiter(this, void 0, void 0, function* () {
-                if (panel.close && !(yield panel.close())) {
-                    return false;
-                }
-                this.doClose(panel);
-                return true;
-            });
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
             this.container.classList.add('groupview');
-            this.addDisposables(this._onMove, this._onDidGroupChange);
+            this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
             this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
                 tabHeight: options.tabHeight,
             });
@@ -3131,6 +3130,8 @@
                 options.index > this.panels.length) {
                 options.index = this.panels.length;
             }
+            // ensure the group is updated before we fire any events
+            panel.updateParentGroup(this.parent, true);
             if (this._activePanel === panel) {
                 this.accessor.doSetGroupActive(this.parent);
                 return;
@@ -3151,43 +3152,19 @@
             return this._removePanel(panelToRemove);
         }
         closeAllPanels() {
-            var _a;
-            return __awaiter(this, void 0, void 0, function* () {
-                const index = this._activePanel
-                    ? this.panels.indexOf(this._activePanel)
-                    : -1;
-                if (this._activePanel && index > -1) {
-                    if (this.panels.indexOf(this._activePanel) < 0) {
-                        console.warn('active panel not tracked');
-                    }
-                    const canClose = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close) || (yield this._activePanel.close());
-                    if (!canClose) {
-                        return false;
-                    }
-                }
-                for (let i = 0; i < this.panels.length; i++) {
-                    if (i === index) {
-                        continue;
-                    }
-                    const panel = this.panels[i];
-                    this.openPanel(panel);
-                    if (panel.close) {
-                        const canClose = yield panel.close();
-                        if (!canClose) {
-                            return false;
-                        }
-                    }
-                }
-                if (this.panels.length > 0) {
-                    // take a copy since we will be edting the array as we iterate through
-                    const arrPanelCpy = [...this.panels];
-                    yield Promise.all(arrPanelCpy.map((p) => this.doClose(p)));
+            if (this.panels.length > 0) {
+                // take a copy since we will be edting the array as we iterate through
+                const arrPanelCpy = [...this.panels];
+                for (const panel of arrPanelCpy) {
+                    this.doClose(panel);
                 }
-                else {
-                    this.accessor.removeGroup(this.parent);
-                }
-                return true;
-            });
+            }
+            else {
+                this.accessor.removeGroup(this.parent);
+            }
+        }
+        closePanel(panel) {
+            this.doClose(panel);
         }
         doClose(panel) {
             this.accessor.removePanel(panel);
@@ -3330,8 +3307,11 @@
                 this.tabsContainer.show();
             }
         }
-        canDisplayOverlay(dragOverEvent, target) {
+        canDisplayOverlay(event, target) {
             // custom overlay handler
+            if (this.accessor.options.showDndOverlay) {
+                return this.accessor.options.showDndOverlay(event, target);
+            }
             return false;
         }
         handleDropEvent(event, position, index) {
@@ -3356,6 +3336,9 @@
                     index,
                 });
             }
+            else {
+                this._onDidDrop.fire({ nativeEvent: event, position, index });
+            }
         }
         dispose() {
             for (const panel of this.panels) {
@@ -3408,10 +3391,15 @@
             this.onGridEvent = this._onGridEvent.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
+            this._onDidRemoveGroup = new Emitter();
+            this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+            this._onDidAddGroup = new Emitter();
+            this.onDidAddGroup = this._onDidAddGroup.event;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
             this.element.appendChild(this.gridview.element);
-            // TODO for some reason this is required before anything will layout correctly
-            this.layout(0, 0, true);
+            this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
                 this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
             }));
@@ -3477,6 +3465,7 @@
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.ADD_GROUP });
+            this._onDidAddGroup.fire(group);
             this.doSetGroupActive(group);
         }
         doRemoveGroup(group, options) {
@@ -3490,6 +3479,7 @@
                 this._groups.delete(group.id);
             }
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.REMOVE_GROUP });
+            this._onDidRemoveGroup.fire(group);
             if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                 const groups = Array.from(this._groups.values());
                 this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -3520,6 +3510,7 @@
             this._onGridEvent.fire({
                 kind: exports.GroupChangeKind.GROUP_ACTIVE,
             });
+            this._onDidActiveGroupChange.fire(group);
         }
         removeGroup(group) {
             this.doRemoveGroup(group);
@@ -3576,6 +3567,10 @@
         dispose() {
             super.dispose();
             this._onGridEvent.dispose();
+            this._onDidActiveGroupChange.dispose();
+            this._onDidAddGroup.dispose();
+            this._onDidRemoveGroup.dispose();
+            this._onDidLayoutChange.dispose();
             this.gridview.dispose();
         }
     }
@@ -3587,15 +3582,11 @@
         constructor(id) {
             super();
             this.id = id;
-            this._state = {};
             this._isFocused = false;
             this._isActive = false;
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
-            this._onDidStateChange = new Emitter();
-            this.onDidStateChange = this._onDidStateChange.event;
-            //
             this._onDidPanelDimensionChange = new Emitter({
                 replay: true,
             });
@@ -3624,7 +3615,7 @@
             //
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this.addDisposables(this._onDidStateChange, this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this.onDidFocusChange((event) => {
+            this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
@@ -3657,21 +3648,6 @@
         setActive() {
             this._onActiveChange.fire();
         }
-        setState(key, value) {
-            if (typeof key === 'object') {
-                this._state = key;
-            }
-            else if (typeof value !== undefined) {
-                this._state[key] = value;
-            }
-            this._onDidStateChange.fire(undefined);
-        }
-        getState() {
-            return this._state;
-        }
-        getStateKey(key) {
-            return this._state[key];
-        }
         dispose() {
             super.dispose();
         }
@@ -3691,6 +3667,7 @@
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -3704,19 +3681,19 @@
         constructor(panel, group) {
             super(panel.id);
             this.panel = panel;
-            this._onDidDirtyChange = new Emitter();
-            this.onDidDirtyChange = this._onDidDirtyChange.event;
             this._onDidTitleChange = new Emitter();
             this.onDidTitleChange = this._onDidTitleChange.event;
             this._titleChanged = new Emitter();
             this.titleChanged = this._titleChanged.event;
             this._suppressClosableChanged = new Emitter();
             this.suppressClosableChanged = this._suppressClosableChanged.event;
-            this._group = group;
-            this.addDisposables(this._onDidDirtyChange);
-        }
-        get tryClose() {
-            return this._interceptor;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidGroupChange = new Emitter();
+            this.onDidGroupChange = this._onDidGroupChange.event;
+            this.disposable = new MutableDisposable();
+            this.group = group;
+            this.addDisposables(this.disposable, this._onDidTitleChange, this._titleChanged, this._suppressClosableChanged, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
         get title() {
             return this.panel.title;
@@ -3729,7 +3706,17 @@
             return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
         }
         set group(value) {
+            const isOldGroupActive = this.isGroupActive;
             this._group = value;
+            this._onDidGroupChange.fire();
+            if (this._group) {
+                this.disposable.value = this._group.api.onDidActiveChange(() => {
+                    this._onDidActiveGroupChange.fire();
+                });
+                if (this.isGroupActive !== isOldGroupActive) {
+                    this._onDidActiveGroupChange.fire();
+                }
+            }
         }
         get group() {
             return this._group;
@@ -3743,16 +3730,10 @@
             }
             return this.group.model.closePanel(this.panel);
         }
-        interceptOnCloseAction(interceptor) {
-            this._interceptor = interceptor;
-        }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class DockviewGroupPanel extends CompositeDisposable {
-        constructor(id, containerApi) {
+        constructor(id, accessor, containerApi) {
             super();
             this.id = id;
             this.containerApi = containerApi;
@@ -3760,9 +3741,8 @@
             this._suppressClosable = false;
             this._title = '';
             this.api = new DockviewPanelApiImpl(this, this._group);
-            this.onDidStateChange = this.api.onDidStateChange;
             this.addDisposables(this.api.onActiveChange(() => {
-                this.containerApi.setActivePanel(this);
+                accessor.setActivePanel(this);
             }), this.api.onDidTitleChange((event) => {
                 const title = event.title;
                 this.update({ params: { title } });
@@ -3786,32 +3766,18 @@
             this._view = params.view;
             this.setTitle(params.title);
             this.setSuppressClosable(params.suppressClosable || false);
-            if (params.state) {
-                this.api.setState(params.state);
-            }
             (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
         }
         focus() {
             this.api._onFocusEvent.fire();
         }
-        setDirty(isDirty) {
-            this.api._onDidDirtyChange.fire(isDirty);
-        }
-        close() {
-            if (this.api.tryClose) {
-                return this.api.tryClose();
-            }
-            return Promise.resolve(true);
-        }
         toJSON() {
-            const state = this.api.getState();
             return {
                 id: this.id,
                 view: this.view.toJSON(),
                 params: Object.keys(this._params || {}).length > 0
                     ? this._params
                     : undefined,
-                state: state && Object.keys(state).length > 0 ? state : undefined,
                 suppressClosable: this.suppressClosable || undefined,
                 title: this.title,
             };
@@ -3856,18 +3822,6 @@
             var _a;
             this._group = group;
             this.api.group = group;
-            this.mutableDisposable.value = this._group.model.onDidGroupChange((ev) => {
-                var _a;
-                if (ev.kind === exports.GroupChangeKind2.GROUP_ACTIVE) {
-                    const isVisible = !!((_a = this._group) === null || _a === void 0 ? void 0 : _a.model.isPanelActive(this));
-                    this.api._onDidActiveChange.fire({
-                        isActive: isGroupActive && isVisible,
-                    });
-                    this.api._onDidVisibilityChange.fire({
-                        isVisible,
-                    });
-                }
-            });
             const isPanelVisible = this._group.model.isPanelActive(this);
             this.api._onDidActiveChange.fire({
                 isActive: isGroupActive && isPanelVisible,
@@ -3977,15 +3931,6 @@
         }
     }
 
-    function debounce(cb, wait) {
-        let timeout;
-        const callable = (...args) => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => cb(...args), wait);
-        };
-        return callable;
-    }
-
     class DefaultDeserializer {
         constructor(layout, panelDeserializer) {
             this.layout = layout;
@@ -4086,9 +4031,6 @@
             this._isGroupActive = false;
             //
             this.params = {};
-            //
-            this.isDirtyDisposable = new MutableDisposable();
-            this.addDisposables(this.isDirtyDisposable);
             this._element = document.createElement('div');
             this._element.className = 'default-tab';
             //
@@ -4133,10 +4075,6 @@
         init(params) {
             this.params = params;
             this._content.textContent = params.title;
-            this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
-                const isDirty = event;
-                toggleClass(this.action, 'dirty', isDirty);
-            });
             if (!this.params.suppressClosable) {
                 addDisposableListener(this.action, 'click', (ev) => {
                     ev.preventDefault(); //
@@ -4190,6 +4128,10 @@
         get height() {
             return this._height;
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         focus() {
             this.api._onFocusEvent.fire();
         }
@@ -4198,29 +4140,27 @@
             this._height = height;
             this.api._onDidPanelDimensionChange.fire({ width, height });
             if (this.part) {
-                if (this.params) {
-                    this.part.update(this.params.params);
+                if (this._params) {
+                    this.part.update(this._params.params);
                 }
             }
         }
         init(parameters) {
-            this.params = parameters;
+            this._params = parameters;
             this.part = this.getComponent();
         }
         update(event) {
             var _a, _b;
-            this.params = Object.assign(Object.assign({}, this.params), { params: Object.assign(Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this.params.params });
+            this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
         }
         toJSON() {
             var _a, _b;
-            const state = this.api.getState();
-            const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+            const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
             return {
                 id: this.id,
                 component: this.component,
                 params: Object.keys(params).length > 0 ? params : undefined,
-                state: Object.keys(state).length === 0 ? undefined : state,
             };
         }
         dispose() {
@@ -4243,12 +4183,12 @@
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumWidth === 'number' ||
@@ -4363,9 +4303,6 @@
             const minimum = (value) => (value <= 0 ? undefined : value);
             return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
         }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class GroupviewPanel extends GridviewPanel {
@@ -4472,15 +4409,22 @@
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
-            this._panels = new Map();
-            this.dirtyPanels = new Set();
-            this.debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
             // events
             this._onTabInteractionEvent = new Emitter();
             this.onTabInteractionEvent = this._onTabInteractionEvent.event;
             this._onTabContextMenu = new Emitter();
             this.onTabContextMenu = this._onTabContextMenu.event;
-            this.panelState = {};
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -4501,10 +4445,10 @@
             this._api = new DockviewApi(this);
         }
         get totalPanels() {
-            return this._panels.size;
+            return this.panels.length;
         }
         get panels() {
-            return Array.from(this._panels.values()).map((_) => _.value);
+            return this.groups.flatMap((group) => group.model.panels);
         }
         get deserializer() {
             return this._deserializer;
@@ -4534,10 +4478,6 @@
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.options.orientation !== options.orientation;
-            // TODO support style update
-            // const hasStylesChanged =
-            //     typeof options.styles === 'object' &&
-            //     this.options.styles !== options.styles;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4549,8 +4489,7 @@
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
         getGroupPanel(id) {
-            var _a;
-            return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+            return this.panels.find((panel) => panel.id === id);
         }
         setActivePanel(panel) {
             if (!panel.group) {
@@ -4599,24 +4538,6 @@
                 this.doSetGroupActive(next);
             }
         }
-        registerPanel(panel) {
-            if (this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} already exists`);
-            }
-            const disposable = new CompositeDisposable(panel.onDidStateChange(() => this.addDirtyPanel(panel)));
-            this._panels.set(panel.id, { value: panel, disposable });
-        }
-        unregisterPanel(panel) {
-            if (!this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} doesn't exist`);
-            }
-            const item = this._panels.get(panel.id);
-            if (item) {
-                item.disposable.dispose();
-                item.value.dispose();
-            }
-            this._panels.delete(panel.id);
-        }
         /**
          * Serialize the current state of the layout
          *
@@ -4624,12 +4545,9 @@
          */
         toJSON() {
             var _a;
-            this.syncConfigs();
             const data = this.gridview.serialize();
-            const panels = Array.from(this._panels.values()).reduce((collection, panel) => {
-                if (!this.panelState[panel.value.id]) {
-                    collection[panel.value.id] = panel.value.toJSON();
-                }
+            const panels = this.panels.reduce((collection, panel) => {
+                collection[panel.id] = panel.toJSON();
                 return collection;
             }, {});
             return {
@@ -4641,11 +4559,9 @@
         }
         fromJSON(data) {
             this.gridview.clear();
-            this._panels.forEach((panel) => {
-                panel.disposable.dispose();
-                panel.value.dispose();
+            this.panels.forEach((panel) => {
+                panel.dispose();
             });
-            this._panels.clear();
             this._groups.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
@@ -4660,9 +4576,7 @@
             this.gridview.deserialize(grid, new DefaultDeserializer(this, {
                 createPanel: (id) => {
                     const panelData = panels[id];
-                    const panel = this.deserializer.fromJSON(panelData);
-                    this.registerPanel(panel);
-                    return panel;
+                    return this.deserializer.fromJSON(panelData);
                 },
             }));
             if (typeof activeGroup === 'string') {
@@ -4673,30 +4587,23 @@
             }
             this.gridview.layout(this.width, this.height);
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         closeAllGroups() {
-            return __awaiter(this, void 0, void 0, function* () {
-                for (const entry of this._groups.entries()) {
-                    const [_, group] = entry;
-                    const didCloseAll = yield group.value.model.closeAllPanels();
-                    if (!didCloseAll) {
-                        return false;
-                    }
-                }
-                return true;
-            });
+            for (const entry of this._groups.entries()) {
+                const [_, group] = entry;
+                group.value.model.closeAllPanels();
+            }
         }
         fireMouseEvent(event) {
-            switch (event.kind) {
-                case exports.MouseEventKind.CONTEXT_MENU:
-                    if (event.tab && event.panel) {
-                        this._onTabContextMenu.fire({
-                            event: event.event,
-                            api: this._api,
-                            panel: event.panel,
-                        });
-                    }
-                    break;
+            if (event.kind === exports.MouseEventKind.CONTEXT_MENU) {
+                if (event.tab && event.panel) {
+                    this._onTabContextMenu.fire({
+                        event: event.event,
+                        api: this._api,
+                        panel: event.panel,
+                    });
+                }
             }
         }
         addPanel(options) {
@@ -4730,7 +4637,6 @@
             return panel;
         }
         removePanel(panel) {
-            this.unregisterPanel(panel);
             const group = panel.group;
             if (!group) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
@@ -4749,10 +4655,9 @@
                 : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
         }
         addEmptyGroup(options) {
-            var _a;
             const group = this.createGroup();
             if (options) {
-                const referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+                const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
                 if (!referencePanel) {
                     throw new Error(`reference panel ${options.referencePanel} does not exist`);
                 }
@@ -4781,13 +4686,13 @@
             super.removeGroup(group);
         }
         moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
-            var _a, _b, _c;
+            var _a;
             const sourceGroup = groupId
                 ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
             if (!target || target === exports.Position.Center) {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
+                    this.panels.find((panel) => panel.id === itemId);
                 if (!groupItem) {
                     throw new Error(`No panel with id ${itemId}`);
                 }
@@ -4823,7 +4728,7 @@
                 }
                 else {
                     const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                        ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
+                        this.panels.find((panel) => panel.id === itemId);
                     if (!groupItem) {
                         throw new Error(`No panel with id ${itemId}`);
                     }
@@ -4833,7 +4738,7 @@
             }
         }
         doSetGroupActive(group, skipFocus) {
-            var _a, _b;
+            var _a, _b, _c;
             const isGroupAlreadyFocused = this._activeGroup === group;
             super.doSetGroupActive(group, skipFocus);
             if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
@@ -4841,6 +4746,7 @@
                     kind: exports.GroupChangeKind.PANEL_ACTIVE,
                     panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
                 });
+                this._onDidActivePanelChange.fire((_c = this._activeGroup) === null || _c === void 0 ? void 0 : _c.model.activePanel);
             }
         }
         createGroup(options) {
@@ -4866,6 +4772,8 @@
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                }), view.model.onDidDrop((event) => {
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
@@ -4873,24 +4781,25 @@
                                 kind: exports.GroupChangeKind.ADD_PANEL,
                                 panel: event.panel,
                             });
-                            break;
-                        case exports.GroupChangeKind2.GROUP_ACTIVE:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-                                panel: event.panel,
-                            });
+                            if (event.panel) {
+                                this._onDidAddPanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.REMOVE_PANEL:
                             this._onGridEvent.fire({
                                 kind: exports.GroupChangeKind.REMOVE_PANEL,
                                 panel: event.panel,
                             });
+                            if (event.panel) {
+                                this._onDidRemovePanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.PANEL_ACTIVE:
                             this._onGridEvent.fire({
                                 kind: exports.GroupChangeKind.PANEL_ACTIVE,
                                 panel: event.panel,
                             });
+                            this._onDidActivePanelChange.fire(event.panel);
                             break;
                     }
                 }));
@@ -4904,44 +4813,18 @@
             }
             return view;
         }
-        dispose() {
-            super.dispose();
-            this._onGridEvent.dispose();
-        }
-        /**
-         * Ensure the local copy of the layout state is up-to-date
-         */
-        syncConfigs() {
-            const dirtyPanels = Array.from(this.dirtyPanels);
-            if (dirtyPanels.length === 0) ;
-            this.dirtyPanels.clear();
-            const partialPanelState = dirtyPanels
-                .map((panel) => this._panels.get(panel.id))
-                .filter((_) => !!_)
-                .reduce((collection, panel) => {
-                collection[panel.value.id] = panel.value.toJSON();
-                return collection;
-            }, {});
-            this.panelState = Object.assign(Object.assign({}, this.panelState), partialPanelState);
-            dirtyPanels
-                .filter((p) => this._panels.has(p.id))
-                .forEach((panel) => {
-                panel.setDirty(false);
-            });
-        }
         _addPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
             });
-            const panel = new DockviewGroupPanel(options.id, this._api);
+            const panel = new DockviewGroupPanel(options.id, this, this._api);
             panel.init({
                 view,
                 title: options.title || options.id,
                 suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
                 params: (options === null || options === void 0 ? void 0 : options.params) || {},
             });
-            this.registerPanel(panel);
             return panel;
         }
         createContentComponent(id, componentName) {
@@ -4961,10 +4844,12 @@
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
-        addDirtyPanel(panel) {
-            this.dirtyPanels.add(panel);
-            panel.setDirty(true);
-            this.debouncedDeque();
+        dispose() {
+            super.dispose();
+            this._onDidActivePanelChange.dispose();
+            this._onDidAddPanel.dispose();
+            this._onDidRemovePanel.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -4975,6 +4860,8 @@
                 orientation: options.orientation,
                 styles: options.styles,
             });
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -5083,6 +4970,7 @@
                 }
             }
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         movePanel(panel, options) {
             var _a;
@@ -5197,6 +5085,7 @@
         }
         dispose() {
             super.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -5223,7 +5112,7 @@
                 options.frameworkComponents = {};
             }
             this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
         }
         get options() {
             return this._options;
@@ -5445,41 +5334,6 @@
         }
     }
 
-    class DragHandler extends CompositeDisposable {
-        constructor(el) {
-            super();
-            this.el = el;
-            this.iframes = [];
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this.configure();
-        }
-        configure() {
-            this.addDisposables(addDisposableListener(this.el, 'dragstart', (event) => {
-                var _a;
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-                this.el.classList.add('dragged');
-                setTimeout(() => this.el.classList.remove('dragged'), 0);
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = this.getData();
-            }), addDisposableListener(this.el, 'dragend', (ev) => {
-                var _a;
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = undefined;
-            }));
-        }
-    }
-
     class SplitviewPanelApiImpl extends PanelApiImpl {
         //
         constructor(id) {
@@ -5494,6 +5348,7 @@
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -5501,11 +5356,6 @@
         setSize(event) {
             this._onDidSizeChange.fire(event);
         }
-        dispose() {
-            super.dispose();
-            this._onDidConstraintsChange.dispose();
-            this._onDidSizeChange.dispose();
-        }
     }
 
     class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
@@ -5519,6 +5369,7 @@
             this.onMouseEnter = this._onMouseEnter.event;
             this._onMouseLeave = new Emitter({});
             this.onMouseLeave = this._onMouseLeave.event;
+            this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
         }
         set pane(pane) {
             this._pane = pane;
@@ -5687,7 +5538,7 @@
             }
         }
         toJSON() {
-            const params = this.params;
+            const params = this._params;
             return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
         }
         renderOnce() {
@@ -5756,36 +5607,39 @@
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-                const data = getPaneData();
-                if (!data) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const containerApi = this.params
-                    .containerApi;
-                const panelId = data.paneId;
-                const existingPanel = containerApi.getPanel(panelId);
-                if (!existingPanel) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const allPanels = containerApi.getPanels();
-                const fromIndex = allPanels.indexOf(existingPanel);
-                let toIndex = containerApi.getPanels().indexOf(this);
-                if (event.position === exports.Position.Left ||
-                    event.position === exports.Position.Top) {
-                    toIndex = Math.max(0, toIndex - 1);
-                }
-                if (event.position === exports.Position.Right ||
-                    event.position === exports.Position.Bottom) {
-                    if (fromIndex > toIndex) {
-                        toIndex++;
-                    }
-                    toIndex = Math.min(allPanels.length - 1, toIndex);
-                }
-                containerApi.movePanel(fromIndex, toIndex);
+                this.onDrop(event);
             }));
         }
+        onDrop(event) {
+            const data = getPaneData();
+            if (!data) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const containerApi = this._params
+                .containerApi;
+            const panelId = data.paneId;
+            const existingPanel = containerApi.getPanel(panelId);
+            if (!existingPanel) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const allPanels = containerApi.getPanels();
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.getPanels().indexOf(this);
+            if (event.position === exports.Position.Left ||
+                event.position === exports.Position.Top) {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === exports.Position.Right ||
+                event.position === exports.Position.Bottom) {
+                if (fromIndex > toIndex) {
+                    toIndex++;
+                }
+                toIndex = Math.min(allPanels.length - 1, toIndex);
+            }
+            containerApi.movePanel(fromIndex, toIndex);
+        }
     }
 
     class DefaultHeader extends CompositeDisposable {
@@ -5849,6 +5703,7 @@
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
+            this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -6076,12 +5931,14 @@
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumSize === 'number' ||
@@ -6224,14 +6081,13 @@
             if (this.disposed) {
                 throw new Error('invalid operation: resource is already disposed');
             }
-            // TODO use a better check for isReactFunctionalComponent
             if (typeof this.component !== 'function') {
                 /**
                  * we know this isn't a React.FunctionComponent so throw an error here.
                  * if we do not intercept this the React library will throw a very obsure error
                  * for the same reason, at least at this point we will emit a sensible stacktrace.
                  */
-                throw new Error('invalid operation: only functional components are supported');
+                throw new Error('Invalid Operation. dockview only supports React Functional Components.');
             }
             const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
                 component: this
@@ -6295,16 +6151,14 @@
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
+            this._element.className = 'dockview-react-part';
             // this.hostedContainer = new HostedContainer({
             //     id,
             // });
             // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
             // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
             this._actionsElement = document.createElement('div');
-            this._actionsElement.style.height = '100%';
-            this._actionsElement.style.width = '100%';
+            this._actionsElement.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6352,6 +6206,8 @@
         }
         dispose() {
             var _a, _b;
+            this._onDidFocus.dispose();
+            this._onDidBlur.dispose();
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
             // this.hostedContainer?.dispose();
             (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
@@ -6364,6 +6220,7 @@
             this.component = component;
             this.reactPortalStore = reactPortalStore;
             this._element = document.createElement('div');
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6408,7 +6265,6 @@
             const panelId = panelData.id;
             const params = panelData.params;
             const title = panelData.title;
-            const state = panelData.state;
             const suppressClosable = panelData.suppressClosable;
             const viewData = panelData.view;
             const view = new DefaultGroupPanelView({
@@ -6417,13 +6273,12 @@
                     ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
                     : new DefaultTab(),
             });
-            const panel = new DockviewGroupPanel(panelId, new DockviewApi(this.layout));
+            const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout));
             panel.init({
                 view,
                 title,
                 suppressClosable,
                 params: params || {},
-                state: state || {},
             });
             return panel;
         }
@@ -6438,8 +6293,7 @@
                 value: undefined,
             };
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6537,12 +6391,16 @@
                 frameworkTabComponents: props.tabComponents,
                 tabHeight: props.tabHeight,
                 debug: props.debug,
-                enableExternalDragEvents: props.enableExternalDragEvents,
                 watermarkFrameworkComponent: props.watermarkComponent,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
             });
+            const disposable = dockview.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
             (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
             dockview.deserializer = new ReactPanelDeserialzier(dockview);
             const { clientWidth, clientHeight } = domRef.current;
@@ -6552,6 +6410,7 @@
             }
             dockviewRef.current = dockview;
             return () => {
+                disposable.dispose();
                 dockview.dispose();
             };
         }, []);
@@ -6563,6 +6422,14 @@
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                showDndOverlay: props.showDndOverlay,
+            });
+        }, [props.showDndOverlay]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6651,9 +6518,9 @@
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6726,9 +6593,9 @@
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6919,7 +6786,6 @@
     exports.BaseGrid = BaseGrid;
     exports.CompositeDisposable = CompositeDisposable;
     exports.ContentContainer = ContentContainer;
-    exports.DATA_KEY = DATA_KEY;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewComponents = DockviewComponents;
@@ -6954,7 +6820,6 @@
     exports.TickDelayedEvent = TickDelayedEvent;
     exports.addDisposableListener = addDisposableListener;
     exports.addDisposableWindowListener = addDisposableWindowListener;
-    exports.extractData = extractData;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;
@@ -6962,11 +6827,8 @@
     exports.getPanelData = getPanelData;
     exports.getRelativeLocation = getRelativeLocation;
     exports.indexInParent = indexInParent;
-    exports.isCustomDragEvent = isCustomDragEvent;
     exports.isGridBranchNode = isGridBranchNode;
-    exports.isPanelTransferEvent = isPanelTransferEvent;
     exports.isReactElement = isReactElement;
-    exports.isTabDragEvent = isTabDragEvent;
     exports.orthogonal = orthogonal;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;