dockview-core 4.13.0 → 5.0.0

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -1,9 +1,9 @@
 import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
-import { isAncestor, toggleClass } from '../dom';
+import { addClasses, isAncestor, removeClasses, toggleClass } from '../dom';
 import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
-import { DockviewWillShowOverlayLocationEvent } from './events';
-import { CompositeDisposable } from '../lifecycle';
+import { DockviewWillShowOverlayLocationEvent, } from './events';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
 import { DockviewUnhandledDragOverEvent, } from './options';
@@ -78,6 +78,29 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return isAncestor(document.activeElement, this.contentContainer.element);
     }
+    get headerPosition() {
+        var _a;
+        return (_a = this._headerPosition) !== null && _a !== void 0 ? _a : 'top';
+    }
+    set headerPosition(value) {
+        var _a;
+        this._headerPosition = value;
+        removeClasses(this.container, 'dv-groupview-header-top', 'dv-groupview-header-bottom', 'dv-groupview-header-left', 'dv-groupview-header-right');
+        addClasses(this.container, `dv-groupview-header-${value}`);
+        const 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();
+        }
+    }
     get location() {
         return this._location;
     }
@@ -112,7 +135,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         });
     }
     constructor(container, accessor, id, options, groupPanel) {
-        var _a;
+        var _a, _b;
         super();
         this.container = container;
         this.accessor = accessor;
@@ -121,6 +144,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
+        this._rightHeaderActionsDisposable = new MutableDisposable();
+        this._leftHeaderActionsDisposable = new MutableDisposable();
+        this._prefixHeaderActionsDisposable = new MutableDisposable();
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._overwriteRenderContainer = null;
@@ -162,7 +188,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         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((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((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
@@ -222,10 +250,13 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
+        this.updateHeaderActions();
+    }
+    updateHeaderActions() {
         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,
@@ -233,10 +264,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             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,
@@ -244,10 +280,16 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             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,
@@ -255,6 +297,11 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
+        else {
+            this._prefixHeaderActions = undefined;
+            this._prefixHeaderActionsDisposable.dispose();
+            this.tabsContainer.setPrefixActionsElement(undefined);
+        }
     }
     rerender(panel) {
         this.contentContainer.renderPanel(panel, { asActive: false });
@@ -275,6 +322,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (this.header.hidden) {
             result.hideHeader = true;
         }
+        if (this.headerPosition !== 'top') {
+            result.headerPosition = this.headerPosition;
+        }
         return result;
     }
     moveToNext(options) {
@@ -472,6 +522,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         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/esm/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/esm/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/esm/dockview/options.js

@@ -22,6 +22,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
         defaultRenderer: undefined,
+        defaultHeaderPosition: undefined,
         debug: undefined,
         rootOverlayModel: undefined,
         locked: undefined,

package/dist/esm/dom.js

@@ -267,9 +267,9 @@ export class Classnames {
 }
 const DEBOUCE_DELAY = 100;
 export function isChildEntirelyVisibleWithinParent(child, parent) {
-    //
     const childPosition = getDomNodePagePosition(child);
     const parentPosition = getDomNodePagePosition(parent);
+    // Check horizontal visibility
     if (childPosition.left < parentPosition.left) {
         return false;
     }
@@ -277,6 +277,14 @@ export 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;
 }
 export function onDidWindowMoveEnd(window) {

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

@@ -20,10 +20,13 @@ export class CompositeDisposable {
     }
     constructor(...args) {
         this._isDisposed = false;
-        this._disposables = args;
+        this._disposables = new Set(args);
     }
     addDisposables(...args) {
-        args.forEach((arg) => this._disposables.push(arg));
+        args.forEach((arg) => this._disposables.add(arg));
+    }
+    removeDisposable(disposable) {
+        this._disposables.delete(disposable);
     }
     dispose() {
         if (this._isDisposed) {
@@ -31,7 +34,7 @@ export class CompositeDisposable {
         }
         this._isDisposed = true;
         this._disposables.forEach((arg) => arg.dispose());
-        this._disposables = [];
+        this._disposables.clear();
     }
 }
 export class MutableDisposable {

package/dist/esm/overlay/overlay.js

@@ -20,7 +20,8 @@ class AriaLevelTracker {
     update() {
         for (let i = 0; i < this._orderedList.length; i++) {
             this._orderedList[i].setAttribute('aria-level', `${i}`);
-            this._orderedList[i].style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`;
+            this._orderedList[i].style.zIndex =
+                `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`;
         }
     }
 }

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

@@ -1,4 +1,4 @@
-import { toggleClass, watchElementResize } from './dom';
+import { addClasses, removeClasses, toggleClass, watchElementResize, } from './dom';
 import { addDisposableListener } from './events';
 import { CompositeDisposable } from './lifecycle';
 import { clamp } from './math';
@@ -6,30 +6,56 @@ export class Scrollbar extends CompositeDisposable {
     get element() {
         return this._element;
     }
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (this._orientation === value) {
+            return;
+        }
+        this._scrollOffset = 0;
+        this._orientation = value;
+        removeClasses(this._scrollbar, 'dv-scrollbar-vertical', 'dv-scrollbar-horizontal');
+        if (value === 'vertical') {
+            addClasses(this._scrollbar, 'dv-scrollbar-vertical');
+        }
+        else {
+            addClasses(this._scrollbar, 'dv-scrollbar-horizontal');
+        }
+    }
     constructor(scrollableElement) {
         super();
         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(addDisposableListener(this.element, 'wheel', (event) => {
-            this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
+            this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
             this.calculateScrollbarStyles();
-        }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
+        }), addDisposableListener(this._scrollbar, 'pointerdown', (event) => {
             event.preventDefault();
             toggleClass(this.element, 'dv-scrollable-scrolling', true);
-            const originalClientX = event.clientX;
-            const originalScrollLeft = this._scrollLeft;
+            const originalClient = this._orientation === 'horizontal'
+                ? event.clientX
+                : event.clientY;
+            const originalScrollOffset = this._scrollOffset;
             const onPointerMove = (event) => {
-                const deltaX = event.clientX - originalClientX;
-                const { clientWidth } = this.element;
-                const { scrollWidth } = this.scrollableElement;
-                const p = clientWidth / scrollWidth;
-                this._scrollLeft = originalScrollLeft + deltaX / p;
+                const delta = this._orientation === 'horizontal'
+                    ? event.clientX - originalClient
+                    : event.clientY - originalClient;
+                const clientSize = this._orientation === 'horizontal'
+                    ? this.element.clientWidth
+                    : this.element.clientHeight;
+                const scrollSize = this._orientation === 'horizontal'
+                    ? this.scrollableElement.scrollWidth
+                    : this.scrollableElement.scrollHeight;
+                const p = clientSize / scrollSize;
+                this._scrollOffset = originalScrollOffset + delta / p;
                 this.calculateScrollbarStyles();
             };
             const onEnd = () => {
@@ -44,7 +70,10 @@ export class Scrollbar extends CompositeDisposable {
         }), addDisposableListener(this.element, 'scroll', () => {
             this.calculateScrollbarStyles();
         }), addDisposableListener(this.scrollableElement, 'scroll', () => {
-            this._scrollLeft = this.scrollableElement.scrollLeft;
+            this._scrollOffset =
+                this._orientation === 'horizontal'
+                    ? this.scrollableElement.scrollLeft
+                    : this.scrollableElement.scrollTop;
             this.calculateScrollbarStyles();
         }), watchElementResize(this.element, () => {
             toggleClass(this.element, 'dv-scrollable-resizing', true);
@@ -59,21 +88,50 @@ export class Scrollbar extends CompositeDisposable {
         }));
     }
     calculateScrollbarStyles() {
-        const { clientWidth } = this.element;
-        const { scrollWidth } = this.scrollableElement;
-        const hasScrollbar = scrollWidth > clientWidth;
+        const clientSize = this._orientation === 'horizontal'
+            ? this.element.clientWidth
+            : this.element.clientHeight;
+        const scrollSize = this._orientation === 'horizontal'
+            ? this.scrollableElement.scrollWidth
+            : this.scrollableElement.scrollHeight;
+        const hasScrollbar = scrollSize > clientSize;
         if (hasScrollbar) {
-            const px = clientWidth * (clientWidth / scrollWidth);
-            this._horizontalScrollbar.style.width = `${px}px`;
-            this._scrollLeft = clamp(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
-            this.scrollableElement.scrollLeft = this._scrollLeft;
-            const percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
-            this._horizontalScrollbar.style.left = `${(clientWidth - px) * percentageComplete}px`;
+            const px = clientSize * (clientSize / scrollSize);
+            if (this._orientation === 'horizontal') {
+                this._scrollbar.style.width = `${px}px`;
+                this._scrollbar.style.height = '';
+            }
+            else {
+                this._scrollbar.style.height = `${px}px`;
+                this._scrollbar.style.width = '';
+            }
+            this._scrollOffset = clamp(this._scrollOffset, 0, scrollSize - clientSize);
+            if (this._orientation === 'horizontal') {
+                this.scrollableElement.scrollLeft = this._scrollOffset;
+            }
+            else {
+                this.scrollableElement.scrollTop = this._scrollOffset;
+            }
+            const percentageComplete = this._scrollOffset / (scrollSize - clientSize);
+            if (this._orientation === 'horizontal') {
+                this._scrollbar.style.left = `${(clientSize - px) * percentageComplete}px`;
+                this._scrollbar.style.top = '';
+            }
+            else {
+                this._scrollbar.style.top = `${(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;
         }
     }
 }