dockview-core 4.13.1 → 5.1.0

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

@@ -135,6 +135,9 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
         if (!this.map[panel.api.id]) {
             var 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: panel,
                 disposable: lifecycle_1.Disposable.NONE,
@@ -171,6 +174,11 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
                 focusContainer.style.top = "".concat(top, "px");
                 focusContainer.style.width = "".concat(width, "px");
                 focusContainer.style.height = "".concat(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 = '';
+                }
                 (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
             });
         };

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;