dockview 1.8.3 → 1.8.4

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.3
+ * @version 1.8.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -899,7 +899,17 @@ class Splitview {
         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 === LayoutPriority.Low),
+            index,
+        ];
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === 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');
@@ -1656,6 +1666,7 @@ class BranchNode extends CompositeDisposable {
                 orientation: this.orientation,
                 descriptor,
                 proportionalLayout,
+                styles,
             });
         }
         this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2167,6 +2178,14 @@ class Gridview {
                 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
@@ -3225,6 +3244,19 @@ class TabsContainer extends CompositeDisposable {
             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;
     }
@@ -3265,9 +3297,12 @@ class TabsContainer extends CompositeDisposable {
         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);
@@ -3557,6 +3592,16 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             });
             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);
@@ -3899,6 +3944,14 @@ class Resizable extends CompositeDisposable {
                  */
                 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);
         }));
@@ -5927,61 +5980,114 @@ class DockviewComponent extends BaseGrid {
     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();
     }
@@ -6195,6 +6301,7 @@ class DockviewComponent extends BaseGrid {
             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;
@@ -6435,43 +6542,64 @@ class GridviewComponent extends BaseGrid {
     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() {
@@ -7655,6 +7783,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
             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,
@@ -7764,6 +7893,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
     }, [props.leftHeaderActionsComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+        });
+    }, [props.prefixHeaderActionsComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';