dockview 1.8.3 → 1.8.4

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.3
+ * @version 1.8.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -888,7 +888,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
@@ -1645,6 +1655,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     orientation: this.orientation,
                     descriptor,
                     proportionalLayout,
+                    styles,
                 });
             }
             this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2156,6 +2167,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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
@@ -3214,6 +3233,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
         }
@@ -3254,9 +3286,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -3546,6 +3581,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 });
                 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);
@@ -3888,6 +3933,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                      */
                     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);
             }));
@@ -5916,61 +5969,114 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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();
         }
@@ -6184,6 +6290,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -6424,43 +6531,64 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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() {
@@ -7644,6 +7772,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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,
@@ -7753,6 +7882,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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';