feat: priority experiments

packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts

@@ -11,7 +11,11 @@ import {
     PanelUpdateEvent,
     Parameters,
 } from '../../panel/types';
-import { LayoutPriority, Orientation } from '../../splitview/splitview';
+import {
+    EnhancedLayoutPriority,
+    LayoutPriority,
+    Orientation,
+} from '../../splitview/splitview';
 
 class TestPanel implements IGridPanelView {
     _onDidChange = new Emitter<IViewSize | undefined>();
@@ -32,7 +36,7 @@ class TestPanel implements IGridPanelView {
         public readonly maximumWidth: number,
         public readonly minimumHeight: number,
         public readonly maximumHeight: number,
-        public priority: LayoutPriority,
+        public priority: EnhancedLayoutPriority,
         public snap: boolean
     ) {}
 

packages/dockview-core/src/__tests__/splitview/splitview.spec.ts

@@ -2,17 +2,18 @@ import { Emitter } from '../../events';
 import { CompositeDisposable } from '../../lifecycle';
 import {
     IView,
-    LayoutPriority,
+    EnhancedLayoutPriority,
     Orientation,
     Sizing,
     Splitview,
+    LayoutPriority,
 } from '../../splitview/splitview';
 import { fireEvent } from '@testing-library/dom';
 class Testview implements IView {
     private _element: HTMLElement = document.createElement('div');
     private _size = 0;
     private _orthogonalSize = 0;
-    private _priority: LayoutPriority | undefined;
+    private _priority: EnhancedLayoutPriority | undefined;
 
     private readonly _onDidChange = new Emitter<{
         size?: number;
@@ -54,7 +55,7 @@ class Testview implements IView {
     constructor(
         private _minimumSize: number,
         private _maxiumSize: number,
-        priority?: LayoutPriority
+        priority?: EnhancedLayoutPriority
     ) {
         this._priority = priority;
     }

packages/dockview-core/src/gridview/branchNode.ts

@@ -8,8 +8,10 @@ import {
     Splitview,
     Orientation,
     Sizing,
-    LayoutPriority,
+    EnhancedLayoutPriority,
     ISplitviewStyles,
+    LayoutPriority,
+    layoutPriorityAsNumber,
 } from '../splitview/splitview';
 import { Emitter, Event } from '../events';
 import { INodeDescriptor } from './gridview';
@@ -111,7 +113,7 @@ export class BranchNode extends CompositeDisposable implements IView {
             : this.maximumOrthogonalSize;
     }
 
-    get priority(): LayoutPriority {
+    get priority(): EnhancedLayoutPriority {
         if (this.children.length === 0) {
             return LayoutPriority.Normal;
         }
@@ -122,10 +124,25 @@ export class BranchNode extends CompositeDisposable implements IView {
                 : c.priority
         );
 
-        if (priorities.some((p) => p === LayoutPriority.High)) {
-            return LayoutPriority.High;
-        } else if (priorities.some((p) => p === LayoutPriority.Low)) {
-            return LayoutPriority.Low;
+        let max: number | undefined;
+        let min: number | undefined;
+
+        for (const p of priorities) {
+            const i = layoutPriorityAsNumber(p);
+            if (i > 0) {
+                max = max === undefined ? i : Math.max(max, i);
+            }
+            if (i < 0) {
+                min = min === undefined ? i : Math.min(min, i);
+            }
+        }
+
+        if (typeof max === 'number') {
+            return max;
+        }
+
+        if (typeof min === 'number') {
+            return min;
         }
 
         return LayoutPriority.Normal;

packages/dockview-core/src/gridview/gridview.ts

@@ -5,7 +5,7 @@
 
 import {
     ISplitviewStyles,
-    LayoutPriority,
+    EnhancedLayoutPriority,
     Orientation,
     Sizing,
 } from '../splitview/splitview';
@@ -171,7 +171,7 @@ export interface IGridView {
     readonly maximumWidth: number;
     readonly minimumHeight: number;
     readonly maximumHeight: number;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
     layout(width: number, height: number): void;
     toJSON(): object;
     fromJSON?(json: object): void;

packages/dockview-core/src/gridview/gridviewPanel.ts

@@ -13,7 +13,7 @@ import {
     GridviewPanelApi,
     GridviewPanelApiImpl,
 } from '../api/gridviewPanelApi';
-import { LayoutPriority } from '../splitview/splitview';
+import { EnhancedLayoutPriority } from '../splitview/splitview';
 import { Emitter, Event } from '../events';
 import { IViewSize } from './gridview';
 import { BaseGrid, IGridPanelView } from './baseComponentGridview';
@@ -23,7 +23,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
     maximumWidth?: number;
     minimumHeight?: number;
     maximumHeight?: number;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
     snap?: boolean;
     accessor: BaseGrid<IGridPanelView>;
     isVisible?: boolean;
@@ -35,7 +35,7 @@ export interface IGridviewPanel<T extends GridviewPanelApi = GridviewPanelApi>
     readonly maximumWidth: number;
     readonly minimumHeight: number;
     readonly maximumHeight: number;
-    readonly priority: LayoutPriority | undefined;
+    readonly priority: EnhancedLayoutPriority | undefined;
     readonly snap: boolean;
 }
 
@@ -54,14 +54,14 @@ export abstract class GridviewPanel<
     private _minimumHeight: FunctionOrValue<number> = 0;
     private _maximumWidth: FunctionOrValue<number> = Number.MAX_SAFE_INTEGER;
     private _maximumHeight: FunctionOrValue<number> = Number.MAX_SAFE_INTEGER;
-    private _priority?: LayoutPriority;
+    protected _priority?: EnhancedLayoutPriority;
     private _snap = false;
 
     private readonly _onDidChange = new Emitter<IViewSize | undefined>();
     readonly onDidChange: Event<IViewSize | undefined> =
         this._onDidChange.event;
 
-    get priority(): LayoutPriority | undefined {
+    get priority(): EnhancedLayoutPriority | undefined {
         return this._priority;
     }
 
@@ -270,5 +270,5 @@ export interface GridPanelViewState extends BasePanelViewState {
     minimumWidth?: number;
     maximumWidth?: number;
     snap?: boolean;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
 }

packages/dockview-core/src/gridview/leafNode.ts

@@ -3,7 +3,11 @@
  * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
  *--------------------------------------------------------------------------------------------*/
 
-import { IView, LayoutPriority, Orientation } from '../splitview/splitview';
+import {
+    IView,
+    EnhancedLayoutPriority,
+    Orientation,
+} from '../splitview/splitview';
 import { Emitter, Event } from '../events';
 import { IGridView } from './gridview';
 import { IDisposable } from '../lifecycle';
@@ -35,7 +39,7 @@ export class LeafNode implements IView {
         return this.view.maximumHeight;
     }
 
-    get priority(): LayoutPriority | undefined {
+    get priority(): EnhancedLayoutPriority | undefined {
         return this.view.priority;
     }
 

packages/dockview-core/src/panel/types.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from '../lifecycle';
-import { LayoutPriority } from '../splitview/splitview';
+import { EnhancedLayoutPriority } from '../splitview/splitview';
 
 /**
  * A key-value object of anything that is a valid JavaScript Object.
@@ -34,6 +34,6 @@ export interface BaseComponentOptions<T extends object = Parameters> {
     component: string;
     params?: T;
     snap?: boolean;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
     size?: number;
 }

packages/dockview-core/src/paneview/paneviewComponent.ts

@@ -6,7 +6,11 @@ import {
     IDisposable,
     MutableDisposable,
 } from '../lifecycle';
-import { LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
+import {
+    EnhancedLayoutPriority,
+    Orientation,
+    Sizing,
+} from '../splitview/splitview';
 import { PaneviewComponentOptions } from './options';
 import { Paneview } from './paneview';
 import {
@@ -35,7 +39,7 @@ export interface PaneviewDndOverlayEvent {
 
 export interface SerializedPaneviewPanel {
     snap?: boolean;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
     minimumSize?: number;
     maximumSize?: number;
     data: {

packages/dockview-core/src/splitview/options.ts

@@ -1,5 +1,5 @@
 import { IPanel, PanelInitParameters } from '../panel/types';
-import { IView, SplitViewOptions, LayoutPriority } from './splitview';
+import { IView, SplitViewOptions, EnhancedLayoutPriority } from './splitview';
 import { SplitviewPanel } from './splitviewPanel';
 import { SplitviewComponent } from './splitviewComponent';
 import {
@@ -11,7 +11,7 @@ export interface PanelViewInitParameters extends PanelInitParameters {
     minimumSize?: number;
     maximumSize?: number;
     snap?: boolean;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
     accessor: SplitviewComponent;
 }
 

packages/dockview-core/src/splitview/splitview.ts

@@ -44,11 +44,29 @@ export enum LayoutPriority {
     Normal = 'normal', // view is offered space in view order
 }
 
+export type EnhancedLayoutPriority = LayoutPriority | number;
+
+export function layoutPriorityAsNumber(
+    priority: EnhancedLayoutPriority | undefined
+): number {
+    switch (priority) {
+        case LayoutPriority.High:
+            return Number.MAX_SAFE_INTEGER;
+        case LayoutPriority.Low:
+            return Number.MIN_SAFE_INTEGER;
+        case LayoutPriority.Normal:
+        case undefined:
+            return 0;
+        default:
+            return priority;
+    }
+}
+
 export interface IBaseView extends IDisposable {
     minimumSize: number;
     maximumSize: number;
     snap?: boolean;
-    priority?: LayoutPriority;
+    priority?: EnhancedLayoutPriority;
 }
 
 export interface IView extends IBaseView {
@@ -318,15 +336,8 @@ export class Splitview {
         }
 
         const indexes = range(this.viewItems.length).filter((i) => i !== index);
-        const lowPriorityIndexes = [
-            ...indexes.filter(
-                (i) => this.viewItems[i].priority === LayoutPriority.Low
-            ),
-            index,
-        ];
-        const highPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.High
-        );
+        const { lowPriorityIndexes, highPriorityIndexes } =
+            this.calculateIndexPriorities(indexes);
 
         const item = this.viewItems[index];
         size = Math.round(size);
@@ -337,7 +348,7 @@ export class Splitview {
         );
 
         item.size = size;
-        this.relayout(lowPriorityIndexes, highPriorityIndexes);
+        this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
     }
 
     public getViews<T extends IView>(): T[] {
@@ -357,15 +368,8 @@ export class Splitview {
         item.size = size;
 
         const indexes = range(this.viewItems.length).filter((i) => i !== index);
-        const lowPriorityIndexes = [
-            ...indexes.filter(
-                (i) => this.viewItems[i].priority === LayoutPriority.Low
-            ),
-            index,
-        ];
-        const highPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.High
-        );
+        const { lowPriorityIndexes, highPriorityIndexes } =
+            this.calculateIndexPriorities(indexes);
 
         /**
          * add this view we are changing to the low-index list since we have determined the size
@@ -610,12 +614,9 @@ export class Splitview {
         }
 
         const indexes = range(this.viewItems.length);
-        const lowPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.Low
-        );
-        const highPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.High
-        );
+
+        const { lowPriorityIndexes, highPriorityIndexes } =
+            this.calculateIndexPriorities(indexes);
 
         this.relayout(lowPriorityIndexes, highPriorityIndexes);
     }
@@ -675,12 +676,8 @@ export class Splitview {
 
         if (!this.proportions) {
             const indexes = range(this.viewItems.length);
-            const lowPriorityIndexes = indexes.filter(
-                (i) => this.viewItems[i].priority === LayoutPriority.Low
-            );
-            const highPriorityIndexes = indexes.filter(
-                (i) => this.viewItems[i].priority === LayoutPriority.High
-            );
+            const { lowPriorityIndexes, highPriorityIndexes } =
+                this.calculateIndexPriorities(indexes);
 
             this.resize(
                 this.viewItems.length - 1,
@@ -744,12 +741,8 @@ export class Splitview {
         let emptyDelta = this.size - contentSize;
 
         const indexes = range(this.viewItems.length - 1, -1);
-        const lowPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.Low
-        );
-        const highPriorityIndexes = indexes.filter(
-            (i) => this.viewItems[i].priority === LayoutPriority.High
-        );
+        const { lowPriorityIndexes, highPriorityIndexes } =
+            this.calculateIndexPriorities(indexes);
 
         for (const index of highPriorityIndexes) {
             pushToStart(indexes, index);
@@ -1085,6 +1078,25 @@ export class Splitview {
         return element;
     }
 
+    private calculateIndexPriorities(indexes: number[]): {
+        lowPriorityIndexes: number[];
+        highPriorityIndexes: number[];
+    } {
+        const priorityIndexes = indexes
+            .map((i) => [i, layoutPriorityAsNumber(this.viewItems[i].priority)])
+            .sort((a, b) => a[1] - b[1]);
+
+        const lowPriorityIndexes = priorityIndexes
+            .filter(([_, p]) => p < 0)
+            .map(([i]) => i)
+            .reverse();
+        const highPriorityIndexes = priorityIndexes
+            .filter(([_, p]) => p > 0)
+            .map(([i]) => i);
+
+        return { lowPriorityIndexes, highPriorityIndexes };
+    }
+
     public dispose(): void {
         this._onDidSashEnd.dispose();
         this._onDidAddView.dispose();