dockview 1.8.3 → 1.8.4

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.3
+ * @version 1.8.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -922,7 +922,17 @@
           size = typeof size === 'number' ? size : item.size;
           size = clamp(size, item.minimumSize, item.maximumSize);
           item.size = size;
-          this.relayout([index]);
+          const indexes = range(this.viewItems.length).filter((i) => i !== index);
+          const lowPriorityIndexes = [
+              ...indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low),
+              index,
+          ];
+          const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+          /**
+           * add this view we are changing to the low-index list since we have determined the size
+           * here and don't want it changed
+           */
+          this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
       }
       addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
           const container = document.createElement('div');
@@ -1679,6 +1689,7 @@
                   orientation: this.orientation,
                   descriptor,
                   proportionalLayout,
+                  styles,
               });
           }
           this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2190,6 +2201,14 @@
                   const child = sibling.children[i];
                   grandParent.addChild(child, child.size, parentIndex + i);
               }
+              /**
+               * clean down the branch node since we need to dipose of it and
+               * when .dispose() it called on a branch it will dispose of any
+               * views it is holding onto.
+               */
+              while (sibling.children.length > 0) {
+                  sibling.removeChild(0);
+              }
           }
           else {
               // otherwise create a new leaf node and add that to the grandparent
@@ -3248,6 +3267,19 @@
               this.leftActions = element;
           }
       }
+      setPrefixActionsElement(element) {
+          if (this.preActions === element) {
+              return;
+          }
+          if (this.preActions) {
+              this.preActions.remove();
+              this.preActions = undefined;
+          }
+          if (element) {
+              this.preActionsContainer.appendChild(element);
+              this.preActions = element;
+          }
+      }
       get element() {
           return this._element;
       }
@@ -3288,9 +3320,12 @@
           this.rightActionsContainer.className = 'right-actions-container';
           this.leftActionsContainer = document.createElement('div');
           this.leftActionsContainer.className = 'left-actions-container';
+          this.preActionsContainer = document.createElement('div');
+          this.preActionsContainer.className = 'pre-actions-container';
           this.tabContainer = document.createElement('div');
           this.tabContainer.className = 'tabs-container';
           this.voidContainer = new VoidContainer(this.accessor, this.group);
+          this._element.appendChild(this.preActionsContainer);
           this._element.appendChild(this.tabContainer);
           this._element.appendChild(this.leftActionsContainer);
           this._element.appendChild(this.voidContainer.element);
@@ -3580,6 +3615,16 @@
               });
               this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
           }
+          if (this.accessor.options.createPrefixHeaderActionsElement) {
+              this._prefixHeaderActions =
+                  this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+              this.addDisposables(this._prefixHeaderActions);
+              this._prefixHeaderActions.init({
+                  containerApi: new DockviewApi(this.accessor),
+                  api: this.groupPanel.api,
+              });
+              this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+          }
       }
       indexOf(panel) {
           return this.tabsContainer.indexOf(panel.id);
@@ -3922,6 +3967,14 @@
                    */
                   return;
               }
+              if (!document.body.contains(this._element)) {
+                  /**
+                   * since the event is dispatched through requestAnimationFrame there is a small chance
+                   * the component is no longer attached to the DOM, if that is the case the dimensions
+                   * are mostly likely all zero and meaningless. we should skip this case.
+                   */
+                  return;
+              }
               const { width, height } = entry.contentRect;
               this.layout(width, height);
           }));
@@ -5950,61 +6003,114 @@
       fromJSON(data) {
           var _a;
           this.clear();
+          if (typeof data !== 'object' || data === null) {
+              throw new Error('serialized layout must be a non-null object');
+          }
           const { grid, panels, activeGroup } = data;
           if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
               throw new Error('root must be of type branch');
           }
-          // take note of the existing dimensions
-          const width = this.width;
-          const height = this.height;
-          const createGroupFromSerializedState = (data) => {
-              const { id, locked, hideHeader, views, activeView } = data;
-              const group = this.createGroup({
-                  id,
-                  locked: !!locked,
-                  hideHeader: !!hideHeader,
-              });
-              this._onDidAddGroup.fire(group);
-              for (const child of views) {
-                  const panel = this._deserializer.fromJSON(panels[child], group);
-                  const isActive = typeof activeView === 'string' && activeView === panel.id;
-                  group.model.openPanel(panel, {
-                      skipSetPanelActive: !isActive,
-                      skipSetGroupActive: true,
+          try {
+              // take note of the existing dimensions
+              const width = this.width;
+              const height = this.height;
+              const createGroupFromSerializedState = (data) => {
+                  const { id, locked, hideHeader, views, activeView } = data;
+                  if (typeof id !== 'string') {
+                      throw new Error('group id must be of type string');
+                  }
+                  const group = this.createGroup({
+                      id,
+                      locked: !!locked,
+                      hideHeader: !!hideHeader,
                   });
+                  const createdPanels = [];
+                  for (const child of views) {
+                      /**
+                       * Run the deserializer step seperately since this may fail to due corrupted external state.
+                       * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                       * due to a corruption of input data.
+                       */
+                      const panel = this._deserializer.fromJSON(panels[child], group);
+                      createdPanels.push(panel);
+                  }
+                  this._onDidAddGroup.fire(group);
+                  for (let i = 0; i < views.length; i++) {
+                      const panel = createdPanels[i];
+                      const isActive = typeof activeView === 'string' &&
+                          activeView === panel.id;
+                      group.model.openPanel(panel, {
+                          skipSetPanelActive: !isActive,
+                          skipSetGroupActive: true,
+                      });
+                  }
+                  if (!group.activePanel && group.panels.length > 0) {
+                      group.model.openPanel(group.panels[group.panels.length - 1], {
+                          skipSetGroupActive: true,
+                      });
+                  }
+                  return group;
+              };
+              this.gridview.deserialize(grid, {
+                  fromJSON: (node) => {
+                      return createGroupFromSerializedState(node.data);
+                  },
+              });
+              this.layout(width, height, true);
+              const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+              for (const serializedFloatingGroup of serializedFloatingGroups) {
+                  const { data, position } = serializedFloatingGroup;
+                  const group = createGroupFromSerializedState(data);
+                  this.addFloatingGroup(group, {
+                      x: position.left,
+                      y: position.top,
+                      height: position.height,
+                      width: position.width,
+                  }, { skipRemoveGroup: true, inDragMode: false });
+              }
+              for (const floatingGroup of this.floatingGroups) {
+                  floatingGroup.overlay.setBounds();
+              }
+              if (typeof activeGroup === 'string') {
+                  const panel = this.getPanel(activeGroup);
+                  if (panel) {
+                      this.doSetGroupActive(panel);
+                  }
               }
-              if (!group.activePanel && group.panels.length > 0) {
-                  group.model.openPanel(group.panels[group.panels.length - 1], {
-                      skipSetGroupActive: true,
-                  });
+          }
+          catch (err) {
+              /**
+               * Takes all the successfully created groups and remove all of their panels.
+               */
+              for (const group of this.groups) {
+                  for (const panel of group.panels) {
+                      this.removePanel(panel, {
+                          removeEmptyGroup: false,
+                          skipDispose: false,
+                      });
+                  }
               }
-              return group;
-          };
-          this.gridview.deserialize(grid, {
-              fromJSON: (node) => {
-                  return createGroupFromSerializedState(node.data);
-              },
-          });
-          this.layout(width, height, true);
-          const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
-          for (const serializedFloatingGroup of serializedFloatingGroups) {
-              const { data, position } = serializedFloatingGroup;
-              const group = createGroupFromSerializedState(data);
-              this.addFloatingGroup(group, {
-                  x: position.left,
-                  y: position.top,
-                  height: position.height,
-                  width: position.width,
-              }, { skipRemoveGroup: true, inDragMode: false });
-          }
-          for (const floatingGroup of this.floatingGroups) {
-              floatingGroup.overlay.setBounds();
-          }
-          if (typeof activeGroup === 'string') {
-              const panel = this.getPanel(activeGroup);
-              if (panel) {
-                  this.doSetGroupActive(panel);
+              /**
+               * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+               * the underlying HTMLElement existing in the Gridview.
+               */
+              for (const group of this.groups) {
+                  group.dispose();
+                  this._groups.delete(group.id);
+                  this._onDidRemoveGroup.fire(group);
               }
+              // iterate over a reassigned array since original array will be modified
+              for (const floatingGroup of [...this.floatingGroups]) {
+                  floatingGroup.dispose();
+              }
+              // fires clean-up events and clears the underlying HTML gridview.
+              this.clear();
+              /**
+               * even though we have cleaned-up we still want to inform the caller of their error
+               * and we'll do this through re-throwing the original error since afterall you would
+               * expect trying to load a corrupted layout to result in an error and not silently fail...
+               */
+              throw err;
           }
           this._onDidLayoutFromJSON.fire();
       }
@@ -6218,6 +6324,7 @@
               if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                   floatingGroup.group.dispose();
                   this._groups.delete(group.id);
+                  // TODO: fire group removed event?
               }
               floatingGroup.dispose();
               return floatingGroup.group;
@@ -6458,43 +6565,64 @@
       fromJSON(serializedGridview) {
           this.clear();
           const { grid, activePanel } = serializedGridview;
-          const queue = [];
-          // take note of the existing dimensions
-          const width = this.width;
-          const height = this.height;
-          this.gridview.deserialize(grid, {
-              fromJSON: (node) => {
-                  const { data } = node;
-                  const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                      ? {
-                          createComponent: this.options.frameworkComponentFactory
-                              .createComponent,
-                      }
-                      : undefined);
-                  queue.push(() => view.init({
-                      params: data.params,
-                      minimumWidth: data.minimumWidth,
-                      maximumWidth: data.maximumWidth,
-                      minimumHeight: data.minimumHeight,
-                      maximumHeight: data.maximumHeight,
-                      priority: data.priority,
-                      snap: !!data.snap,
-                      accessor: this,
-                      isVisible: node.visible,
-                  }));
-                  this._onDidAddGroup.fire(view);
-                  this.registerPanel(view);
-                  return view;
-              },
-          });
-          this.layout(width, height, true);
-          queue.forEach((f) => f());
-          if (typeof activePanel === 'string') {
-              const panel = this.getPanel(activePanel);
-              if (panel) {
-                  this.doSetGroupActive(panel);
+          try {
+              const queue = [];
+              // take note of the existing dimensions
+              const width = this.width;
+              const height = this.height;
+              this.gridview.deserialize(grid, {
+                  fromJSON: (node) => {
+                      const { data } = node;
+                      const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                          ? {
+                              createComponent: this.options.frameworkComponentFactory
+                                  .createComponent,
+                          }
+                          : undefined);
+                      queue.push(() => view.init({
+                          params: data.params,
+                          minimumWidth: data.minimumWidth,
+                          maximumWidth: data.maximumWidth,
+                          minimumHeight: data.minimumHeight,
+                          maximumHeight: data.maximumHeight,
+                          priority: data.priority,
+                          snap: !!data.snap,
+                          accessor: this,
+                          isVisible: node.visible,
+                      }));
+                      this._onDidAddGroup.fire(view);
+                      this.registerPanel(view);
+                      return view;
+                  },
+              });
+              this.layout(width, height, true);
+              queue.forEach((f) => f());
+              if (typeof activePanel === 'string') {
+                  const panel = this.getPanel(activePanel);
+                  if (panel) {
+                      this.doSetGroupActive(panel);
+                  }
               }
           }
+          catch (err) {
+              /**
+               * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+               * the underlying HTMLElement existing in the Gridview.
+               */
+              for (const group of this.groups) {
+                  group.dispose();
+                  this._groups.delete(group.id);
+                  this._onDidRemoveGroup.fire(group);
+              }
+              // fires clean-up events and clears the underlying HTML gridview.
+              this.clear();
+              /**
+               * even though we have cleaned-up we still want to inform the caller of their error
+               * and we'll do this through re-throwing the original error since afterall you would
+               * expect trying to load a corrupted layout to result in an error and not silently fail...
+               */
+              throw err;
+          }
           this._onDidLayoutfromJSON.fire();
       }
       clear() {
@@ -7678,6 +7806,7 @@
               showDndOverlay: props.showDndOverlay,
               createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
               createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+              createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
               singleTabMode: props.singleTabMode,
               disableFloatingGroups: props.disableFloatingGroups,
               floatingGroupBounds: props.floatingGroupBounds,
@@ -7787,6 +7916,14 @@
               createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
           });
       }, [props.leftHeaderActionsComponent]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+          });
+      }, [props.prefixHeaderActionsComponent]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   DockviewReact.displayName = 'DockviewComponent';