dockview 1.2.0 → 1.3.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.2.0
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -316,7 +316,7 @@
             this.component.layout(width, height);
         }
         addPanel(options) {
-            return this.component.addPanel(options);
+            this.component.addPanel(options);
         }
         resizeToFit() {
             this.component.resizeToFit();
@@ -1536,7 +1536,7 @@
             });
             // if we've added views from the descriptor we need to
             // add the panes to our Pane array and setup animation
-            this.getPanes().forEach((pane, index) => {
+            this.getPanes().forEach((pane) => {
                 const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
                     this.setupAnimation();
                     this._onDidChange.fire(undefined);
@@ -1604,17 +1604,20 @@
         getPanes() {
             return this.splitview.getViews();
         }
-        removePane(index) {
+        removePane(index, options = { skipDispose: false }) {
             const paneItem = this.paneItems.splice(index, 1)[0];
             this.splitview.removeView(index);
-            paneItem.disposable.dispose();
+            if (!options.skipDispose) {
+                paneItem.disposable.dispose();
+                paneItem.pane.dispose();
+            }
             return paneItem;
         }
         moveView(from, to) {
             if (from === to) {
                 return;
             }
-            const view = this.removePane(from);
+            const view = this.removePane(from, { skipDispose: true });
             this.skipAnimation = true;
             try {
                 this.addPane(view.pane, view.pane.size, to, false);
@@ -1648,6 +1651,7 @@
             }
             this.paneItems.forEach((paneItem) => {
                 paneItem.disposable.dispose();
+                paneItem.pane.dispose();
             });
             this.paneItems = [];
             this.splitview.dispose();
@@ -1714,7 +1718,7 @@
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
             this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-                onDragEnter: (e) => undefined,
+                onDragEnter: () => undefined,
                 onDragOver: (e) => {
                     if (isBooleanValue(this.options.canDisplayOverlay)) {
                         if (!this.options.canDisplayOverlay) {
@@ -1755,10 +1759,10 @@
                     this.toggleClasses(quadrant, isSmallX, isSmallY);
                     this.setState(quadrant);
                 },
-                onDragLeave: (e) => {
+                onDragLeave: () => {
                     this.removeDropTarget();
                 },
-                onDragEnd: (e) => {
+                onDragEnd: () => {
                     this.removeDropTarget();
                 },
                 onDrop: (e) => {
@@ -2155,7 +2159,7 @@
         }
         setupChildrenEvents() {
             this._childrenDisposable.dispose();
-            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))(() => {
                 /**
                  * indicate a change has occured to allows any re-rendering but don't bubble
                  * event because that was specific to this branch
@@ -2518,7 +2522,7 @@
             const [parentIndex, ...__] = [...rest].reverse();
             const isSiblingVisible = parent.isChildVisible(0);
             parent.removeChild(0, sizing);
-            const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+            const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
             grandParent.removeChild(parentIndex, sizing);
             if (sibling instanceof BranchNode) {
                 sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
@@ -2617,7 +2621,7 @@
             }
             this.disposable.value = disposable;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         closePanel() {
@@ -2665,7 +2669,7 @@
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
                 }
-            }), addDisposableListener(this.el, 'dragend', (ev) => {
+            }), addDisposableListener(this.el, 'dragend', () => {
                 for (const iframe of this.iframes) {
                     iframe.style.pointerEvents = 'auto';
                 }
@@ -3032,6 +3036,9 @@
         get maximumWidth() {
             return Number.MAX_SAFE_INTEGER;
         }
+        get hasWatermark() {
+            return !!(this.watermark && this.container.contains(this.watermark.element));
+        }
         initialize() {
             var _a, _b;
             if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3110,10 +3117,10 @@
         containsPanel(panel) {
             return this.panels.includes(panel);
         }
-        init(params) {
+        init(_params) {
             //noop
         }
-        update(params) {
+        update(_params) {
             //noop
         }
         focus() {
@@ -3336,10 +3343,12 @@
             }
         }
         dispose() {
+            var _a;
+            super.dispose();
+            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
             for (const panel of this.panels) {
                 panel.dispose();
             }
-            super.dispose();
             this.dropTarget.dispose();
             this.tabsContainer.dispose();
             this.contentContainer.dispose();
@@ -3442,6 +3451,7 @@
             const view = this.gridview.remove(group, exports.Sizing.Distribute);
             if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                 item.disposable.dispose();
+                item.value.dispose();
                 this._groups.delete(group.id);
             }
             this._onDidRemoveGroup.fire(group);
@@ -3532,6 +3542,9 @@
             this._onDidAddGroup.dispose();
             this._onDidRemoveGroup.dispose();
             this._onDidLayoutChange.dispose();
+            for (const group of this.groups) {
+                group.dispose();
+            }
             this.gridview.dispose();
         }
     }
@@ -3861,7 +3874,7 @@
         get id() {
             return 'watermark';
         }
-        update(event) {
+        update(_event) {
             // noop
         }
         focus() {
@@ -3870,17 +3883,17 @@
         toJSON() {
             return {};
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         init(params) {
             this.params = params;
-            this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+            this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
                 this.render();
             }));
             this.render();
         }
-        updateParentGroup(group, visible) {
+        updateParentGroup(group, _visible) {
             this.group = group;
             this.render();
         }
@@ -4055,7 +4068,7 @@
             this._isGroupActive = group.isActive;
             this.render();
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         render() {
@@ -4129,8 +4142,10 @@
             };
         }
         dispose() {
+            var _a;
             super.dispose();
             this.api.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
@@ -4575,7 +4590,10 @@
         }
         addPanel(options) {
             var _a, _b;
-            const panel = this._addPanel(options);
+            if (this.panels.find((_) => _.id === options.id)) {
+                throw new Error(`panel with id ${options.id} already exists`);
+            }
+            const panel = this.createPanel(options);
             let referenceGroup;
             if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
                 const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -4603,13 +4621,20 @@
             }
             return panel;
         }
-        removePanel(panel, options = { removeEmptyGroup: true }) {
+        removePanel(panel, options = {
+            removeEmptyGroup: true,
+            skipDispose: false,
+        }) {
             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 && options.removeEmptyGroup) {
+            panel.dispose();
+            const retainGroupForWatermark = this.size === 1;
+            if (!retainGroupForWatermark &&
+                group.model.size === 0 &&
+                options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
         }
@@ -4646,6 +4671,7 @@
             for (const panel of panels) {
                 this.removePanel(panel, {
                     removeEmptyGroup: false,
+                    skipDispose: false,
                 });
             }
             super.doRemoveGroup(group, { skipActive });
@@ -4729,6 +4755,7 @@
                 }
             }
             const view = new GroupviewPanel(this, id, options);
+            view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
@@ -4762,7 +4789,7 @@
             }
             return view;
         }
-        _addPanel(options) {
+        createPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
@@ -4863,7 +4890,7 @@
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
         }
         setActive(panel) {
-            this._groups.forEach((value, key) => {
+            this._groups.forEach((value, _key) => {
                 value.value.setActive(panel === value.value);
             });
         }
@@ -4876,8 +4903,12 @@
         }
         fromJSON(serializedGridview, deferComponentLayout) {
             const { grid, activePanel } = serializedGridview;
+            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+            for (const group of groups) {
+                group.disposable.dispose();
+                this.doRemoveGroup(group.value, { skipActive: true });
+            }
             this.gridview.clear();
-            this._groups.clear();
             const queue = [];
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -4974,7 +5005,6 @@
             });
             this.registerPanel(view);
             this.doAddGroup(view, relativeLocation, options.size);
-            return { api: view.api };
         }
         registerPanel(panel) {
             const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5025,11 +5055,6 @@
         }
         removeGroup(group) {
             super.removeGroup(group);
-            const panel = this._groups.get(group.id);
-            if (panel) {
-                panel.disposable.dispose();
-                this._groups.delete(group.id);
-            }
         }
         dispose() {
             super.dispose();
@@ -5136,7 +5161,11 @@
         }
         removePanel(panel, sizing) {
             const disposable = this.panels.get(panel.id);
-            disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+            if (!disposable) {
+                throw new Error(`unknown splitview panel ${panel.id}`);
+            }
+            disposable.disposable.dispose();
+            disposable.value.dispose();
             this.panels.delete(panel.id);
             const index = this.getPanels().findIndex((_) => _ === panel);
             this.splitview.removeView(index, sizing);
@@ -5195,7 +5224,7 @@
                 }
                 this.setActive(view, true);
             });
-            this.panels.set(view.id, disposable);
+            this.panels.set(view.id, { disposable, value: view });
         }
         toJSON() {
             var _a;
@@ -5219,6 +5248,11 @@
         }
         fromJSON(serializedSplitview, deferComponentLayout = false) {
             const { views, orientation, size, activeView } = serializedSplitview;
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
+            this.panels.clear();
             this.splitview.dispose();
             const queue = [];
             this.splitview = new Splitview(this.element, {
@@ -5274,9 +5308,10 @@
             }
         }
         dispose() {
-            Array.from(this.panels.values()).forEach((value) => {
-                value.dispose();
-            });
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
             this.panels.clear();
             this.splitview.dispose();
             super.dispose();
@@ -5547,7 +5582,7 @@
             })(this.header);
             this.target = new Droptarget(this.element, {
                 validOverlays: 'vertical',
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: () => {
                     const data = getPaneData();
                     if (!data) {
                         return true;
@@ -5618,7 +5653,7 @@
                 this._expander.textContent = e.isExpanded ? '<' : '>';
             });
         }
-        update(params) {
+        update(_params) {
             //
         }
         dispose() {
@@ -5644,6 +5679,7 @@
             super();
             this.element = element;
             this._disposable = new MutableDisposable();
+            this._viewDisposables = new Map();
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidDrop = new Emitter();
@@ -5728,9 +5764,7 @@
                 isExpanded: !!options.isExpanded,
                 disableDnd: !!this.options.disableDnd,
             });
-            const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-                this._onDidDrop.fire(event);
-            }));
+            this.doAddPanel(view);
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
             const index = typeof options.index === 'number' ? options.index : undefined;
             view.init({
@@ -5743,7 +5777,7 @@
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
-            return disposable;
+            return view;
         }
         getPanels() {
             return this.paneview.getPanes();
@@ -5752,6 +5786,7 @@
             const views = this.getPanels();
             const index = views.findIndex((_) => _ === panel);
             this.paneview.removePane(index);
+            this.doRemovePanel(panel);
         }
         movePanel(from, to) {
             this.paneview.moveView(from, to);
@@ -5801,6 +5836,10 @@
         fromJSON(serializedPaneview, deferComponentLayout) {
             const { views, size } = serializedPaneview;
             const queue = [];
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
             this.paneview.dispose();
             this.paneview = new Paneview(this.element, {
                 orientation: exports.Orientation.VERTICAL,
@@ -5836,9 +5875,7 @@
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
                         });
-                        panel.onDidDrop((event) => {
-                            this._onDidDrop.fire(event);
-                        });
+                        this.doAddPanel(panel);
                         queue.push(() => {
                             panel.init({
                                 params: data.params || {},
@@ -5868,8 +5905,25 @@
                 queue.forEach((f) => f());
             }
         }
+        doAddPanel(panel) {
+            const disposable = panel.onDidDrop((event) => {
+                this._onDidDrop.fire(event);
+            });
+            this._viewDisposables.set(panel.id, disposable);
+        }
+        doRemovePanel(panel) {
+            const disposable = this._viewDisposables.get(panel.id);
+            if (disposable) {
+                disposable.dispose();
+                this._viewDisposables.delete(panel.id);
+            }
+        }
         dispose() {
             super.dispose();
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
             this.paneview.dispose();
         }
     }
@@ -6098,18 +6152,12 @@
             this.id = id;
             this.component = component;
             this.reactPortalStore = reactPortalStore;
-            // private hostedContainer: HostedContainer;
             this._onDidFocus = new Emitter();
             this.onDidFocus = this._onDidFocus.event;
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
             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.className = 'dockview-react-part';
         }
@@ -6144,15 +6192,11 @@
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             this._group = group;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
-            // this.hostedContainer.layout(
-            //     this.element
-            //     // { width, height }
-            // );
         }
         close() {
             return Promise.resolve(true);
@@ -6162,7 +6206,6 @@
             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();
         }
     }
@@ -6197,10 +6240,10 @@
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(_group, _isPanelVisible) {
             // noop - retrieval from api
         }
         dispose() {
@@ -6279,10 +6322,10 @@
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             // noop - retrieval from api
             this._groupRef.value = group;
         }
@@ -6316,21 +6359,21 @@
             var _a;
             const factory = {
                 content: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelContentPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 tab: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelHeaderPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 watermark: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactWatermarkPart(componentId, component, {
                             addPortal,
                         });
@@ -6349,11 +6392,6 @@
                     ? { 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;
@@ -6363,11 +6401,25 @@
             }
             dockviewRef.current = dockview;
             return () => {
-                disposable.dispose();
                 dockview.dispose();
                 element.remove();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return () => {
+                    // noop
+                };
+            }
+            const disposable = dockviewRef.current.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.onDidDrop]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6685,7 +6737,7 @@
             };
         }, [props.disableAutoResizing]);
         React__namespace.useEffect(() => {
-            const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+            const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
                 addPortal,
             });
             const paneview = new PaneviewComponent(domRef.current, {

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

@@ -4,14 +4,13 @@ import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
 import { IGroupPanel } from '../groupview/groupPanel';
-import { AddPaneviewCompponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
+import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
 import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Event } from '../events';
-import { IDisposable } from '../lifecycle';
 import { PaneviewDropEvent } from '../react';
 export interface CommonApi {
     readonly height: number;
@@ -64,7 +63,7 @@ export declare class PaneviewApi implements CommonApi {
     movePanel(from: number, to: number): void;
     focus(): void;
     layout(width: number, height: number): void;
-    addPanel(options: AddPaneviewCompponentOptions): IDisposable;
+    addPanel(options: AddPaneviewComponentOptions): void;
     resizeToFit(): void;
     fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void;
     toJSON(): SerializedPaneview;

package/dist/esm/api/component.api.js

@@ -125,7 +125,7 @@ export class PaneviewApi {
         this.component.layout(width, height);
     }
     addPanel(options) {
-        return this.component.addPanel(options);
+        this.component.addPanel(options);
     }
     resizeToFit() {
         this.component.resizeToFit();

package/dist/esm/dnd/abstractDragHandler.js

@@ -26,7 +26,7 @@ export class DragHandler extends CompositeDisposable {
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
             }
-        }), addDisposableListener(this.el, 'dragend', (ev) => {
+        }), addDisposableListener(this.el, 'dragend', () => {
             for (const iframe of this.iframes) {
                 iframe.style.pointerEvents = 'auto';
             }

package/dist/esm/dnd/droptarget.js

@@ -21,7 +21,7 @@ export class Droptarget extends CompositeDisposable {
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
         this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-            onDragEnter: (e) => undefined,
+            onDragEnter: () => undefined,
             onDragOver: (e) => {
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
                     if (!this.options.canDisplayOverlay) {
@@ -62,10 +62,10 @@ export class Droptarget extends CompositeDisposable {
                 this.toggleClasses(quadrant, isSmallX, isSmallY);
                 this.setState(quadrant);
             },
-            onDragLeave: (e) => {
+            onDragLeave: () => {
                 this.removeDropTarget();
             },
-            onDragEnd: (e) => {
+            onDragEnd: () => {
                 this.removeDropTarget();
             },
             onDrop: (e) => {

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -38,6 +38,6 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     focus(): void;
     init(params: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
+    layout(_width: number, _height: number): void;
     private render;
 }

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -113,7 +113,7 @@ export class DefaultTab extends CompositeDisposable {
         this._isGroupActive = group.isActive;
         this.render();
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     render() {