dockview 1.10.0 → 1.10.1

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.10.0
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1468,6 +1468,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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();
@@ -2972,19 +2975,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -3528,7 +3539,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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);
@@ -3851,7 +3862,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.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;
@@ -4980,9 +4991,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get isVisible() {
             return this._isVisible;
         }
-        get isHidden() {
-            return this._isHidden;
-        }
         get width() {
             return this._width;
         }
@@ -4995,7 +5003,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isFocused = false;
             this._isActive = false;
             this._isVisible = true;
-            this._isHidden = false;
             this._width = 0;
             this._height = 0;
             this.panelUpdatesDisposable = new MutableDisposable();
@@ -5009,8 +5016,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             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();
@@ -5023,12 +5030,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) => {
@@ -5037,8 +5042,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 });
             });
         }
-        setHidden(isHidden) {
-            this._onDidHiddenChange.fire({ isHidden });
+        setVisible(isVisible) {
+            this._onWillVisibilityChange.fire({ isVisible });
         }
         setActive() {
             this._onActiveChange.fire();
@@ -5256,7 +5261,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -5560,10 +5569,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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);
@@ -5804,32 +5813,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
                 });
@@ -5855,6 +5843,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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() {
@@ -5889,6 +5878,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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 {
@@ -7046,7 +7064,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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,
@@ -7055,7 +7081,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     api: this._api,
                     group: undefined,
                     getData: getPanelData,
-                    kind: 'content',
+                    kind: 'edge',
                 });
                 this._onWillDrop.fire(willDropEvent);
                 if (willDropEvent.defaultPrevented) {
@@ -7111,7 +7137,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 : '', {
@@ -7162,7 +7188,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }));
                     switch (referenceLocation) {
                         case 'grid':
-                            referenceGroup.api.setHidden(true);
+                            referenceGroup.api.setVisible(false);
                             break;
                         case 'floating':
                         case 'popout':
@@ -7216,8 +7242,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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, {
@@ -7790,7 +7816,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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({
@@ -8573,19 +8599,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -8884,6 +8910,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this._disposable);
         }
+        setVisible(panel, visible) {
+            const index = this.panels.indexOf(panel);
+            this.paneview.setViewVisible(index, visible);
+        }
         focus() {
             //noop
         }
@@ -8930,6 +8960,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 isExpanded: options.isExpanded,
                 title: options.title,
                 containerApi: new PaneviewApi(this),
+                accessor: this,
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
@@ -9029,6 +9060,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 title: data.title,
                                 isExpanded: !!view.expanded,
                                 containerApi: new PaneviewApi(this),
+                                accessor: this,
                             });
                             panel.orientation = this.paneview.orientation;
                         });
@@ -9117,10 +9149,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);