dockview-core 8.3.0 → 8.3.1

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.0
+ * @version 8.3.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -4447,8 +4447,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;
 			}
 		}
@@ -4544,10 +4545,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);
 	}
@@ -5867,6 +5872,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");
@@ -7314,7 +7320,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();
@@ -7563,9 +7585,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"
@@ -7576,15 +7597,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,
@@ -7592,7 +7616,8 @@ var TabGroupManager = class {
 			pointerDragSource: dragSources.pointerDragSource,
 			dragSourcesDisposable: dragSources.disposable,
 			disposable,
-			dropTarget
+			dropTarget,
+			pointerDropTarget
 		});
 		if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 	}
@@ -7837,7 +7862,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();
 	}
@@ -8473,6 +8505,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") {
@@ -8830,7 +8863,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);
@@ -9306,6 +9348,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];
@@ -9313,6 +9359,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({
@@ -16390,10 +16444,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,
@@ -16464,6 +16519,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.

package/package.json

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