dockview-core 4.13.0 → 5.0.0

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -129,7 +129,7 @@ exports.DockviewWillDropEvent = DockviewWillDropEvent;
 var DockviewGroupPanelModel = /** @class */ (function (_super) {
     __extends(DockviewGroupPanelModel, _super);
     function DockviewGroupPanelModel(container, accessor, id, options, groupPanel) {
-        var _a;
+        var _a, _b;
         var _this = _super.call(this) || this;
         _this.container = container;
         _this.accessor = accessor;
@@ -138,6 +138,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.groupPanel = groupPanel;
         _this._isGroupActive = false;
         _this._locked = false;
+        _this._rightHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
+        _this._leftHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
+        _this._prefixHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
         _this._location = { type: 'grid' };
         _this.mostRecentlyUsed = [];
         _this._overwriteRenderContainer = null;
@@ -179,7 +182,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         container.append(_this.tabsContainer.element, _this.contentContainer.element);
         _this.header.hidden = !!options.hideHeader;
         _this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this.tabsContainer.onTabDragStart(function (event) {
+        _this.headerPosition =
+            (_b = options.headerPosition) !== null && _b !== void 0 ? _b : accessor.defaultHeaderPosition;
+        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this._rightHeaderActionsDisposable, _this._leftHeaderActionsDisposable, _this._prefixHeaderActionsDisposable, _this.tabsContainer.onTabDragStart(function (event) {
             _this._onTabDragStart.fire(event);
         }), _this.tabsContainer.onGroupDragStart(function (event) {
             _this._onGroupDragStart.fire(event);
@@ -281,6 +286,33 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "headerPosition", {
+        get: function () {
+            var _a;
+            return (_a = this._headerPosition) !== null && _a !== void 0 ? _a : 'top';
+        },
+        set: function (value) {
+            var _a;
+            this._headerPosition = value;
+            (0, dom_1.removeClasses)(this.container, 'dv-groupview-header-top', 'dv-groupview-header-bottom', 'dv-groupview-header-left', 'dv-groupview-header-right');
+            (0, dom_1.addClasses)(this.container, "dv-groupview-header-".concat(value));
+            var direction = value === 'top' || value === 'bottom' ? 'horizontal' : 'vertical';
+            this.tabsContainer.direction = direction;
+            this.header.direction = direction;
+            // resize the active panel to fit the new header direction
+            // if not, the panel will overflow the tabs container
+            if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+                this._activePanel.layout(this._width, this._height);
+            }
+            if (this._leftHeaderActions ||
+                this._rightHeaderActions ||
+                this._prefixHeaderActions) {
+                this.updateHeaderActions();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewGroupPanelModel.prototype, "location", {
         get: function () {
             return this._location;
@@ -364,10 +396,13 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
+        this.updateHeaderActions();
+    };
+    DockviewGroupPanelModel.prototype.updateHeaderActions = function () {
         if (this.accessor.options.createRightHeaderActionComponent) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._rightHeaderActions);
+            this._rightHeaderActionsDisposable.value = this._rightHeaderActions;
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -375,10 +410,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
         }
+        else {
+            this._rightHeaderActions = undefined;
+            this._rightHeaderActionsDisposable.dispose();
+            this.tabsContainer.setRightActionsElement(undefined);
+        }
         if (this.accessor.options.createLeftHeaderActionComponent) {
             this._leftHeaderActions =
                 this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActionsDisposable.value = this._leftHeaderActions;
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -386,10 +426,16 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
+        else {
+            this._leftHeaderActions = undefined;
+            this._leftHeaderActionsDisposable.dispose();
+            this.tabsContainer.setLeftActionsElement(undefined);
+        }
         if (this.accessor.options.createPrefixHeaderActionComponent) {
             this._prefixHeaderActions =
                 this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActionsDisposable.value =
+                this._prefixHeaderActions;
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -397,6 +443,11 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
+        else {
+            this._prefixHeaderActions = undefined;
+            this._prefixHeaderActionsDisposable.dispose();
+            this.tabsContainer.setPrefixActionsElement(undefined);
+        }
     };
     DockviewGroupPanelModel.prototype.rerender = function (panel) {
         this.contentContainer.renderPanel(panel, { asActive: false });
@@ -417,6 +468,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (this.header.hidden) {
             result.hideHeader = true;
         }
+        if (this.headerPosition !== 'top') {
+            result.headerPosition = this.headerPosition;
+        }
         return result;
     };
     DockviewGroupPanelModel.prototype.moveToNext = function (options) {
@@ -631,6 +685,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
+        else if (panel.api.renderer === 'always') {
+            this.contentContainer.renderPanel(panel, { asActive: false });
+        }
         if (hasExistingPanel) {
             // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
             return;

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

@@ -4,6 +4,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelParameters } from '../framwork';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
+import { DockviewHeaderPosition } from './options';
 export interface IGroupPanelBaseProps<T extends {
     [index: string]: any;
 } = any> extends PanelParameters<T> {
@@ -26,6 +27,7 @@ export interface IDockviewHeaderActionsProps {
     activePanel: IDockviewPanel | undefined;
     isGroupActive: boolean;
     group: DockviewGroupPanel;
+    headerPosition: DockviewHeaderPosition;
 }
 export interface IGroupHeaderProps {
     api: DockviewGroupPanelApi;

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

@@ -29,6 +29,8 @@ export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
+export type DockviewHeaderPosition = 'top' | 'bottom' | 'left' | 'right';
+export type DockviewHeaderDirection = 'horizontal' | 'vertical';
 export interface DockviewOptions {
     /**
      * Disable the auto-resizing which is controlled through a `ResizeObserver`.
@@ -44,6 +46,7 @@ export interface DockviewOptions {
     };
     popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
+    defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
     dndEdges?: false | DroptargetOverlayModel;
     /**

package/dist/cjs/dockview/options.js

@@ -44,6 +44,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
         defaultRenderer: undefined,
+        defaultHeaderPosition: undefined,
         debug: undefined,
         rootOverlayModel: undefined,
         locked: undefined,

package/dist/cjs/dom.js

@@ -428,9 +428,9 @@ var Classnames = /** @class */ (function () {
 exports.Classnames = Classnames;
 var DEBOUCE_DELAY = 100;
 function isChildEntirelyVisibleWithinParent(child, parent) {
-    //
     var childPosition = getDomNodePagePosition(child);
     var parentPosition = getDomNodePagePosition(parent);
+    // Check horizontal visibility
     if (childPosition.left < parentPosition.left) {
         return false;
     }
@@ -438,6 +438,14 @@ function isChildEntirelyVisibleWithinParent(child, parent) {
         parentPosition.left + parentPosition.width) {
         return false;
     }
+    // Check vertical visibility
+    if (childPosition.top < parentPosition.top) {
+        return false;
+    }
+    if (childPosition.top + childPosition.height >
+        parentPosition.top + parentPosition.height) {
+        return false;
+    }
     return true;
 }
 exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;

package/dist/cjs/framwork.d.ts

@@ -1,4 +1,4 @@
-import { Parameters } from "./panel/types";
+import { Parameters } from './panel/types';
 export interface PanelParameters<T extends {} = Parameters> {
     params: T;
 }

package/dist/cjs/lifecycle.d.ts

@@ -10,11 +10,12 @@ export declare namespace Disposable {
     function from(func: () => void): IDisposable;
 }
 export declare class CompositeDisposable {
-    private _disposables;
+    private readonly _disposables;
     private _isDisposed;
     get isDisposed(): boolean;
     constructor(...args: IDisposable[]);
     addDisposables(...args: IDisposable[]): void;
+    removeDisposable(disposable: IDisposable): void;
     dispose(): void;
 }
 export declare class MutableDisposable implements IDisposable {

package/dist/cjs/lifecycle.js

@@ -24,7 +24,7 @@ var CompositeDisposable = /** @class */ (function () {
             args[_i] = arguments[_i];
         }
         this._isDisposed = false;
-        this._disposables = args;
+        this._disposables = new Set(args);
     }
     Object.defineProperty(CompositeDisposable.prototype, "isDisposed", {
         get: function () {
@@ -39,7 +39,10 @@ var CompositeDisposable = /** @class */ (function () {
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        args.forEach(function (arg) { return _this._disposables.push(arg); });
+        args.forEach(function (arg) { return _this._disposables.add(arg); });
+    };
+    CompositeDisposable.prototype.removeDisposable = function (disposable) {
+        this._disposables.delete(disposable);
     };
     CompositeDisposable.prototype.dispose = function () {
         if (this._isDisposed) {
@@ -47,7 +50,7 @@ var CompositeDisposable = /** @class */ (function () {
         }
         this._isDisposed = true;
         this._disposables.forEach(function (arg) { return arg.dispose(); });
-        this._disposables = [];
+        this._disposables.clear();
     };
     return CompositeDisposable;
 }());

package/dist/cjs/overlay/overlay.js

@@ -73,7 +73,8 @@ var AriaLevelTracker = /** @class */ (function () {
     AriaLevelTracker.prototype.update = function () {
         for (var i = 0; i < this._orderedList.length; i++) {
             this._orderedList[i].setAttribute('aria-level', "".concat(i));
-            this._orderedList[i].style.zIndex = "calc(var(--dv-overlay-z-index, 999) + ".concat(i * 2, ")");
+            this._orderedList[i].style.zIndex =
+                "calc(var(--dv-overlay-z-index, 999) + ".concat(i * 2, ")");
         }
     };
     return AriaLevelTracker;

package/dist/cjs/scrollbar.d.ts

@@ -2,11 +2,14 @@ import { CompositeDisposable } from './lifecycle';
 export declare class Scrollbar extends CompositeDisposable {
     private readonly scrollableElement;
     private readonly _element;
-    private readonly _horizontalScrollbar;
-    private _scrollLeft;
+    private readonly _scrollbar;
+    private _scrollOffset;
     private _animationTimer;
+    private _orientation;
     static MouseWheelSpeed: number;
     get element(): HTMLElement;
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(value: 'horizontal' | 'vertical');
     constructor(scrollableElement: HTMLElement);
     private calculateScrollbarStyles;
 }

package/dist/cjs/scrollbar.js

@@ -25,27 +25,36 @@ var Scrollbar = /** @class */ (function (_super) {
     function Scrollbar(scrollableElement) {
         var _this = _super.call(this) || this;
         _this.scrollableElement = scrollableElement;
-        _this._scrollLeft = 0;
+        _this._scrollOffset = 0;
+        _this._orientation = 'horizontal';
         _this._element = document.createElement('div');
         _this._element.className = 'dv-scrollable';
-        _this._horizontalScrollbar = document.createElement('div');
-        _this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
+        _this._scrollbar = document.createElement('div');
+        _this._scrollbar.className = 'dv-scrollbar dv-scrollbar-horizontal';
         _this.element.appendChild(scrollableElement);
-        _this.element.appendChild(_this._horizontalScrollbar);
+        _this.element.appendChild(_this._scrollbar);
         _this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'wheel', function (event) {
-            _this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
+            _this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
             _this.calculateScrollbarStyles();
-        }), (0, events_1.addDisposableListener)(_this._horizontalScrollbar, 'pointerdown', function (event) {
+        }), (0, events_1.addDisposableListener)(_this._scrollbar, 'pointerdown', function (event) {
             event.preventDefault();
             (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', true);
-            var originalClientX = event.clientX;
-            var originalScrollLeft = _this._scrollLeft;
+            var originalClient = _this._orientation === 'horizontal'
+                ? event.clientX
+                : event.clientY;
+            var originalScrollOffset = _this._scrollOffset;
             var onPointerMove = function (event) {
-                var deltaX = event.clientX - originalClientX;
-                var clientWidth = _this.element.clientWidth;
-                var scrollWidth = _this.scrollableElement.scrollWidth;
-                var p = clientWidth / scrollWidth;
-                _this._scrollLeft = originalScrollLeft + deltaX / p;
+                var delta = _this._orientation === 'horizontal'
+                    ? event.clientX - originalClient
+                    : event.clientY - originalClient;
+                var clientSize = _this._orientation === 'horizontal'
+                    ? _this.element.clientWidth
+                    : _this.element.clientHeight;
+                var scrollSize = _this._orientation === 'horizontal'
+                    ? _this.scrollableElement.scrollWidth
+                    : _this.scrollableElement.scrollHeight;
+                var p = clientSize / scrollSize;
+                _this._scrollOffset = originalScrollOffset + delta / p;
                 _this.calculateScrollbarStyles();
             };
             var onEnd = function () {
@@ -60,7 +69,10 @@ var Scrollbar = /** @class */ (function (_super) {
         }), (0, events_1.addDisposableListener)(_this.element, 'scroll', function () {
             _this.calculateScrollbarStyles();
         }), (0, events_1.addDisposableListener)(_this.scrollableElement, 'scroll', function () {
-            _this._scrollLeft = _this.scrollableElement.scrollLeft;
+            _this._scrollOffset =
+                _this._orientation === 'horizontal'
+                    ? _this.scrollableElement.scrollLeft
+                    : _this.scrollableElement.scrollTop;
             _this.calculateScrollbarStyles();
         }), (0, dom_1.watchElementResize)(_this.element, function () {
             (0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', true);
@@ -82,22 +94,72 @@ var Scrollbar = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Scrollbar.prototype, "orientation", {
+        get: function () {
+            return this._orientation;
+        },
+        set: function (value) {
+            if (this._orientation === value) {
+                return;
+            }
+            this._scrollOffset = 0;
+            this._orientation = value;
+            (0, dom_1.removeClasses)(this._scrollbar, 'dv-scrollbar-vertical', 'dv-scrollbar-horizontal');
+            if (value === 'vertical') {
+                (0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-vertical');
+            }
+            else {
+                (0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-horizontal');
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Scrollbar.prototype.calculateScrollbarStyles = function () {
-        var clientWidth = this.element.clientWidth;
-        var scrollWidth = this.scrollableElement.scrollWidth;
-        var hasScrollbar = scrollWidth > clientWidth;
+        var clientSize = this._orientation === 'horizontal'
+            ? this.element.clientWidth
+            : this.element.clientHeight;
+        var scrollSize = this._orientation === 'horizontal'
+            ? this.scrollableElement.scrollWidth
+            : this.scrollableElement.scrollHeight;
+        var hasScrollbar = scrollSize > clientSize;
         if (hasScrollbar) {
-            var px = clientWidth * (clientWidth / scrollWidth);
-            this._horizontalScrollbar.style.width = "".concat(px, "px");
-            this._scrollLeft = (0, math_1.clamp)(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
-            this.scrollableElement.scrollLeft = this._scrollLeft;
-            var percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
-            this._horizontalScrollbar.style.left = "".concat((clientWidth - px) * percentageComplete, "px");
+            var px = clientSize * (clientSize / scrollSize);
+            if (this._orientation === 'horizontal') {
+                this._scrollbar.style.width = "".concat(px, "px");
+                this._scrollbar.style.height = '';
+            }
+            else {
+                this._scrollbar.style.height = "".concat(px, "px");
+                this._scrollbar.style.width = '';
+            }
+            this._scrollOffset = (0, math_1.clamp)(this._scrollOffset, 0, scrollSize - clientSize);
+            if (this._orientation === 'horizontal') {
+                this.scrollableElement.scrollLeft = this._scrollOffset;
+            }
+            else {
+                this.scrollableElement.scrollTop = this._scrollOffset;
+            }
+            var percentageComplete = this._scrollOffset / (scrollSize - clientSize);
+            if (this._orientation === 'horizontal') {
+                this._scrollbar.style.left = "".concat((clientSize - px) * percentageComplete, "px");
+                this._scrollbar.style.top = '';
+            }
+            else {
+                this._scrollbar.style.top = "".concat((clientSize - px) * percentageComplete, "px");
+                this._scrollbar.style.left = '';
+            }
         }
         else {
-            this._horizontalScrollbar.style.width = "0px";
-            this._horizontalScrollbar.style.left = "0px";
-            this._scrollLeft = 0;
+            if (this._orientation === 'horizontal') {
+                this._scrollbar.style.width = '0px';
+                this._scrollbar.style.left = '0px';
+            }
+            else {
+                this._scrollbar.style.height = '0px';
+                this._scrollbar.style.top = '0px';
+            }
+            this._scrollOffset = 0;
         }
     };
     Scrollbar.MouseWheelSpeed = 1;