dockview 1.2.0 → 1.3.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.2.0
+ * @version 1.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -312,7 +312,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.component.layout(width, height);
         }
         addPanel(options) {
-            return this.component.addPanel(options);
+            this.component.addPanel(options);
         }
         resizeToFit() {
             this.component.resizeToFit();
@@ -1532,7 +1532,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             // 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);
@@ -1600,17 +1600,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
@@ -1644,6 +1647,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.paneItems.forEach((paneItem) => {
                 paneItem.disposable.dispose();
+                paneItem.pane.dispose();
             });
             this.paneItems = [];
             this.splitview.dispose();
@@ -1710,7 +1714,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -1751,10 +1755,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.toggleClasses(quadrant, isSmallX, isSmallY);
                     this.setState(quadrant);
                 },
-                onDragLeave: (e) => {
+                onDragLeave: () => {
                     this.removeDropTarget();
                 },
-                onDragEnd: (e) => {
+                onDragEnd: () => {
                     this.removeDropTarget();
                 },
                 onDrop: (e) => {
@@ -2151,7 +2155,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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
@@ -2514,7 +2518,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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));
@@ -2613,7 +2617,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.disposable.value = disposable;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         closePanel() {
@@ -2661,7 +2665,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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';
                 }
@@ -3028,6 +3032,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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) {
@@ -3106,10 +3113,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         containsPanel(panel) {
             return this.panels.includes(panel);
         }
-        init(params) {
+        init(_params) {
             //noop
         }
-        update(params) {
+        update(_params) {
             //noop
         }
         focus() {
@@ -3332,10 +3339,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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();
@@ -3438,6 +3447,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -3528,6 +3538,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidAddGroup.dispose();
             this._onDidRemoveGroup.dispose();
             this._onDidLayoutChange.dispose();
+            for (const group of this.groups) {
+                group.dispose();
+            }
             this.gridview.dispose();
         }
     }
@@ -3857,7 +3870,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get id() {
             return 'watermark';
         }
-        update(event) {
+        update(_event) {
             // noop
         }
         focus() {
@@ -3866,17 +3879,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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();
         }
@@ -4051,7 +4064,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isGroupActive = group.isActive;
             this.render();
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         render() {
@@ -4125,8 +4138,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         dispose() {
+            var _a;
             super.dispose();
             this.api.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
@@ -4571,7 +4586,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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);
@@ -4599,13 +4617,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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);
             }
         }
@@ -4642,6 +4667,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             for (const panel of panels) {
                 this.removePanel(panel, {
                     removeEmptyGroup: false,
+                    skipDispose: false,
                 });
             }
             super.doRemoveGroup(group, { skipActive });
@@ -4725,6 +4751,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             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;
@@ -4758,7 +4785,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return view;
         }
-        _addPanel(options) {
+        createPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
@@ -4859,7 +4886,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
             });
         }
@@ -4872,8 +4899,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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) => {
@@ -4970,7 +5001,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.registerPanel(view);
             this.doAddGroup(view, relativeLocation, options.size);
-            return { api: view.api };
         }
         registerPanel(panel) {
             const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5021,11 +5051,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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();
@@ -5132,7 +5157,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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);
@@ -5191,7 +5220,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 this.setActive(view, true);
             });
-            this.panels.set(view.id, disposable);
+            this.panels.set(view.id, { disposable, value: view });
         }
         toJSON() {
             var _a;
@@ -5215,6 +5244,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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, {
@@ -5270,9 +5304,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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();
@@ -5543,7 +5578,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             })(this.header);
             this.target = new Droptarget(this.element, {
                 validOverlays: 'vertical',
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: () => {
                     const data = getPaneData();
                     if (!data) {
                         return true;
@@ -5614,7 +5649,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._expander.textContent = e.isExpanded ? '<' : '>';
             });
         }
-        update(params) {
+        update(_params) {
             //
         }
         dispose() {
@@ -5640,6 +5675,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -5724,9 +5760,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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({
@@ -5739,7 +5773,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
-            return disposable;
+            return view;
         }
         getPanels() {
             return this.paneview.getPanes();
@@ -5748,6 +5782,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const views = this.getPanels();
             const index = views.findIndex((_) => _ === panel);
             this.paneview.removePane(index);
+            this.doRemovePanel(panel);
         }
         movePanel(from, to) {
             this.paneview.moveView(from, to);
@@ -5797,6 +5832,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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,
@@ -5832,9 +5871,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
                         });
-                        panel.onDidDrop((event) => {
-                            this._onDidDrop.fire(event);
-                        });
+                        this.doAddPanel(panel);
                         queue.push(() => {
                             panel.init({
                                 params: data.params || {},
@@ -5864,8 +5901,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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();
         }
     }
@@ -6094,18 +6148,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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';
         }
@@ -6140,15 +6188,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -6158,7 +6202,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
         }
     }
@@ -6193,10 +6236,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(_group, _isPanelVisible) {
             // noop - retrieval from api
         }
         dispose() {
@@ -6275,10 +6318,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
         }
@@ -6312,21 +6355,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
                         });
@@ -6345,11 +6388,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     ? { 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;
@@ -6359,11 +6397,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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;
@@ -6681,7 +6733,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }, [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, {