dockview-core 8.4.0 → 8.4.1

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.4.0
+ * @version 8.4.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -331,21 +331,29 @@ var OverflowObserver = class extends CompositeDisposable {
 	}
 };
 function watchElementResize(element, cb) {
+	const pendingFrames = /* @__PURE__ */ new Set();
 	const observer = new ResizeObserver((entires) => {
 		/**
 		* Fast browser window resize produces Error: ResizeObserver loop limit exceeded.
 		* The error isn't visible in browser console, doesn't affect functionality, but degrades performance.
 		* See https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/58701523#58701523
 		*/
-		requestAnimationFrame(() => {
+		let ran = false;
+		let frame;
+		frame = requestAnimationFrame(() => {
+			ran = true;
+			if (frame !== void 0) pendingFrames.delete(frame);
 			const firstEntry = entires[0];
 			cb(firstEntry);
 		});
+		if (!ran) pendingFrames.add(frame);
 	});
 	observer.observe(element);
 	return { dispose: () => {
 		observer.unobserve(element);
 		observer.disconnect();
+		for (const frame of pendingFrames) cancelAnimationFrame(frame);
+		pendingFrames.clear();
 	} };
 }
 const removeClasses = (element, ...classes) => {
@@ -10214,16 +10222,21 @@ var TabsContainer = class extends CompositeDisposable {
 				y: event.clientY,
 				zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex) ? `calc(${relativeParent.style.zIndex} * 2)` : void 0
 			};
-			const context = this.createOverflowRenderContext(root, anchor);
+			const { context, rowRenderers } = this.createOverflowRenderContext(root, anchor);
 			const advancedOverflow = this.accessor.advancedOverflowService;
-			if (advancedOverflow) advancedOverflow.renderOverflow({
-				group: this.group,
-				overflowTabs: [...this._overflowTabs],
-				overflowTabGroups: [...this._overflowTabGroups],
-				pinnedOverflowTabs: [...this._overflowPinnedTabs],
-				context
-			});
-			else context.open(this.renderFreeOverflowList(context));
+			try {
+				if (advancedOverflow) advancedOverflow.renderOverflow({
+					group: this.group,
+					overflowTabs: [...this._overflowTabs],
+					overflowTabGroups: [...this._overflowTabGroups],
+					pinnedOverflowTabs: [...this._overflowPinnedTabs],
+					context
+				});
+				else context.open(this.renderFreeOverflowList(context));
+			} catch (err) {
+				rowRenderers.dispose();
+				throw err;
+			}
 		}));
 	}
 	/**
@@ -10244,6 +10257,7 @@ var TabsContainer = class extends CompositeDisposable {
 			if (overflowGroupSet.has(tg.id)) for (const pid of tg.panelIds) panelToGroup.set(pid, tg);
 		}
 		const popup = () => this.accessor.getPopupServiceForGroup(this.group);
+		const rowRenderers = new CompositeDisposable();
 		const buildGroupHeader = (tg) => {
 			const groupHeader = document.createElement("div");
 			groupHeader.className = "dv-tabs-overflow-group-header";
@@ -10273,69 +10287,87 @@ var TabsContainer = class extends CompositeDisposable {
 			return groupHeader;
 		};
 		return {
-			overflowGroupIdForPanel: (panelId) => {
-				var _panelToGroup$get;
-				return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
-			},
-			buildGroupHeader: (tabGroupId) => {
-				const tg = groupById.get(tabGroupId);
-				if (!tg || !overflowGroupSet.has(tg.id)) return;
-				return buildGroupHeader(tg);
-			},
-			buildPinnedHeader: () => {
-				const header = document.createElement("div");
-				header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
-				const glyph = createPinButton();
-				glyph.classList.add("dv-tabs-overflow-pinned-icon");
-				header.appendChild(glyph);
-				const labelSpan = document.createElement("span");
-				labelSpan.className = "dv-tabs-overflow-group-label";
-				labelSpan.textContent = "Pinned";
-				header.appendChild(labelSpan);
-				return header;
-			},
-			buildRow: (panelId) => {
-				const panel = this.group.panels.find((p) => p.id === panelId);
-				if (!panel) return;
-				const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
-				const tg = panelToGroup.get(panelId);
-				const child = panel.view.createTabRenderer("headerOverflow").element;
-				const wrapper = document.createElement("div");
-				toggleClass(wrapper, "dv-tab", true);
-				toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
-				toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
-				if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
-				const doActivate = () => {
-					if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
-					tab === null || tab === void 0 || tab.element.scrollIntoView({
-						block: "nearest",
-						inline: "nearest"
+			context: {
+				overflowGroupIdForPanel: (panelId) => {
+					var _panelToGroup$get;
+					return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
+				},
+				buildGroupHeader: (tabGroupId) => {
+					const tg = groupById.get(tabGroupId);
+					if (!tg || !overflowGroupSet.has(tg.id)) return;
+					return buildGroupHeader(tg);
+				},
+				buildPinnedHeader: () => {
+					const header = document.createElement("div");
+					header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
+					const glyph = createPinButton();
+					glyph.classList.add("dv-tabs-overflow-pinned-icon");
+					header.appendChild(glyph);
+					const labelSpan = document.createElement("span");
+					labelSpan.className = "dv-tabs-overflow-group-label";
+					labelSpan.textContent = "Pinned";
+					header.appendChild(labelSpan);
+					return header;
+				},
+				buildRow: (panelId) => {
+					const panel = this.group.panels.find((p) => p.id === panelId);
+					if (!panel) return;
+					const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
+					const tg = panelToGroup.get(panelId);
+					const tabComponent = panel.view.createTabRenderer("headerOverflow");
+					let rowDisposed = false;
+					const disposeRow = Disposable.from(() => {
+						if (!rowDisposed) {
+							var _tabComponent$dispose;
+							rowDisposed = true;
+							(_tabComponent$dispose = tabComponent.dispose) === null || _tabComponent$dispose === void 0 || _tabComponent$dispose.call(tabComponent);
+						}
 					});
-					this.accessor.withOrigin("user", () => panel.api.setActive());
-				};
-				wrapper.addEventListener("click", (event) => {
-					popup().close();
-					if (event.defaultPrevented) return;
-					doActivate();
-				});
-				wrapper.appendChild(child);
-				return {
-					element: wrapper,
-					panel,
-					activate: () => {
+					if (rowRenderers.isDisposed) disposeRow.dispose();
+					else rowRenderers.addDisposables(disposeRow);
+					const child = tabComponent.element;
+					const wrapper = document.createElement("div");
+					toggleClass(wrapper, "dv-tab", true);
+					toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
+					toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
+					if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
+					const doActivate = () => {
+						if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
+						tab === null || tab === void 0 || tab.element.scrollIntoView({
+							block: "nearest",
+							inline: "nearest"
+						});
+						this.accessor.withOrigin("user", () => panel.api.setActive());
+					};
+					wrapper.addEventListener("click", (event) => {
 						popup().close();
+						if (event.defaultPrevented) return;
 						doActivate();
-					}
-				};
-			},
-			open: (body) => {
-				popup().openPopover(body, anchor);
+					});
+					wrapper.appendChild(child);
+					return {
+						element: wrapper,
+						panel,
+						activate: () => {
+							popup().close();
+							doActivate();
+						},
+						dispose: () => {
+							rowRenderers.removeDisposable(disposeRow);
+							disposeRow.dispose();
+						}
+					};
+				},
+				open: (body) => {
+					popup().openPopover(body, anchor, { onClose: () => rowRenderers.dispose() });
+				},
+				close: () => popup().close(),
+				focusTrigger: () => {
+					root.tabIndex = -1;
+					root.focus();
+				}
 			},
-			close: () => popup().close(),
-			focusTrigger: () => {
-				root.tabIndex = -1;
-				root.focus();
-			}
+			rowRenderers
 		};
 	}
 	/**
@@ -11252,6 +11284,7 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
 		this.tabsContainer.setRightActionsElement(element);
 	}
 	setActive(isGroupActive, force = false) {
+		if (this.isDisposed) return;
 		if (!force && this.isActive === isGroupActive) return;
 		this._isGroupActive = isGroupActive;
 		toggleClass(this.container, "dv-active-group", isGroupActive);
@@ -14296,13 +14329,14 @@ var ContextMenuController = class {
 	* menu passes the `tabGroup`. No-op when no renderer could be created (no
 	* factory configured, or the factory declined the component).
 	*/
-	appendComponentItem(menuEl, item, identity, group, close) {
+	appendComponentItem(menuEl, item, identity, group, close, renderers) {
 		var _this$accessor$option4, _this$accessor$option5;
 		const renderer = (_this$accessor$option4 = (_this$accessor$option5 = this.accessor.options).createContextMenuItemComponent) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.call(_this$accessor$option5, {
 			id: nextContextMenuItemId(),
 			component: item.component
 		});
 		if (!renderer) return;
+		renderers.addDisposables(renderer);
 		renderer.init(_objectSpread2(_objectSpread2({}, identity), {}, {
 			group,
 			api: this.accessor.api,
@@ -14353,9 +14387,9 @@ var ContextMenuController = class {
 	* default row; an item carrying none of the three renders nothing. Shared
 	* by both menus, which differ only in `identity`.
 	*/
-	appendConfigItem(menuEl, item, identity, group, close) {
+	appendConfigItem(menuEl, item, identity, group, close, renderers) {
 		if (item.element) menuEl.appendChild(item.element);
-		else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close);
+		else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close, renderers);
 		else if (item.label) menuEl.appendChild(buildItem(item.label, close, () => {
 			var _item$action;
 			return (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item);
@@ -14367,22 +14401,28 @@ var ContextMenuController = class {
 		event.preventDefault();
 		const popupService = this.accessor.getPopupServiceForGroup(group);
 		const close = () => popupService.close();
+		const renderers = new CompositeDisposable();
 		const menuEl = document.createElement("div");
 		menuEl.className = "dv-context-menu";
 		menuEl.setAttribute("role", "menu");
-		for (const item of items) {
-			if (isItemConfig(item)) {
-				this.appendConfigItem(menuEl, item, { panel }, group, close);
-				continue;
+		try {
+			for (const item of items) {
+				if (isItemConfig(item)) {
+					this.appendConfigItem(menuEl, item, { panel }, group, close, renderers);
+					continue;
+				}
+				const el = this.buildBuiltInTabItem(item, panel, group, close);
+				if (el) menuEl.appendChild(el);
 			}
-			const el = this.buildBuiltInTabItem(item, panel, group, close);
-			if (el) menuEl.appendChild(el);
+		} catch (err) {
+			renderers.dispose();
+			throw err;
 		}
 		popupService.openPopover(menuEl, {
 			x: event.clientX,
 			y: event.clientY,
 			zIndex: popoverZIndexFor(event.target, group)
-		});
+		}, { onClose: () => renderers.dispose() });
 	}
 	showForChip(tabGroup, group, event) {
 		if (!this.accessor.options.getTabGroupChipContextMenuItems) return;
@@ -14396,22 +14436,28 @@ var ContextMenuController = class {
 		event.preventDefault();
 		const popupService = this.accessor.getPopupServiceForGroup(group);
 		const close = () => popupService.close();
+		const renderers = new CompositeDisposable();
 		const menuEl = document.createElement("div");
 		menuEl.className = "dv-context-menu";
 		menuEl.setAttribute("role", "menu");
-		for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
-		else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
-		else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
-		else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
-		else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
-			group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
-		}));
-		else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close);
+		try {
+			for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
+			else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
+			else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+			else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
+			else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
+				group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
+			}));
+			else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close, renderers);
+		} catch (err) {
+			renderers.dispose();
+			throw err;
+		}
 		popupService.openPopover(menuEl, {
 			x: event.clientX,
 			y: event.clientY,
 			zIndex: popoverZIndexFor(event.target, group)
-		});
+		}, { onClose: () => renderers.dispose() });
 	}
 };
 const ContextMenuModule = defineModule({
@@ -14701,6 +14747,7 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 		const observerDisposable = new MutableDisposable();
 		const correctLayerPosition = () => {
 			if (panel.api.location.type === "floating") queueMicrotask(() => {
+				if (disposable.isDisposed) return;
 				const floatingGroup = this.accessor.getFloatingWindowForGroup(panel.api.group);
 				if (!floatingGroup) return;
 				const element = floatingGroup.overlay.element;
@@ -14935,7 +14982,7 @@ var PopupService = class extends CompositeDisposable {
 		newRoot.prepend(this._element);
 		this._root = newRoot;
 	}
-	openPopover(element, position) {
+	openPopover(element, position, options) {
 		var _position$zIndex;
 		this.close();
 		const wrapper = this._window.document.createElement("div");
@@ -14950,14 +14997,14 @@ var PopupService = class extends CompositeDisposable {
 		this._element.appendChild(wrapper);
 		this._active = wrapper;
 		const POINTERDOWN_GRACE_MS = 200;
-		this._activeDisposable.value = createDismissableLayer({
+		this._activeDisposable.value = new CompositeDisposable(createDismissableLayer({
 			window: this._window,
 			onDismiss: () => this.close(),
 			elements: () => this._active ? [this._active] : [],
 			keys: ["Enter"],
 			pointerDownGraceMs: POINTERDOWN_GRACE_MS,
 			resize: true
-		});
+		}), (options === null || options === void 0 ? void 0 : options.onClose) ? Disposable.from(options.onClose) : Disposable.NONE);
 		this._window.requestAnimationFrame(() => {
 			shiftAbsoluteElementIntoView(wrapper, this._root);
 		});
@@ -16269,7 +16316,9 @@ var DockviewComponent = class extends BaseGrid {
 		this._onWillDrop = new Emitter();
 		this.onWillDrop = this._onWillDrop.event;
 		this._mutationDepth = 0;
+		this._syncMutationDepth = 0;
 		this._pendingLocationChanges = /* @__PURE__ */ new Map();
+		this._openingPopoutWindows = /* @__PURE__ */ new Set();
 		this._origin = "user";
 		this._originDepth = 0;
 		this._onWillMutateLayout = new Emitter();
@@ -16353,6 +16402,10 @@ var DockviewComponent = class extends BaseGrid {
 			});
 		}));
 		this.popupService = new PopupService(this.element);
+		this.addDisposables(this.popupService, Disposable.from(() => {
+			for (const opening of this._openingPopoutWindows) opening.dispose();
+			this._openingPopoutWindows.clear();
+		}));
 		this._api = new DockviewApi(this);
 		this.disableResizing = true;
 		this.element.remove();
@@ -16501,9 +16554,15 @@ var DockviewComponent = class extends BaseGrid {
 		const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
 			popoutWindowDisposable.dispose();
 		}));
+		this._openingPopoutWindows.add(popoutWindowDisposable);
 		const openError = getPopoutUrlError(popoutUrl);
 		return (openError ? Promise.resolve(null) : _window.open()).then((popoutContainer) => {
 			var _options$referenceGro, _options$overridePopo4;
+			this._openingPopoutWindows.delete(popoutWindowDisposable);
+			if (this.isDisposed) {
+				popoutWindowDisposable.dispose();
+				return false;
+			}
 			if (_window.isDisposed) {
 				const failure = _window.failure;
 				if (failure && !this.isDisposed) {
@@ -16697,6 +16756,7 @@ var DockviewComponent = class extends BaseGrid {
 			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 			return true;
 		}).catch((err) => {
+			this._openingPopoutWindows.delete(popoutWindowDisposable);
 			console.error("dockview: failed to create popout.", err);
 			return false;
 		});
@@ -17236,6 +17296,7 @@ var DockviewComponent = class extends BaseGrid {
 			group.dispose();
 			this._groups.delete(group.id);
 			this._onDidRemoveGroup.fire(group);
+			this.activateFallbackGroupIfRemoved(group);
 		});
 	}
 	setEdgeGroupCollapsed(group, collapsed) {
@@ -17432,6 +17493,7 @@ var DockviewComponent = class extends BaseGrid {
 				const record = this._groups.get(temporaryGroup.api.id);
 				this._groups.delete(temporaryGroup.api.id);
 				temporaryGroupDisposables.push(Disposable.from(() => {
+					var _this$headerActionsSe2;
 					/**
 					* Reclaim the group's own resources, never its panels.
 					* Staging is driven by the ids in `data.panels` while
@@ -17449,6 +17511,7 @@ var DockviewComponent = class extends BaseGrid {
 						for (const panel of temporaryGroup.panels.slice()) temporaryGroup.model.removePanel(panel);
 					});
 					record === null || record === void 0 || record.disposable.dispose();
+					(_this$headerActionsSe2 = this.headerActionsService) === null || _this$headerActionsSe2 === void 0 || _this$headerActionsSe2.disposeGroup(temporaryGroup);
 					temporaryGroup.dispose();
 				}));
 				return temporaryGroup;
@@ -18113,9 +18176,12 @@ var DockviewComponent = class extends BaseGrid {
 	*/
 	mutation(kind, func) {
 		const close = this.openMutation(kind);
+		this._syncMutationDepth++;
 		try {
 			return func();
 		} finally {
+			this._syncMutationDepth--;
+			if (this._syncMutationDepth === 0) this.releaseDisposedActiveGroup();
 			close();
 		}
 	}
@@ -18162,6 +18228,7 @@ var DockviewComponent = class extends BaseGrid {
 		return () => {
 			this._mutationDepth--;
 			if (this._mutationDepth === 0) {
+				this.releaseDisposedActiveGroup();
 				this.flushLocationChanges();
 				this._onDidMutateLayout.fire({
 					kind,
@@ -18170,6 +18237,11 @@ var DockviewComponent = class extends BaseGrid {
 			}
 		};
 	}
+	/** Covers removals with `skipActive` that disposed the active group. */
+	releaseDisposedActiveGroup() {
+		var _this$_activeGroup;
+		if (!this.isDisposed && ((_this$_activeGroup = this._activeGroup) === null || _this$_activeGroup === void 0 ? void 0 : _this$_activeGroup.model.isDisposed)) this.activateFallbackGroupIfRemoved(this._activeGroup);
+	}
 	/**
 	* Coalesce a panel's `onDidLocationChange` to the end of the enclosing
 	* transaction, or fire it immediately when no transaction is in flight.
@@ -18307,7 +18379,7 @@ var DockviewComponent = class extends BaseGrid {
 				skipSetActiveGroup: true
 			}));
 			if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
-			if (!options.keepEmptyGroups && sourceGroup.model.size === 0) this.doRemoveGroup(sourceGroup, { skipActive: true });
+			if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== destinationGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 			const isDestinationGroupEmpty = destinationGroup.model.size === 0;
 			this.movingLock(() => {
 				var _options$skipSetActiv;
@@ -18472,6 +18544,7 @@ var DockviewComponent = class extends BaseGrid {
 		const from = options.from.group;
 		const to = options.to.group;
 		const target = options.to.position;
+		if (target === "center" && from === to) return;
 		let source = from;
 		let mergedPanels;
 		if (target === "center") {
@@ -19503,6 +19576,7 @@ var PaneviewComponent = class extends Resizable {
 		const queue = [];
 		const width = this.width;
 		const height = this.height;
+		this.paneview.dispose();
 		this.paneview = new Paneview(this.element, {
 			orientation: "VERTICAL",
 			descriptor: {
@@ -19566,7 +19640,11 @@ var PaneviewComponent = class extends Resizable {
 	clear() {
 		for (const [_, value] of this._viewDisposables.entries()) value.dispose();
 		this._viewDisposables.clear();
+		const width = this.width;
+		const height = this.height;
 		this.paneview.dispose();
+		this.paneview = new Paneview(this.element, { orientation: "VERTICAL" });
+		this.layout(width, height);
 	}
 	doAddPanel(panel) {
 		const disposable = new CompositeDisposable(panel.onDidDrop((event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "8.4.0",
+  "version": "8.4.1",
   "description": "Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript",
   "keywords": [
     "splitview",