dockview-core 6.6.0 → 7.0.2

package/dist/cjs/overlay/overlay.d.ts

@@ -1,6 +1,21 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-import { AnchoredBox } from '../types';
+import { AnchoredBox, Box } from '../types';
+/**
+ * Context handed to {@link OverlayOptions.transformDragPosition} each
+ * pointer-move frame while a floating overlay is being dragged.
+ */
+export interface OverlayDragContext {
+    /** Proposed top-left + size this frame, in container pixels (pre-clamp). */
+    readonly proposed: Box;
+    /** Size of the container the overlay is dragged within. */
+    readonly container: {
+        width: number;
+        height: number;
+    };
+    /** Bounds of the sibling overlays, snapshotted at drag start. */
+    readonly others: readonly Box[];
+}
 export declare class Overlay extends CompositeDisposable {
     private readonly options;
     private readonly _element;
@@ -22,11 +37,38 @@ export declare class Overlay extends CompositeDisposable {
     set minimumInViewportHeight(value: number | undefined);
     get element(): HTMLElement;
     get isVisible(): boolean;
+    /**
+     * Height of the optional drag-handle header, or 0 when none is present.
+     * Used to translate between the overlay's outer box and the content area
+     * available to the group beneath the header.
+     */
+    get headerHeight(): number;
     constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
+        /**
+         * Optional dedicated drag handle rendered above the content (a
+         * floating window title bar). When provided the resize container
+         * lays its children out as a flex column so the content shrinks
+         * to fit beneath the handle.
+         */
+        header?: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
+        /**
+         * Adjust the proposed top-left each drag frame (before the
+         * container clamp). Return an adjusted position or nothing to leave
+         * it unchanged. Used to implement snapping / custom bounds.
+         */
+        transformDragPosition?: (context: OverlayDragContext) => {
+            top: number;
+            left: number;
+        } | void;
+        /**
+         * Snapshot the sibling overlays' boxes at drag start, supplied to
+         * `transformDragPosition` as `context.others`.
+         */
+        getSiblingBoxes?: () => readonly Box[];
     });
     setVisible(isVisible: boolean): void;
     bringToFront(): void;

package/dist/cjs/overlay/overlay.js

@@ -97,6 +97,11 @@ var Overlay = /** @class */ (function (_super) {
         _this._dragCancelled = false;
         _this.addDisposables(_this._onDidChange, _this._onDidChangeEnd, _this._onDidStartMoving, _this._dragMove);
         _this._element.className = 'dv-resize-container';
+        // Floating groups are non-modal dialogs over the layout. The contained
+        // group(s) carry their own `role="region"` + label, so the dialog
+        // itself only needs role + modality here.
+        _this._element.setAttribute('role', 'dialog');
+        _this._element.setAttribute('aria-modal', 'false');
         _this._isVisible = true;
         _this.setupResize('top');
         _this.setupResize('bottom');
@@ -106,6 +111,10 @@ var Overlay = /** @class */ (function (_super) {
         _this.setupResize('topright');
         _this.setupResize('bottomleft');
         _this.setupResize('bottomright');
+        if (_this.options.header) {
+            (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-with-titlebar', true);
+            _this._element.appendChild(_this.options.header);
+        }
         _this._element.appendChild(_this.options.content);
         _this.options.container.appendChild(_this._element);
         // if input bad resize within acceptable boundaries
@@ -141,6 +150,19 @@ var Overlay = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Overlay.prototype, "headerHeight", {
+        /**
+         * Height of the optional drag-handle header, or 0 when none is present.
+         * Used to translate between the overlay's outer box and the content area
+         * available to the group beneath the header.
+         */
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this.options.header) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Overlay.prototype.setVisible = function (isVisible) {
         if (isVisible === this.isVisible) {
             return;
@@ -252,9 +274,14 @@ var Overlay = /** @class */ (function (_super) {
         var _this = this;
         if (options === void 0) { options = { inDragMode: false }; }
         var track = function (captureTarget, pointerId) {
+            var _a, _b, _c;
             var offset = null;
             var hasMoved = false;
             _this._dragCancelled = false;
+            // Snapshot once per drag — siblings don't move while this one drags.
+            var siblingBoxes = _this.options.transformDragPosition
+                ? ((_c = (_b = (_a = _this.options).getSiblingBoxes) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [])
+                : [];
             var iframes = (0, dom_1.disableIframePointEvents)();
             if (captureTarget &&
                 typeof pointerId === 'number' &&
@@ -262,7 +289,7 @@ var Overlay = /** @class */ (function (_super) {
                 try {
                     captureTarget.setPointerCapture(pointerId);
                 }
-                catch (_a) {
+                catch (_d) {
                     // ignore – non-fatal if the browser refuses capture
                 }
             }
@@ -303,13 +330,35 @@ var Overlay = /** @class */ (function (_super) {
                 }
                 var xOffset = Math.max(0, _this.getMinimumWidth(overlayRect.width));
                 var yOffset = Math.max(0, _this.getMinimumHeight(overlayRect.height));
-                var top = (0, math_1.clamp)(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                var bottom = (0, math_1.clamp)(offset.y -
-                    y +
-                    containerRect.height -
-                    overlayRect.height, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                var left = (0, math_1.clamp)(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-                var right = (0, math_1.clamp)(offset.x - x + containerRect.width - overlayRect.width, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                var proposedTop = y - offset.y;
+                var proposedLeft = x - offset.x;
+                // Let a consumer nudge the proposed position (snapping,
+                // custom bounds) before the container clamp below.
+                if (_this.options.transformDragPosition) {
+                    var adjusted = _this.options.transformDragPosition({
+                        proposed: {
+                            top: proposedTop,
+                            left: proposedLeft,
+                            width: overlayRect.width,
+                            height: overlayRect.height,
+                        },
+                        container: {
+                            width: containerRect.width,
+                            height: containerRect.height,
+                        },
+                        others: siblingBoxes,
+                    });
+                    if (adjusted) {
+                        proposedTop = adjusted.top;
+                        proposedLeft = adjusted.left;
+                    }
+                }
+                var maxTop = Math.max(0, containerRect.height - overlayRect.height + yOffset);
+                var maxLeft = Math.max(0, containerRect.width - overlayRect.width + xOffset);
+                var top = (0, math_1.clamp)(proposedTop, -yOffset, maxTop);
+                var bottom = (0, math_1.clamp)(containerRect.height - overlayRect.height - proposedTop, -yOffset, maxTop);
+                var left = (0, math_1.clamp)(proposedLeft, -xOffset, maxLeft);
+                var right = (0, math_1.clamp)(containerRect.width - overlayRect.width - proposedLeft, -xOffset, maxLeft);
                 var bounds = {};
                 // Anchor to top or to bottom depending on which one is closer
                 if (top <= bottom) {

package/dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -18,8 +18,8 @@ export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private pointerTarget;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
-    private readonly _onUnhandledDragOverEvent;
-    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
+    private readonly _onUnhandledDragOver;
+    readonly onUnhandledDragOver: Event<PaneviewDndOverlayEvent>;
     readonly accessor: IPaneviewComponent;
     constructor(options: {
         accessor: IPaneviewComponent;

package/dist/cjs/paneview/draggablePaneviewPanel.js

@@ -49,10 +49,10 @@ var DraggablePaneviewPanel = /** @class */ (function (_super) {
         }) || this;
         _this._onDidDrop = new events_1.Emitter();
         _this.onDidDrop = _this._onDidDrop.event;
-        _this._onUnhandledDragOverEvent = new events_1.Emitter();
-        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this._onUnhandledDragOver = new events_1.Emitter();
+        _this.onUnhandledDragOver = _this._onUnhandledDragOver.event;
         _this.accessor = options.accessor;
-        _this.addDisposables(_this._onDidDrop, _this._onUnhandledDragOverEvent);
+        _this.addDisposables(_this._onDidDrop, _this._onUnhandledDragOver);
         if (!options.disableDnd) {
             _this.initDragFeatures();
         }
@@ -87,7 +87,7 @@ var DraggablePaneviewPanel = /** @class */ (function (_super) {
                 }
             }
             var firedEvent = new options_1.PaneviewUnhandledDragOverEvent(event, position, dataTransfer_1.getPaneData, _this);
-            _this._onUnhandledDragOverEvent.fire(firedEvent);
+            _this._onUnhandledDragOver.fire(firedEvent);
             return firedEvent.isAccepted;
         };
         var dropTargetOptions = {

package/dist/cjs/paneview/paneviewComponent.d.ts

@@ -74,7 +74,7 @@ export interface IPaneviewComponent extends IDisposable {
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
-    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
+    readonly onUnhandledDragOver: Event<PaneviewDndOverlayEvent>;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
@@ -103,8 +103,8 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    private readonly _onUnhandledDragOverEvent;
-    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
+    private readonly _onUnhandledDragOver;
+    readonly onUnhandledDragOver: Event<PaneviewDndOverlayEvent>;
     private readonly _classNames;
     get id(): string;
     get panels(): PaneviewPanel[];

package/dist/cjs/paneview/paneviewComponent.js

@@ -113,11 +113,11 @@ var PaneviewComponent = /** @class */ (function (_super) {
         _this.onDidAddView = _this._onDidAddView.event;
         _this._onDidRemoveView = new events_1.Emitter();
         _this.onDidRemoveView = _this._onDidRemoveView.event;
-        _this._onUnhandledDragOverEvent = new events_1.Emitter();
-        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this._onUnhandledDragOver = new events_1.Emitter();
+        _this.onUnhandledDragOver = _this._onUnhandledDragOver.event;
         _this.element.style.height = '100%';
         _this.element.style.width = '100%';
-        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView, _this._onUnhandledDragOverEvent);
+        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView, _this._onUnhandledDragOver);
         _this._classNames = new dom_1.Classnames(_this.element);
         _this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         // the container is owned by the third-party, do not modify/delete it
@@ -397,8 +397,8 @@ var PaneviewComponent = /** @class */ (function (_super) {
         var _this = this;
         var disposable = new lifecycle_1.CompositeDisposable(panel.onDidDrop(function (event) {
             _this._onDidDrop.fire(event);
-        }), panel.onUnhandledDragOverEvent(function (event) {
-            _this._onUnhandledDragOverEvent.fire(event);
+        }), panel.onUnhandledDragOver(function (event) {
+            _this._onUnhandledDragOver.fire(event);
         }));
         this._viewDisposables.set(panel.id, disposable);
     };