dockview-core 4.6.2 → 4.7.1

package/dist/cjs/constants.d.ts

@@ -5,3 +5,4 @@ export declare const DEFAULT_FLOATING_GROUP_POSITION: {
     width: number;
     height: number;
 };
+export declare const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/cjs/constants.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FLOATING_GROUP_POSITION = exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = void 0;
+exports.DESERIALIZATION_POPOUT_DELAY_MS = exports.DEFAULT_FLOATING_GROUP_POSITION = exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = void 0;
 exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 exports.DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+exports.DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/cjs/dnd/abstractDragHandler.d.ts

@@ -1,11 +1,13 @@
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 export declare abstract class DragHandler extends CompositeDisposable {
     protected readonly el: HTMLElement;
+    private disabled?;
     private readonly dataDisposable;
     private readonly pointerEventsDisposable;
     private readonly _onDragStart;
     readonly onDragStart: import("../events").Event<DragEvent>;
-    constructor(el: HTMLElement);
+    constructor(el: HTMLElement, disabled?: boolean | undefined);
+    setDisabled(disabled: boolean): void;
     abstract getData(event: DragEvent): IDisposable;
     protected isCancelled(_event: DragEvent): boolean;
     private configure;

package/dist/cjs/dnd/abstractDragHandler.js

@@ -21,9 +21,10 @@ var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var DragHandler = /** @class */ (function (_super) {
     __extends(DragHandler, _super);
-    function DragHandler(el) {
+    function DragHandler(el, disabled) {
         var _this = _super.call(this) || this;
         _this.el = el;
+        _this.disabled = disabled;
         _this.dataDisposable = new lifecycle_1.MutableDisposable();
         _this.pointerEventsDisposable = new lifecycle_1.MutableDisposable();
         _this._onDragStart = new events_1.Emitter();
@@ -32,13 +33,16 @@ var DragHandler = /** @class */ (function (_super) {
         _this.configure();
         return _this;
     }
+    DragHandler.prototype.setDisabled = function (disabled) {
+        this.disabled = disabled;
+    };
     DragHandler.prototype.isCancelled = function (_event) {
         return false;
     };
     DragHandler.prototype.configure = function () {
         var _this = this;
         this.addDisposables(this._onDragStart, (0, events_1.addDisposableListener)(this.el, 'dragstart', function (event) {
-            if (event.defaultPrevented || _this.isCancelled(event)) {
+            if (event.defaultPrevented || _this.isCancelled(event) || _this.disabled) {
                 event.preventDefault();
                 return;
             }

package/dist/cjs/dnd/droptarget.js

@@ -21,6 +21,48 @@ var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var dnd_1 = require("./dnd");
 var math_1 = require("../math");
+function setGPUOptimizedBounds(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    var topPx = "".concat(Math.round(top), "px");
+    var leftPx = "".concat(Math.round(left), "px");
+    var widthPx = "".concat(Math.round(width), "px");
+    var heightPx = "".concat(Math.round(height), "px");
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = topPx;
+    element.style.left = leftPx;
+    element.style.width = widthPx;
+    element.style.height = heightPx;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function setGPUOptimizedBoundsFromStrings(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    // Use traditional positioning but maintain GPU layer
+    element.style.top = top;
+    element.style.left = left;
+    element.style.width = width;
+    element.style.height = height;
+    element.style.visibility = 'visible';
+    // Ensure GPU layer is maintained
+    if (!element.style.transform || element.style.transform === '') {
+        element.style.transform = 'translate3d(0, 0, 0)';
+    }
+}
+function checkBoundsChanged(element, bounds) {
+    var top = bounds.top, left = bounds.left, width = bounds.width, height = bounds.height;
+    var topPx = "".concat(Math.round(top), "px");
+    var leftPx = "".concat(Math.round(left), "px");
+    var widthPx = "".concat(Math.round(width), "px");
+    var heightPx = "".concat(Math.round(height), "px");
+    // Check if position or size changed (back to traditional method)
+    return element.style.top !== topPx ||
+        element.style.left !== leftPx ||
+        element.style.width !== widthPx ||
+        element.style.height !== heightPx;
+}
 var WillShowOverlayEvent = /** @class */ (function (_super) {
     __extends(WillShowOverlayEvent, _super);
     function WillShowOverlayEvent(options) {
@@ -328,21 +370,11 @@ var Droptarget = /** @class */ (function (_super) {
                 box_1.left = rootLeft + width - 4;
                 box_1.width = 4;
             }
-            var topPx = "".concat(Math.round(box_1.top), "px");
-            var leftPx = "".concat(Math.round(box_1.left), "px");
-            var widthPx = "".concat(Math.round(box_1.width), "px");
-            var heightPx = "".concat(Math.round(box_1.height), "px");
-            if (overlay_1.style.top === topPx &&
-                overlay_1.style.left === leftPx &&
-                overlay_1.style.width === widthPx &&
-                overlay_1.style.height === heightPx) {
+            // Use GPU-optimized bounds checking and setting
+            if (!checkBoundsChanged(overlay_1, box_1)) {
                 return;
             }
-            overlay_1.style.top = topPx;
-            overlay_1.style.left = leftPx;
-            overlay_1.style.width = widthPx;
-            overlay_1.style.height = heightPx;
-            overlay_1.style.visibility = 'visible';
+            setGPUOptimizedBounds(overlay_1, box_1);
             overlay_1.className = "dv-drop-target-anchor".concat(this.options.className ? " ".concat(this.options.className) : '');
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-left', isLeft);
             (0, dom_1.toggleClass)(overlay_1, 'dv-drop-target-right', isRight);
@@ -394,10 +426,7 @@ var Droptarget = /** @class */ (function (_super) {
             box.top = "".concat(100 * (1 - size), "%");
             box.height = "".concat(100 * size, "%");
         }
-        this.overlayElement.style.top = box.top;
-        this.overlayElement.style.left = box.left;
-        this.overlayElement.style.width = box.width;
-        this.overlayElement.style.height = box.height;
+        setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft);

package/dist/cjs/dnd/groupDragHandler.d.ts

@@ -6,7 +6,7 @@ export declare class GroupDragHandler extends DragHandler {
     private readonly accessor;
     private readonly group;
     private readonly panelTransfer;
-    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel);
+    constructor(element: HTMLElement, accessor: DockviewComponent, group: DockviewGroupPanel, disabled?: boolean);
     isCancelled(_event: DragEvent): boolean;
     getData(dragEvent: DragEvent): IDisposable;
 }

package/dist/cjs/dnd/groupDragHandler.js

@@ -23,8 +23,8 @@ var dataTransfer_1 = require("./dataTransfer");
 var ghost_1 = require("./ghost");
 var GroupDragHandler = /** @class */ (function (_super) {
     __extends(GroupDragHandler, _super);
-    function GroupDragHandler(element, accessor, group) {
-        var _this = _super.call(this, element) || this;
+    function GroupDragHandler(element, accessor, group, disabled) {
+        var _this = _super.call(this, element, disabled) || this;
         _this.accessor = accessor;
         _this.group = group;
         _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();

package/dist/cjs/dockview/components/tab/tab.d.ts

@@ -12,6 +12,7 @@ export declare class Tab extends CompositeDisposable {
     private readonly _element;
     private readonly dropTarget;
     private content;
+    private readonly dragHandler;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
     private readonly _onDropped;

package/dist/cjs/dockview/components/tab/tab.js

@@ -25,8 +25,8 @@ var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler");
 var ghost_1 = require("../../../dnd/ghost");
 var TabDragHandler = /** @class */ (function (_super) {
     __extends(TabDragHandler, _super);
-    function TabDragHandler(element, accessor, group, panel) {
-        var _this = _super.call(this, element) || this;
+    function TabDragHandler(element, accessor, group, panel, disabled) {
+        var _this = _super.call(this, element, disabled) || this;
         _this.accessor = accessor;
         _this.group = group;
         _this.panel = panel;
@@ -63,7 +63,7 @@ var Tab = /** @class */ (function (_super) {
         _this._element.tabIndex = 0;
         _this._element.draggable = !_this.accessor.options.disableDnd;
         (0, dom_1.toggleClass)(_this.element, 'dv-inactive-tab', true);
-        var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
+        _this.dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel, !!_this.accessor.options.disableDnd);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['left', 'right'],
             overlayModel: { activationSize: { value: 50, type: 'percentage' } },
@@ -80,7 +80,7 @@ var Tab = /** @class */ (function (_super) {
             getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
-        _this.addDisposables(_this._onPointDown, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) {
+        _this.addDisposables(_this._onPointDown, _this._onDropped, _this._onDragStart, _this.dragHandler.onDragStart(function (event) {
             if (event.dataTransfer) {
                 var style_1 = getComputedStyle(_this.element);
                 var newNode_1 = _this.element.cloneNode(true);
@@ -94,7 +94,7 @@ var Tab = /** @class */ (function (_super) {
                 });
             }
             _this._onDragStart.fire(event);
-        }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
+        }), _this.dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
             _this._onPointDown.fire(event);
         }), _this.dropTarget.onDrop(function (event) {
             _this._onDropped.fire(event);
@@ -121,6 +121,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.updateDragAndDropState = function () {
         this._element.draggable = !this.accessor.options.disableDnd;
+        this.dragHandler.setDisabled(!!this.accessor.options.disableDnd);
     };
     Tab.prototype.dispose = function () {
         _super.prototype.dispose.call(this);

package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts

@@ -8,6 +8,7 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly group;
     private readonly _element;
     private readonly dropTarget;
+    private readonly handler;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;

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

@@ -39,7 +39,7 @@ var VoidContainer = /** @class */ (function (_super) {
         _this.addDisposables(_this._onDrop, _this._onDragStart, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function () {
             _this.accessor.doSetGroupActive(_this.group);
         }));
-        var handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group);
+        _this.handler = new groupDragHandler_1.GroupDragHandler(_this._element, accessor, group, !!_this.accessor.options.disableDnd);
         _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: function (event, position) {
@@ -52,7 +52,7 @@ var VoidContainer = /** @class */ (function (_super) {
             getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
-        _this.addDisposables(handler, handler.onDragStart(function (event) {
+        _this.addDisposables(_this.handler, _this.handler.onDragStart(function (event) {
             _this._onDragStart.fire(event);
         }), _this.dropTarget.onDrop(function (event) {
             _this._onDrop.fire(event);
@@ -69,6 +69,7 @@ var VoidContainer = /** @class */ (function (_super) {
     VoidContainer.prototype.updateDragAndDropState = function () {
         this._element.draggable = !this.accessor.options.disableDnd;
         (0, dom_1.toggleClass)(this._element, 'dv-draggable', !this.accessor.options.disableDnd);
+        this.handler.setDisabled(!!this.accessor.options.disableDnd);
     };
     return VoidContainer;
 }(lifecycle_1.CompositeDisposable));

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

@@ -219,6 +219,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
+    private _popoutRestorationPromise;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
@@ -235,6 +236,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
+    /**
+     * Promise that resolves when all popout groups from the last fromJSON call are restored.
+     * Useful for tests that need to wait for delayed popout creation.
+     */
+    get popoutRestorationPromise(): Promise<void>;
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;