dockview-core 1.14.2 → 1.15.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;
+};
+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.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",