dockview 1.10.0 → 1.10.1

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.10.0
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1479,6 +1479,9 @@ class Paneview extends CompositeDisposable {
             this._onDidChange.fire();
         }));
     }
+    setViewVisible(index, visible) {
+        this.splitview.setViewVisible(index, visible);
+    }
     addPane(pane, size, index = this.splitview.length, skipLayout = false) {
         const disposable = pane.onDidChangeExpansionState(() => {
             this.setupAnimation();
@@ -2983,19 +2986,27 @@ class DockviewApi {
         return this.component.onWillDrop;
     }
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay() {
         return this.component.onWillShowOverlay;
     }
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup() {
         return this.component.onWillDragGroup;
     }
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
@@ -3539,7 +3550,7 @@ class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, 'panel');
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);
@@ -3862,7 +3873,7 @@ class VoidContainer extends CompositeDisposable {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                 }
-                return group.model.canDisplayOverlay(event, position, 'panel');
+                return group.model.canDisplayOverlay(event, position, 'header_space');
             },
         });
         this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
@@ -4991,9 +5002,6 @@ class PanelApiImpl extends CompositeDisposable {
     get isVisible() {
         return this._isVisible;
     }
-    get isHidden() {
-        return this._isHidden;
-    }
     get width() {
         return this._width;
     }
@@ -5006,7 +5014,6 @@ class PanelApiImpl extends CompositeDisposable {
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
-        this._isHidden = false;
         this._width = 0;
         this._height = 0;
         this.panelUpdatesDisposable = new MutableDisposable();
@@ -5020,8 +5027,8 @@ class PanelApiImpl extends CompositeDisposable {
         //
         this._onDidVisibilityChange = new Emitter();
         this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        this._onDidHiddenChange = new Emitter();
-        this.onDidHiddenChange = this._onDidHiddenChange.event;
+        this._onWillVisibilityChange = new Emitter();
+        this.onWillVisibilityChange = this._onWillVisibilityChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._onActiveChange = new Emitter();
@@ -5034,12 +5041,10 @@ class PanelApiImpl extends CompositeDisposable {
             this._isActive = event.isActive;
         }), this.onDidVisibilityChange((event) => {
             this._isVisible = event.isVisible;
-        }), this.onDidHiddenChange((event) => {
-            this._isHidden = event.isHidden;
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onDidHiddenChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
     }
     initialize(panel) {
         this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -5048,8 +5053,8 @@ class PanelApiImpl extends CompositeDisposable {
             });
         });
     }
-    setHidden(isHidden) {
-        this._onDidHiddenChange.fire({ isHidden });
+    setVisible(isVisible) {
+        this._onWillVisibilityChange.fire({ isVisible });
     }
     setActive() {
         this._onActiveChange.fire();
@@ -5267,7 +5272,11 @@ class PaneviewPanel extends BasePanelView {
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
         this.element.classList.add('pane');
-        this.addDisposables(this.api.onDidSizeChange((event) => {
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onDidSizeChange((event) => {
             this._onDidChange.fire({ size: event.size });
         }), addDisposableListener(this.element, 'mouseenter', (ev) => {
             this.api._onMouseEnter.fire(ev);
@@ -5571,10 +5580,10 @@ class GridviewPanel extends BasePanelView {
             this._maximumHeight = options.maximumHeight;
         }
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-        this.addDisposables(this.api.onDidHiddenChange((event) => {
-            const { isHidden } = event;
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, !isHidden);
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
             accessor.doSetGroupActive(this);
@@ -5815,32 +5824,11 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.panel.renderer;
     }
     set group(value) {
-        const isOldGroupActive = this.isGroupActive;
+        const oldGroup = this._group;
         if (this._group !== value) {
             this._group = value;
             this._onDidGroupChange.fire({});
-            let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
-            this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidLocationChange((event) => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                this._onDidLocationChange.fire(event);
-            }), this.group.api.onDidActiveChange(() => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                if (_trackGroupActive !== this.isGroupActive) {
-                    _trackGroupActive = this.isGroupActive;
-                    this._onDidActiveGroupChange.fire({
-                        isActive: this.isGroupActive,
-                    });
-                }
-            }));
-            // if (this.isGroupActive !== isOldGroupActive) {
-            //     this._onDidActiveGroupChange.fire({
-            //         isActive: this.isGroupActive,
-            //     });
-            // }
+            this.setupGroupEventListeners(oldGroup);
             this._onDidLocationChange.fire({
                 location: this.group.api.location,
             });
@@ -5866,6 +5854,7 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this.groupEventsDisposable = new MutableDisposable();
         this.initialize(panel);
         this._group = group;
+        this.setupGroupEventListeners();
         this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
     }
     getWindow() {
@@ -5900,6 +5889,35 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     exitMaximized() {
         this.group.api.exitMaximized();
     }
+    setupGroupEventListeners(previousGroup) {
+        var _a;
+        let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+        this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
+            if (!event.isVisible && this.isVisible) {
+                this._onDidVisibilityChange.fire(event);
+            }
+            else if (event.isVisible &&
+                !this.isVisible &&
+                this.group.model.isPanelActive(this.panel)) {
+                this._onDidVisibilityChange.fire(event);
+            }
+        }), this.group.api.onDidLocationChange((event) => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            this._onDidLocationChange.fire(event);
+        }), this.group.api.onDidActiveChange(() => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            if (_trackGroupActive !== this.isGroupActive) {
+                _trackGroupActive = this.isGroupActive;
+                this._onDidActiveGroupChange.fire({
+                    isActive: this.isGroupActive,
+                });
+            }
+        }));
+    }
 }
 
 class DockviewPanel extends CompositeDisposable {
@@ -7057,7 +7075,15 @@ class DockviewComponent extends BaseGrid {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        this.addDisposables(this._rootDropTarget.onDrop((event) => {
+        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            if (this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), this._rootDropTarget.onDrop((event) => {
             var _a;
             const willDropEvent = new DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -7066,7 +7092,7 @@ class DockviewComponent extends BaseGrid {
                 api: this._api,
                 group: undefined,
                 getData: getPanelData,
-                kind: 'content',
+                kind: 'edge',
             });
             this._onWillDrop.fire(willDropEvent);
             if (willDropEvent.defaultPrevented) {
@@ -7122,7 +7148,7 @@ class DockviewComponent extends BaseGrid {
         const box = getBox();
         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(); //item.id;
         if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setHidden(true);
+            itemToPopout.api.setVisible(false);
         }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
@@ -7173,7 +7199,7 @@ class DockviewComponent extends BaseGrid {
                 }));
                 switch (referenceLocation) {
                     case 'grid':
-                        referenceGroup.api.setHidden(true);
+                        referenceGroup.api.setVisible(false);
                         break;
                     case 'floating':
                     case 'popout':
@@ -7227,8 +7253,8 @@ class DockviewComponent extends BaseGrid {
                         from: group,
                         to: referenceGroup,
                     }));
-                    if (referenceGroup.api.isHidden) {
-                        referenceGroup.api.setHidden(false);
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
                     }
                     if (this.getPanel(group.id)) {
                         this.doRemoveGroup(group, {
@@ -7801,7 +7827,7 @@ class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location.type === 'grid' && !x.api.isHidden).length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -8584,19 +8610,19 @@ class SplitviewComponent extends Resizable {
         const index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     }
-    setActive(view, skipFocus) {
-        this._activePanel = view;
+    setActive(panel, skipFocus) {
+        this._activePanel = panel;
         this.panels
-            .filter((v) => v !== view)
+            .filter((v) => v !== panel)
             .forEach((v) => {
             v.api._onDidActiveChange.fire({ isActive: false });
             if (!skipFocus) {
                 v.focus();
             }
         });
-        view.api._onDidActiveChange.fire({ isActive: true });
+        panel.api._onDidActiveChange.fire({ isActive: true });
         if (!skipFocus) {
-            view.focus();
+            panel.focus();
         }
     }
     removePanel(panel, sizing) {
@@ -8895,6 +8921,10 @@ class PaneviewComponent extends Resizable {
         });
         this.addDisposables(this._disposable);
     }
+    setVisible(panel, visible) {
+        const index = this.panels.indexOf(panel);
+        this.paneview.setViewVisible(index, visible);
+    }
     focus() {
         //noop
     }
@@ -8941,6 +8971,7 @@ class PaneviewComponent extends Resizable {
             isExpanded: options.isExpanded,
             title: options.title,
             containerApi: new PaneviewApi(this),
+            accessor: this,
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
@@ -9040,6 +9071,7 @@ class PaneviewComponent extends Resizable {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new PaneviewApi(this),
+                            accessor: this,
                         });
                         panel.orientation = this.paneview.orientation;
                     });
@@ -9128,10 +9160,10 @@ class SplitviewPanel extends BasePanelView {
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this.api.initialize(this);
-        this.addDisposables(this._onDidChange, this.api.onDidHiddenChange((event) => {
-            const { isHidden } = event;
+        this.addDisposables(this._onDidChange, this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
             const { accessor } = this._params;
-            accessor.setVisible(this, !isHidden);
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
             accessor.setActive(this);