dockview 1.1.0 → 1.2.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.1.0
+ * @version 1.2.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -31,6 +31,76 @@
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
+    class TransferObject {
+        constructor() {
+            //
+        }
+    }
+    class PanelTransfer extends TransferObject {
+        constructor(viewId, groupId, panelId) {
+            super();
+            this.viewId = viewId;
+            this.groupId = groupId;
+            this.panelId = panelId;
+        }
+    }
+    class PaneTransfer extends TransferObject {
+        constructor(viewId, paneId) {
+            super();
+            this.viewId = viewId;
+            this.paneId = paneId;
+        }
+    }
+    /**
+     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+     */
+    class LocalSelectionTransfer {
+        constructor() {
+            // protect against external instantiation
+        }
+        static getInstance() {
+            return LocalSelectionTransfer.INSTANCE;
+        }
+        hasData(proto) {
+            return proto && proto === this.proto;
+        }
+        clearData(proto) {
+            if (this.hasData(proto)) {
+                this.proto = undefined;
+                this.data = undefined;
+            }
+        }
+        getData(proto) {
+            if (this.hasData(proto)) {
+                return this.data;
+            }
+            return undefined;
+        }
+        setData(data, proto) {
+            if (proto) {
+                this.data = data;
+                this.proto = proto;
+            }
+        }
+    }
+    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+    function getPanelData() {
+        const panelTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return panelTransfer.getData(PanelTransfer.prototype)[0];
+    }
+    function getPaneData() {
+        const paneTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return paneTransfer.getData(PaneTransfer.prototype)[0];
+    }
+
     exports.Event = void 0;
     (function (Event) {
         Event.any = (...children) => {
@@ -120,116 +190,6 @@
         }
     }
 
-    exports.Disposable = void 0;
-    (function (Disposable) {
-        Disposable.NONE = {
-            dispose: () => {
-                // noop
-            },
-        };
-    })(exports.Disposable || (exports.Disposable = {}));
-    class CompositeDisposable {
-        constructor(...args) {
-            this.disposables = args;
-        }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
-        addDisposables(...args) {
-            args.forEach((arg) => this.disposables.push(arg));
-        }
-        dispose() {
-            this.disposables.forEach((arg) => arg.dispose());
-        }
-    }
-    class MutableDisposable {
-        constructor() {
-            this._disposable = exports.Disposable.NONE;
-        }
-        set value(disposable) {
-            if (this._disposable) {
-                this._disposable.dispose();
-            }
-            this._disposable = disposable;
-        }
-        dispose() {
-            if (this._disposable) {
-                this._disposable.dispose();
-                this._disposable = exports.Disposable.NONE;
-            }
-        }
-    }
-
-    class TransferObject {
-        constructor() {
-            //
-        }
-    }
-    class PanelTransfer extends TransferObject {
-        constructor(viewId, groupId, panelId) {
-            super();
-            this.viewId = viewId;
-            this.groupId = groupId;
-            this.panelId = panelId;
-        }
-    }
-    class PaneTransfer extends TransferObject {
-        constructor(viewId, paneId) {
-            super();
-            this.viewId = viewId;
-            this.paneId = paneId;
-        }
-    }
-    /**
-     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
-     */
-    class LocalSelectionTransfer {
-        constructor() {
-            // protect against external instantiation
-        }
-        static getInstance() {
-            return LocalSelectionTransfer.INSTANCE;
-        }
-        hasData(proto) {
-            return proto && proto === this.proto;
-        }
-        clearData(proto) {
-            if (this.hasData(proto)) {
-                this.proto = undefined;
-                this.data = undefined;
-            }
-        }
-        getData(proto) {
-            if (this.hasData(proto)) {
-                return this.data;
-            }
-            return undefined;
-        }
-        setData(data, proto) {
-            if (proto) {
-                this.data = data;
-                this.proto = proto;
-            }
-        }
-    }
-    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-    function getPanelData() {
-        const panelTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return panelTransfer.getData(PanelTransfer.prototype)[0];
-    }
-    function getPaneData() {
-        const paneTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return paneTransfer.getData(PaneTransfer.prototype)[0];
-    }
-
     class SplitviewApi {
         constructor(component) {
             this.component = component;
@@ -390,9 +350,6 @@
         get height() {
             return this.component.height;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
-        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -482,9 +439,6 @@
         get totalPanels() {
             return this.component.totalPanels;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
-        }
         get onDidActiveGroupChange() {
             return this.component.onDidActiveGroupChange;
         }
@@ -568,6 +522,46 @@
         }
     }
 
+    var Disposable;
+    (function (Disposable) {
+        Disposable.NONE = {
+            dispose: () => {
+                // noop
+            },
+        };
+    })(Disposable || (Disposable = {}));
+    class CompositeDisposable {
+        constructor(...args) {
+            this.disposables = args;
+        }
+        static from(...args) {
+            return new CompositeDisposable(...args);
+        }
+        addDisposables(...args) {
+            args.forEach((arg) => this.disposables.push(arg));
+        }
+        dispose() {
+            this.disposables.forEach((arg) => arg.dispose());
+        }
+    }
+    class MutableDisposable {
+        constructor() {
+            this._disposable = Disposable.NONE;
+        }
+        set value(disposable) {
+            if (this._disposable) {
+                this._disposable.dispose();
+            }
+            this._disposable = disposable;
+        }
+        dispose() {
+            if (this._disposable) {
+                this._disposable.dispose();
+                this._disposable = Disposable.NONE;
+            }
+        }
+    }
+
     function watchElementResize(element, cb) {
         const observer = new ResizeObserver((entires) => {
             const firstEntry = entires[0];
@@ -1513,13 +1507,13 @@
             this._onDidSashEnd.dispose();
             this._onDidAddView.dispose();
             this._onDidRemoveView.dispose();
-            this.element.remove();
             for (let i = 0; i < this.element.children.length; i++) {
                 if (this.element.children.item(i) === this.element) {
                     this.element.removeChild(this.element);
                     break;
                 }
             }
+            this.element.remove();
         }
     }
 
@@ -1648,7 +1642,6 @@
         }
         dispose() {
             super.dispose();
-            this.splitview.dispose();
             if (this.animationTimer) {
                 clearTimeout(this.animationTimer);
                 this.animationTimer = undefined;
@@ -1657,6 +1650,7 @@
                 paneItem.disposable.dispose();
             });
             this.paneItems = [];
+            this.splitview.dispose();
             this.element.remove();
         }
     }
@@ -1975,7 +1969,7 @@
             this.children = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this._childrenDisposable = exports.Disposable.NONE;
+            this._childrenDisposable = Disposable.NONE;
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
@@ -2000,7 +1994,7 @@
                                 : true,
                         };
                     }),
-                    size: this.orthogonalSize,
+                    size: this.size,
                 };
                 this.children = childDescriptors.map((c) => c.node);
                 this.splitview = new Splitview(this.element, {
@@ -2321,6 +2315,7 @@
             this.disposable.dispose();
             this._onDidChange.dispose();
             this.root.dispose();
+            this.element.remove();
         }
         clear() {
             const orientation = this.root.orientation;
@@ -3351,19 +3346,6 @@
         }
     }
 
-    exports.GroupChangeKind = void 0;
-    (function (GroupChangeKind) {
-        GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-        GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-        GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        //
-        GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-        GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-        GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-        //
-        GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-        GroupChangeKind["LAYOUT"] = "LAYOUT";
-    })(exports.GroupChangeKind || (exports.GroupChangeKind = {}));
     const nextLayoutId = sequentialNumberGenerator();
     function toTarget(direction) {
         switch (direction) {
@@ -3386,9 +3368,6 @@
             this._element = _element;
             this._id = nextLayoutId.next();
             this._groups = new Map();
-            //
-            this._onGridEvent = new Emitter();
-            this.onGridEvent = this._onGridEvent.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidRemoveGroup = new Emitter();
@@ -3397,30 +3376,18 @@
             this.onDidAddGroup = this._onDidAddGroup.event;
             this._onDidActiveGroupChange = new Emitter();
             this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._bufferOnDidLayoutChange = new TickDelayedEvent();
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
-                this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+                this._onDidLayoutChange.fire();
             }));
-            this.addDisposables((() => {
-                const tickDelayedEvent = new TickDelayedEvent();
-                return new CompositeDisposable(this.onGridEvent((event) => {
-                    if ([
-                        exports.GroupChangeKind.ADD_GROUP,
-                        exports.GroupChangeKind.REMOVE_GROUP,
-                        exports.GroupChangeKind.ADD_PANEL,
-                        exports.GroupChangeKind.REMOVE_PANEL,
-                        exports.GroupChangeKind.GROUP_ACTIVE,
-                        exports.GroupChangeKind.PANEL_ACTIVE,
-                        exports.GroupChangeKind.LAYOUT,
-                    ].includes(event.kind)) {
-                        tickDelayedEvent.fire();
-                    }
-                }), tickDelayedEvent.onEvent(() => {
-                    this._onDidLayoutChange.fire();
-                }), tickDelayedEvent);
-            })());
+            this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange);
         }
         get id() {
             return this._id;
@@ -3457,14 +3424,13 @@
         }
         setVisible(panel, visible) {
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+            this._onDidLayoutChange.fire();
         }
         isVisible(panel) {
             return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
         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);
         }
@@ -3478,7 +3444,6 @@
                 item.disposable.dispose();
                 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());
@@ -3507,9 +3472,6 @@
                 }
             }
             this._activeGroup = group;
-            this._onGridEvent.fire({
-                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-            });
             this._onDidActiveGroupChange.fire(group);
         }
         removeGroup(group) {
@@ -3566,7 +3528,6 @@
         }
         dispose() {
             super.dispose();
-            this._onGridEvent.dispose();
             this._onDidActiveGroupChange.dispose();
             this._onDidAddGroup.dispose();
             this._onDidRemoveGroup.dispose();
@@ -3748,6 +3709,10 @@
                 this.update({ params: { title } });
             }));
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         get title() {
             return this._title;
         }
@@ -4424,7 +4389,9 @@
             this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
+            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }));
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -4558,11 +4525,12 @@
             };
         }
         fromJSON(data) {
+            const groups = Array.from(this._groups.values()).map((_) => _.value);
+            for (const group of groups) {
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, true);
+            }
             this.gridview.clear();
-            this.panels.forEach((panel) => {
-                panel.dispose();
-            });
-            this._groups.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
             }
@@ -4586,7 +4554,6 @@
                 }
             }
             this.gridview.layout(this.width, this.height);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
             this._onDidLayoutfromJSON.fire();
         }
         closeAllGroups() {
@@ -4636,13 +4603,13 @@
             }
             return panel;
         }
-        removePanel(panel) {
+        removePanel(panel, options = { removeEmptyGroup: true }) {
             const group = panel.group;
             if (!group) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
             }
             group.model.removePanel(panel);
-            if (group.model.size === 0) {
+            if (group.model.size === 0 && options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
         }
@@ -4674,16 +4641,14 @@
                 this.doAddGroup(group);
             }
         }
-        removeGroup(group) {
+        removeGroup(group, skipActive = false) {
             const panels = [...group.model.panels]; // reassign since group panels will mutate
-            panels.forEach((panel) => {
-                this.removePanel(panel);
-            });
-            if (this._groups.size === 1) {
-                this._activeGroup = group;
-                return;
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                });
             }
-            super.removeGroup(group);
+            super.doRemoveGroup(group, { skipActive });
         }
         moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
             var _a;
@@ -4738,15 +4703,11 @@
             }
         }
         doSetGroupActive(group, skipFocus) {
-            var _a, _b, _c;
+            var _a, _b;
             const isGroupAlreadyFocused = this._activeGroup === group;
             super.doSetGroupActive(group, skipFocus);
             if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-                this._onGridEvent.fire({
-                    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);
+                this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
             }
         }
         createGroup(options) {
@@ -4777,28 +4738,16 @@
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.ADD_PANEL,
-                                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;
                     }
@@ -4969,7 +4918,6 @@
                     this.doSetGroupActive(panel);
                 }
             }
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
             this._onDidLayoutfromJSON.fire();
         }
         movePanel(panel, options) {
@@ -5330,6 +5278,7 @@
                 value.dispose();
             });
             this.panels.clear();
+            this.splitview.dispose();
             super.dispose();
         }
     }
@@ -5919,6 +5868,10 @@
                 queue.forEach((f) => f());
             }
         }
+        dispose() {
+            super.dispose();
+            this.paneview.dispose();
+        }
     }
 
     class SplitviewPanel extends BasePanelView {
@@ -6412,6 +6365,7 @@
             return () => {
                 disposable.dispose();
                 dockview.dispose();
+                element.remove();
             };
         }, []);
         React__namespace.useEffect(() => {
@@ -6422,6 +6376,14 @@
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                watermarkFrameworkComponent: props.watermarkComponent,
+            });
+        }, [props.watermarkComponent]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6557,7 +6519,9 @@
                         });
                     },
                 },
-                proportionalLayout: props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
@@ -6625,7 +6589,9 @@
             var _a;
             const element = document.createElement('div');
             const gridview = new GridviewComponent(element, {
-                proportionalLayout: !!props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 orientation: props.orientation,
                 frameworkComponents: props.components,
                 frameworkComponentFactory: {
@@ -6648,6 +6614,7 @@
             gridviewRef.current = gridview;
             return () => {
                 gridview.dispose();
+                element.remove();
             };
         }, []);
         React__namespace.useEffect(() => {
@@ -6784,13 +6751,11 @@
     PaneviewReact.displayName = 'PaneviewComponent';
 
     exports.BaseGrid = BaseGrid;
-    exports.CompositeDisposable = CompositeDisposable;
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewComponents = DockviewComponents;
     exports.DockviewReact = DockviewReact;
-    exports.Emitter = Emitter;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
     exports.GridviewComponent = GridviewComponent;
@@ -6798,7 +6763,6 @@
     exports.GridviewReact = GridviewReact;
     exports.Groupview = Groupview;
     exports.LocalSelectionTransfer = LocalSelectionTransfer;
-    exports.MutableDisposable = MutableDisposable;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
     exports.PanelTransfer = PanelTransfer;
@@ -6817,9 +6781,6 @@
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
-    exports.TickDelayedEvent = TickDelayedEvent;
-    exports.addDisposableListener = addDisposableListener;
-    exports.addDisposableWindowListener = addDisposableWindowListener;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;

package/dist/esm/api/component.api.d.ts

@@ -1,6 +1,6 @@
 import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
-import { Direction, GroupChangeEvent } from '../gridview/baseComponentGridview';
+import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
 import { IGroupPanel } from '../groupview/groupPanel';
@@ -77,7 +77,6 @@ export declare class GridviewApi implements CommonApi {
     get maximumWidth(): number;
     get width(): number;
     get height(): number;
-    get onGridEvent(): Event<GroupChangeEvent>;
     get onDidLayoutChange(): Event<void>;
     get onDidAddGroup(): Event<IGridviewPanel>;
     get onDidRemoveGroup(): Event<IGridviewPanel>;
@@ -114,7 +113,6 @@ export declare class DockviewApi implements CommonApi {
     get maximumWidth(): number;
     get size(): number;
     get totalPanels(): number;
-    get onGridEvent(): Event<GroupChangeEvent>;
     get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined>;
     get onDidAddGroup(): Event<IGroupviewPanel>;
     get onDidRemoveGroup(): Event<IGroupviewPanel>;