dockview-core 1.16.1 → 1.17.1

package/dist/esm/dom.d.ts

@@ -30,3 +30,10 @@ export declare function addTestId(element: HTMLElement, id: string): void;
 export declare function disableIframePointEvents(): {
     release: () => void;
 };
+export declare function getDockviewTheme(element: HTMLElement): string | undefined;
+export declare class Classnames {
+    private readonly element;
+    private _classNames;
+    constructor(element: HTMLElement);
+    setClassNames(classNames: string): void;
+}

package/dist/esm/dom.js

@@ -202,3 +202,39 @@ export function disableIframePointEvents() {
         },
     };
 }
+export function getDockviewTheme(element) {
+    function toClassList(element) {
+        const list = [];
+        for (let i = 0; i < element.classList.length; i++) {
+            list.push(element.classList.item(i));
+        }
+        return list;
+    }
+    let theme = undefined;
+    let parent = element;
+    while (parent !== null) {
+        theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+        if (typeof theme === 'string') {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    return theme;
+}
+export class Classnames {
+    constructor(element) {
+        this.element = element;
+        this._classNames = [];
+    }
+    setClassNames(classNames) {
+        for (const className of this._classNames) {
+            toggleClass(this.element, className, false);
+        }
+        this._classNames = classNames
+            .split(' ')
+            .filter((v) => v.trim().length > 0);
+        for (const className of this._classNames) {
+            toggleClass(this.element, className, true);
+        }
+    }
+}

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -12,7 +12,6 @@ export interface BaseGridOptions {
     readonly proportionalLayout: boolean;
     readonly orientation: Orientation;
     readonly styles?: ISplitviewStyles;
-    readonly parentElement: HTMLElement;
     readonly disableAutoResizing?: boolean;
     readonly locked?: boolean;
     readonly margin?: number;
@@ -63,7 +62,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidViewVisibilityChangeMicroTaskQueue;
     readonly onDidViewVisibilityChangeMicroTaskQueue: Event<void>;
-    private classNames;
+    private readonly _classNames;
     get id(): string;
     get size(): number;
     get groups(): T[];
@@ -76,7 +75,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     get activeGroup(): T | undefined;
     get locked(): boolean;
     set locked(value: boolean);
-    constructor(options: BaseGridOptions);
+    constructor(parentElement: HTMLElement, options: BaseGridOptions);
     abstract toJSON(): object;
     abstract fromJSON(data: any): void;
     abstract clear(): void;

package/dist/esm/gridview/baseComponentGridview.js

@@ -4,7 +4,7 @@ import { Disposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
 import { Sizing } from '../splitview/splitview';
 import { Resizable } from '../resizable';
-import { toggleClass } from '../dom';
+import { Classnames } from '../dom';
 const nextLayoutId = sequentialNumberGenerator();
 export function toTarget(direction) {
     switch (direction) {
@@ -58,8 +58,8 @@ export class BaseGrid extends Resizable {
     set locked(value) {
         this.gridview.locked = value;
     }
-    constructor(options) {
-        var _a, _b;
+    constructor(parentElement, options) {
+        var _a;
         super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._groups = new Map();
@@ -73,14 +73,11 @@ export class BaseGrid extends Resizable {
         this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
         this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
         this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
-        this.classNames = [];
         this.element.style.height = '100%';
         this.element.style.width = '100%';
-        this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-        for (const className of this.classNames) {
-            toggleClass(this.element, className, true);
-        }
-        options.parentElement.appendChild(this.element);
+        this._classNames = new Classnames(this.element);
+        this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+        parentElement.appendChild(this.element);
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
         this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
@@ -104,15 +101,27 @@ export class BaseGrid extends Resizable {
         return this.gridview.isViewVisible(getGridLocation(panel.element));
     }
     updateOptions(options) {
-        var _a, _b;
+        var _a, _b, _c, _d;
+        if (typeof options.proportionalLayout === 'boolean') {
+            // this.gridview.proportionalLayout = options.proportionalLayout; // not supported
+        }
+        if (options.orientation) {
+            this.gridview.orientation = options.orientation;
+        }
+        if ('styles' in options) {
+            // this.gridview.styles = options.styles; // not supported
+        }
+        if ('disableResizing' in options) {
+            this.disableResizing = (_a = options.disableAutoResizing) !== null && _a !== void 0 ? _a : false;
+        }
+        if ('locked' in options) {
+            this.locked = (_b = options.locked) !== null && _b !== void 0 ? _b : false;
+        }
+        if ('margin' in options) {
+            this.gridview.margin = (_c = options.margin) !== null && _c !== void 0 ? _c : 0;
+        }
         if ('className' in options) {
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, false);
-            }
-            this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, true);
-            }
+            this._classNames.setClassNames((_d = options.className) !== null && _d !== void 0 ? _d : '');
         }
     }
     maximizeGroup(panel) {

package/dist/esm/gridview/gridviewComponent.js

@@ -21,8 +21,7 @@ export class GridviewComponent extends BaseGrid {
         this._deserializer = value;
     }
     constructor(parentElement, options) {
-        super({
-            parentElement: parentElement,
+        super(parentElement, {
             proportionalLayout: options.proportionalLayout,
             orientation: options.orientation,
             styles: options.styles,

package/dist/esm/gridview/gridviewPanel.d.ts

@@ -6,6 +6,12 @@ import { LayoutPriority } from '../splitview/splitview';
 import { Event } from '../events';
 import { IViewSize } from './gridview';
 import { BaseGrid, IGridPanelView } from './baseComponentGridview';
+export interface Contraints {
+    minimumWidth?: number;
+    maximumWidth?: number;
+    minimumHeight?: number;
+    maximumHeight?: number;
+}
 export interface GridviewInitParameters extends PanelInitParameters {
     minimumWidth?: number;
     maximumWidth?: number;

package/dist/esm/overlay/overlay.js

@@ -154,7 +154,7 @@ export class Overlay extends CompositeDisposable {
                 dispose: () => {
                     iframes.release();
                 },
-            }, addDisposableWindowListener(window, 'mousemove', (e) => {
+            }, addDisposableWindowListener(window, 'pointermove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const x = e.clientX - containerRect.left;
                 const y = e.clientY - containerRect.top;
@@ -191,13 +191,13 @@ export class Overlay extends CompositeDisposable {
                     bounds.right = right;
                 }
                 this.setBounds(bounds);
-            }), addDisposableWindowListener(window, 'mouseup', () => {
+            }), addDisposableWindowListener(window, 'pointerup', () => {
                 toggleClass(this._element, 'dv-resize-container-dragging', false);
                 move.dispose();
                 this._onDidChangeEnd.fire();
             }));
         };
-        this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+        this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 event.preventDefault();
                 return;
@@ -208,7 +208,7 @@ export class Overlay extends CompositeDisposable {
                 return;
             }
             track();
-        }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+        }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }
@@ -220,7 +220,7 @@ export class Overlay extends CompositeDisposable {
             if (event.shiftKey) {
                 track();
             }
-        }), addDisposableListener(this.options.content, 'mousedown', () => {
+        }), addDisposableListener(this.options.content, 'pointerdown', () => {
             arialLevelTracker.push(this._element);
         }, true));
         if (options.inDragMode) {
@@ -232,11 +232,11 @@ export class Overlay extends CompositeDisposable {
         resizeHandleElement.className = `dv-resize-handle-${direction}`;
         this._element.appendChild(resizeHandleElement);
         const move = new MutableDisposable();
-        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'pointerdown', (e) => {
             e.preventDefault();
             let startPosition = null;
             const iframes = disableIframePointEvents();
-            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointermove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const overlayRect = this._element.getBoundingClientRect();
                 const y = e.clientY - containerRect.top;
@@ -360,7 +360,7 @@ export class Overlay extends CompositeDisposable {
                 dispose: () => {
                     iframes.release();
                 },
-            }, addDisposableWindowListener(window, 'mouseup', () => {
+            }, addDisposableWindowListener(window, 'pointerup', () => {
                 move.dispose();
                 this._onDidChangeEnd.fire();
             }));

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -103,7 +103,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    private classNames;
+    private readonly _classNames;
     get id(): string;
     get panels(): PaneviewPanel[];
     set paneview(value: Paneview);

package/dist/esm/paneview/paneviewComponent.js

@@ -8,7 +8,7 @@ import { DraggablePaneviewPanel, } from './draggablePaneviewPanel';
 import { DefaultHeader } from './defaultPaneviewHeader';
 import { sequentialNumberGenerator } from '../math';
 import { Resizable } from '../resizable';
-import { toggleClass } from '../dom';
+import { Classnames } from '../dom';
 const nextLayoutId = sequentialNumberGenerator();
 export class PaneFramework extends DraggablePaneviewPanel {
     constructor(options) {
@@ -58,7 +58,7 @@ export class PaneviewComponent extends Resizable {
         return this._options;
     }
     constructor(parentElement, options) {
-        var _a, _b;
+        var _a;
         super(parentElement, options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
@@ -73,12 +73,9 @@ export class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this.classNames = [];
         this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
-        this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-        for (const className of this.classNames) {
-            toggleClass(this.element, className, true);
-        }
+        this._classNames = new Classnames(this.element);
+        this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -102,13 +99,10 @@ export class PaneviewComponent extends Resizable {
     updateOptions(options) {
         var _a, _b;
         if ('className' in options) {
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, false);
-            }
-            this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, true);
-            }
+            this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+        }
+        if ('disableResizing' in options) {
+            this.disableResizing = (_b = options.disableAutoResizing) !== null && _b !== void 0 ? _b : false;
         }
         this._options = Object.assign(Object.assign({}, this.options), options);
     }

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -72,7 +72,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     readonly onDidRemoveView: Event<IView>;
     private readonly _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
-    private classNames;
+    private readonly _classNames;
     get panels(): SplitviewPanel[];
     get options(): SplitviewComponentOptions;
     get length(): number;

package/dist/esm/splitview/splitviewComponent.js

@@ -3,7 +3,7 @@ import { Orientation, Sizing, Splitview, } from './splitview';
 import { Emitter } from '../events';
 import { createComponent } from '../panel/componentFactory';
 import { Resizable } from '../resizable';
-import { toggleClass } from '../dom';
+import { Classnames } from '../dom';
 /**
  * A high-level implementation of splitview that works using 'panels'
  */
@@ -46,7 +46,7 @@ export class SplitviewComponent extends Resizable {
             : this.splitview.orthogonalSize;
     }
     constructor(parentElement, options) {
-        var _a, _b;
+        var _a;
         super(parentElement, options.disableAutoResizing);
         this._splitviewChangeDisposable = new MutableDisposable();
         this._panels = new Map();
@@ -58,11 +58,8 @@ export class SplitviewComponent extends Resizable {
         this.onDidRemoveView = this._onDidRemoveView.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
-        this.classNames = [];
-        this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-        for (const className of this.classNames) {
-            toggleClass(this.element, className, true);
-        }
+        this._classNames = new Classnames(this.element);
+        this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -76,20 +73,15 @@ export class SplitviewComponent extends Resizable {
     updateOptions(options) {
         var _a, _b;
         if ('className' in options) {
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, false);
-            }
-            this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-            for (const className of this.classNames) {
-                toggleClass(this.element, className, true);
-            }
+            this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         }
-        const hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
-        this._options = Object.assign(Object.assign({}, this.options), options);
-        if (hasOrientationChanged) {
+        if ('disableResizing' in options) {
+            this.disableResizing = (_b = options.disableAutoResizing) !== null && _b !== void 0 ? _b : false;
+        }
+        if (typeof options.orientation === 'string') {
             this.splitview.orientation = options.orientation;
         }
+        this._options = Object.assign(Object.assign({}, this.options), options);
         this.splitview.layout(this.splitview.size, this.splitview.orthogonalSize);
     }
     focus() {

package/dist/styles/dockview.css

@@ -200,7 +200,7 @@
   --dv-group-view-background-color: #ebeced;
   --dv-tabs-and-actions-container-background-color: #fcfcfc;
   --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
-  --dv-activegroup-hiddenpanel-tab-background-color: ##fcfcfc;
+  --dv-activegroup-hiddenpanel-tab-background-color: #fcfcfc;
   --dv-inactivegroup-visiblepanel-tab-background-color: #f0f1f2;
   --dv-inactivegroup-hiddenpanel-tab-background-color: #fcfcfc;
   --dv-tab-divider-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.16.1",
+  "version": "1.17.1",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",