dockview-react 2.0.0 → 2.1.1

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 2.0.0
+ * @version 2.1.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2189,6 +2189,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.hasMaximizedView()) {
                 this.exitMaximizedView();
             }
+            serializeBranchNode(this.getView(), this.orientation);
             const hiddenOnMaximize = [];
             function hideAllViewsBut(parent, exclude) {
                 for (let i = 0; i < parent.children.length; i++) {
@@ -2210,7 +2211,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             hideAllViewsBut(this.root, node);
             this._maximizedNode = { leaf: node, hiddenOnMaximize };
-            this._onDidMaximizedNodeChange.fire();
+            this._onDidMaximizedNodeChange.fire({
+                view: node.view,
+                isMaximized: true,
+            });
         }
         exitMaximizedView() {
             if (!this._maximizedNode) {
@@ -2231,24 +2235,51 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             showViewsInReverseOrder(this.root);
+            const tmp = this._maximizedNode.leaf;
             this._maximizedNode = undefined;
-            this._onDidMaximizedNodeChange.fire();
+            this._onDidMaximizedNodeChange.fire({
+                view: tmp.view,
+                isMaximized: false,
+            });
         }
         serialize() {
+            const maximizedView = this.maximizedView();
+            let maxmizedViewLocation;
+            if (maximizedView) {
+                /**
+                 * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+                 * which is represented as a branch of indices
+                 */
+                maxmizedViewLocation = getGridLocation(maximizedView.element);
+            }
             if (this.hasMaximizedView()) {
                 /**
-                 * do not persist maximized view state
-                 * firstly exit any maximized views to ensure the correct dimensions are persisted
+                 * the saved layout cannot be in its maxmized state otherwise all of the underlying
+                 * view dimensions will be wrong
+                 *
+                 * To counteract this we temporaily remove the maximized view to compute the serialized output
+                 * of the grid before adding back the maxmized view as to not alter the layout from the users
+                 * perspective when `.toJSON()` is called
                  */
                 this.exitMaximizedView();
             }
             const root = serializeBranchNode(this.getView(), this.orientation);
-            return {
+            const resullt = {
                 root,
                 width: this.width,
                 height: this.height,
                 orientation: this.orientation,
             };
+            if (maxmizedViewLocation) {
+                resullt.maximizedNode = {
+                    location: maxmizedViewLocation,
+                };
+            }
+            if (maximizedView) {
+                // replace any maximzied view that was removed for serialization purposes
+                this.maximizeView(maximizedView);
+            }
+            return resullt;
         }
         dispose() {
             this.disposable.dispose();
@@ -2267,6 +2298,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const orientation = json.orientation;
             const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
             this._deserialize(json.root, orientation, deserializer, height);
+            /**
+             * The deserialied layout must be positioned through this.layout(...)
+             * before any maximizedNode can be positioned
+             */
+            this.layout(json.width, json.height);
+            if (json.maximizedNode) {
+                const location = json.maximizedNode.location;
+                const [_, node] = this.getNode(location);
+                if (!(node instanceof LeafNode)) {
+                    return;
+                }
+                this.maximizeView(node.view);
+            }
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
             this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
@@ -2691,6 +2735,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemove = this._onDidRemove.event;
             this._onDidAdd = new Emitter();
             this.onDidAdd = this._onDidAdd.event;
+            this._onDidMaximizedChange = new Emitter();
+            this.onDidMaximizedChange = this._onDidMaximizedChange.event;
             this._onDidActiveChange = new Emitter();
             this.onDidActiveChange = this._onDidActiveChange.event;
             this._bufferOnDidLayoutChange = new AsapEvent();
@@ -2706,7 +2752,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.locked = !!options.locked;
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+            this.addDisposables(this.gridview.onDidMaximizedNodeChange((event) => {
+                this._onDidMaximizedChange.fire({
+                    panel: event.view,
+                    isMaximized: event.isMaximized,
+                });
+            }), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
                 this.layout(this.width, this.height, true);
             }), exports.DockviewDisposable.from(() => {
                 var _a;
@@ -2756,9 +2807,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         hasMaximizedGroup() {
             return this.gridview.hasMaximizedView();
         }
-        get onDidMaximizedGroupChange() {
-            return this.gridview.onDidMaximizedNodeChange;
-        }
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
             this._onDidAdd.fire(group);
@@ -4768,7 +4816,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'dv-void-container';
-            this._element.tabIndex = 0;
             this._element.draggable = true;
             this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
                 this.accessor.doSetGroupActive(this.group);
@@ -5082,6 +5129,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             disableDnd: undefined,
             gap: undefined,
             className: undefined,
+            noPanelsOverlay: undefined,
         };
         return Object.keys(properties);
     })();
@@ -5522,7 +5570,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.doClose(panel);
         }
         doClose(panel) {
-            this.accessor.removePanel(panel);
+            const isLast = this.panels.length === 1 && this.accessor.groups.length === 1;
+            this.accessor.removePanel(panel, isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
+                ? { removeEmptyGroup: false }
+                : undefined);
         }
         isPanelActive(panel) {
             return this._activePanel === panel;
@@ -5628,7 +5679,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateContainer() {
             var _a, _b;
-            toggleClass(this.container, 'dv-empty', this.isEmpty);
             this.panels.forEach((panel) => panel.runEvents());
             if (this.isEmpty && !this.watermark) {
                 const watermark = this.accessor.createWatermarkComponent();
@@ -5642,14 +5692,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.accessor.doSetGroupActive(this.groupPanel);
                     }
                 });
-                this.tabsContainer.hide();
                 this.contentContainer.element.appendChild(this.watermark.element);
             }
             if (!this.isEmpty && this.watermark) {
                 this.watermark.element.remove();
                 (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 this.watermark = undefined;
-                this.tabsContainer.show();
             }
         }
         canDisplayOverlay(event, position, target) {
@@ -6577,38 +6625,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             super();
             this._element = document.createElement('div');
             this._element.className = 'dv-watermark';
-            const title = document.createElement('div');
-            title.className = 'dv-watermark-title';
-            const emptySpace = document.createElement('span');
-            emptySpace.style.flexGrow = '1';
-            const content = document.createElement('div');
-            content.className = 'dv-watermark-content';
-            this._element.appendChild(title);
-            this._element.appendChild(content);
-            const actionsContainer = document.createElement('div');
-            actionsContainer.className = 'dv-actions-container';
-            const closeAnchor = document.createElement('div');
-            closeAnchor.className = 'dv-close-action';
-            closeAnchor.appendChild(createCloseButton());
-            actionsContainer.appendChild(closeAnchor);
-            title.appendChild(emptySpace);
-            title.appendChild(actionsContainer);
-            this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
-                var _a;
-                event.preventDefault();
-                if (this._group) {
-                    (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
-                }
-            }));
         }
         init(_params) {
-            this._api = _params.containerApi;
-            this._group = _params.group;
-            this.render();
-        }
-        render() {
-            const isOneGroup = !!(this._api && this._api.size <= 1);
-            toggleClass(this.element, 'dv-has-actions', isOneGroup);
+            // noop
         }
     }
 
@@ -6645,6 +6664,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get element() {
             return this._element;
         }
+        get isVisible() {
+            return this._isVisible;
+        }
         constructor(options) {
             super();
             this.options = options;
@@ -6655,6 +6677,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidChangeEnd = this._onDidChangeEnd.event;
             this.addDisposables(this._onDidChange, this._onDidChangeEnd);
             this._element.className = 'dv-resize-container';
+            this._isVisible = true;
             this.setupResize('top');
             this.setupResize('bottom');
             this.setupResize('left');
@@ -6669,6 +6692,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
             arialLevelTracker.push(this._element);
         }
+        setVisible(isVisible) {
+            if (isVisible === this.isVisible) {
+                return;
+            }
+            this._isVisible = isVisible;
+            toggleClass(this.element, 'dv-hidden', !this.isVisible);
+        }
         bringToFront() {
             arialLevelTracker.push(this._element);
         }
@@ -7405,6 +7435,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this._onDidMovePanel = new Emitter();
             this.onDidMovePanel = this._onDidMovePanel.event;
+            this._onDidMaximizedGroupChange = new Emitter();
+            this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
             this._floatingGroups = [];
             this._popoutGroups = [];
             this._onDidRemoveGroup = new Emitter();
@@ -7431,6 +7463,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (!this._moving) {
                     this._onDidActiveGroupChange.fire(event);
                 }
+            }), this.onDidMaximizedChange((event) => {
+                this._onDidMaximizedGroupChange.fire({
+                    group: event.panel,
+                    isMaximized: event.isMaximized,
+                });
             }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
@@ -7529,8 +7566,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
+        setVisible(panel, visible) {
+            switch (panel.api.location.type) {
+                case 'grid':
+                    super.setVisible(panel, visible);
+                    break;
+                case 'floating': {
+                    const item = this.floatingGroups.find((floatingGroup) => floatingGroup.group === panel);
+                    if (item) {
+                        item.overlay.setVisible(visible);
+                        panel.api._onDidVisibilityChange.fire({
+                            isVisible: visible,
+                        });
+                    }
+                    break;
+                }
+                case 'popout':
+                    console.warn('dockview: You cannot hide a group that is in a popout window');
+                    break;
+            }
+        }
         addPopoutGroup(itemToPopout, options) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             if (itemToPopout instanceof DockviewPanel &&
                 itemToPopout.group.size === 1) {
                 return this.addPopoutGroup(itemToPopout.group, options);
@@ -7553,7 +7610,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
             const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
             theme !== null && theme !== void 0 ? theme : '', {
-                url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+                url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html',
                 left: window.screenX + box.left,
                 top: window.screenY + box.top,
                 width: box.width,
@@ -7567,7 +7624,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return _window
                 .open()
                 .then((popoutContainer) => {
-                var _a;
                 if (_window.isDisposed) {
                     return false;
                 }
@@ -7587,14 +7643,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                  * of this case is when being called from the `fromJSON(...)` method
                  */
                 const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
-                const group = !isGroupAddedToDom
-                    ? referenceGroup
-                    : (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
-                group.model.renderContainer = overlayRenderContainer;
-                group.layout(_window.window.innerWidth, _window.window.innerHeight);
-                if (!this._groups.has(group.api.id)) {
+                let group;
+                if (!isGroupAddedToDom) {
+                    group = referenceGroup;
+                }
+                else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                    group = options.overridePopoutGroup;
+                }
+                else {
+                    group = this.createGroup({ id: groupId });
                     this._onDidAddGroup.fire(group);
                 }
+                group.model.renderContainer = overlayRenderContainer;
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
                 if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
                     if (itemToPopout instanceof DockviewPanel) {
                         this.movingLock(() => {
@@ -7625,6 +7686,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 group.model.location = {
                     type: 'popout',
                     getWindow: () => _window.window,
+                    popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
                 };
                 if (isGroupAddedToDom &&
                     itemToPopout.api.location.type === 'grid') {
@@ -7641,16 +7703,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
                 }));
                 let returnedGroup;
+                const isValidReferenceGroup = isGroupAddedToDom &&
+                    referenceGroup &&
+                    this.getPanel(referenceGroup.id);
                 const value = {
                     window: _window,
                     popoutGroup: group,
-                    referenceGroup: !isGroupAddedToDom
-                        ? undefined
-                        : referenceGroup
-                            ? this.getPanel(referenceGroup.id)
-                                ? referenceGroup.id
-                                : undefined
-                            : undefined,
+                    referenceGroup: isValidReferenceGroup
+                        ? referenceGroup.id
+                        : undefined,
                     disposable: {
                         dispose: () => {
                             popoutWindowDisposable.dispose();
@@ -7999,6 +8060,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     data: group.popoutGroup.toJSON(),
                     gridReferenceGroup: group.referenceGroup,
                     position: group.window.dimensions(),
+                    url: group.popoutGroup.api.location.type === 'popout'
+                        ? group.popoutGroup.api.location.popoutUrl
+                        : undefined,
                 };
             });
             const result = {
@@ -8085,7 +8149,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
                 for (const serializedPopoutGroup of serializedPopoutGroups) {
-                    const { data, position, gridReferenceGroup } = serializedPopoutGroup;
+                    const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                     const group = createGroupFromSerializedState(data);
                     this.addPopoutGroup((_c = (gridReferenceGroup
                         ? this.getPanel(gridReferenceGroup)
@@ -8094,6 +8158,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         overridePopoutGroup: gridReferenceGroup
                             ? group
                             : undefined,
+                        popoutUrl: url,
                     });
                 }
                 for (const floatingGroup of this._floatingGroups) {
@@ -8303,7 +8368,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         removePanel(panel, options = {
             removeEmptyGroup: true,
-            skipDispose: false,
         }) {
             const group = panel.group;
             if (!group) {
@@ -8447,7 +8511,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             const refGroup = selectedGroup.referenceGroup
                                 ? this.getPanel(selectedGroup.referenceGroup)
                                 : undefined;
-                            if (refGroup) {
+                            if (refGroup && refGroup.panels.length === 0) {
                                 this.removeGroup(refGroup);
                             }
                         }