dockview-core 1.14.2 → 1.15.1

package/dist/esm/gridview/gridview.js

@@ -19,7 +19,7 @@ function findLeaf(candiateNode, last) {
 }
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
-        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
+        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
         let totalSize = 0;
         for (let i = node.children.length - 1; i >= 0; i--) {
             const child = node.children[i];
@@ -174,6 +174,13 @@ export class Gridview {
             }
         }
     }
+    get margin() {
+        return this._margin;
+    }
+    set margin(value) {
+        this._margin = value;
+        this.root.margin = value;
+    }
     maximizedView() {
         var _a;
         return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -259,13 +266,14 @@ export class Gridview {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this._onDidMaximizedNodeChange.dispose();
+        this._onDidViewVisibilityChange.dispose();
         this.root.dispose();
         this._maximizedNode = undefined;
         this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;
-        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
+        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
@@ -276,6 +284,7 @@ export class Gridview {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
     }
     _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+        var _a;
         let result;
         if (node.type === 'branch') {
             const serializedChildren = node.data;
@@ -287,10 +296,14 @@ export class Gridview {
             });
             result = new 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(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+            const 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(view, orientation, orthogonalSize, node.size);
         }
         return result;
     }
@@ -320,7 +333,7 @@ export class Gridview {
         }
         const oldRoot = this.root;
         oldRoot.element.remove();
-        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
+        this._root = new BranchNode(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
         }
@@ -387,19 +400,24 @@ export class Gridview {
         }
         return findLeaf(this.root, reverse);
     }
-    constructor(proportionalLayout, styles, orientation) {
+    constructor(proportionalLayout, styles, orientation, locked, margin) {
         this.proportionalLayout = proportionalLayout;
         this.styles = styles;
         this._locked = false;
+        this._margin = 0;
         this._maximizedNode = undefined;
         this.disposable = new MutableDisposable();
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
+        this._onDidViewVisibilityChange = new Emitter();
+        this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
         this._onDidMaximizedNodeChange = new Emitter();
         this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
         this.element.className = 'grid-view';
-        this.root = new 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(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
     }
     isViewVisible(location) {
         const [rest, index] = tail(location);
@@ -418,6 +436,7 @@ export class Gridview {
         if (!(parent instanceof BranchNode)) {
             throw new Error('Invalid from location');
         }
+        this._onDidViewVisibilityChange.fire();
         parent.setChildVisible(index, visible);
     }
     moveView(parentLocation, from, to) {
@@ -450,7 +469,7 @@ export class Gridview {
             }
             const child = grandParent.removeChild(parentIndex);
             child.dispose();
-            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
+            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
             grandParent.addChild(newParent, parent.size, parentIndex);
             const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
             newParent.addChild(newSibling, newSiblingSize, 0);

package/dist/esm/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/esm/gridview/gridviewPanel.js

@@ -51,6 +51,9 @@ export class GridviewPanel extends BasePanelView {
     get isActive() {
         return this.api.isActive;
     }
+    get isVisible() {
+        return this.api.isVisible;
+    }
     constructor(id, component, options, api) {
         super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
         this._evaluatedMinimumWidth = 0;

package/dist/esm/math.js

@@ -1,6 +1,10 @@
 export const clamp = (value, min, max) => {
     if (min > max) {
-        throw new Error(`${min} > ${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/esm/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/esm/splitview/splitview.js

@@ -107,7 +107,14 @@ export class Splitview {
         this._disabled = value;
         toggleClass(this.element, 'dv-splitview-disabled', value);
     }
+    get margin() {
+        return this._margin;
+    }
+    set margin(value) {
+        this._margin = value;
+    }
     constructor(container, options) {
+        var _a;
         this.container = container;
         this.viewItems = [];
         this.sashes = [];
@@ -118,6 +125,7 @@ export class Splitview {
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
         this._disabled = false;
+        this._margin = 0;
         this._onDidSashEnd = new Emitter();
         this.onDidSashEnd = this._onDidSashEnd.event;
         this._onDidAddView = new Emitter();
@@ -206,6 +214,7 @@ export class Splitview {
         };
         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
@@ -260,9 +269,7 @@ export class Splitview {
         if (index < 0 || index >= this.viewItems.length) {
             throw new Error('Index out of bounds');
         }
-        toggleClass(this.container, 'visible', visible);
         const viewItem = this.viewItems[index];
-        toggleClass(this.container, 'visible', visible);
         viewItem.setVisible(visible, viewItem.size);
         this.distributeEmptySpace(index);
         this.layoutViews();
@@ -574,15 +581,29 @@ export class Splitview {
             this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
         }
     }
+    /**
+     * 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)`.
+     */
     layoutViews() {
         this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
-        let sum = 0;
-        const x = [];
         this.updateSashEnablement();
+        if (this.viewItems.length === 0) {
+            return;
+        }
+        const sashCount = this.viewItems.length - 1;
+        const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+        let totalLeftOffset = 0;
+        const viewLeftOffsets = [];
         for (let i = 0; i < this.viewItems.length - 1; i++) {
-            sum += this.viewItems[i].size;
-            x.push(sum);
-            const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
+            totalLeftOffset += this.viewItems[i].size;
+            viewLeftOffsets.push(totalLeftOffset);
+            const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
             if (this._orientation === Orientation.HORIZONTAL) {
                 this.sashes[i].container.style.left = `${offset}px`;
                 this.sashes[i].container.style.top = `0px`;
@@ -593,19 +614,24 @@ export class Splitview {
             }
         }
         this.viewItems.forEach((view, i) => {
+            const size = view.size - marginReducedSize;
+            const offset = i === 0
+                ? 0
+                : viewLeftOffsets[i - 1] +
+                    (i / sashCount) * marginReducedSize;
             if (this._orientation === Orientation.HORIZONTAL) {
-                view.container.style.width = `${view.size}px`;
-                view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
+                view.container.style.width = `${size}px`;
+                view.container.style.left = `${offset}px`;
                 view.container.style.top = '';
                 view.container.style.height = '';
             }
             if (this._orientation === Orientation.VERTICAL) {
-                view.container.style.height = `${view.size}px`;
-                view.container.style.top = i == 0 ? '0px' : `${x[i - 1]}px`;
+                view.container.style.height = `${size}px`;
+                view.container.style.top = `${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);
         });
     }
     findFirstSnapIndex(indexes) {

package/dist/esm/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;
+};
+export type AnchorPosition = TopLeft | TopRight | BottomLeft | BottomRight;
+type Size = {
+    width: number;
+    height: number;
+};
+export type AnchoredBox = Size & AnchorPosition;
+export {};

package/dist/styles/dockview.css

@@ -210,7 +210,6 @@
   --dv-tabs-container-scrollbar-color: #888;
   --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
   --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
-  --dv-group-gap-size: 3px;
   --dv-group-view-background-color: #ebeced;
   --dv-tabs-and-actions-container-background-color: #fcfcfc;
   --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
@@ -438,18 +437,6 @@
 .dv-dockview .dv-overlay-render-container {
   position: relative;
 }
-.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:last-child) .groupview {
-  border-right: var(--dv-group-gap-size) solid transparent;
-}
-.dv-dockview .split-view-container.horizontal > .view-container > .view:not(:first-child) .groupview {
-  border-left: var(--dv-group-gap-size) solid transparent;
-}
-.dv-dockview .split-view-container.vertical > .view-container > .view:not(:last-child) .groupview {
-  border-bottom: var(--dv-group-gap-size) solid transparent;
-}
-.dv-dockview .split-view-container.vertical > .view-container > .view:not(:first-child) .groupview {
-  border-top: var(--dv-group-gap-size) solid transparent;
-}
 
 .groupview.active-group > .tabs-and-actions-container > .tabs-container > .tab.active-tab {
   background-color: var(--dv-activegroup-visiblepanel-tab-background-color);

package/package.json

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