dockview-core 1.14.2 → 1.15.0

package/dist/cjs/gridview/gridview.js

@@ -47,7 +47,7 @@ function findLeaf(candiateNode, last) {
 }
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof branchNode_1.BranchNode) {
-        var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
+        var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
         var totalSize = 0;
         for (var i = node.children.length - 1; i >= 0; i--) {
             var child = node.children[i];
@@ -162,19 +162,24 @@ var serializeBranchNode = function (node, orientation) {
     };
 };
 var Gridview = /** @class */ (function () {
-    function Gridview(proportionalLayout, styles, orientation) {
+    function Gridview(proportionalLayout, styles, orientation, locked, margin) {
         this.proportionalLayout = proportionalLayout;
         this.styles = styles;
         this._locked = false;
+        this._margin = 0;
         this._maximizedNode = undefined;
         this.disposable = new lifecycle_1.MutableDisposable();
         this._onDidChange = new events_1.Emitter();
         this.onDidChange = this._onDidChange.event;
+        this._onDidViewVisibilityChange = new events_1.Emitter();
+        this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
         this._onDidMaximizedNodeChange = new events_1.Emitter();
         this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
         this.element.className = 'grid-view';
-        this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
+        this._locked = locked !== null && locked !== void 0 ? locked : false;
+        this._margin = margin !== null && margin !== void 0 ? margin : 0;
+        this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
     }
     Object.defineProperty(Gridview.prototype, "length", {
         get: function () {
@@ -263,6 +268,17 @@ var Gridview = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Gridview.prototype, "margin", {
+        get: function () {
+            return this._margin;
+        },
+        set: function (value) {
+            this._margin = value;
+            this.root.margin = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Gridview.prototype.maximizedView = function () {
         var _a;
         return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -348,13 +364,14 @@ var Gridview = /** @class */ (function () {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this._onDidMaximizedNodeChange.dispose();
+        this._onDidViewVisibilityChange.dispose();
         this.root.dispose();
         this._maximizedNode = undefined;
         this.element.remove();
     };
     Gridview.prototype.clear = function () {
         var orientation = this.root.orientation;
-        this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
+        this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
     };
     Gridview.prototype.deserialize = function (json, deserializer) {
         var orientation = json.orientation;
@@ -366,6 +383,7 @@ var Gridview = /** @class */ (function () {
     };
     Gridview.prototype._deserializeNode = function (node, orientation, deserializer, orthogonalSize) {
         var _this = this;
+        var _a;
         var result;
         if (node.type === 'branch') {
             var serializedChildren = node.data;
@@ -377,10 +395,14 @@ var Gridview = /** @class */ (function () {
             });
             result = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
             orthogonalSize, // <- size - flips at each depth,
-            this._locked, children);
+            this.locked, this.margin, children);
         }
         else {
-            result = new leafNode_1.LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+            var view = deserializer.fromJSON(node);
+            if (typeof node.visible === 'boolean') {
+                (_a = view.setVisible) === null || _a === void 0 ? void 0 : _a.call(view, node.visible);
+            }
+            result = new leafNode_1.LeafNode(view, orientation, orthogonalSize, node.size);
         }
         return result;
     };
@@ -416,7 +438,7 @@ var Gridview = /** @class */ (function () {
         }
         var oldRoot = this.root;
         oldRoot.element.remove();
-        this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
+        this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this.locked, this.margin);
         if (oldRoot.children.length === 0) {
             // no data so no need to add anything back in
         }
@@ -501,6 +523,7 @@ var Gridview = /** @class */ (function () {
         if (!(parent instanceof branchNode_1.BranchNode)) {
             throw new Error('Invalid from location');
         }
+        this._onDidViewVisibilityChange.fire();
         parent.setChildVisible(index, visible);
     };
     Gridview.prototype.moveView = function (parentLocation, from, to) {
@@ -533,7 +556,7 @@ var Gridview = /** @class */ (function () {
             }
             var child = grandParent.removeChild(parentIndex);
             child.dispose();
-            var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
+            var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
             grandParent.addChild(newParent, parent.size, parentIndex);
             var newSibling = new leafNode_1.LeafNode(parent.view, grandParent.orientation, parent.size);
             newParent.addChild(newSibling, newSiblingSize, 0);

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

@@ -44,6 +44,7 @@ export declare abstract class GridviewPanel<T extends GridviewPanelApiImpl = Gri
     get maximumHeight(): number;
     get maximumWidth(): number;
     get isActive(): boolean;
+    get isVisible(): boolean;
     constructor(id: string, component: string, options?: {
         minimumWidth?: number;
         maximumWidth?: number;

package/dist/cjs/gridview/gridviewPanel.js

@@ -167,6 +167,13 @@ var GridviewPanel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(GridviewPanel.prototype, "isVisible", {
+        get: function () {
+            return this.api.isVisible;
+        },
+        enumerable: false,
+        configurable: true
+    });
     GridviewPanel.prototype.setVisible = function (isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible: isVisible });
     };

package/dist/cjs/math.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.range = exports.sequentialNumberGenerator = exports.clamp = void 0;
 var clamp = function (value, min, max) {
     if (min > max) {
-        throw new Error("".concat(min, " > ").concat(max, " is an invalid condition"));
+        /**
+         * caveat: an error should be thrown here if this was a proper `clamp` function but we need to handle
+         * cases where `min` > `max` and in those cases return `min`.
+         */
+        return min;
     }
     return Math.min(max, Math.max(value, min));
 };

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

@@ -18,6 +18,7 @@ export interface SplitViewOptions {
     readonly descriptor?: ISplitViewDescriptor;
     readonly proportionalLayout?: boolean;
     readonly styles?: ISplitviewStyles;
+    readonly margin?: number;
 }
 export declare enum LayoutPriority {
     Low = "low",// view is offered space last
@@ -80,6 +81,7 @@ export declare class Splitview {
     private _startSnappingEnabled;
     private _endSnappingEnabled;
     private _disabled;
+    private _margin;
     private readonly _onDidSashEnd;
     readonly onDidSashEnd: Event<void>;
     private readonly _onDidAddView;
@@ -103,6 +105,8 @@ export declare class Splitview {
     set endSnappingEnabled(endSnappingEnabled: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    get margin(): number;
+    set margin(value: number);
     constructor(container: HTMLElement, options: SplitViewOptions);
     style(styles?: ISplitviewStyles): void;
     isViewVisible(index: number): boolean;
@@ -120,6 +124,15 @@ export declare class Splitview {
     private relayout;
     private distributeEmptySpace;
     private saveProportions;
+    /**
+     * Margin explain:
+     *
+     * For `n` views in a splitview there will be `n-1` margins `m`.
+     *
+     * To fit the margins each view must reduce in size by `(m * (n - 1)) / n`.
+     *
+     * For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
+     */
     private layoutViews;
     private findFirstSnapIndex;
     private updateSashEnablement;

package/dist/cjs/splitview/splitview.js

@@ -79,6 +79,7 @@ var Sizing;
 var Splitview = /** @class */ (function () {
     function Splitview(container, options) {
         var _this = this;
+        var _a;
         this.container = container;
         this.viewItems = [];
         this.sashes = [];
@@ -89,6 +90,7 @@ var Splitview = /** @class */ (function () {
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
         this._disabled = false;
+        this._margin = 0;
         this._onDidSashEnd = new events_1.Emitter();
         this.onDidSashEnd = this._onDidSashEnd.event;
         this._onDidAddView = new events_1.Emitter();
@@ -201,6 +203,7 @@ var Splitview = /** @class */ (function () {
         };
         this._orientation = options.orientation;
         this.element = this.createContainer();
+        this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
         this.proportionalLayout =
             options.proportionalLayout === undefined
                 ? true
@@ -345,6 +348,16 @@ var Splitview = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Splitview.prototype, "margin", {
+        get: function () {
+            return this._margin;
+        },
+        set: function (value) {
+            this._margin = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Splitview.prototype.style = function (styles) {
         if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
             (0, dom_1.removeClasses)(this.element, 'separator-border');
@@ -368,9 +381,7 @@ var Splitview = /** @class */ (function () {
         if (index < 0 || index >= this.viewItems.length) {
             throw new Error('Index out of bounds');
         }
-        (0, dom_1.toggleClass)(this.container, 'visible', visible);
         var viewItem = this.viewItems[index];
-        (0, dom_1.toggleClass)(this.container, 'visible', visible);
         viewItem.setVisible(visible, viewItem.size);
         this.distributeEmptySpace(index);
         this.layoutViews();
@@ -781,16 +792,30 @@ var Splitview = /** @class */ (function () {
             });
         }
     };
+    /**
+     * Margin explain:
+     *
+     * For `n` views in a splitview there will be `n-1` margins `m`.
+     *
+     * To fit the margins each view must reduce in size by `(m * (n - 1)) / n`.
+     *
+     * For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
+     */
     Splitview.prototype.layoutViews = function () {
         var _this = this;
         this._contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
-        var sum = 0;
-        var x = [];
         this.updateSashEnablement();
+        if (this.viewItems.length === 0) {
+            return;
+        }
+        var sashCount = this.viewItems.length - 1;
+        var marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+        var totalLeftOffset = 0;
+        var viewLeftOffsets = [];
         for (var i = 0; i < this.viewItems.length - 1; i++) {
-            sum += this.viewItems[i].size;
-            x.push(sum);
-            var offset = Math.min(Math.max(0, sum - 2), this.size - 4);
+            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";
@@ -801,19 +826,24 @@ var Splitview = /** @class */ (function () {
             }
         }
         this.viewItems.forEach(function (view, i) {
+            var size = view.size - marginReducedSize;
+            var offset = i === 0
+                ? 0
+                : viewLeftOffsets[i - 1] +
+                    (i / sashCount) * marginReducedSize;
             if (_this._orientation === Orientation.HORIZONTAL) {
-                view.container.style.width = "".concat(view.size, "px");
-                view.container.style.left = i == 0 ? '0px' : "".concat(x[i - 1], "px");
+                view.container.style.width = "".concat(size, "px");
+                view.container.style.left = "".concat(offset, "px");
                 view.container.style.top = '';
                 view.container.style.height = '';
             }
             if (_this._orientation === Orientation.VERTICAL) {
-                view.container.style.height = "".concat(view.size, "px");
-                view.container.style.top = i == 0 ? '0px' : "".concat(x[i - 1], "px");
+                view.container.style.height = "".concat(size, "px");
+                view.container.style.top = "".concat(offset, "px");
                 view.container.style.width = '';
                 view.container.style.left = '';
             }
-            view.view.layout(view.size, _this._orthogonalSize);
+            view.view.layout(view.size - marginReducedSize, _this._orthogonalSize);
         });
     };
     Splitview.prototype.findFirstSnapIndex = function (indexes) {

package/dist/cjs/types.d.ts

@@ -6,3 +6,26 @@ export interface Box {
     height: number;
     width: number;
 }
+type TopLeft = {
+    top: number;
+    left: number;
+};
+type TopRight = {
+    top: number;
+    right: number;
+};
+type BottomLeft = {
+    bottom: number;
+    left: number;
+};
+type BottomRight = {
+    bottom: number;
+    right: number;
+};
+type AnchorPosition = TopLeft | TopRight | BottomLeft | BottomRight;
+type Size = {
+    width: number;
+    height: number;
+};
+export type AnchoredBox = Size & AnchorPosition;
+export {};