dockview-core 4.13.1 → 5.1.0

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/overlay/overlayRenderContainer.js

@@ -79,6 +79,9 @@ export class OverlayRenderContainer extends CompositeDisposable {
         if (!this.map[panel.api.id]) {
             const element = createFocusableElement();
             element.className = 'dv-render-overlay';
+            // Hide until the first RAF-based position is applied to prevent a
+            // one-frame flash at position 0,0 when the element is first attached.
+            element.style.visibility = 'hidden';
             this.map[panel.api.id] = {
                 panel,
                 disposable: Disposable.NONE,
@@ -115,6 +118,11 @@ export class OverlayRenderContainer extends CompositeDisposable {
                 focusContainer.style.top = `${top}px`;
                 focusContainer.style.width = `${width}px`;
                 focusContainer.style.height = `${height}px`;
+                // Reveal after the first position is applied (was hidden to
+                // prevent a flash at 0,0 before the initial layout fires).
+                if (focusContainer.style.visibility === 'hidden') {
+                    focusContainer.style.visibility = '';
+                }
                 toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
             });
         };

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;
         }
     }
 }