dockview 1.4.2 → 1.4.3

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.2
+ * @version 1.4.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2294,6 +2294,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class PaneviewApi {
         constructor(component) {
@@ -2361,6 +2364,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class GridviewApi {
         constructor(component) {
@@ -2432,6 +2438,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class DockviewApi {
         constructor(component) {
@@ -2480,7 +2489,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this.component.onDidRemovePanel;
         }
         get onDidLayoutFromJSON() {
-            return this.component.onDidLayoutfromJSON;
+            return this.component.onDidLayoutFromJSON;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
@@ -2542,6 +2551,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
 
     class ContentContainer extends CompositeDisposable {
@@ -2615,12 +2627,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    var DockviewDropTargets;
+    exports.DockviewDropTargets = void 0;
     (function (DockviewDropTargets) {
         DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
         DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    })(DockviewDropTargets || (DockviewDropTargets = {}));
+    })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 
     class DragHandler extends CompositeDisposable {
         constructor(el) {
@@ -2719,7 +2731,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     if (data) {
                         return this.panelId !== data.panelId;
                     }
-                    return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);
+                    return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
                 },
             });
             this.addDisposables(this.droptarget.onDrop((event) => {
@@ -2778,7 +2790,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         // don't show the overlay if the tab being dragged is the last panel of this group
                         return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
                     }
-                    return group.model.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                    return group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
                 },
             });
             this.addDisposables(this.voidDropTarget.onDrop((event) => {
@@ -2976,7 +2988,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                         return !groupHasOnePanelAndIsActiveDragElement;
                     }
-                    return this.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                    return this.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
                 },
             });
             container.append(this.tabsContainer.element, this.contentContainer.element);
@@ -3134,16 +3146,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.index > this.panels.length) {
                 options.index = this.panels.length;
             }
-            const skipSetActive = !!options.skipSetActive;
+            const skipSetPanelActive = !!options.skipSetPanelActive;
+            const skipSetGroupActive = !!options.skipSetGroupActive;
             // ensure the group is updated before we fire any events
             panel.updateParentGroup(this.parent, true);
-            if (!skipSetActive && this._activePanel === panel) {
-                this.accessor.doSetGroupActive(this.parent);
+            if (this._activePanel === panel) {
+                if (!skipSetGroupActive) {
+                    this.accessor.doSetGroupActive(this.parent);
+                }
                 return;
             }
-            this.doAddPanel(panel, options.index, skipSetActive);
-            if (!skipSetActive) {
+            this.doAddPanel(panel, options.index, skipSetPanelActive);
+            if (!skipSetPanelActive) {
                 this.doSetActivePanel(panel);
+            }
+            if (!skipSetGroupActive) {
                 this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
             }
             this.updateContainer();
@@ -3319,7 +3336,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         canDisplayOverlay(event, target) {
             // custom overlay handler
             if (this.accessor.options.showDndOverlay) {
-                return this.accessor.options.showDndOverlay(event, target);
+                return this.accessor.options.showDndOverlay({
+                    nativeEvent: event,
+                    target,
+                    group: this.accessor.getPanel(this.id),
+                });
             }
             return false;
         }
@@ -3402,7 +3423,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
-                this._onDidLayoutChange.fire();
+                this._bufferOnDidLayoutChange.fire();
             }));
             this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -3912,34 +3933,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    class DefaultDeserializer {
-        constructor(layout, panelDeserializer) {
-            this.layout = layout;
-            this.panelDeserializer = panelDeserializer;
-        }
-        fromJSON(node) {
-            const data = node.data;
-            const children = data.views;
-            const active = data.activeView;
-            const group = this.layout.createGroup({
-                id: data.id,
-                locked: !!data.locked,
-                hideHeader: !!data.hideHeader,
-            });
-            for (const child of children) {
-                const panel = this.panelDeserializer.createPanel(child, group);
-                const isActive = typeof active === 'string' && active === panel.id;
-                group.model.openPanel(panel, {
-                    skipSetActive: !isActive,
-                });
-            }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1]);
-            }
-            return group;
-        }
-    }
-
     function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
         const Component = typeof componentName === 'string'
             ? components[componentName]
@@ -4376,9 +4369,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
-            // events
-            this._onTabInteractionEvent = new Emitter();
-            this.onTabInteractionEvent = this._onTabInteractionEvent.event;
             this._onTabContextMenu = new Emitter();
             this.onTabContextMenu = this._onTabContextMenu.event;
             this._onDidDrop = new Emitter();
@@ -4387,11 +4377,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemovePanel = this._onDidRemovePanel.event;
             this._onDidAddPanel = new Emitter();
             this.onDidAddPanel = this._onDidAddPanel.event;
-            this._onDidLayoutfromJSON = new Emitter();
-            this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidLayoutFromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this.addDisposables(this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
             this._options = options;
@@ -4446,7 +4436,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
+                this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4524,12 +4514,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         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.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
             }
@@ -4540,12 +4525,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!this.deserializer) {
                 throw new Error('no deserializer provided');
             }
-            this.gridview.deserialize(grid, new DefaultDeserializer(this, {
-                createPanel: (id, group) => {
-                    const panelData = panels[id];
-                    return this.deserializer.fromJSON(panelData, group);
-                },
-            }));
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    const { id, locked, hideHeader, views, activeView } = node.data;
+                    const group = this.createGroup({
+                        id,
+                        locked: !!locked,
+                        hideHeader: !!hideHeader,
+                    });
+                    this._onDidAddGroup.fire(group);
+                    for (const child of views) {
+                        const panel = this.deserializer.fromJSON(panels[child], group);
+                        const isActive = typeof activeView === 'string' && activeView === panel.id;
+                        group.model.openPanel(panel, {
+                            skipSetPanelActive: !isActive,
+                            skipSetGroupActive: true
+                        });
+                    }
+                    if (!group.activePanel && group.panels.length > 0) {
+                        group.model.openPanel(group.panels[group.panels.length - 1], {
+                            skipSetGroupActive: true
+                        });
+                    }
+                    return group;
+                }
+            });
             if (typeof activeGroup === 'string') {
                 const panel = this.getPanel(activeGroup);
                 if (panel) {
@@ -4553,7 +4557,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this.gridview.layout(this.width, this.height);
-            this._onDidLayoutfromJSON.fire();
+            this._onDidLayoutFromJSON.fire();
+        }
+        clear() {
+            const groups = Array.from(this._groups.values()).map((_) => _.value);
+            const hasActiveGroup = !!this.activeGroup;
+            const hasActivePanel = !!this.activePanel;
+            for (const group of groups) {
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, true);
+            }
+            if (hasActiveGroup) {
+                this.doSetGroupActive(undefined);
+            }
+            if (hasActivePanel) {
+                this._onDidActivePanelChange.fire(undefined);
+            }
+            this.gridview.clear();
         }
         closeAllGroups() {
             for (const entry of this._groups.entries()) {
@@ -4751,7 +4771,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }), view.model.onDidDrop((event) => {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
@@ -4815,7 +4835,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidActivePanelChange.dispose();
             this._onDidAddPanel.dispose();
             this._onDidRemovePanel.dispose();
-            this._onDidLayoutfromJSON.dispose();
+            this._onDidLayoutFromJSON.dispose();
         }
     }
 
@@ -4853,7 +4873,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
+                this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4889,13 +4909,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
         fromJSON(serializedGridview) {
+            this.clear();
             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();
             const queue = [];
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -4917,6 +4932,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         accessor: this,
                         isVisible: node.visible,
                     }));
+                    this._onDidAddGroup.fire(view);
                     this.registerPanel(view);
                     return view;
                 },
@@ -4931,6 +4947,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            const hasActiveGroup = this.activeGroup;
+            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 });
+            }
+            if (hasActiveGroup) {
+                this.doSetGroupActive(undefined);
+            }
+            this.gridview.clear();
+        }
         movePanel(panel, options) {
             var _a;
             let relativeLocation;
@@ -5221,13 +5249,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(serializedSplitview) {
+            this.clear();
             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, {
                 orientation,
@@ -5275,6 +5298,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            for (const [_, value] of this._panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
+            this._panels.clear();
+            this.splitview.dispose();
+        }
         dispose() {
             for (const [_, value] of this._panels.entries()) {
                 value.disposable.dispose();
@@ -5603,9 +5634,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.element.className = 'default-header';
             this._content = document.createElement('span');
             this._expander = document.createElement('a');
-            this.element.appendChild(this._content);
             this.element.appendChild(this._expander);
-            this.addDisposables(addDisposableListener(this._expander, 'click', () => {
+            this.element.appendChild(this._content);
+            this.addDisposables(addDisposableListener(this._element, 'click', () => {
                 var _a;
                 (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
             }));
@@ -5616,9 +5647,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         init(params) {
             this.apiRef.api = params.api;
             this._content.textContent = params.title;
-            this._expander.textContent = params.api.isExpanded ? '<' : '>';
+            this._expander.textContent = '▼';
+            toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
             this.disposable.value = params.api.onDidExpansionChange((e) => {
-                this._expander.textContent = e.isExpanded ? '<' : '>';
+                toggleClass(this._expander, 'collapsed', !e.isExpanded);
             });
         }
         update(_params) {
@@ -5794,13 +5826,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(serializedPaneview) {
+            this.clear();
             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,
                 descriptor: {
@@ -5859,6 +5887,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             queue.forEach((f) => f());
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
+            this.paneview.dispose();
+        }
         doAddPanel(panel) {
             const disposable = panel.onDidDrop((event) => {
                 this._onDidDrop.fire(event);