dockview 1.4.0 → 1.4.1

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.0
+ * @version 1.4.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2307,18 +2307,12 @@
       removePanel(panel, sizing) {
           this.component.removePanel(panel, sizing);
       }
-      setVisible(panel, isVisible) {
-          this.component.setVisible(panel, isVisible);
-      }
       focus() {
           this.component.focus();
       }
       getPanel(id) {
           return this.component.getPanel(id);
       }
-      setActive(panel) {
-          this.component.setActive(panel);
-      }
       layout(width, height) {
           return this.component.layout(width, height);
       }
@@ -2466,15 +2460,6 @@
       getPanel(id) {
           return this.component.getPanel(id);
       }
-      toggleVisibility(panel) {
-          this.component.toggleVisibility(panel);
-      }
-      setVisible(panel, visible) {
-          this.component.setVisible(panel, visible);
-      }
-      setActive(panel) {
-          this.component.setActive(panel);
-      }
       fromJSON(data) {
           return this.component.fromJSON(data);
       }
@@ -2711,7 +2696,7 @@
       MouseEventKind["CLICK"] = "CLICK";
       MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
   })(exports.MouseEventKind || (exports.MouseEventKind = {}));
-  class Tab$1 extends CompositeDisposable {
+  class Tab extends CompositeDisposable {
       constructor(panelId, accessor, group) {
           super();
           this.panelId = panelId;
@@ -2940,7 +2925,7 @@
           if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
               return;
           }
-          const tabToAdd = new Tab$1(panel.id, this.accessor, this.group);
+          const tabToAdd = new Tab(panel.id, this.accessor, this.group);
           if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
               throw new Error('invalid header component');
           }
@@ -3611,10 +3596,10 @@
           this._isVisible = true;
           this._width = 0;
           this._height = 0;
-          this._onDidPanelDimensionChange = new Emitter({
+          this._onDidDimensionChange = new Emitter({
               replay: true,
           });
-          this.onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+          this.onDidDimensionsChange = this._onDidDimensionChange.event;
           //
           this._onDidChangeFocus = new Emitter({
               replay: true,
@@ -3639,7 +3624,7 @@
           //
           this._onActiveChange = new Emitter();
           this.onActiveChange = this._onActiveChange.event;
-          this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+          this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
               this._isFocused = event.isFocused;
           }), this.onDidActiveChange((event) => {
               this._isActive = event.isActive;
@@ -3863,7 +3848,7 @@
       layout(width, height) {
           var _a;
           // the obtain the correct dimensions of the content panel we must deduct the tab height
-          this.api._onDidPanelDimensionChange.fire({
+          this.api._onDidDimensionChange.fire({
               width,
               height: height - (this.group.model.header.height || 0),
           });
@@ -4013,53 +3998,6 @@
       return new Component(id, componentName);
   }
 
-  class WrappedTab {
-      constructor(renderer) {
-          this.renderer = renderer;
-          this._element = document.createElement('element');
-          this.show();
-      }
-      get innerRenderer() {
-          return this.renderer;
-      }
-      get element() {
-          return this._element;
-      }
-      get id() {
-          return this.renderer.id;
-      }
-      show() {
-          if (!this.renderer.element.parentElement) {
-              this._element.appendChild(this.renderer.element);
-          }
-      }
-      hide() {
-          if (this.renderer.element.parentElement) {
-              this.renderer.element.remove();
-          }
-      }
-      layout(width, height) {
-          this.renderer.layout(width, height);
-      }
-      update(event) {
-          this.renderer.update(event);
-      }
-      toJSON() {
-          return this.renderer.toJSON();
-      }
-      focus() {
-          this.renderer.focus();
-      }
-      init(parameters) {
-          this.renderer.init(parameters);
-      }
-      updateParentGroup(group, isPanelVisible) {
-          this.renderer.updateParentGroup(group, isPanelVisible);
-      }
-      dispose() {
-          this.renderer.dispose();
-      }
-  }
   class DefaultTab extends CompositeDisposable {
       constructor() {
           super();
@@ -4122,15 +4060,21 @@
           }
       }
       updateParentGroup(group, isPanelVisible) {
+          const changed = this._isPanelVisible !== isPanelVisible ||
+              this._isGroupActive !== group.isActive;
           this._isPanelVisible = isPanelVisible;
           this._isGroupActive = group.isActive;
-          this.render();
+          if (changed) {
+              this.render();
+          }
       }
       layout(_width, _height) {
           // noop
       }
       render() {
-          this._content.textContent = this.params.title;
+          if (this._content.textContent !== this.params.title) {
+              this._content.textContent = this.params.title;
+          }
       }
   }
 
@@ -4174,7 +4118,7 @@
       layout(width, height) {
           this._width = width;
           this._height = height;
-          this.api._onDidPanelDimensionChange.fire({ width, height });
+          this.api._onDidDimensionChange.fire({ width, height });
           if (this.part) {
               if (this._params) {
                   this.part.update(this._params.params);
@@ -4223,11 +4167,11 @@
           this.onDidChange = this._onDidChange.event;
           this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
               const { isVisible } = event;
-              const { containerApi } = this._params;
-              containerApi.setVisible(this, isVisible);
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
           }), this.api.onActiveChange(() => {
-              const { containerApi } = this._params;
-              containerApi.setActive(this);
+              const { accessor } = this._params;
+              accessor.setActive(this);
           }), this.api.onDidConstraintsChangeInternal((event) => {
               if (typeof event.minimumWidth === 'number' ||
                   typeof event.minimumWidth === 'function') {
@@ -4406,7 +4350,7 @@
       constructor(renderers) {
           var _a;
           this._content = renderers.content;
-          this._tab = new WrappedTab((_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab());
+          this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
           this._actions =
               renderers.actions ||
                   (this.content.actions
@@ -4446,9 +4390,7 @@
       toJSON() {
           return {
               content: this.content.toJSON(),
-              tab: this.tab.innerRenderer instanceof DefaultTab
-                  ? undefined
-                  : this.tab.toJSON(),
+              tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
           };
       }
       dispose() {
@@ -4836,7 +4778,7 @@
               }
           }
           const view = new GroupPanel(this, id, options);
-          view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
+          view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
           if (!this._groups.has(view.id)) {
               const disposable = new CompositeDisposable(view.model.onMove((event) => {
                   const { groupId, itemId, target, index } = event;
@@ -4975,9 +4917,6 @@
               value.value.setActive(panel === value.value);
           });
       }
-      toggleVisibility(panel) {
-          this.setVisible(panel, !this.isVisible(panel));
-      }
       focus() {
           var _a;
           (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5008,7 +4947,7 @@
                       maximumHeight: data.maximumHeight,
                       priority: data.priority,
                       snap: !!data.snap,
-                      containerApi: new GridviewApi(this),
+                      accessor: this,
                       isVisible: node.visible,
                   }));
                   this.registerPanel(view);
@@ -5074,7 +5013,7 @@
               maximumHeight: options.maximumHeight,
               priority: options.priority,
               snap: !!options.snap,
-              containerApi: new GridviewApi(this),
+              accessor: this,
               isVisible: true,
           });
           this.registerPanel(view);
@@ -5270,7 +5209,7 @@
               maximumSize: options.maximumSize,
               snap: options.snap,
               priority: options.priority,
-              containerApi: new SplitviewApi(this),
+              accessor: this,
           });
           const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
           const index = typeof options.index === 'number' ? options.index : undefined;
@@ -5346,7 +5285,7 @@
                               maximumSize: data.maximumSize,
                               snap: view.snap,
                               priority: view.priority,
-                              containerApi: new SplitviewApi(this),
+                              accessor: this,
                           });
                       });
                       panel.orientation = orientation;
@@ -5988,13 +5927,11 @@
           this.onDidChange = this._onDidChange.event;
           this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
               const { isVisible } = event;
-              const { containerApi } = this
-                  ._params;
-              containerApi.setVisible(this, isVisible);
+              const { accessor } = this._params;
+              accessor.setVisible(this, isVisible);
           }), this.api.onActiveChange(() => {
-              const { containerApi } = this
-                  ._params;
-              containerApi.setActive(this);
+              const { accessor } = this._params;
+              accessor.setActive(this);
           }), this.api.onDidConstraintsChangeInternal((event) => {
               if (typeof event.minimumSize === 'number' ||
                   typeof event.minimumSize === 'function') {
@@ -6246,9 +6183,6 @@
       layout(_width, _height) {
           // noop
       }
-      close() {
-          return Promise.resolve(true);
-      }
       dispose() {
           var _a, _b;
           this._onDidFocus.dispose();
@@ -6518,58 +6452,6 @@
   });
   DockviewReact.displayName = 'DockviewComponent';
 
-  const Tab = (props) => {
-      return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-  };
-  const Content = (props) => {
-      return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-  };
-  const Actions = (props) => {
-      return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-  };
-  function isValidComponent(element) {
-      return [Content, Actions, Tab].find((comp) => element.type === comp);
-  }
-  const Panel = (props) => {
-      const context = React__namespace.useContext(ReactPartContext);
-      const sections = React__namespace.useMemo(() => {
-          var _a;
-          const childs = ((_a = React__namespace.Children.map(props.children, (_) => _)) === null || _a === void 0 ? void 0 : _a.filter(isReactElement)) || [];
-          const isInvalid = !!childs.find((_) => !isValidComponent(_));
-          if (isInvalid) {
-              throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-          }
-          const body = childs.find((_) => _.type === Content);
-          const actions = childs.find((_) => _.type === Actions);
-          const tab = childs.find((_) => _.type === Tab);
-          return { body, actions, tab };
-      }, [props.children]);
-      React__namespace.useEffect(() => {
-          /**
-           * hide or show the default tab behavior based on whether we want to override
-           * with our own React tab.
-           */
-          if (sections.tab) {
-              context.tabPortalElement.hide();
-          }
-          else {
-              context.tabPortalElement.show();
-          }
-      }, [sections.tab]);
-      return (React__namespace.createElement(React__namespace.Fragment, null,
-          sections.actions &&
-              ReactDOM__namespace.createPortal(sections.actions, context.actionsPortalElement),
-          sections.tab &&
-              ReactDOM__namespace.createPortal(sections.tab, context.tabPortalElement.element),
-          sections.body || props.children));
-  };
-  const DockviewComponents = {
-      Tab,
-      Content,
-      Actions,
-      Panel,
-  };
-
   class ReactPanelView extends SplitviewPanel {
       constructor(id, component, reactComponent, reactPortalStore) {
           super(id, component);
@@ -6581,8 +6463,7 @@
           return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
               params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
               api: this.api,
-              containerApi: this._params
-                  .containerApi,
+              containerApi: new SplitviewApi(this._params.accessor),
           });
       }
   }
@@ -6658,8 +6539,7 @@
           return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
               params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
               api: this.api,
-              containerApi: this._params
-                  .containerApi,
+              containerApi: new GridviewApi(this._params.accessor),
           });
       }
   }
@@ -6853,7 +6733,6 @@
   exports.ContentContainer = ContentContainer;
   exports.DockviewApi = DockviewApi;
   exports.DockviewComponent = DockviewComponent;
-  exports.DockviewComponents = DockviewComponents;
   exports.DockviewReact = DockviewReact;
   exports.Gridview = Gridview;
   exports.GridviewApi = GridviewApi;
@@ -6879,7 +6758,7 @@
   exports.SplitviewComponent = SplitviewComponent;
   exports.SplitviewPanel = SplitviewPanel;
   exports.SplitviewReact = SplitviewReact;
-  exports.Tab = Tab$1;
+  exports.Tab = Tab;
   exports.getDirectionOrientation = getDirectionOrientation;
   exports.getGridLocation = getGridLocation;
   exports.getLocationOrientation = getLocationOrientation;