dockview-core 1.14.2 → 1.15.1

package/dist/esm/api/component.api.d.ts

@@ -1,4 +1,4 @@
-import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
+import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -330,6 +330,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Total number of panels.
      */
     get totalPanels(): number;
+    get gap(): number;
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -354,6 +355,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Invoked when a panel is removed. May be called multiple times when moving panels.
      */
     get onDidRemovePanel(): Event<IDockviewPanel>;
+    get onDidMovePanel(): Event<MovePanelEvent>;
     /**
      * Invoked after a layout is deserialzied using the `fromJSON` method.
      */
@@ -450,10 +452,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     /**
      * Add a floating group
      */
-    addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
-        x: number;
-        y: number;
-    }): void;
+    addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptions): void;
     /**
      * Create a component from a serialized object.
      */
@@ -493,4 +492,5 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<void>;
+    setGap(gap: number | undefined): void;
 }

package/dist/esm/api/component.api.js

@@ -452,6 +452,9 @@ export class DockviewApi {
     get totalPanels() {
         return this.component.totalPanels;
     }
+    get gap() {
+        return this.component.gap;
+    }
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -488,6 +491,9 @@ export class DockviewApi {
     get onDidRemovePanel() {
         return this.component.onDidRemovePanel;
     }
+    get onDidMovePanel() {
+        return this.component.onDidMovePanel;
+    }
     /**
      * Invoked after a layout is deserialzied using the `fromJSON` method.
      */
@@ -628,8 +634,8 @@ export class DockviewApi {
     /**
      * Add a floating group
      */
-    addFloatingGroup(item, coord) {
-        return this.component.addFloatingGroup(item, coord);
+    addFloatingGroup(item, options) {
+        return this.component.addFloatingGroup(item, options);
     }
     /**
      * Create a component from a serialized object.
@@ -679,4 +685,7 @@ export class DockviewApi {
     addPopoutGroup(item, options) {
         return this.component.addPopoutGroup(item, options);
     }
+    setGap(gap) {
+        this.component.updateOptions({ gap });
+    }
 }

package/dist/esm/constants.d.ts

@@ -2,4 +2,6 @@ export declare const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 export declare const DEFAULT_FLOATING_GROUP_POSITION: {
     left: number;
     top: number;
+    width: number;
+    height: number;
 };

package/dist/esm/constants.js

@@ -1,2 +1,2 @@
 export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
+export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };

package/dist/esm/dnd/overlay.d.ts

@@ -1,6 +1,6 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-import { Box } from '../types';
+import { AnchoredBox } from '../types';
 export declare class Overlay extends CompositeDisposable {
     private readonly options;
     private _element;
@@ -10,16 +10,18 @@ export declare class Overlay extends CompositeDisposable {
     readonly onDidChangeEnd: Event<void>;
     private static MINIMUM_HEIGHT;
     private static MINIMUM_WIDTH;
+    private verticalAlignment;
+    private horiziontalAlignment;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
-    constructor(options: Box & {
+    constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
     });
-    setBounds(bounds?: Partial<Box>): void;
-    toJSON(): Box;
+    setBounds(bounds?: Partial<AnchoredBox>): void;
+    toJSON(): AnchoredBox;
     setupDrag(dragTarget: HTMLElement, options?: {
         inDragMode: boolean;
     }): void;

package/dist/esm/dnd/overlay.js

@@ -41,12 +41,7 @@ export class Overlay extends CompositeDisposable {
         this._element.appendChild(this.options.content);
         this.options.container.appendChild(this._element);
         // if input bad resize within acceptable boundaries
-        this.setBounds({
-            height: this.options.height,
-            width: this.options.width,
-            top: this.options.top,
-            left: this.options.left,
-        });
+        this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
     }
     setBounds(bounds = {}) {
         if (typeof bounds.height === 'number') {
@@ -55,11 +50,25 @@ export class Overlay extends CompositeDisposable {
         if (typeof bounds.width === 'number') {
             this._element.style.width = `${bounds.width}px`;
         }
-        if (typeof bounds.top === 'number') {
+        if ('top' in bounds && typeof bounds.top === 'number') {
             this._element.style.top = `${bounds.top}px`;
+            this._element.style.bottom = 'auto';
+            this.verticalAlignment = 'top';
         }
-        if (typeof bounds.left === 'number') {
+        if ('bottom' in bounds && typeof bounds.bottom === 'number') {
+            this._element.style.bottom = `${bounds.bottom}px`;
+            this._element.style.top = 'auto';
+            this.verticalAlignment = 'bottom';
+        }
+        if ('left' in bounds && typeof bounds.left === 'number') {
             this._element.style.left = `${bounds.left}px`;
+            this._element.style.right = 'auto';
+            this.horiziontalAlignment = 'left';
+        }
+        if ('right' in bounds && typeof bounds.right === 'number') {
+            this._element.style.right = `${bounds.right}px`;
+            this._element.style.left = 'auto';
+            this.horiziontalAlignment = 'right';
         }
         const containerRect = this.options.container.getBoundingClientRect();
         const overlayRect = this._element.getBoundingClientRect();
@@ -67,24 +76,54 @@ export class Overlay extends CompositeDisposable {
         // a minimum width of minimumViewportWidth must be inside the viewport
         const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
         // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
-            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
-            : 0;
-        const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-        const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-        this._element.style.left = `${left}px`;
-        this._element.style.top = `${top}px`;
+        const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        if (this.verticalAlignment === 'top') {
+            const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+            this._element.style.top = `${top}px`;
+            this._element.style.bottom = 'auto';
+        }
+        if (this.verticalAlignment === 'bottom') {
+            const bottom = clamp(containerRect.bottom - overlayRect.bottom, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+            this._element.style.bottom = `${bottom}px`;
+            this._element.style.top = 'auto';
+        }
+        if (this.horiziontalAlignment === 'left') {
+            const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+            this._element.style.left = `${left}px`;
+            this._element.style.right = 'auto';
+        }
+        if (this.horiziontalAlignment === 'right') {
+            const right = clamp(containerRect.right - overlayRect.right, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+            this._element.style.right = `${right}px`;
+            this._element.style.left = 'auto';
+        }
         this._onDidChange.fire();
     }
     toJSON() {
         const container = this.options.container.getBoundingClientRect();
         const element = this._element.getBoundingClientRect();
-        return {
-            top: element.top - container.top,
-            left: element.left - container.left,
-            width: element.width,
-            height: element.height,
-        };
+        const result = {};
+        if (this.verticalAlignment === 'top') {
+            result.top = parseFloat(this._element.style.top);
+        }
+        else if (this.verticalAlignment === 'bottom') {
+            result.bottom = parseFloat(this._element.style.bottom);
+        }
+        else {
+            result.top = element.top - container.top;
+        }
+        if (this.horiziontalAlignment === 'left') {
+            result.left = parseFloat(this._element.style.left);
+        }
+        else if (this.horiziontalAlignment === 'right') {
+            result.right = parseFloat(this._element.style.right);
+        }
+        else {
+            result.left = element.left - container.left;
+        }
+        result.width = element.width;
+        result.height = element.height;
+        return result;
     }
     setupDrag(dragTarget, options = { inDragMode: false }) {
         const move = new MutableDisposable();
@@ -116,12 +155,30 @@ export class Overlay extends CompositeDisposable {
                     };
                 }
                 const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
-                const yOffset = Math.max(0, this.options.minimumInViewportHeight
-                    ? this.getMinimumHeight(overlayRect.height)
-                    : 0);
-                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
                 const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                this.setBounds({ top, left });
+                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));
+                const bounds = {};
+                // Anchor to top or to bottom depending on which one is closer
+                if (top <= bottom) {
+                    bounds.top = top;
+                }
+                else {
+                    bounds.bottom = bottom;
+                }
+                // Anchor to left or to right depending on which one is closer
+                if (left <= right) {
+                    bounds.left = left;
+                }
+                else {
+                    bounds.right = right;
+                }
+                this.setBounds(bounds);
             }), addDisposableWindowListener(window, 'mouseup', () => {
                 toggleClass(this._element, 'dv-resize-container-dragging', false);
                 move.dispose();
@@ -189,8 +246,10 @@ export class Overlay extends CompositeDisposable {
                     };
                 }
                 let top = undefined;
+                let bottom = undefined;
                 let height = undefined;
                 let left = undefined;
+                let right = undefined;
                 let width = undefined;
                 const moveTop = () => {
                     top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
@@ -204,6 +263,7 @@ export class Overlay extends CompositeDisposable {
                         startPosition.originalY +
                             startPosition.originalHeight -
                             top;
+                    bottom = containerRect.height - top - height;
                 };
                 const moveBottom = () => {
                     top =
@@ -215,6 +275,7 @@ export class Overlay extends CompositeDisposable {
                         ? -top +
                             this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                    bottom = containerRect.height - top - height;
                 };
                 const moveLeft = () => {
                     left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
@@ -228,6 +289,7 @@ export class Overlay extends CompositeDisposable {
                         startPosition.originalX +
                             startPosition.originalWidth -
                             left;
+                    right = containerRect.width - left - width;
                 };
                 const moveRight = () => {
                     left =
@@ -239,6 +301,7 @@ export class Overlay extends CompositeDisposable {
                         ? -left +
                             this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                    right = containerRect.width - left - width;
                 };
                 switch (direction) {
                     case 'top':
@@ -270,7 +333,24 @@ export class Overlay extends CompositeDisposable {
                         moveRight();
                         break;
                 }
-                this.setBounds({ height, width, top, left });
+                const bounds = {};
+                // Anchor to top or to bottom depending on which one is closer
+                if (top <= bottom) {
+                    bounds.top = top;
+                }
+                else {
+                    bounds.bottom = bottom;
+                }
+                // Anchor to left or to right depending on which one is closer
+                if (left <= right) {
+                    bounds.left = left;
+                }
+                else {
+                    bounds.right = right;
+                }
+                bounds.height = height;
+                bounds.width = width;
+                this.setBounds(bounds);
             }), {
                 dispose: () => {
                     for (const iframe of iframes) {
@@ -293,7 +373,7 @@ export class Overlay extends CompositeDisposable {
         if (typeof this.options.minimumInViewportHeight === 'number') {
             return height - this.options.minimumInViewportHeight;
         }
-        return height;
+        return 0;
     }
     dispose() {
         this._element.remove();

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -145,7 +145,8 @@ export class TabsContainer extends CompositeDisposable {
                 this.accessor.addFloatingGroup(this.group, {
                     x: left - rootLeft + 20,
                     y: top - rootTop + 20,
-                }, { inDragMode: true });
+                    inDragMode: true,
+                });
             }
         }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
             if (event.defaultPrevented) {
@@ -214,7 +215,8 @@ export class TabsContainer extends CompositeDisposable {
                 this.accessor.addFloatingGroup(panel, {
                     x: left - rootLeft,
                     y: top - rootTop,
-                }, { inDragMode: true });
+                    inDragMode: true,
+                });
                 return;
             }
             const isLeftClick = event.button === 0;

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

@@ -11,7 +11,7 @@ import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDr
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { Parameters } from '../panel/types';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { Box } from '../types';
+import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer';
 export interface PanelReference {
     update: (event: {
@@ -23,7 +23,7 @@ export interface PanelReference {
 }
 export interface SerializedFloatingGroup {
     data: GroupPanelViewState;
-    position: Box;
+    position: AnchoredBox;
 }
 export interface SerializedPopoutGroup {
     data: GroupPanelViewState;
@@ -42,6 +42,10 @@ export interface SerializedDockview {
     floatingGroups?: SerializedFloatingGroup[];
     popoutGroups?: SerializedPopoutGroup[];
 }
+export interface MovePanelEvent {
+    panel: IDockviewPanel;
+    from: DockviewGroupPanel;
+}
 type MoveGroupOptions = {
     from: {
         group: DockviewGroupPanel;
@@ -62,11 +66,24 @@ type MoveGroupOrPanelOptions = {
         index?: number;
     };
 };
+export interface FloatingGroupOptions {
+    x?: number;
+    y?: number;
+    height?: number;
+    width?: number;
+    position?: AnchorPosition;
+}
+export interface FloatingGroupOptionsInternal extends FloatingGroupOptions {
+    skipRemoveGroup?: boolean;
+    inDragMode?: boolean;
+    skipActiveGroup?: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
     readonly orientation: Orientation;
+    readonly gap: number;
     readonly onDidDrop: Event<DockviewDidDropEvent>;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@@ -80,6 +97,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidAddGroup: Event<DockviewGroupPanel>;
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
     readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
+    readonly onDidMovePanel: Event<MovePanelEvent>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -98,10 +116,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     focus(): void;
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
-    addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, coord?: {
-        x: number;
-        y: number;
-    }): void;
+    addFloatingGroup(item: IDockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptions): void;
     addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
         position?: Box;
         popoutUrl?: string;
@@ -143,10 +158,10 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     private readonly _onDidMovePanel;
+    readonly onDidMovePanel: Event<MovePanelEvent>;
     private readonly _floatingGroups;
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
-    private _ignoreEvents;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
@@ -160,6 +175,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
+    get gap(): number;
     constructor(options: DockviewComponentOptions);
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
         skipRemoveGroup?: boolean;
@@ -175,16 +191,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
         }) => void;
         overridePopoutGroup?: DockviewGroupPanel;
     }): Promise<void>;
-    addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: {
-        x?: number;
-        y?: number;
-        height?: number;
-        width?: number;
-    }, options?: {
-        skipRemoveGroup?: boolean;
-        inDragMode: boolean;
-        skipActiveGroup?: boolean;
-    }): void;
+    addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;