diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 295ce3256..c0e07d7a5 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -4276,4 +4276,41 @@ describe('dockviewComponent', () => { expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); }); + + test('that disableAutoResizing is false by default', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + panelA: PanelContentPartTest, + panelB: PanelContentPartTest, + }, + tabComponents: { + test_tab_id: PanelTabPartTest, + }, + orientation: Orientation.HORIZONTAL, + }); + + expect(dockview.disableResizing).toBeFalsy(); + }); + + test('that disableAutoResizing can be enabled', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + panelA: PanelContentPartTest, + panelB: PanelContentPartTest, + }, + tabComponents: { + test_tab_id: PanelTabPartTest, + }, + orientation: Orientation.HORIZONTAL, + disableAutoResizing: true, + }); + + expect(dockview.disableResizing).toBeTruthy(); + }); }); diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index 6fad26d2f..c54341cc0 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts @@ -2677,4 +2677,27 @@ describe('gridview', () => { expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); }); + + test('that disableAutoResizing is false by default', () => { + const gridview = new GridviewComponent({ + parentElement: container, + proportionalLayout: true, + orientation: Orientation.HORIZONTAL, + components: { default: TestGridview }, + }); + + expect(gridview.disableResizing).toBeFalsy(); + }); + + test('that disableAutoResizing can be enabled', () => { + const gridview = new GridviewComponent({ + parentElement: container, + proportionalLayout: true, + orientation: Orientation.HORIZONTAL, + components: { default: TestGridview }, + disableAutoResizing: true, + }); + + expect(gridview.disableResizing).toBeTruthy(); + }); }); diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index 9ffd22e49..fac932e51 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts @@ -489,4 +489,27 @@ describe('componentPaneview', () => { ], }); }); + + test('that disableAutoResizing is false by default', () => { + const paneview = new PaneviewComponent({ + parentElement: container, + components: { + testPanel: TestPanel, + }, + }); + + expect(paneview.disableResizing).toBeFalsy(); + }); + + test('that disableAutoResizing can be enabled', () => { + const paneview = new PaneviewComponent({ + parentElement: container, + components: { + testPanel: TestPanel, + }, + disableAutoResizing: true, + }); + + expect(paneview.disableResizing).toBeTruthy(); + }); }); diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts index 81525a26c..d42f37504 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts @@ -588,4 +588,29 @@ describe('componentSplitview', () => { activeView: 'panel1', }); }); + + test('that disableAutoResizing is false by default', () => { + const splitview = new SplitviewComponent({ + parentElement: container, + orientation: Orientation.VERTICAL, + components: { + testPanel: TestPanel, + }, + }); + + expect(splitview.disableResizing).toBeFalsy(); + }); + + test('that disableAutoResizing can be enabled', () => { + const splitview = new SplitviewComponent({ + parentElement: container, + orientation: Orientation.VERTICAL, + components: { + testPanel: TestPanel, + }, + disableAutoResizing: true, + }); + + expect(splitview.disableResizing).toBeTruthy(); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 087ac13cd..383fd876a 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -305,6 +305,7 @@ export class DockviewComponent orientation: options.orientation ?? Orientation.HORIZONTAL, styles: options.styles, parentElement: options.parentElement, + disableAutoResizing: options.disableAutoResizing, }); toggleClass(this.gridview.element, 'dv-dockview', true); diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index f9d2cc1c5..f8a3aed4b 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -71,6 +71,7 @@ export interface DockviewDndOverlayEvent { } export interface DockviewComponentOptions extends DockviewRenderFunctions { + disableAutoResizing?: boolean; watermarkComponent?: WatermarkConstructor; watermarkFrameworkComponent?: any; frameworkComponentFactory?: GroupPanelFrameworkComponentFactory; diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index 640a57787..2e9ff31c6 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -33,6 +33,7 @@ export interface BaseGridOptions { readonly orientation: Orientation; readonly styles?: ISplitviewStyles; readonly parentElement?: HTMLElement; + readonly disableAutoResizing?: boolean; } export interface IGridPanelView extends IGridView, IPanel { @@ -128,7 +129,7 @@ export abstract class BaseGrid } constructor(options: BaseGridOptions) { - super(options.parentElement); + super(options.parentElement, options.disableAutoResizing); this.gridview = new Gridview( !!options.proportionalLayout, diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts index a61f49571..d1e4a09b5 100644 --- a/packages/dockview-core/src/gridview/gridviewComponent.ts +++ b/packages/dockview-core/src/gridview/gridviewComponent.ts @@ -109,6 +109,7 @@ export class GridviewComponent proportionalLayout: options.proportionalLayout, orientation: options.orientation, styles: options.styles, + disableAutoResizing: options.disableAutoResizing, }); this._options = options; diff --git a/packages/dockview-core/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts index 461ab6c66..d2455b483 100644 --- a/packages/dockview-core/src/gridview/options.ts +++ b/packages/dockview-core/src/gridview/options.ts @@ -3,6 +3,7 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview'; import { FrameworkFactory } from '../panel/componentFactory'; export interface GridviewComponentOptions { + disableAutoResizing?: boolean; proportionalLayout: boolean; orientation: Orientation; components?: { diff --git a/packages/dockview-core/src/paneview/options.ts b/packages/dockview-core/src/paneview/options.ts index 00763e652..2518dc2a7 100644 --- a/packages/dockview-core/src/paneview/options.ts +++ b/packages/dockview-core/src/paneview/options.ts @@ -3,6 +3,7 @@ import { PaneviewDndOverlayEvent } from './paneviewComponent'; import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel'; export interface PaneviewComponentOptions { + disableAutoResizing?: boolean; components?: { [componentName: string]: { new (id: string, componentName: string): PaneviewPanel; diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index 31d083470..087f28d27 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -199,7 +199,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent { } constructor(options: PaneviewComponentOptions) { - super(options.parentElement); + super(options.parentElement, options.disableAutoResizing); this.addDisposables( this._onDidLayoutChange, diff --git a/packages/dockview-core/src/resizable.ts b/packages/dockview-core/src/resizable.ts index 4df6366ec..819345232 100644 --- a/packages/dockview-core/src/resizable.ts +++ b/packages/dockview-core/src/resizable.ts @@ -3,14 +3,25 @@ import { CompositeDisposable } from './lifecycle'; export abstract class Resizable extends CompositeDisposable { private readonly _element: HTMLElement; + private _disableResizing: boolean; get element(): HTMLElement { return this._element; } - constructor(parentElement?: HTMLElement) { + get disableResizing(): boolean { + return this._disableResizing; + } + + set disableResizing(value: boolean) { + this._disableResizing = value; + } + + constructor(parentElement?: HTMLElement, disableResizing = false) { super(); + this._disableResizing = disableResizing; + if (parentElement) { this._element = parentElement; } else { @@ -30,6 +41,10 @@ export abstract class Resizable extends CompositeDisposable { return; } + if (this.disableResizing) { + return; + } + if (!document.body.contains(this._element)) { /** * since the event is dispatched through requestAnimationFrame there is a small chance diff --git a/packages/dockview-core/src/splitview/options.ts b/packages/dockview-core/src/splitview/options.ts index 7f180cd0a..e5f20d3cc 100644 --- a/packages/dockview-core/src/splitview/options.ts +++ b/packages/dockview-core/src/splitview/options.ts @@ -17,6 +17,7 @@ export interface ISerializableView extends IView, IPanel { } export interface SplitviewComponentOptions extends SplitViewOptions { + disableAutoResizing?: boolean; components?: { [componentName: string]: { new (id: string, componentName: string): SplitviewPanel; diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts index 824cfa0a4..0bda19d85 100644 --- a/packages/dockview-core/src/splitview/splitviewComponent.ts +++ b/packages/dockview-core/src/splitview/splitviewComponent.ts @@ -158,7 +158,7 @@ export class SplitviewComponent } constructor(options: SplitviewComponentOptions) { - super(options.parentElement); + super(options.parentElement, options.disableAutoResizing); this._options = options; diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index e736d0035..c9fd48b09 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -150,6 +150,7 @@ export const DockviewReact = React.forwardRef( parentElement: domRef.current, frameworkComponentFactory: factory, frameworkComponents: props.components, + disableAutoResizing: props.disableAutoResizing, frameworkTabComponents, watermarkFrameworkComponent: props.watermarkComponent, defaultTabComponent: props.defaultTabComponent diff --git a/packages/dockview/src/gridview/gridview.tsx b/packages/dockview/src/gridview/gridview.tsx index 992565b03..fd6374c12 100644 --- a/packages/dockview/src/gridview/gridview.tsx +++ b/packages/dockview/src/gridview/gridview.tsx @@ -47,6 +47,7 @@ export const GridviewReact = React.forwardRef( const gridview = new GridviewComponent({ parentElement: domRef.current, + disableAutoResizing: props.disableAutoResizing, proportionalLayout: typeof props.proportionalLayout === 'boolean' ? props.proportionalLayout diff --git a/packages/dockview/src/paneview/paneview.tsx b/packages/dockview/src/paneview/paneview.tsx index 358c15b8a..001bcfc3a 100644 --- a/packages/dockview/src/paneview/paneview.tsx +++ b/packages/dockview/src/paneview/paneview.tsx @@ -53,6 +53,7 @@ export const PaneviewReact = React.forwardRef( const paneview = new PaneviewComponent({ parentElement: domRef.current!, + disableAutoResizing: props.disableAutoResizing, frameworkComponents: props.components, components: {}, headerComponents: {}, diff --git a/packages/dockview/src/splitview/splitview.tsx b/packages/dockview/src/splitview/splitview.tsx index d6fd90913..218721632 100644 --- a/packages/dockview/src/splitview/splitview.tsx +++ b/packages/dockview/src/splitview/splitview.tsx @@ -41,6 +41,7 @@ export const SplitviewReact = React.forwardRef( React.useEffect(() => { const splitview = new SplitviewComponent({ parentElement: domRef.current!, + disableAutoResizing: props.disableAutoResizing, orientation: props.orientation ?? Orientation.HORIZONTAL, frameworkComponents: props.components, frameworkWrapper: {