dockview-core 1.15.3 → 1.16.1

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

@@ -103,6 +103,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private classNames;
     get id(): string;
     get panels(): PaneviewPanel[];
     set paneview(value: Paneview);
@@ -112,7 +113,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get height(): number;
     get width(): number;
     get options(): PaneviewComponentOptions;
-    constructor(options: PaneviewComponentOptions);
+    constructor(parentElement: HTMLElement, options: PaneviewComponentOptions);
     setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;

package/dist/cjs/paneview/paneviewComponent.js

@@ -25,6 +25,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -41,17 +52,6 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaneviewComponent = exports.PaneFramework = void 0;
 var component_api_1 = require("../api/component.api");
@@ -64,6 +64,7 @@ var draggablePaneviewPanel_1 = require("./draggablePaneviewPanel");
 var defaultPaneviewHeader_1 = require("./defaultPaneviewHeader");
 var math_1 = require("../math");
 var resizable_1 = require("../resizable");
+var dom_1 = require("../dom");
 var nextLayoutId = (0, math_1.sequentialNumberGenerator)();
 var PaneFramework = /** @class */ (function (_super) {
     __extends(PaneFramework, _super);
@@ -83,8 +84,10 @@ var PaneFramework = /** @class */ (function (_super) {
 exports.PaneFramework = PaneFramework;
 var PaneviewComponent = /** @class */ (function (_super) {
     __extends(PaneviewComponent, _super);
-    function PaneviewComponent(options) {
-        var _this = _super.call(this, options.parentElement, options.disableAutoResizing) || this;
+    function PaneviewComponent(parentElement, options) {
+        var e_1, _a;
+        var _b, _c;
+        var _this = _super.call(this, parentElement, options.disableAutoResizing) || this;
         _this._id = nextLayoutId.next();
         _this._disposable = new lifecycle_1.MutableDisposable();
         _this._viewDisposables = new Map();
@@ -98,7 +101,22 @@ var PaneviewComponent = /** @class */ (function (_super) {
         _this.onDidAddView = _this._onDidAddView.event;
         _this._onDidRemoveView = new events_1.Emitter();
         _this.onDidRemoveView = _this._onDidRemoveView.event;
+        _this.classNames = [];
         _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView);
+        _this.classNames = (_c = (_b = options.className) === null || _b === void 0 ? void 0 : _b.split(' ')) !== null && _c !== void 0 ? _c : [];
+        try {
+            for (var _d = __values(_this.classNames), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var className = _e.value;
+                (0, dom_1.toggleClass)(_this.element, className, true);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         _this._options = options;
         if (!options.components) {
             options.components = {};
@@ -188,6 +206,37 @@ var PaneviewComponent = /** @class */ (function (_super) {
         //noop
     };
     PaneviewComponent.prototype.updateOptions = function (options) {
+        var e_2, _a, e_3, _b;
+        var _c, _d;
+        if ('className' in options) {
+            try {
+                for (var _e = __values(this.classNames), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var className = _f.value;
+                    (0, dom_1.toggleClass)(this.element, className, false);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.classNames = (_d = (_c = options.className) === null || _c === void 0 ? void 0 : _c.split(' ')) !== null && _d !== void 0 ? _d : [];
+            try {
+                for (var _g = __values(this.classNames), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var className = _h.value;
+                    (0, dom_1.toggleClass)(this.element, className, true);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
         this._options = __assign(__assign({}, this.options), options);
     };
     PaneviewComponent.prototype.addPanel = function (options) {
@@ -351,19 +400,19 @@ var PaneviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutfromJSON.fire();
     };
     PaneviewComponent.prototype.clear = function () {
-        var e_1, _a;
+        var e_4, _a;
         try {
             for (var _b = __values(this._viewDisposables.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var _d = __read(_c.value, 2), _ = _d[0], value = _d[1];
                 value.dispose();
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         this._viewDisposables.clear();
         this.paneview.dispose();
@@ -383,7 +432,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
         }
     };
     PaneviewComponent.prototype.dispose = function () {
-        var e_2, _a;
+        var e_5, _a;
         _super.prototype.dispose.call(this);
         try {
             for (var _b = __values(this._viewDisposables.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -391,12 +440,12 @@ var PaneviewComponent = /** @class */ (function (_super) {
                 value.dispose();
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         this._viewDisposables.clear();
         this.paneview.dispose();

package/dist/cjs/splitview/options.d.ts

@@ -19,5 +19,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions {
         [componentName: string]: any;
     };
     frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
-    parentElement: HTMLElement;
+    className?: string;
 }

package/dist/cjs/splitview/splitview.js

@@ -473,34 +473,21 @@ var Splitview = /** @class */ (function () {
             var sash_1 = document.createElement('div');
             sash_1.className = 'sash';
             var onPointerStart_1 = function (event) {
-                var e_3, _a, e_4, _b;
+                var e_3, _a;
                 try {
-                    for (var _c = __values(_this.viewItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                        var item = _d.value;
+                    for (var _b = __values(_this.viewItems), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var item = _c.value;
                         item.enabled = false;
                     }
                 }
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
-                var iframes = __spreadArray(__spreadArray([], __read((0, dom_1.getElementsByTagName)('iframe')), false), __read((0, dom_1.getElementsByTagName)('webview')), false);
-                try {
-                    for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {
-                        var iframe = iframes_1_1.value;
-                        iframe.style.pointerEvents = 'none';
-                    }
-                }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                finally {
-                    try {
-                        if (iframes_1_1 && !iframes_1_1.done && (_b = iframes_1.return)) _b.call(iframes_1);
-                    }
-                    finally { if (e_4) throw e_4.error; }
-                }
+                var iframes = (0, dom_1.disableIframePointEvents)();
                 var start = _this._orientation === Orientation.HORIZONTAL
                     ? event.clientX
                     : event.clientY;
@@ -565,33 +552,21 @@ var Splitview = /** @class */ (function () {
                     _this.layoutViews();
                 };
                 var end = function () {
-                    var e_5, _a, e_6, _b;
+                    var e_4, _a;
                     try {
-                        for (var _c = __values(_this.viewItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                            var item = _d.value;
+                        for (var _b = __values(_this.viewItems), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var item = _c.value;
                             item.enabled = true;
                         }
                     }
-                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-                        }
-                        finally { if (e_5) throw e_5.error; }
-                    }
-                    try {
-                        for (var iframes_2 = __values(iframes), iframes_2_1 = iframes_2.next(); !iframes_2_1.done; iframes_2_1 = iframes_2.next()) {
-                            var iframe = iframes_2_1.value;
-                            iframe.style.pointerEvents = 'auto';
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                         }
+                        finally { if (e_4) throw e_4.error; }
                     }
-                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                    finally {
-                        try {
-                            if (iframes_2_1 && !iframes_2_1.done && (_b = iframes_2.return)) _b.call(iframes_2);
-                        }
-                        finally { if (e_6) throw e_6.error; }
-                    }
+                    iframes.release();
                     _this.saveProportions();
                     document.removeEventListener('pointermove', onPointerMove);
                     document.removeEventListener('pointerup', end);
@@ -624,7 +599,7 @@ var Splitview = /** @class */ (function () {
         this._onDidAddView.fire(view);
     };
     Splitview.prototype.distributeViewSizes = function () {
-        var e_7, _a, e_8, _b;
+        var e_5, _a, e_6, _b;
         var _this = this;
         var flexibleViewItems = [];
         var flexibleSize = 0;
@@ -637,12 +612,12 @@ var Splitview = /** @class */ (function () {
                 }
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         var size = Math.floor(flexibleSize / flexibleViewItems.length);
         try {
@@ -651,12 +626,12 @@ var Splitview = /** @class */ (function () {
                 item.size = (0, math_1.clamp)(size, item.minimumSize, item.maximumSize);
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (flexibleViewItems_1_1 && !flexibleViewItems_1_1.done && (_b = flexibleViewItems_1.return)) _b.call(flexibleViewItems_1);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         var indexes = (0, math_1.range)(this.viewItems.length);
         var lowPriorityIndexes = indexes.filter(function (i) { return _this.viewItems[i].priority === LayoutPriority.Low; });
@@ -740,7 +715,7 @@ var Splitview = /** @class */ (function () {
         this.saveProportions();
     };
     Splitview.prototype.distributeEmptySpace = function (lowPriorityIndex) {
-        var e_9, _a, e_10, _b;
+        var e_7, _a, e_8, _b;
         var _this = this;
         var contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
         var emptyDelta = this.size - contentSize;
@@ -753,12 +728,12 @@ var Splitview = /** @class */ (function () {
                 (0, array_1.pushToStart)(indexes, index);
             }
         }
-        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (highPriorityIndexes_2_1 && !highPriorityIndexes_2_1.done && (_a = highPriorityIndexes_2.return)) _a.call(highPriorityIndexes_2);
             }
-            finally { if (e_9) throw e_9.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         try {
             for (var lowPriorityIndexes_2 = __values(lowPriorityIndexes), lowPriorityIndexes_2_1 = lowPriorityIndexes_2.next(); !lowPriorityIndexes_2_1.done; lowPriorityIndexes_2_1 = lowPriorityIndexes_2.next()) {
@@ -766,12 +741,12 @@ var Splitview = /** @class */ (function () {
                 (0, array_1.pushToEnd)(indexes, index);
             }
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (lowPriorityIndexes_2_1 && !lowPriorityIndexes_2_1.done && (_b = lowPriorityIndexes_2.return)) _b.call(lowPriorityIndexes_2);
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         if (typeof lowPriorityIndex === 'number') {
             (0, array_1.pushToEnd)(indexes, lowPriorityIndex);
@@ -808,29 +783,47 @@ var Splitview = /** @class */ (function () {
         if (this.viewItems.length === 0) {
             return;
         }
-        var sashCount = this.viewItems.length - 1;
-        var marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+        var visibleViewItems = this.viewItems.filter(function (i) { return i.visible; });
+        var sashCount = Math.max(0, visibleViewItems.length - 1);
+        var marginReducedSize = (this.margin * sashCount) / Math.max(1, visibleViewItems.length);
         var totalLeftOffset = 0;
         var viewLeftOffsets = [];
-        for (var i = 0; i < this.viewItems.length - 1; i++) {
-            totalLeftOffset += this.viewItems[i].size;
-            viewLeftOffsets.push(totalLeftOffset);
-            var offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
-            if (this._orientation === Orientation.HORIZONTAL) {
-                this.sashes[i].container.style.left = "".concat(offset, "px");
-                this.sashes[i].container.style.top = "0px";
+        var sashWidth = 4; // hardcoded in css
+        var runningVisiblePanelCount = this.viewItems.reduce(function (arr, viewItem, i) {
+            var flag = viewItem.visible ? 1 : 0;
+            if (i === 0) {
+                arr.push(flag);
             }
-            if (this._orientation === Orientation.VERTICAL) {
-                this.sashes[i].container.style.left = "0px";
-                this.sashes[i].container.style.top = "".concat(offset, "px");
+            else {
+                arr.push(arr[i - 1] + flag);
             }
-        }
+            return arr;
+        }, []);
+        // calculate both view and cash positions
         this.viewItems.forEach(function (view, i) {
-            var size = view.size - marginReducedSize;
-            var offset = i === 0
+            totalLeftOffset += _this.viewItems[i].size;
+            viewLeftOffsets.push(totalLeftOffset);
+            var size = view.visible ? view.size - marginReducedSize : 0;
+            var visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+            var offset = i === 0 || visiblePanelsBeforeThisView === 0
                 ? 0
                 : viewLeftOffsets[i - 1] +
-                    (i / sashCount) * marginReducedSize;
+                    (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+            if (i < _this.viewItems.length - 1) {
+                // calculate sash position
+                var newSize = view.visible
+                    ? offset + size - sashWidth / 2 + _this.margin / 2
+                    : offset;
+                if (_this._orientation === Orientation.HORIZONTAL) {
+                    _this.sashes[i].container.style.left = "".concat(newSize, "px");
+                    _this.sashes[i].container.style.top = "0px";
+                }
+                if (_this._orientation === Orientation.VERTICAL) {
+                    _this.sashes[i].container.style.left = "0px";
+                    _this.sashes[i].container.style.top = "".concat(newSize, "px");
+                }
+            }
+            // calculate view position
             if (_this._orientation === Orientation.HORIZONTAL) {
                 view.container.style.width = "".concat(size, "px");
                 view.container.style.left = "".concat(offset, "px");
@@ -847,7 +840,7 @@ var Splitview = /** @class */ (function () {
         });
     };
     Splitview.prototype.findFirstSnapIndex = function (indexes) {
-        var e_11, _a, e_12, _b;
+        var e_9, _a, e_10, _b;
         try {
             // visible views first
             for (var indexes_1 = __values(indexes), indexes_1_1 = indexes_1.next(); !indexes_1_1.done; indexes_1_1 = indexes_1.next()) {
@@ -861,12 +854,12 @@ var Splitview = /** @class */ (function () {
                 }
             }
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
         finally {
             try {
                 if (indexes_1_1 && !indexes_1_1.done && (_a = indexes_1.return)) _a.call(indexes_1);
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_9) throw e_9.error; }
         }
         try {
             // then, hidden views
@@ -882,12 +875,12 @@ var Splitview = /** @class */ (function () {
                 }
             }
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (indexes_2_1 && !indexes_2_1.done && (_b = indexes_2.return)) _b.call(indexes_2);
             }
-            finally { if (e_12) throw e_12.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         return undefined;
     };
@@ -971,7 +964,7 @@ var Splitview = /** @class */ (function () {
         return element;
     };
     Splitview.prototype.dispose = function () {
-        var e_13, _a;
+        var e_11, _a;
         this._onDidSashEnd.dispose();
         this._onDidAddView.dispose();
         this._onDidRemoveView.dispose();
@@ -987,12 +980,12 @@ var Splitview = /** @class */ (function () {
                 viewItem.dispose();
             }
         }
-        catch (e_13_1) { e_13 = { error: e_13_1 }; }
+        catch (e_11_1) { e_11 = { error: e_11_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_13) throw e_13.error; }
+            finally { if (e_11) throw e_11.error; }
         }
         this.element.remove();
     };

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

@@ -1,5 +1,5 @@
 import { IDisposable } from '../lifecycle';
-import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview, SplitViewOptions } from './splitview';
 import { SplitviewComponentOptions } from './options';
 import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Event } from '../events';
@@ -31,7 +31,6 @@ export interface AddSplitviewComponentOptions<T extends Parameters = Parameters>
     minimumSize?: number;
     maximumSize?: number;
 }
-export type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface ISplitviewComponent extends IDisposable {
     readonly minimumSize: number;
     readonly maximumSize: number;
@@ -43,7 +42,7 @@ export interface ISplitviewComponent extends IDisposable {
     readonly onDidRemoveView: Event<IView>;
     readonly onDidLayoutFromJSON: Event<void>;
     readonly panels: SplitviewPanel[];
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitViewOptions>): void;
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     layout(width: number, height: number): void;
     onDidLayoutChange: Event<void>;
@@ -73,6 +72,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     readonly onDidRemoveView: Event<IView>;
     private readonly _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
+    private classNames;
     get panels(): SplitviewPanel[];
     get options(): SplitviewComponentOptions;
     get length(): number;
@@ -83,8 +83,8 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     get maximumSize(): number;
     get height(): number;
     get width(): number;
-    constructor(options: SplitviewComponentOptions);
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    constructor(parentElement: HTMLElement, options: SplitviewComponentOptions);
+    updateOptions(options: Partial<SplitviewComponentOptions>): void;
     focus(): void;
     movePanel(from: number, to: number): void;
     setVisible(panel: SplitviewPanel, visible: boolean): void;