dockview-react 8.6.0 → 8.6.1

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.6.0
+ * @version 8.6.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -51,7 +51,7 @@ react_dom = __toESM(react_dom);
 //#region ../dockview-core/dist/package/main.esm.mjs
 /**
 	* dockview-core
-	* @version 8.6.0
+	* @version 8.6.1
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
@@ -2259,12 +2259,20 @@ react_dom = __toESM(react_dom);
 		if (candiateNode instanceof BranchNode) return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
 		throw new Error("invalid node");
 	}
+	/**
+	* The sizing to re-add a branch's child with, so a hidden child stays hidden
+	* (with its cached size) instead of coming back visible at size 0.
+	*/
+	function childSizing(node, index, size, scale = 1) {
+		const cachedVisibleSize = node.getChildCachedVisibleSize(index);
+		return cachedVisibleSize === void 0 ? size : Sizing.Invisible(Math.round(cachedVisibleSize * scale));
+	}
 	function cloneNode(node, size, orthogonalSize) {
 		if (node instanceof BranchNode) {
 			const result = new BranchNode(node.orientation, node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
 			for (let i = node.children.length - 1; i >= 0; i--) {
 				const child = node.children[i];
-				result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+				result.addChild(cloneNode(child, child.size, child.orthogonalSize), childSizing(node, i, child.size), 0, true);
 			}
 			return result;
 		} else return new LeafNode(node.view, node.orientation, orthogonalSize);
@@ -2273,13 +2281,14 @@ react_dom = __toESM(react_dom);
 		if (node instanceof BranchNode) {
 			const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
 			let totalSize = 0;
+			const cachedSizeScale = node.size === 0 ? 1 : size / node.size;
 			for (let i = node.children.length - 1; i >= 0; i--) {
 				const child = node.children[i];
 				const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
 				let newSize = node.size === 0 ? 0 : Math.round(size * childSize / node.size);
 				totalSize += newSize;
 				if (i === 0) newSize += size - totalSize;
-				result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+				result.addChild(flipNode(child, orthogonalSize, newSize), childSizing(node, i, newSize, cachedSizeScale), 0, true);
 			}
 			return result;
 		} else return new LeafNode(node.view, orthogonal(node.orientation), orthogonalSize);
@@ -2765,7 +2774,8 @@ react_dom = __toESM(react_dom);
 				sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
 				for (let i = 0; i < sibling.children.length; i++) {
 					const child = sibling.children[i];
-					grandParent.addChild(child, child.size, parentIndex + i);
+					const childSize = childSizing(sibling, i, child.size);
+					grandParent.addChild(child, !isSiblingVisible && typeof childSize === "number" ? Sizing.Invisible(childSize) : childSize, parentIndex + i);
 				}
 				/**
 				* clean down the branch node since we need to dipose of it and
@@ -5937,6 +5947,9 @@ react_dom = __toESM(react_dom);
 		get element() {
 			return this._element;
 		}
+		get dimensions() {
+			return this._dimensions;
+		}
 		constructor(accessor, group) {
 			var _this$accessor$resolv, _this$accessor, _this$accessor$resolv2, _this$accessor2, _this$accessor$onDidO, _this$accessor$onDidO2, _this$accessor3;
 			super();
@@ -5947,12 +5960,14 @@ react_dom = __toESM(react_dom);
 			this.onDidFocus = this._onDidFocus.event;
 			this._onDidBlur = new Emitter();
 			this.onDidBlur = this._onDidBlur.event;
+			this._onDidDimensionsChange = new Emitter();
+			this.onDidDimensionsChange = this._onDidDimensionsChange.event;
 			this._element = document.createElement("div");
 			this._element.className = "dv-content-container";
 			this._element.tabIndex = -1;
 			this._element.id = nextContentId();
 			this._element.setAttribute("role", "tabpanel");
-			this.addDisposables(this._onDidFocus, this._onDidBlur);
+			this.addDisposables(this._onDidFocus, this._onDidBlur, this._onDidDimensionsChange);
 			const getOverrideTarget = () => {
 				var _group$dropTargetCont;
 				return (_group$dropTargetCont = group.dropTargetContainer) === null || _group$dropTargetCont === void 0 ? void 0 : _group$dropTargetCont.model;
@@ -6061,7 +6076,15 @@ react_dom = __toESM(react_dom);
 			if (this.panel === panel) return;
 			this.renderPanel(panel);
 		}
-		layout(_width, _height) {}
+		layout(width, height) {
+			var _this$_dimensions;
+			if (((_this$_dimensions = this._dimensions) === null || _this$_dimensions === void 0 ? void 0 : _this$_dimensions.width) === width && this._dimensions.height === height) return;
+			this._dimensions = {
+				width,
+				height
+			};
+			this._onDidDimensionsChange.fire(this._dimensions);
+		}
 		closePanel() {
 			if (this.panel) {
 				if (this.panel.api.renderer === "onlyWhenVisible") {
@@ -10526,7 +10549,6 @@ react_dom = __toESM(react_dom);
 			return (_this$_headerPosition = this._headerPosition) !== null && _this$_headerPosition !== void 0 ? _this$_headerPosition : "top";
 		}
 		set headerPosition(value) {
-			var _this$_activePanel;
 			this._headerPosition = value;
 			this.invalidateHeaderSize();
 			removeClasses(this.container, "dv-groupview-header-top", "dv-groupview-header-bottom", "dv-groupview-header-left", "dv-groupview-header-right");
@@ -10536,10 +10558,7 @@ react_dom = __toESM(react_dom);
 			this._headerDirection = direction;
 			this.tabsContainer.direction = direction;
 			this.header.direction = direction;
-			if ((_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.layout) {
-				const { width, height } = this.contentDimensions();
-				this._activePanel.layout(width, height);
-			}
+			if (this.panels.length > 0) this.layoutContent();
 			this.updateHeaderActions();
 			if (previousDirection !== void 0 && previousDirection !== direction) {
 				var _this$groupPanel;
@@ -11042,10 +11061,7 @@ react_dom = __toESM(react_dom);
 			this.panels.forEach((panel) => {
 				this.rerender(panel);
 			});
-			if (this._activePanel) {
-				const { width, height } = this.contentDimensions();
-				this._activePanel.layout(width, height);
-			}
+			if (this.panels.length > 0) this.layoutContent();
 		}
 		get renderContainer() {
 			var _this$_overwriteRende;
@@ -11092,10 +11108,10 @@ react_dom = __toESM(react_dom);
 			return this.tabsContainer.indexOf(panel.id);
 		}
 		toJSON() {
-			var _this$_activePanel2;
+			var _this$_activePanel;
 			const result = {
 				views: this.tabsContainer.panels,
-				activeView: (_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 ? void 0 : _this$_activePanel2.id,
+				activeView: (_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.id,
 				id: this.id
 			};
 			if (this.locked !== false) result.locked = this.locked;
@@ -11133,8 +11149,8 @@ react_dom = __toESM(react_dom);
 		init(_params) {}
 		update(_params) {}
 		focus() {
-			var _this$_activePanel3;
-			(_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 || _this$_activePanel3.focus();
+			var _this$_activePanel2;
+			(_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 || _this$_activePanel2.focus();
 		}
 		openPanel(panel, options = {}) {
 			if (typeof options.index !== "number" || options.index > this.panels.length) options.index = this.panels.length;
@@ -11192,12 +11208,24 @@ react_dom = __toESM(react_dom);
 			this.updateContainer();
 		}
 		layout(width, height) {
-			var _this$_activePanel4;
 			this._width = width;
 			this._height = height;
-			const { width: contentWidth, height: contentHeight } = this.contentDimensions();
-			this.contentContainer.layout(contentWidth, contentHeight);
-			if ((_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.layout) this._activePanel.layout(contentWidth, contentHeight);
+			this.layoutContent();
+		}
+		/**
+		* Apply the current content box (group box minus header extent) to the
+		* content container and the active panel. Every path that can change that
+		* box goes through here so the container's recorded dimensions, which size
+		* overlay-rendered panels, never lag the active panel's. Callers other
+		* than `layout()` skip it for a group with no panels: there is nothing to
+		* size, and measuring the header of a group that is not in the document
+		* yet (the constructor sets `headerPosition`) would cache a zero extent.
+		*/
+		layoutContent() {
+			var _this$_activePanel3;
+			const { width, height } = this.contentDimensions();
+			this.contentContainer.layout(width, height);
+			if ((_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 ? void 0 : _this$_activePanel3.layout) this._activePanel.layout(width, height);
 		}
 		/**
 		* Re-run the group's layout with its current dimensions. Used to propagate a
@@ -11290,8 +11318,7 @@ react_dom = __toESM(react_dom);
 				this.tabsContainer.setActivePanel(panel);
 				this.contentContainer.setLabelledBy(this.tabsContainer.getTabId(panel.id));
 				this.contentContainer.openPanel(panel);
-				const { width, height } = this.contentDimensions();
-				panel.layout(width, height);
+				this.layoutContent();
 				this.updateMru(panel);
 				this.contentContainer.refreshFocusState();
 				this._onDidActivePanelChange.fire({
@@ -11303,8 +11330,8 @@ react_dom = __toESM(react_dom);
 		}
 		/** Label the group region with its active panel's title (the WAI-ARIA region name). */
 		updateAccessibleLabel() {
-			var _this$_activePanel5;
-			const title = (_this$_activePanel5 = this._activePanel) === null || _this$_activePanel5 === void 0 ? void 0 : _this$_activePanel5.title;
+			var _this$_activePanel4;
+			const title = (_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.title;
 			if (title) this.container.setAttribute("aria-label", title);
 			else this.container.removeAttribute("aria-label");
 		}
@@ -14350,6 +14377,15 @@ react_dom = __toESM(react_dom);
 		element.tabIndex = -1;
 		return element;
 	}
+	/**
+	* Write an inline pixel length only when it differs from what is already set,
+	* so a pass that re-derives geometry already in place leaves the element's
+	* style clean and the next measurement does not relayout the overlay subtree.
+	*/
+	function setPixels(style, property, value) {
+		const next = `${value}px`;
+		if (style[property] !== next) style[property] = next;
+	}
 	var OverlayRenderContainer = class extends CompositeDisposable {
 		constructor(element, accessor) {
 			super();
@@ -14468,6 +14504,32 @@ react_dom = __toESM(react_dom);
 			const generation = mapEntry.generation;
 			const focusContainer = mapEntry.element;
 			const contentElement = panel.view.content.element;
+			/**
+			* Size the overlay from the layout engine's numbers (the content box
+			* the group model also hands to `panel.layout()`): a style write with
+			* no forced layout, so the content has its real box before anything
+			* can measure it, and `.dv-render-overlay`'s 100%/100% default is never
+			* observed. Hidden panels are sized too: their content is laid out
+			* (hidden by `visibility`) and must not keep the root's box.
+			*
+			* Only while the overlay is not on screen at a measured position,
+			* i.e. hidden or not yet positioned. Once it is, the frame pass owns
+			* the whole box: size and position must change together, and group
+			* layouts driven from an animation frame would otherwise paint one
+			* frame at the new size and the old position. Likewise not while the
+			* peek force-shows the overlay, whose geometry belongs to
+			* `repositionPanelOverlay`: the collapsed group's own layouts describe
+			* the strip, not the peek. A zero box (a container awaiting layout) is
+			* skipped too: whether 0x0 is a real collapse is the frame pass's call.
+			*/
+			const applySize = (size) => {
+				if (!size || size.width <= 0 || size.height <= 0) return;
+				const entry = this.map[panel.api.id];
+				if (!entry || entry.forceVisible || entry.positioned && panel.api.isVisible) return;
+				setPixels(focusContainer.style, "width", size.width);
+				setPixels(focusContainer.style, "height", size.height);
+			};
+			applySize(referenceContainer.dimensions);
 			if (contentElement.parentElement !== focusContainer) focusContainer.appendChild(contentElement);
 			if (focusContainer.parentElement !== this.element) this.element.appendChild(focusContainer);
 			const resize = () => {
@@ -14507,10 +14569,10 @@ react_dom = __toESM(react_dom);
 					}
 					entry.retainPreviousGeometry = false;
 					entry.positioned = true;
-					focusContainer.style.left = `${left}px`;
-					focusContainer.style.top = `${top}px`;
-					focusContainer.style.width = `${width}px`;
-					focusContainer.style.height = `${height}px`;
+					setPixels(focusContainer.style, "left", left);
+					setPixels(focusContainer.style, "top", top);
+					setPixels(focusContainer.style, "width", width);
+					setPixels(focusContainer.style, "height", height);
 					if (panel.api.isVisible || forceVisible) {
 						focusContainer.style.visibility = "";
 						focusContainer.style.pointerEvents = "";
@@ -14626,6 +14688,9 @@ react_dom = __toESM(react_dom);
 					if (!panel.api.isVisible) return;
 					resize();
 				}),
+				referenceContainer.onDidDimensionsChange((size) => {
+					applySize(size);
+				}),
 				panel.api.onDidLocationChange(() => {
 					correctLayerPosition();
 				})