feat: gready render mode

.codesandbox/ci.json

@@ -23,6 +23,7 @@
     "/packages/docs/sandboxes/nativeapp-dockview",
     "/packages/docs/sandboxes/nested-dockview",
     "/packages/docs/sandboxes/rendering-dockview",
+    "/packages/docs/sandboxes/rendermode-dockview",
     "/packages/docs/sandboxes/resize-dockview",
     "/packages/docs/sandboxes/resizecontainer-dockview",
     "/packages/docs/sandboxes/simple-dockview",
@@ -37,4 +38,4 @@
     "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
   "node": "18"
-}
+}

packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts

@@ -36,7 +36,7 @@ describe('groupPanelApi', () => {
     });
 
     test('updateParameters', () => {
-        const groupPanel: Partial<IDockviewPanel> = {
+        const groupPanel: Partial<DockviewPanel> = {
             id: 'test_id',
             update: jest.fn(),
         };
@@ -53,7 +53,7 @@ describe('groupPanelApi', () => {
         );
 
         const cut = new DockviewPanelApiImpl(
-            <IDockviewPanel>groupPanel,
+            <DockviewPanel>groupPanel,
             <DockviewGroupPanel>groupViewPanel,
             <DockviewComponent>accessor
         );
@@ -67,7 +67,7 @@ describe('groupPanelApi', () => {
     });
 
     test('onDidGroupChange', () => {
-        const groupPanel: Partial<IDockviewPanel> = {
+        const groupPanel: Partial<DockviewPanel> = {
             id: 'test_id',
         };
 
@@ -83,7 +83,7 @@ describe('groupPanelApi', () => {
         );
 
         const cut = new DockviewPanelApiImpl(
-            <IDockviewPanel>groupPanel,
+            <DockviewPanel>groupPanel,
             <DockviewGroupPanel>groupViewPanel,
             <DockviewComponent>accessor
         );

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -9,6 +9,7 @@ import { CompositeDisposable } from '../../../../lifecycle';
 import { PanelUpdateEvent } from '../../../../panel/types';
 import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
 import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
 
 class TestContentRenderer
     extends CompositeDisposable
@@ -56,7 +57,14 @@ describe('contentContainer', () => {
         let blur = 0;
 
         const disposable = new CompositeDisposable();
-        const cut = new ContentContainer();
+
+        const dockviewComponent = jest.fn<DockviewComponent, []>(() => {
+            return {
+              renderingType: 'destructive',
+            } as DockviewComponent;
+        });
+
+        const cut = new ContentContainer(dockviewComponent(), jest.fn() as any);
 
         disposable.addDisposables(
             cut.onDidFocus(() => {
@@ -73,6 +81,7 @@ describe('contentContainer', () => {
             view: {
                 content: contentRenderer,
             } as Partial<IDockviewPanelModel>,
+            api: { renderingType: 'destructive' },
         } as Partial<IDockviewPanel>;
 
         cut.openPanel(panel as IDockviewPanel);
@@ -107,6 +116,7 @@ describe('contentContainer', () => {
             view: {
                 content: contentRenderer2,
             } as Partial<IDockviewPanelModel>,
+            api: { renderingType: 'destructive' },
         } as Partial<IDockviewPanel>;
 
         cut.openPanel(panel2 as IDockviewPanel);

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

@@ -576,19 +576,25 @@ describe('groupview', () => {
             .getElementsByClassName('content-container')
             .item(0)!.childNodes;
 
-        const panel1 = new TestPanel('id_1', null as any);
+        const panel1 = new TestPanel('id_1', {
+            renderingType: 'destructive',
+        } as any);
 
         cut.openPanel(panel1);
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel1.view.content.element);
 
-        const panel2 = new TestPanel('id_2', null as any);
+        const panel2 = new TestPanel('id_2', {
+            renderingType: 'destructive',
+        } as any);
 
         cut.openPanel(panel2);
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel2.view.content.element);
 
-        const panel3 = new TestPanel('id_2', null as any);
+        const panel3 = new TestPanel('id_2', {
+            renderingType: 'destructive',
+        } as any);
 
         cut.openPanel(panel3, { skipSetPanelActive: true });
         expect(contentContainer.length).toBe(1);

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

@@ -29,7 +29,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         let latestTitle: string | undefined = undefined;
 
@@ -74,7 +76,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         cut.init({ title: 'myTitle', params: {} });
         expect(cut.title).toBe('myTitle');
@@ -109,7 +113,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         cut.init({ params: {}, title: 'title' });
 
@@ -141,7 +147,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         expect(cut.params).toEqual(undefined);
 
@@ -177,7 +185,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         cut.api.setSize({ height: 123, width: 456 });
 
@@ -208,7 +218,9 @@ describe('dockviewPanel', () => {
         const group = new groupMock();
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model);
+        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+          renderingType: 'destructive',
+        });
 
         cut.init({ params: { a: '1', b: '2' }, title: 'A title' });
         expect(cut.params).toEqual({ a: '1', b: '2' });

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -2,14 +2,19 @@ import { Emitter, Event } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { MutableDisposable } from '../lifecycle';
-import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from '../dockview/dockviewPanel';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { Position } from '../dnd/droptarget';
+import { RenderingType } from '../dockview/components/greadyRenderContainer';
 
 export interface TitleEvent {
     readonly title: string;
 }
 
+export interface RenderingTypeEvent {
+    renderingType: RenderingType;
+}
+
 /*
  * omit visibility modifiers since the visibility of a single group doesn't make sense
  * because it belongs to a groupview
@@ -21,11 +26,14 @@ export interface DockviewPanelApi
     > {
     readonly group: DockviewGroupPanel;
     readonly isGroupActive: boolean;
+    readonly renderingType: RenderingType;
     readonly title: string | undefined;
     readonly onDidActiveGroupChange: Event<void>;
     readonly onDidGroupChange: Event<void>;
+    readonly onDidRendeingTypeChange: Event<RenderingTypeEvent>;
     close(): void;
     setTitle(title: string): void;
+    setRenderingType(renderingType: RenderingType): void;
     moveTo(options: {
         group: DockviewGroupPanel;
         position?: Position;
@@ -48,6 +56,9 @@ export class DockviewPanelApiImpl
     private readonly _onDidGroupChange = new Emitter<void>();
     readonly onDidGroupChange = this._onDidGroupChange.event;
 
+    readonly _onDidRenderingTypeChange = new Emitter<RenderingTypeEvent>();
+    readonly onDidRendeingTypeChange = this._onDidRenderingTypeChange.event;
+
     private readonly disposable = new MutableDisposable();
 
     get title(): string | undefined {
@@ -58,6 +69,10 @@ export class DockviewPanelApiImpl
         return !!this.group?.isActive;
     }
 
+    get renderingType(): RenderingType {
+        return this.panel.renderingType;
+    }
+
     set group(value: DockviewGroupPanel) {
         const isOldGroupActive = this.isGroupActive;
 
@@ -81,7 +96,7 @@ export class DockviewPanelApiImpl
     }
 
     constructor(
-        private panel: IDockviewPanel,
+        private panel: DockviewPanel,
         group: DockviewGroupPanel,
         private readonly accessor: DockviewComponent
     ) {
@@ -93,6 +108,7 @@ export class DockviewPanelApiImpl
 
         this.addDisposables(
             this.disposable,
+            this._onDidRenderingTypeChange,
             this._onDidTitleChange,
             this._onDidGroupChange,
             this._onDidActiveGroupChange
@@ -117,6 +133,10 @@ export class DockviewPanelApiImpl
         this.panel.setTitle(title);
     }
 
+    setRenderingType(renderingType: RenderingType): void {
+        this.panel.setRenderingType(renderingType);
+    }
+
     close(): void {
         this.group.model.closePanel(this.panel);
     }

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

@@ -21,14 +21,43 @@ export class DragAndDropObserver extends CompositeDisposable {
         this.registerListeners();
     }
 
+    onDragEnter(e: DragEvent): void {
+        this.target = e.target;
+        this.callbacks.onDragEnter(e);
+    }
+
+    onDragOver(e: DragEvent): void {
+        e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+
+        if (this.callbacks.onDragOver) {
+            this.callbacks.onDragOver(e);
+        }
+    }
+
+    onDragLeave(e: DragEvent): void {
+        if (this.target === e.target) {
+            this.target = null;
+
+            this.callbacks.onDragLeave(e);
+        }
+    }
+
+    onDragEnd(e: DragEvent): void {
+        this.target = null;
+        this.callbacks.onDragEnd(e);
+    }
+
+    onDrop(e: DragEvent): void {
+        this.callbacks.onDrop(e);
+    }
+
     private registerListeners(): void {
         this.addDisposables(
             addDisposableListener(
                 this.element,
                 'dragenter',
                 (e: DragEvent) => {
-                    this.target = e.target;
-                    this.callbacks.onDragEnter(e);
+                    this.onDragEnter(e);
                 },
                 true
             )
@@ -39,36 +68,27 @@ export class DragAndDropObserver extends CompositeDisposable {
                 this.element,
                 'dragover',
                 (e: DragEvent) => {
-                    e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-
-                    if (this.callbacks.onDragOver) {
-                        this.callbacks.onDragOver(e);
-                    }
+                    this.onDragOver(e);
                 },
                 true
             )
         );
 
         this.addDisposables(
             addDisposableListener(this.element, 'dragleave', (e: DragEvent) => {
-                if (this.target === e.target) {
-                    this.target = null;
-
-                    this.callbacks.onDragLeave(e);
-                }
+                this.onDragLeave(e);
             })
         );
 
         this.addDisposables(
             addDisposableListener(this.element, 'dragend', (e: DragEvent) => {
-                this.target = null;
-                this.callbacks.onDragEnd(e);
+                this.onDragEnd(e);
             })
         );
 
         this.addDisposables(
             addDisposableListener(this.element, 'drop', (e: DragEvent) => {
-                this.callbacks.onDrop(e);
+                this.onDrop(e);
             })
         );
     }