dockview 1.10.0 → 1.10.2

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.10.0
+ * @version 1.10.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -1502,6 +1502,9 @@
               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();
@@ -3006,19 +3009,27 @@
           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;
@@ -3562,7 +3573,7 @@
                           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);
@@ -3885,7 +3896,7 @@
                       // 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;
@@ -4278,6 +4289,7 @@
           this._width = 0;
           this._height = 0;
           this._panels = [];
+          this._panelDisposables = new Map();
           this._onMove = new Emitter();
           this.onMove = this._onMove.event;
           this._onDidDrop = new Emitter();
@@ -4292,6 +4304,10 @@
           this.onGroupDragStart = this._onGroupDragStart.event;
           this._onDidAddPanel = new Emitter();
           this.onDidAddPanel = this._onDidAddPanel.event;
+          this._onDidPanelTitleChange = new Emitter();
+          this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+          this._onDidPanelParametersChange = new Emitter();
+          this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
           this._onDidRemovePanel = new Emitter();
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidActivePanelChange = new Emitter();
@@ -4580,6 +4596,11 @@
           if (this.mostRecentlyUsed.includes(panel)) {
               this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
           }
+          const disposable = this._panelDisposables.get(panel.id);
+          if (disposable) {
+              disposable.dispose();
+              this._panelDisposables.delete(panel.id);
+          }
           this._onDidRemovePanel.fire({ panel });
       }
       doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
@@ -4597,6 +4618,7 @@
           }
           this.updateMru(panel);
           this.panels.splice(index, 0, panel);
+          this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
           this._onDidAddPanel.fire({ panel });
       }
       doSetActivePanel(panel) {
@@ -5014,24 +5036,22 @@
       get isVisible() {
           return this._isVisible;
       }
-      get isHidden() {
-          return this._isHidden;
-      }
       get width() {
           return this._width;
       }
       get height() {
           return this._height;
       }
-      constructor(id) {
+      constructor(id, component) {
           super();
           this.id = id;
+          this.component = component;
           this._isFocused = false;
           this._isActive = false;
           this._isVisible = true;
-          this._isHidden = false;
           this._width = 0;
           this._height = 0;
+          this._parameters = {};
           this.panelUpdatesDisposable = new MutableDisposable();
           this._onDidDimensionChange = new Emitter();
           this.onDidDimensionsChange = this._onDidDimensionChange.event;
@@ -5043,49 +5063,51 @@
           //
           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();
           this.onActiveChange = this._onActiveChange.event;
-          this._onUpdateParameters = new Emitter();
-          this.onUpdateParameters = this._onUpdateParameters.event;
+          this._onDidParametersChange = new Emitter();
+          this.onDidParametersChange = this._onDidParametersChange.event;
           this.addDisposables(this.onDidFocusChange((event) => {
               this._isFocused = event.isFocused;
           }), this.onDidActiveChange((event) => {
               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._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+      }
+      getParameters() {
+          return this._parameters;
       }
       initialize(panel) {
-          this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+          this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+              this._parameters = parameters;
               panel.update({
                   params: parameters,
               });
           });
       }
-      setHidden(isHidden) {
-          this._onDidHiddenChange.fire({ isHidden });
+      setVisible(isVisible) {
+          this._onWillVisibilityChange.fire({ isVisible });
       }
       setActive() {
           this._onActiveChange.fire();
       }
       updateParameters(parameters) {
-          this._onUpdateParameters.fire(parameters);
+          this._onDidParametersChange.fire(parameters);
       }
   }
 
   class SplitviewPanelApiImpl extends PanelApiImpl {
       //
-      constructor(id) {
-          super(id);
+      constructor(id, component) {
+          super(id, component);
           this._onDidConstraintsChangeInternal = new Emitter();
           this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
           //
@@ -5110,8 +5132,8 @@
       set pane(pane) {
           this._pane = pane;
       }
-      constructor(id) {
-          super(id);
+      constructor(id, component) {
+          super(id, component);
           this._onDidExpansionChange = new Emitter({
               replay: true,
           });
@@ -5270,7 +5292,7 @@
           this.header.style.display = value ? '' : 'none';
       }
       constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-          super(id, component, new PaneviewPanelApiImpl(id));
+          super(id, component, new PaneviewPanelApiImpl(id, component));
           this.headerComponent = headerComponent;
           this._onDidChangeExpansionState = new Emitter({ replay: true });
           this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
@@ -5290,7 +5312,11 @@
           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);
@@ -5497,8 +5523,8 @@
   }
 
   class GridviewPanelApiImpl extends PanelApiImpl {
-      constructor(id, panel) {
-          super(id);
+      constructor(id, component, panel) {
+          super(id, component);
           this._onDidConstraintsChangeInternal = new Emitter();
           this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
           this._onDidConstraintsChange = new Emitter();
@@ -5569,7 +5595,7 @@
           return this.api.isActive;
       }
       constructor(id, component, options, api) {
-          super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
+          super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
           this._evaluatedMinimumWidth = 0;
           this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
           this._evaluatedMinimumHeight = 0;
@@ -5594,10 +5620,10 @@
               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);
@@ -5677,7 +5703,7 @@
           return this._group.model.location;
       }
       constructor(id, accessor) {
-          super(id);
+          super(id, '__dockviewgroup__');
           this.accessor = accessor;
           this._onDidLocationChange = new Emitter();
           this.onDidLocationChange = this._onDidLocationChange.event;
@@ -5838,32 +5864,11 @@
           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,
               });
@@ -5872,8 +5877,11 @@
       get group() {
           return this._group;
       }
-      constructor(panel, group, accessor) {
-          super(panel.id);
+      get tabComponent() {
+          return this._tabComponent;
+      }
+      constructor(panel, group, accessor, component, tabComponent) {
+          super(panel.id, component);
           this.panel = panel;
           this.accessor = accessor;
           this._onDidTitleChange = new Emitter();
@@ -5887,8 +5895,10 @@
           this._onDidLocationChange = new Emitter();
           this.onDidLocationChange = this._onDidLocationChange.event;
           this.groupEventsDisposable = new MutableDisposable();
+          this._tabComponent = tabComponent;
           this.initialize(panel);
           this._group = group;
+          this.setupGroupEventListeners();
           this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
       }
       getWindow() {
@@ -5923,6 +5933,35 @@
       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 {
@@ -5939,7 +5978,7 @@
           var _a;
           return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
       }
-      constructor(id, accessor, containerApi, group, view, options) {
+      constructor(id, component, tabComponent, accessor, containerApi, group, view, options) {
           super();
           this.id = id;
           this.accessor = accessor;
@@ -5947,7 +5986,7 @@
           this.view = view;
           this._renderer = options.renderer;
           this._group = group;
-          this.api = new DockviewPanelApiImpl(this, this._group, accessor);
+          this.api = new DockviewPanelApiImpl(this, this._group, accessor, component, tabComponent);
           this.addDisposables(this.api.onActiveChange(() => {
               accessor.setActivePanel(this);
           }), this.api.onDidSizeChange((event) => {
@@ -6242,7 +6281,7 @@
               ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
               : panelData.tabComponent;
           const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
-          const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+          const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
               renderer: panelData.renderer,
           });
           panel.init({
@@ -7080,7 +7119,15 @@
               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,
@@ -7089,7 +7136,7 @@
                   api: this._api,
                   group: undefined,
                   getData: getPanelData,
-                  kind: 'content',
+                  kind: 'edge',
               });
               this._onWillDrop.fire(willDropEvent);
               if (willDropEvent.defaultPrevented) {
@@ -7145,7 +7192,7 @@
           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 : '', {
@@ -7196,7 +7243,7 @@
                   }));
                   switch (referenceLocation) {
                       case 'grid':
-                          referenceGroup.api.setHidden(true);
+                          referenceGroup.api.setVisible(false);
                           break;
                       case 'floating':
                       case 'popout':
@@ -7250,8 +7297,8 @@
                           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, {
@@ -7824,7 +7871,7 @@
       }
       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({
@@ -8221,6 +8268,8 @@
                   if (this._onDidActivePanelChange.value !== event.panel) {
                       this._onDidActivePanelChange.fire(event.panel);
                   }
+              }), exports.DockviewEvent.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
+                  this._bufferOnDidLayoutChange.fire();
               }));
               this._groups.set(view.id, { value: view, disposable });
           }
@@ -8233,7 +8282,7 @@
           const contentComponent = options.component;
           const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
           const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-          const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
+          const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
           panel.init({
               title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
               params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
@@ -8607,19 +8656,19 @@
           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) {
@@ -8918,6 +8967,10 @@
           });
           this.addDisposables(this._disposable);
       }
+      setVisible(panel, visible) {
+          const index = this.panels.indexOf(panel);
+          this.paneview.setViewVisible(index, visible);
+      }
       focus() {
           //noop
       }
@@ -8964,6 +9017,7 @@
               isExpanded: options.isExpanded,
               title: options.title,
               containerApi: new PaneviewApi(this),
+              accessor: this,
           });
           this.paneview.addPane(view, size, index);
           view.orientation = this.paneview.orientation;
@@ -9063,6 +9117,7 @@
                               title: data.title,
                               isExpanded: !!view.expanded,
                               containerApi: new PaneviewApi(this),
+                              accessor: this,
                           });
                           panel.orientation = this.paneview.orientation;
                       });
@@ -9142,7 +9197,7 @@
           return this._snap;
       }
       constructor(id, componentName) {
-          super(id, componentName, new SplitviewPanelApiImpl(id));
+          super(id, componentName, new SplitviewPanelApiImpl(id, componentName));
           this._evaluatedMinimumSize = 0;
           this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
           this._minimumSize = 0;
@@ -9151,10 +9206,10 @@
           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);