dockview-core 3.1.1 → 4.0.0

package/dist/esm/scrollbar.js

@@ -0,0 +1,80 @@
+import { toggleClass, watchElementResize } from './dom';
+import { addDisposableListener } from './events';
+import { CompositeDisposable } from './lifecycle';
+import { clamp } from './math';
+export class Scrollbar extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor(scrollableElement) {
+        super();
+        this.scrollableElement = scrollableElement;
+        this._scrollLeft = 0;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-scrollable';
+        this._horizontalScrollbar = document.createElement('div');
+        this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
+        this.element.appendChild(scrollableElement);
+        this.element.appendChild(this._horizontalScrollbar);
+        this.addDisposables(addDisposableListener(this.element, 'wheel', (event) => {
+            this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
+            this.calculateScrollbarStyles();
+        }), addDisposableListener(this._horizontalScrollbar, 'pointerdown', (event) => {
+            event.preventDefault();
+            toggleClass(this.element, 'dv-scrollable-scrolling', true);
+            const originalClientX = event.clientX;
+            const originalScrollLeft = this._scrollLeft;
+            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;
+                this.calculateScrollbarStyles();
+            };
+            const onEnd = () => {
+                toggleClass(this.element, 'dv-scrollable-scrolling', false);
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onEnd);
+                document.removeEventListener('pointercancel', onEnd);
+            };
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onEnd);
+            document.addEventListener('pointercancel', onEnd);
+        }), addDisposableListener(this.element, 'scroll', () => {
+            this.calculateScrollbarStyles();
+        }), addDisposableListener(this.scrollableElement, 'scroll', () => {
+            this._scrollLeft = this.scrollableElement.scrollLeft;
+            this.calculateScrollbarStyles();
+        }), watchElementResize(this.element, () => {
+            toggleClass(this.element, 'dv-scrollable-resizing', true);
+            if (this._animationTimer) {
+                clearTimeout(this._animationTimer);
+            }
+            this._animationTimer = setTimeout(() => {
+                clearTimeout(this._animationTimer);
+                toggleClass(this.element, 'dv-scrollable-resizing', false);
+            }, 500);
+            this.calculateScrollbarStyles();
+        }));
+    }
+    calculateScrollbarStyles() {
+        const { clientWidth } = this.element;
+        const { scrollWidth } = this.scrollableElement;
+        const hasScrollbar = scrollWidth > clientWidth;
+        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`;
+        }
+        else {
+            this._horizontalScrollbar.style.width = `0px`;
+            this._horizontalScrollbar.style.left = `0px`;
+            this._scrollLeft = 0;
+        }
+    }
+}
+Scrollbar.MouseWheelSpeed = 1;

package/dist/esm/splitview/splitview.js

@@ -112,6 +112,7 @@ export class Splitview {
     }
     set margin(value) {
         this._margin = value;
+        toggleClass(this.element, 'dv-splitview-has-margin', value !== 0);
     }
     constructor(container, options) {
         var _a, _b;

package/dist/esm/splitview/splitviewComponent.js

@@ -258,6 +258,7 @@ export class SplitviewComponent extends Resizable {
         for (const view of views) {
             view.dispose();
         }
+        this.element.remove();
         super.dispose();
     }
 }