dockview 1.2.0 → 1.3.0

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.2.0
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -347,7 +347,7 @@ class PaneviewApi {
         this.component.layout(width, height);
     }
     addPanel(options) {
-        return this.component.addPanel(options);
+        this.component.addPanel(options);
     }
     resizeToFit() {
         this.component.resizeToFit();
@@ -1567,7 +1567,7 @@ class Paneview extends CompositeDisposable {
         });
         // 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);
@@ -1635,17 +1635,20 @@ class Paneview extends CompositeDisposable {
     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);
@@ -1679,6 +1682,7 @@ class Paneview extends CompositeDisposable {
         }
         this.paneItems.forEach((paneItem) => {
             paneItem.disposable.dispose();
+            paneItem.pane.dispose();
         });
         this.paneItems = [];
         this.splitview.dispose();
@@ -1745,7 +1749,7 @@ 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) {
@@ -1786,10 +1790,10 @@ class Droptarget extends CompositeDisposable {
                 this.toggleClasses(quadrant, isSmallX, isSmallY);
                 this.setState(quadrant);
             },
-            onDragLeave: (e) => {
+            onDragLeave: () => {
                 this.removeDropTarget();
             },
-            onDragEnd: (e) => {
+            onDragEnd: () => {
                 this.removeDropTarget();
             },
             onDrop: (e) => {
@@ -2186,7 +2190,7 @@ class BranchNode extends CompositeDisposable {
     }
     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
@@ -2549,7 +2553,7 @@ class Gridview {
         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));
@@ -2648,7 +2652,7 @@ class ContentContainer extends CompositeDisposable {
         }
         this.disposable.value = disposable;
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     closePanel() {
@@ -2696,7 +2700,7 @@ 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';
             }
@@ -3063,6 +3067,9 @@ class Groupview extends CompositeDisposable {
     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) {
@@ -3141,10 +3148,10 @@ class Groupview extends CompositeDisposable {
     containsPanel(panel) {
         return this.panels.includes(panel);
     }
-    init(params) {
+    init(_params) {
         //noop
     }
-    update(params) {
+    update(_params) {
         //noop
     }
     focus() {
@@ -3367,10 +3374,12 @@ class Groupview extends CompositeDisposable {
         }
     }
     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();
@@ -3473,6 +3482,7 @@ class BaseGrid extends CompositeDisposable {
         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);
@@ -3563,6 +3573,9 @@ class BaseGrid extends CompositeDisposable {
         this._onDidAddGroup.dispose();
         this._onDidRemoveGroup.dispose();
         this._onDidLayoutChange.dispose();
+        for (const group of this.groups) {
+            group.dispose();
+        }
         this.gridview.dispose();
     }
 }
@@ -3892,7 +3905,7 @@ class Watermark extends CompositeDisposable {
     get id() {
         return 'watermark';
     }
-    update(event) {
+    update(_event) {
         // noop
     }
     focus() {
@@ -3901,17 +3914,17 @@ class Watermark extends CompositeDisposable {
     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();
     }
@@ -4086,7 +4099,7 @@ class DefaultTab extends CompositeDisposable {
         this._isGroupActive = group.isActive;
         this.render();
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
     }
     render() {
@@ -4160,8 +4173,10 @@ class BasePanelView extends CompositeDisposable {
         };
     }
     dispose() {
+        var _a;
         super.dispose();
         this.api.dispose();
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }
 
@@ -4606,7 +4621,10 @@ class DockviewComponent extends BaseGrid {
     }
     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);
@@ -4634,13 +4652,20 @@ class DockviewComponent extends BaseGrid {
         }
         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);
         }
     }
@@ -4677,6 +4702,7 @@ class DockviewComponent extends BaseGrid {
         for (const panel of panels) {
             this.removePanel(panel, {
                 removeEmptyGroup: false,
+                skipDispose: false,
             });
         }
         super.doRemoveGroup(group, { skipActive });
@@ -4760,6 +4786,7 @@ class DockviewComponent extends BaseGrid {
             }
         }
         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;
@@ -4793,7 +4820,7 @@ class DockviewComponent extends BaseGrid {
         }
         return view;
     }
-    _addPanel(options) {
+    createPanel(options) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
             tab: this.createTabComponent(options.id, options.tabComponent),
@@ -4894,7 +4921,7 @@ class GridviewComponent extends BaseGrid {
         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);
         });
     }
@@ -4907,8 +4934,12 @@ class GridviewComponent extends BaseGrid {
     }
     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) => {
@@ -5005,7 +5036,6 @@ class GridviewComponent extends BaseGrid {
         });
         this.registerPanel(view);
         this.doAddGroup(view, relativeLocation, options.size);
-        return { api: view.api };
     }
     registerPanel(panel) {
         const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5056,11 +5086,6 @@ class GridviewComponent extends BaseGrid {
     }
     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();
@@ -5167,7 +5192,11 @@ class SplitviewComponent extends CompositeDisposable {
     }
     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);
@@ -5226,7 +5255,7 @@ class SplitviewComponent extends CompositeDisposable {
             }
             this.setActive(view, true);
         });
-        this.panels.set(view.id, disposable);
+        this.panels.set(view.id, { disposable, value: view });
     }
     toJSON() {
         var _a;
@@ -5250,6 +5279,11 @@ class SplitviewComponent extends CompositeDisposable {
     }
     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, {
@@ -5305,9 +5339,10 @@ class SplitviewComponent extends CompositeDisposable {
         }
     }
     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();
@@ -5578,7 +5613,7 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         })(this.header);
         this.target = new Droptarget(this.element, {
             validOverlays: 'vertical',
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: () => {
                 const data = getPaneData();
                 if (!data) {
                     return true;
@@ -5649,7 +5684,7 @@ class DefaultHeader extends CompositeDisposable {
             this._expander.textContent = e.isExpanded ? '<' : '>';
         });
     }
-    update(params) {
+    update(_params) {
         //
     }
     dispose() {
@@ -5675,6 +5710,7 @@ class PaneviewComponent extends CompositeDisposable {
         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();
@@ -5759,9 +5795,7 @@ class PaneviewComponent extends CompositeDisposable {
             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({
@@ -5774,7 +5808,7 @@ class PaneviewComponent extends CompositeDisposable {
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
-        return disposable;
+        return view;
     }
     getPanels() {
         return this.paneview.getPanes();
@@ -5783,6 +5817,7 @@ class PaneviewComponent extends CompositeDisposable {
         const views = this.getPanels();
         const index = views.findIndex((_) => _ === panel);
         this.paneview.removePane(index);
+        this.doRemovePanel(panel);
     }
     movePanel(from, to) {
         this.paneview.moveView(from, to);
@@ -5832,6 +5867,10 @@ class PaneviewComponent extends CompositeDisposable {
     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,
@@ -5867,9 +5906,7 @@ class PaneviewComponent extends CompositeDisposable {
                         isExpanded: !!view.expanded,
                         disableDnd: !!this.options.disableDnd,
                     });
-                    panel.onDidDrop((event) => {
-                        this._onDidDrop.fire(event);
-                    });
+                    this.doAddPanel(panel);
                     queue.push(() => {
                         panel.init({
                             params: data.params || {},
@@ -5899,8 +5936,25 @@ class PaneviewComponent extends CompositeDisposable {
             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();
     }
 }
@@ -6129,18 +6183,12 @@ class ReactPanelContentPart {
         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';
     }
@@ -6175,15 +6223,11 @@ class ReactPanelContentPart {
         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);
@@ -6193,7 +6237,6 @@ class ReactPanelContentPart {
         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();
     }
 }
@@ -6228,10 +6271,10 @@ class ReactPanelHeaderPart {
             id: this.id,
         };
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(_group, _isPanelVisible) {
         // noop - retrieval from api
     }
     dispose() {
@@ -6310,10 +6353,10 @@ class ReactWatermarkPart {
             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;
     }
@@ -6347,21 +6390,21 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
         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,
                     });
@@ -6380,11 +6423,6 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
                 ? { 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;
@@ -6394,11 +6432,25 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
         }
         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;
@@ -6716,7 +6768,7 @@ const PaneviewReact = React__namespace.forwardRef((props, ref) => {
         };
     }, [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, {