dockview-core 6.2.1 → 6.3.0

package/dist/cjs/api/dockviewGroupPanelApi.d.ts

@@ -1,7 +1,7 @@
 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewGroupChangeEvent, DockviewGroupLocation, DockviewGroupPanelLocked } from '../dockview/dockviewGroupPanelModel';
 import { DockviewHeaderPosition } from '../dockview/options';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
@@ -29,6 +29,13 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      */
     readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     readonly location: DockviewGroupLocation;
+    /**
+     * Whether this group is locked against drop interactions.
+     * - `true`: panels cannot be dropped into the group (center / tabs),
+     *   but the group can still be split from its edges.
+     * - `'no-drop-target'`: all drop zones are disabled for this group.
+     */
+    locked: DockviewGroupPanelLocked;
     /**
      * If you require the Window object
      */
@@ -68,6 +75,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     readonly _onDidCollapsedChange: Emitter<DockviewGroupPanelCollapsedChangeEvent>;
     readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     get location(): DockviewGroupLocation;
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     constructor(id: string, accessor: DockviewComponent);
     setSize(event: SizeEvent): void;
     close(): void;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -61,6 +61,22 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "locked", {
+        get: function () {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            return this._group.locked;
+        },
+        set: function (value) {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            this._group.locked = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DockviewGroupPanelApiImpl.prototype.setSize = function (event) {
         // Always store the requested size
         this._pendingSize = __assign({}, event);

package/dist/cjs/dnd/groupDragHandler.js

@@ -57,19 +57,41 @@ var GroupDragHandler = /** @class */ (function (_super) {
         var bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
         var color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
         if (dataTransfer) {
-            var ghostElement = document.createElement('div');
-            ghostElement.style.backgroundColor = bgColor;
-            ghostElement.style.color = color;
-            ghostElement.style.padding = '2px 8px';
-            ghostElement.style.height = '24px';
-            ghostElement.style.fontSize = '11px';
-            ghostElement.style.lineHeight = '20px';
-            ghostElement.style.borderRadius = '12px';
-            ghostElement.style.position = 'absolute';
-            ghostElement.style.pointerEvents = 'none';
-            ghostElement.style.top = '-9999px';
-            ghostElement.textContent = "Multiple Panels (".concat(this.group.size, ")");
+            var createGhost = this.accessor.options.createGroupDragGhostComponent;
+            var ghostElement = void 0;
+            var customRenderer = void 0;
+            if (createGhost) {
+                customRenderer = createGhost(this.group);
+                customRenderer.init({
+                    group: this.group,
+                    api: this.accessor.api,
+                });
+                ghostElement = customRenderer.element;
+                ghostElement.style.position = 'absolute';
+                ghostElement.style.pointerEvents = 'none';
+                ghostElement.style.top = '-9999px';
+            }
+            else {
+                ghostElement = document.createElement('div');
+                ghostElement.style.backgroundColor = bgColor;
+                ghostElement.style.color = color;
+                ghostElement.style.padding = '2px 8px';
+                ghostElement.style.height = '24px';
+                ghostElement.style.fontSize = '11px';
+                ghostElement.style.lineHeight = '20px';
+                ghostElement.style.borderRadius = '12px';
+                ghostElement.style.position = 'absolute';
+                ghostElement.style.pointerEvents = 'none';
+                ghostElement.style.top = '-9999px';
+                ghostElement.textContent = "Multiple Panels (".concat(this.group.size, ")");
+            }
             (0, ghost_1.addGhostImage)(dataTransfer, ghostElement, { y: -10, x: 30 });
+            if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
+                // addGhostImage removes the element from the DOM on the next
+                // tick; dispose the framework renderer on the same schedule.
+                var renderer_1 = customRenderer;
+                setTimeout(function () { var _a; return (_a = renderer_1.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer_1); }, 0);
+            }
         }
         return {
             dispose: function () {

package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.js

@@ -350,7 +350,7 @@ var WrapTabGroupIndicator = /** @class */ (function (_super) {
         var svg = underline.firstElementChild;
         var path;
         if (!svg || svg.tagName !== 'svg') {
-            underline.innerHTML = '';
+            underline.replaceChildren();
             svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.style.display = 'block';
             path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -454,7 +454,7 @@ var NoneTabGroupIndicator = /** @class */ (function (_super) {
         underline.style.display = '';
         // Clear any SVG content left over from a mode switch
         if (underline.firstElementChild) {
-            underline.innerHTML = '';
+            underline.replaceChildren();
         }
         underline.style.backgroundColor = color;
         if (isVertical) {

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -1213,11 +1213,15 @@ var Tabs = /** @class */ (function (_super) {
                 if (!isInsideRange && !isJustBeforeGroup) {
                     return "continue";
                 }
-                if (isGroupDrag) {
+                if (isGroupDrag && isInsideRange) {
                     // A group cannot be dropped inside another group.
                     // Snap the insertion index to just before or just
                     // after this group based on cursor position relative
-                    // to the group's midpoint.
+                    // to the group's midpoint. Only applies when the
+                    // insertion would land *inside* the group — for
+                    // `isJustBeforeGroup`, the index is already outside
+                    // (immediately left of the group) and is a valid
+                    // drop position, so leave it untouched (issue #1264).
                     var groupMid = (firstIdx + lastIdx + 1) / 2;
                     if (insertionIndex < groupMid) {
                         insertionIndex = firstIdx;
@@ -1227,6 +1231,9 @@ var Tabs = /** @class */ (function (_super) {
                     }
                     return "break";
                 }
+                if (isGroupDrag && isJustBeforeGroup) {
+                    return "break";
+                }
                 if (isJustBeforeGroup) {
                     // Check whether only the source tab (or source group
                     // tabs) sits between insertionIndex and firstIdx.

package/dist/cjs/dockview/components/titlebar/voidContainer.js

@@ -43,6 +43,12 @@ var VoidContainer = /** @class */ (function (_super) {
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: function (event, position) {
+                if (_this.group.api.locked) {
+                    // Dropping on the void/header space adds the panel
+                    // to this group, which `locked` is meant to prevent
+                    // (both `true` and `'no-drop-target'`).
+                    return false;
+                }
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data && _this.accessor.id === data.viewId) {
                     return true;

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -262,6 +262,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
     private _popoutRestorationPromise;
+    private readonly _popoutRestorationCleanups;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;