dockview-core 8.3.0 → 8.3.1

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.0
+ * @version 8.3.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -4454,8 +4454,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			for (const el of elements) {
 				let current = el;
 				while (current) {
+					var _target$isHitTestTran;
 					const target = this._targetByElement.get(current);
-					if (target) return target;
+					if (target && !((_target$isHitTestTran = target.isHitTestTransparent) === null || _target$isHitTestTran === void 0 ? void 0 : _target$isHitTestTran.call(target))) return target;
 					current = current.parentElement;
 				}
 			}
@@ -4551,10 +4552,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				element: this.element,
 				handleDragOver: (e) => this._onDragOver(e),
 				handleDragLeave: () => this._onDragLeave(),
-				handleDrop: (e) => this._onDropEvent(e)
+				handleDrop: (e) => this._onDropEvent(e),
+				isHitTestTransparent: options.isHitTestTransparent
 			};
 			this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
 		}
+		clearOverlay() {
+			this._clearOwnOverlay();
+		}
 		setTargetZones(zones) {
 			this._acceptedTargetZonesSet = new Set(zones);
 		}
@@ -5874,6 +5879,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 					var _this$accessor$option;
 					if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "smooth") return false;
+					if (data.tabGroupId && this.group.model.getTabGroupForPanel(this.panel.id)) return false;
 					return true;
 				}
 				return this.group.model.canDisplayOverlay(event, position, "tab");
@@ -7321,7 +7327,23 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		}
 		updateDirection() {
 			const isVertical = this._ctx.getDirection() === "vertical";
-			for (const [, entry] of this._chipRenderers) entry.dropTarget.setTargetZones(isVertical ? ["top"] : ["left"]);
+			for (const [, entry] of this._chipRenderers) {
+				const zones = isVertical ? ["top"] : ["left"];
+				entry.dropTarget.setTargetZones(zones);
+				entry.pointerDropTarget.setTargetZones(zones);
+			}
+		}
+		/**
+		* Drop any overlay the chips are showing. A group move is committed by a
+		* capturing listener on the tabs list that stops the event, so the chip
+		* target under the cursor never sees the drop that would clear its own.
+		*/
+		clearChipDropOverlays() {
+			for (const [, entry] of this._chipRenderers) {
+				var _entry$dropTarget, _entry$pointerDropTar;
+				(_entry$dropTarget = entry.dropTarget) === null || _entry$dropTarget === void 0 || _entry$dropTarget.clearOverlay();
+				(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
+			}
 		}
 		snapshotChipWidths() {
 			const widths = /* @__PURE__ */ new Map();
@@ -7570,9 +7592,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			};
 			if (chip instanceof TabGroupChip) disposables.push(chip.onContextMenu(onContextMenu));
 			else disposables.push(new LongPressDetector(chip.element, { onLongPress: onContextMenu }), addDisposableListener(chip.element, "contextmenu", onContextMenu));
-			const isVertical = this._ctx.getDirection() === "vertical";
-			const dropTarget = new Droptarget(chip.element, {
-				acceptedTargetZones: isVertical ? ["top"] : ["left"],
+			const dropTargetOptions = {
+				acceptedTargetZones: this._ctx.getDirection() === "vertical" ? ["top"] : ["left"],
 				overlayModel: { activationSize: {
 					value: 100,
 					type: "percentage"
@@ -7583,15 +7604,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 					const data = getPanelData();
 					if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 						var _this$_ctx$accessor$o3;
-						if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth") return false;
+						if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth" && !data.tabGroupId) return false;
 						return true;
 					}
 					return this._ctx.group.model.canDisplayOverlay(event, position, "tab");
 				}
-			});
-			disposables.push(dropTarget, dropTarget.onDrop((event) => {
+			};
+			const dropTarget = html5Backend.createDropTarget(chip.element, dropTargetOptions);
+			const pointerDropTarget = pointerBackend.createDropTarget(chip.element, dropTargetOptions);
+			const onDrop = (event) => {
 				this._callbacks.onChipDrop(tabGroup, event);
-			}));
+			};
+			disposables.push(dropTarget, dropTarget.onDrop(onDrop), pointerDropTarget, pointerDropTarget.onDrop(onDrop));
 			const disposable = new CompositeDisposable(...disposables);
 			this._chipRenderers.set(tabGroup.id, {
 				chip,
@@ -7599,7 +7623,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				pointerDragSource: dragSources.pointerDragSource,
 				dragSourcesDisposable: dragSources.disposable,
 				disposable,
-				dropTarget
+				dropTarget,
+				pointerDropTarget
 			});
 			if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 		}
@@ -7844,7 +7869,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* dragover bridge may have installed.
 		*/
 		handlePointerDragEnd(e) {
-			if (e && this._animState && this._animState.sourceIndex !== -1 && !this._animState.sourceTabGroupId && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) this.commitPointerReorder(e.pointerEvent);
+			if (e && this._animState && this._animState.sourceIndex !== -1 && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) {
+				const sourceTabGroupId = this._animState.sourceTabGroupId;
+				if (sourceTabGroupId) {
+					const insertionIndex = this._animState.currentInsertionIndex;
+					this._animState = null;
+					this.commitGroupMove(sourceTabGroupId, insertionIndex);
+				} else this.commitPointerReorder(e.pointerEvent);
+			}
 			this._pointerInsideTabsList = false;
 			this.resetDragAnimation();
 		}
@@ -8480,6 +8512,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		commitGroupMove(sourceTabGroupId, insertionIndex) {
 			const data = getPanelData();
 			this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
+			this._tabGroupManager.clearChipDropOverlays();
 			if (this.group.model.getTabGroups().some((tg) => tg.id === sourceTabGroupId)) {
 				var _this$accessor$option3;
 				if (((_this$accessor$option3 = this.accessor.options.theme) === null || _this$accessor$option3 === void 0 ? void 0 : _this$accessor$option3.tabAnimation) === "smooth") {
@@ -8837,7 +8870,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				}
 			});
 			this._reorder = new TabReorderController(this);
-			this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
+			const tabsListPointerTarget = pointerBackend.createDropTarget(this._tabsList, {
+				acceptedTargetZones: ["center"],
+				canDisplayOverlay: () => false,
+				isHitTestTransparent: () => {
+					const data = getPanelData();
+					if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id || data.groupId !== this.group.id) return true;
+					return data.panelId === null && !data.tabGroupId;
+				}
+			});
+			this.addDisposables(tabsListPointerTarget, this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
 				this._reorder.handlePointerDragEnd(e);
 			}), PointerDragController.getInstance().onDragMove((e) => {
 				this._reorder.handlePointerDragMove(e.clientX, e.clientY);
@@ -9313,6 +9355,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 		* (when the source tab is currently to the left of the target slot, its
 		* removal shifts the insertion index down by one). Always clears
 		* `targetTabGroupId` so the dropped tab lands outside the group.
+		*
+		* A chip dropped on a chip is a group move: the panel path would route it
+		* through the cross-group machinery, which rebuilds the tab group under a
+		* new id.
 		*/
 		_handleChipDrop(tabGroup, event) {
 			const firstPanelId = tabGroup.panelIds[0];
@@ -9320,6 +9366,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
 			if (insertionIndex === -1) return;
 			const data = getPanelData();
+			if (data === null || data === void 0 ? void 0 : data.tabGroupId) {
+				var _animState$currentIns2;
+				const animState = this._animState;
+				this._animState = null;
+				this._pendingCollapse = false;
+				this._commitGroupMove(data.tabGroupId, (_animState$currentIns2 = animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) !== null && _animState$currentIns2 !== void 0 ? _animState$currentIns2 : insertionIndex);
+				return;
+			}
 			const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId) ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1;
 			const adjustedIndex = insertionIndex - (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
 			this._onDrop.fire({
@@ -16397,10 +16451,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 				group = this.createGroup();
 				this._onDidAddGroup.fire(group);
 				this.movingLock(() => this.removePanel(item, {
-					removeEmptyGroup: true,
+					removeEmptyGroup: false,
 					skipDispose: true,
 					skipSetActiveGroup: true
 				}));
+				this.removeGroupIfEmpty(sourceGroup);
 				this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
 				movedPanels = [{
 					panel: item,
@@ -16471,6 +16526,9 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 			});
 			for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 		}
+		removeGroupIfEmpty(group) {
+			if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+		}
 		/**
 		* Build an empty gridview configured to match the main grid's styling, for
 		* hosting a nested layout inside a floating or popout window.

package/dist/package/main.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.0
+ * @version 8.3.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -4449,8 +4449,9 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		for (const el of elements) {
 			let current = el;
 			while (current) {
+				var _target$isHitTestTran;
 				const target = this._targetByElement.get(current);
-				if (target) return target;
+				if (target && !((_target$isHitTestTran = target.isHitTestTransparent) === null || _target$isHitTestTran === void 0 ? void 0 : _target$isHitTestTran.call(target))) return target;
 				current = current.parentElement;
 			}
 		}
@@ -4546,10 +4547,14 @@ var PointerDropTarget = class extends CompositeDisposable {
 			element: this.element,
 			handleDragOver: (e) => this._onDragOver(e),
 			handleDragLeave: () => this._onDragLeave(),
-			handleDrop: (e) => this._onDropEvent(e)
+			handleDrop: (e) => this._onDropEvent(e),
+			isHitTestTransparent: options.isHitTestTransparent
 		};
 		this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
 	}
+	clearOverlay() {
+		this._clearOwnOverlay();
+	}
 	setTargetZones(zones) {
 		this._acceptedTargetZonesSet = new Set(zones);
 	}
@@ -5869,6 +5874,7 @@ var Tab = class extends CompositeDisposable {
 			if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 				var _this$accessor$option;
 				if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "smooth") return false;
+				if (data.tabGroupId && this.group.model.getTabGroupForPanel(this.panel.id)) return false;
 				return true;
 			}
 			return this.group.model.canDisplayOverlay(event, position, "tab");
@@ -7316,7 +7322,23 @@ var TabGroupManager = class {
 	}
 	updateDirection() {
 		const isVertical = this._ctx.getDirection() === "vertical";
-		for (const [, entry] of this._chipRenderers) entry.dropTarget.setTargetZones(isVertical ? ["top"] : ["left"]);
+		for (const [, entry] of this._chipRenderers) {
+			const zones = isVertical ? ["top"] : ["left"];
+			entry.dropTarget.setTargetZones(zones);
+			entry.pointerDropTarget.setTargetZones(zones);
+		}
+	}
+	/**
+	* Drop any overlay the chips are showing. A group move is committed by a
+	* capturing listener on the tabs list that stops the event, so the chip
+	* target under the cursor never sees the drop that would clear its own.
+	*/
+	clearChipDropOverlays() {
+		for (const [, entry] of this._chipRenderers) {
+			var _entry$dropTarget, _entry$pointerDropTar;
+			(_entry$dropTarget = entry.dropTarget) === null || _entry$dropTarget === void 0 || _entry$dropTarget.clearOverlay();
+			(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
+		}
 	}
 	snapshotChipWidths() {
 		const widths = /* @__PURE__ */ new Map();
@@ -7565,9 +7587,8 @@ var TabGroupManager = class {
 		};
 		if (chip instanceof TabGroupChip) disposables.push(chip.onContextMenu(onContextMenu));
 		else disposables.push(new LongPressDetector(chip.element, { onLongPress: onContextMenu }), addDisposableListener(chip.element, "contextmenu", onContextMenu));
-		const isVertical = this._ctx.getDirection() === "vertical";
-		const dropTarget = new Droptarget(chip.element, {
-			acceptedTargetZones: isVertical ? ["top"] : ["left"],
+		const dropTargetOptions = {
+			acceptedTargetZones: this._ctx.getDirection() === "vertical" ? ["top"] : ["left"],
 			overlayModel: { activationSize: {
 				value: 100,
 				type: "percentage"
@@ -7578,15 +7599,18 @@ var TabGroupManager = class {
 				const data = getPanelData();
 				if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 					var _this$_ctx$accessor$o3;
-					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth") return false;
+					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth" && !data.tabGroupId) return false;
 					return true;
 				}
 				return this._ctx.group.model.canDisplayOverlay(event, position, "tab");
 			}
-		});
-		disposables.push(dropTarget, dropTarget.onDrop((event) => {
+		};
+		const dropTarget = html5Backend.createDropTarget(chip.element, dropTargetOptions);
+		const pointerDropTarget = pointerBackend.createDropTarget(chip.element, dropTargetOptions);
+		const onDrop = (event) => {
 			this._callbacks.onChipDrop(tabGroup, event);
-		}));
+		};
+		disposables.push(dropTarget, dropTarget.onDrop(onDrop), pointerDropTarget, pointerDropTarget.onDrop(onDrop));
 		const disposable = new CompositeDisposable(...disposables);
 		this._chipRenderers.set(tabGroup.id, {
 			chip,
@@ -7594,7 +7618,8 @@ var TabGroupManager = class {
 			pointerDragSource: dragSources.pointerDragSource,
 			dragSourcesDisposable: dragSources.disposable,
 			disposable,
-			dropTarget
+			dropTarget,
+			pointerDropTarget
 		});
 		if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 	}
@@ -7839,7 +7864,14 @@ var TabReorderController = class extends CompositeDisposable {
 	* dragover bridge may have installed.
 	*/
 	handlePointerDragEnd(e) {
-		if (e && this._animState && this._animState.sourceIndex !== -1 && !this._animState.sourceTabGroupId && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) this.commitPointerReorder(e.pointerEvent);
+		if (e && this._animState && this._animState.sourceIndex !== -1 && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) {
+			const sourceTabGroupId = this._animState.sourceTabGroupId;
+			if (sourceTabGroupId) {
+				const insertionIndex = this._animState.currentInsertionIndex;
+				this._animState = null;
+				this.commitGroupMove(sourceTabGroupId, insertionIndex);
+			} else this.commitPointerReorder(e.pointerEvent);
+		}
 		this._pointerInsideTabsList = false;
 		this.resetDragAnimation();
 	}
@@ -8475,6 +8507,7 @@ var TabReorderController = class extends CompositeDisposable {
 	commitGroupMove(sourceTabGroupId, insertionIndex) {
 		const data = getPanelData();
 		this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
+		this._tabGroupManager.clearChipDropOverlays();
 		if (this.group.model.getTabGroups().some((tg) => tg.id === sourceTabGroupId)) {
 			var _this$accessor$option3;
 			if (((_this$accessor$option3 = this.accessor.options.theme) === null || _this$accessor$option3 === void 0 ? void 0 : _this$accessor$option3.tabAnimation) === "smooth") {
@@ -8832,7 +8865,16 @@ var Tabs = class extends CompositeDisposable {
 			}
 		});
 		this._reorder = new TabReorderController(this);
-		this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
+		const tabsListPointerTarget = pointerBackend.createDropTarget(this._tabsList, {
+			acceptedTargetZones: ["center"],
+			canDisplayOverlay: () => false,
+			isHitTestTransparent: () => {
+				const data = getPanelData();
+				if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id || data.groupId !== this.group.id) return true;
+				return data.panelId === null && !data.tabGroupId;
+			}
+		});
+		this.addDisposables(tabsListPointerTarget, this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
 			this._reorder.handlePointerDragEnd(e);
 		}), PointerDragController.getInstance().onDragMove((e) => {
 			this._reorder.handlePointerDragMove(e.clientX, e.clientY);
@@ -9308,6 +9350,10 @@ var Tabs = class extends CompositeDisposable {
 	* (when the source tab is currently to the left of the target slot, its
 	* removal shifts the insertion index down by one). Always clears
 	* `targetTabGroupId` so the dropped tab lands outside the group.
+	*
+	* A chip dropped on a chip is a group move: the panel path would route it
+	* through the cross-group machinery, which rebuilds the tab group under a
+	* new id.
 	*/
 	_handleChipDrop(tabGroup, event) {
 		const firstPanelId = tabGroup.panelIds[0];
@@ -9315,6 +9361,14 @@ var Tabs = class extends CompositeDisposable {
 		const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
 		if (insertionIndex === -1) return;
 		const data = getPanelData();
+		if (data === null || data === void 0 ? void 0 : data.tabGroupId) {
+			var _animState$currentIns2;
+			const animState = this._animState;
+			this._animState = null;
+			this._pendingCollapse = false;
+			this._commitGroupMove(data.tabGroupId, (_animState$currentIns2 = animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) !== null && _animState$currentIns2 !== void 0 ? _animState$currentIns2 : insertionIndex);
+			return;
+		}
 		const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId) ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1;
 		const adjustedIndex = insertionIndex - (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
 		this._onDrop.fire({
@@ -16392,10 +16446,11 @@ var DockviewComponent = class extends BaseGrid {
 			group = this.createGroup();
 			this._onDidAddGroup.fire(group);
 			this.movingLock(() => this.removePanel(item, {
-				removeEmptyGroup: true,
+				removeEmptyGroup: false,
 				skipDispose: true,
 				skipSetActiveGroup: true
 			}));
+			this.removeGroupIfEmpty(sourceGroup);
 			this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
 			movedPanels = [{
 				panel: item,
@@ -16466,6 +16521,9 @@ var DockviewComponent = class extends BaseGrid {
 		});
 		for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 	}
+	removeGroupIfEmpty(group) {
+		if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+	}
 	/**
 	* Build an empty gridview configured to match the main grid's styling, for
 	* hosting a nested layout inside a floating or popout window.