dockview-core 6.6.0 → 7.0.2

package/dist/esm/overlay/overlay.js

@@ -39,6 +39,15 @@ export class Overlay extends CompositeDisposable {
     get isVisible() {
         return this._isVisible;
     }
+    /**
+     * 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() {
+        var _a, _b;
+        return (_b = (_a = this.options.header) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -54,6 +63,11 @@ export class Overlay extends CompositeDisposable {
         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');
@@ -63,6 +77,10 @@ export class Overlay extends CompositeDisposable {
         this.setupResize('topright');
         this.setupResize('bottomleft');
         this.setupResize('bottomright');
+        if (this.options.header) {
+            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
@@ -177,9 +195,14 @@ export class Overlay extends CompositeDisposable {
     }
     setupDrag(dragTarget, options = { inDragMode: false }) {
         const track = (captureTarget, pointerId) => {
+            var _a, _b, _c;
             let offset = null;
             let hasMoved = false;
             this._dragCancelled = false;
+            // Snapshot once per drag — siblings don't move while this one drags.
+            const siblingBoxes = this.options.transformDragPosition
+                ? ((_c = (_b = (_a = this.options).getSiblingBoxes) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [])
+                : [];
             const iframes = disableIframePointEvents();
             if (captureTarget &&
                 typeof pointerId === 'number' &&
@@ -187,7 +210,7 @@ export class Overlay extends CompositeDisposable {
                 try {
                     captureTarget.setPointerCapture(pointerId);
                 }
-                catch (_a) {
+                catch (_d) {
                     // ignore – non-fatal if the browser refuses capture
                 }
             }
@@ -228,13 +251,35 @@ export class Overlay extends CompositeDisposable {
                 }
                 const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
                 const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
-                const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                const bottom = clamp(offset.y -
-                    y +
-                    containerRect.height -
-                    overlayRect.height, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-                const right = clamp(offset.x - x + containerRect.width - overlayRect.width, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                let proposedTop = y - offset.y;
+                let proposedLeft = x - offset.x;
+                // Let a consumer nudge the proposed position (snapping,
+                // custom bounds) before the container clamp below.
+                if (this.options.transformDragPosition) {
+                    const 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;
+                    }
+                }
+                const maxTop = Math.max(0, containerRect.height - overlayRect.height + yOffset);
+                const maxLeft = Math.max(0, containerRect.width - overlayRect.width + xOffset);
+                const top = clamp(proposedTop, -yOffset, maxTop);
+                const bottom = clamp(containerRect.height - overlayRect.height - proposedTop, -yOffset, maxTop);
+                const left = clamp(proposedLeft, -xOffset, maxLeft);
+                const right = clamp(containerRect.width - overlayRect.width - proposedLeft, -xOffset, maxLeft);
                 const bounds = {};
                 // Anchor to top or to bottom depending on which one is closer
                 if (top <= bottom) {

package/dist/esm/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/esm/paneview/draggablePaneviewPanel.js

@@ -19,10 +19,10 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         });
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
-        this._onUnhandledDragOverEvent = new Emitter();
-        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this._onUnhandledDragOver = new 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();
         }
@@ -55,7 +55,7 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
                 }
             }
             const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
-            this._onUnhandledDragOverEvent.fire(firedEvent);
+            this._onUnhandledDragOver.fire(firedEvent);
             return firedEvent.isAccepted;
         };
         const dropTargetOptions = {

package/dist/esm/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/esm/paneview/paneviewComponent.js

@@ -86,11 +86,11 @@ export class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this._onUnhandledDragOverEvent = new Emitter();
-        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this._onUnhandledDragOver = new 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 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
@@ -286,8 +286,8 @@ export class PaneviewComponent extends Resizable {
     doAddPanel(panel) {
         const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);
-        }), panel.onUnhandledDragOverEvent((event) => {
-            this._onUnhandledDragOverEvent.fire(event);
+        }), panel.onUnhandledDragOver((event) => {
+            this._onUnhandledDragOver.fire(event);
         }));
         this._viewDisposables.set(panel.id, disposable);
     }