dockview-core 1.14.2 → 1.15.0

package/dist/cjs/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';
@@ -354,6 +354,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 +451,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 +491,5 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<void>;
+    setGap(gap: number | undefined): void;
 }

package/dist/cjs/api/component.api.js

@@ -709,6 +709,13 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewApi.prototype, "onDidMovePanel", {
+        get: function () {
+            return this.component.onDidMovePanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "onDidLayoutFromJSON", {
         /**
          * Invoked after a layout is deserialzied using the `fromJSON` method.
@@ -895,8 +902,8 @@ var DockviewApi = /** @class */ (function () {
     /**
      * Add a floating group
      */
-    DockviewApi.prototype.addFloatingGroup = function (item, coord) {
-        return this.component.addFloatingGroup(item, coord);
+    DockviewApi.prototype.addFloatingGroup = function (item, options) {
+        return this.component.addFloatingGroup(item, options);
     };
     /**
      * Create a component from a serialized object.
@@ -950,6 +957,9 @@ var DockviewApi = /** @class */ (function () {
     DockviewApi.prototype.addPopoutGroup = function (item, options) {
         return this.component.addPopoutGroup(item, options);
     };
+    DockviewApi.prototype.setGap = function (gap) {
+        this.component.updateOptions({ gap: gap });
+    };
     return DockviewApi;
 }());
 exports.DockviewApi = DockviewApi;

package/dist/cjs/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/cjs/constants.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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 };
+exports.DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };

package/dist/cjs/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/cjs/dnd/overlay.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -90,12 +101,7 @@ var Overlay = /** @class */ (function (_super) {
         _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(__assign(__assign(__assign(__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 })));
         return _this;
     }
     Object.defineProperty(Overlay.prototype, "minimumInViewportWidth", {
@@ -120,11 +126,25 @@ var Overlay = /** @class */ (function (_super) {
         if (typeof bounds.width === 'number') {
             this._element.style.width = "".concat(bounds.width, "px");
         }
-        if (typeof bounds.top === 'number') {
+        if ('top' in bounds && typeof bounds.top === 'number') {
             this._element.style.top = "".concat(bounds.top, "px");
+            this._element.style.bottom = 'auto';
+            this.verticalAlignment = 'top';
+        }
+        if ('bottom' in bounds && typeof bounds.bottom === 'number') {
+            this._element.style.bottom = "".concat(bounds.bottom, "px");
+            this._element.style.top = 'auto';
+            this.verticalAlignment = 'bottom';
         }
-        if (typeof bounds.left === 'number') {
+        if ('left' in bounds && typeof bounds.left === 'number') {
             this._element.style.left = "".concat(bounds.left, "px");
+            this._element.style.right = 'auto';
+            this.horiziontalAlignment = 'left';
+        }
+        if ('right' in bounds && typeof bounds.right === 'number') {
+            this._element.style.right = "".concat(bounds.right, "px");
+            this._element.style.left = 'auto';
+            this.horiziontalAlignment = 'right';
         }
         var containerRect = this.options.container.getBoundingClientRect();
         var overlayRect = this._element.getBoundingClientRect();
@@ -132,24 +152,54 @@ var Overlay = /** @class */ (function (_super) {
         // a minimum width of minimumViewportWidth must be inside the viewport
         var xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
         // a minimum height of minimumViewportHeight must be inside the viewport
-        var yOffset = typeof this.options.minimumInViewportHeight === 'number'
-            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
-            : 0;
-        var left = (0, math_1.clamp)(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-        var top = (0, math_1.clamp)(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-        this._element.style.left = "".concat(left, "px");
-        this._element.style.top = "".concat(top, "px");
+        var yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+        if (this.verticalAlignment === 'top') {
+            var top_1 = (0, math_1.clamp)(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+            this._element.style.top = "".concat(top_1, "px");
+            this._element.style.bottom = 'auto';
+        }
+        if (this.verticalAlignment === 'bottom') {
+            var bottom = (0, math_1.clamp)(containerRect.bottom - overlayRect.bottom, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+            this._element.style.bottom = "".concat(bottom, "px");
+            this._element.style.top = 'auto';
+        }
+        if (this.horiziontalAlignment === 'left') {
+            var left = (0, math_1.clamp)(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+            this._element.style.left = "".concat(left, "px");
+            this._element.style.right = 'auto';
+        }
+        if (this.horiziontalAlignment === 'right') {
+            var right = (0, math_1.clamp)(containerRect.right - overlayRect.right, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+            this._element.style.right = "".concat(right, "px");
+            this._element.style.left = 'auto';
+        }
         this._onDidChange.fire();
     };
     Overlay.prototype.toJSON = function () {
         var container = this.options.container.getBoundingClientRect();
         var element = this._element.getBoundingClientRect();
-        return {
-            top: element.top - container.top,
-            left: element.left - container.left,
-            width: element.width,
-            height: element.height,
-        };
+        var 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;
     };
     Overlay.prototype.setupDrag = function (dragTarget, options) {
         var _this = this;
@@ -202,12 +252,30 @@ var Overlay = /** @class */ (function (_super) {
                     };
                 }
                 var xOffset = Math.max(0, _this.getMinimumWidth(overlayRect.width));
-                var yOffset = Math.max(0, _this.options.minimumInViewportHeight
-                    ? _this.getMinimumHeight(overlayRect.height)
-                    : 0);
-                var left = (0, math_1.clamp)(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                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));
-                _this.setBounds({ top: top, left: left });
+                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 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);
             }), (0, events_1.addDisposableWindowListener)(window, 'mouseup', function () {
                 (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
                 move.dispose();
@@ -284,8 +352,10 @@ var Overlay = /** @class */ (function (_super) {
                     };
                 }
                 var top = undefined;
+                var bottom = undefined;
                 var height = undefined;
                 var left = undefined;
+                var right = undefined;
                 var width = undefined;
                 var moveTop = function () {
                     top = (0, math_1.clamp)(y, -Number.MAX_VALUE, startPosition.originalY +
@@ -299,6 +369,7 @@ var Overlay = /** @class */ (function (_super) {
                         startPosition.originalY +
                             startPosition.originalHeight -
                             top;
+                    bottom = containerRect.height - top - height;
                 };
                 var moveBottom = function () {
                     top =
@@ -310,6 +381,7 @@ var Overlay = /** @class */ (function (_super) {
                         ? -top +
                             _this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                    bottom = containerRect.height - top - height;
                 };
                 var moveLeft = function () {
                     left = (0, math_1.clamp)(x, -Number.MAX_VALUE, startPosition.originalX +
@@ -323,6 +395,7 @@ var Overlay = /** @class */ (function (_super) {
                         startPosition.originalX +
                             startPosition.originalWidth -
                             left;
+                    right = containerRect.width - left - width;
                 };
                 var moveRight = function () {
                     left =
@@ -334,6 +407,7 @@ var Overlay = /** @class */ (function (_super) {
                         ? -left +
                             _this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                    right = containerRect.width - left - width;
                 };
                 switch (direction) {
                     case 'top':
@@ -365,7 +439,24 @@ var Overlay = /** @class */ (function (_super) {
                         moveRight();
                         break;
                 }
-                _this.setBounds({ height: height, width: width, top: top, left: left });
+                var 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: function () {
                     var e_4, _a;
@@ -399,7 +490,7 @@ var Overlay = /** @class */ (function (_super) {
         if (typeof this.options.minimumInViewportHeight === 'number') {
             return height - this.options.minimumInViewportHeight;
         }
-        return height;
+        return 0;
     };
     Overlay.prototype.dispose = function () {
         this._element.remove();

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

@@ -130,7 +130,8 @@ var TabsContainer = /** @class */ (function (_super) {
                 _this.accessor.addFloatingGroup(_this.group, {
                     x: left - rootLeft + 20,
                     y: top_1 - rootTop + 20,
-                }, { inDragMode: true });
+                    inDragMode: true,
+                });
             }
         }), (0, events_1.addDisposableListener)(_this.tabContainer, 'mousedown', function (event) {
             if (event.defaultPrevented) {
@@ -287,7 +288,8 @@ var TabsContainer = /** @class */ (function (_super) {
                 _this.accessor.addFloatingGroup(panel_1, {
                     x: left - rootLeft,
                     y: top_2 - rootTop,
-                }, { inDragMode: true });
+                    inDragMode: true,
+                });
                 return;
             }
             var isLeftClick = event.button === 0;

package/dist/cjs/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, 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,6 +66,16 @@ type MoveGroupOrPanelOptions = {
         index?: number;
     };
 };
+export interface FloatingGroupOptions {
+    x?: number;
+    y?: number;
+    height?: number;
+    width?: number;
+    position?: AnchoredBox;
+    skipRemoveGroup?: boolean;
+    inDragMode?: boolean;
+    skipActiveGroup?: boolean;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
@@ -80,6 +94,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 +113,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 +155,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>;
@@ -175,16 +187,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?: FloatingGroupOptions): void;
     private orthogonalize;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;