From f26a1cd4048a85e75e323f91b3829b6173e74ced Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 28 Feb 2023 22:43:21 +0800 Subject: [PATCH 1/6] feat: persistance and rendering --- .../dockview/defaultGroupPanelView.spec.ts | 103 +++++++++++++++++- .../src/dockview/components/tab/defaultTab.ts | 18 +-- .../src/dockview/defaultGroupPanelView.ts | 97 ++++++++++++----- .../src/dockview/deserializer.ts | 39 ++++--- .../src/dockview/dockviewComponent.ts | 44 ++------ .../src/dockview/dockviewPanel.ts | 19 ++-- .../src/gridview/baseComponentGridview.ts | 4 +- .../src/gridview/basePanelView.ts | 14 +-- .../dockview-core/src/groupview/groupview.ts | 8 +- .../src/groupview/panel/content.ts | 5 +- packages/dockview-core/src/groupview/types.ts | 32 ++++-- packages/dockview-core/src/panel/types.ts | 2 +- packages/dockview-core/src/types.ts | 2 + packages/dockview/src/dockview/dockview.tsx | 36 ++++-- .../dockview/src/dockview/reactContentPart.ts | 6 - .../dockview/src/dockview/reactHeaderPart.ts | 11 -- .../src/dockview/v2/webviewContentRenderer.ts | 4 - 17 files changed, 280 insertions(+), 164 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts b/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts index bd5a9b75b..a714f4e91 100644 --- a/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts @@ -1,8 +1,9 @@ import { DefaultGroupPanelView } from '../../dockview/defaultGroupPanelView'; +import { GroupPanel } from '../../groupview/groupviewPanel'; import { IContentRenderer, ITabRenderer } from '../../groupview/types'; describe('defaultGroupPanelView', () => { - test('dispose cleanup', () => { + test('that dispose is called on content and tab renderers when present', () => { const contentMock = jest.fn(() => { const partial: Partial = { element: document.createElement('div'), @@ -22,11 +23,109 @@ describe('defaultGroupPanelView', () => { const content = new contentMock(); const tab = new tabMock(); - const cut = new DefaultGroupPanelView({ content, tab }); + const cut = new DefaultGroupPanelView({ + content, + tab, + contentComponent: 'contentComponent', + }); cut.dispose(); expect(content.dispose).toHaveBeenCalled(); expect(tab.dispose).toHaveBeenCalled(); }); + + test('that update is called on content and tab renderers when present', () => { + const contentMock = jest.fn(() => { + const partial: Partial = { + element: document.createElement('div'), + update: jest.fn(), + }; + return partial as IContentRenderer; + }); + + const tabMock = jest.fn(() => { + const partial: Partial = { + element: document.createElement('div'), + update: jest.fn(), + }; + return partial as IContentRenderer; + }); + + const content = new contentMock(); + const tab = new tabMock(); + + const cut = new DefaultGroupPanelView({ + content, + tab, + contentComponent: 'contentComponent', + }); + + cut.update({ + params: {}, + }); + + expect(content.update).toHaveBeenCalled(); + expect(tab.update).toHaveBeenCalled(); + }); + + test('test1', () => { + const contentMock = jest.fn(() => { + const partial: Partial = { + element: document.createElement('div'), + onGroupChange: jest.fn(), + onPanelVisibleChange: jest.fn(), + }; + return partial as IContentRenderer; + }); + + const tabMock = jest.fn(() => { + const partial: Partial = { + element: document.createElement('div'), + onGroupChange: jest.fn(), + onPanelVisibleChange: jest.fn(), + }; + return partial as IContentRenderer; + }); + + const content = new contentMock(); + const tab = new tabMock(); + + let cut = new DefaultGroupPanelView({ + content, + tab, + contentComponent: 'contentComponent', + }); + + const group1 = jest.fn() as any; + const group2 = jest.fn() as any; + cut.updateParentGroup(group1 as GroupPanel, false); + + expect(content.onGroupChange).toHaveBeenNthCalledWith(1, group1); + expect(tab.onGroupChange).toHaveBeenNthCalledWith(1, group1); + expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); + expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); + expect(content.onGroupChange).toHaveBeenCalledTimes(1); + expect(tab.onGroupChange).toHaveBeenCalledTimes(1); + expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(1); + expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(1); + + cut.updateParentGroup(group1 as GroupPanel, true); + + expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); + expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); + expect(content.onGroupChange).toHaveBeenCalledTimes(1); + expect(tab.onGroupChange).toHaveBeenCalledTimes(1); + expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); + + cut.updateParentGroup(group2 as GroupPanel, true); + + expect(content.onGroupChange).toHaveBeenNthCalledWith(2, group2); + expect(tab.onGroupChange).toHaveBeenNthCalledWith(2, group2); + expect(content.onGroupChange).toHaveBeenCalledTimes(2); + expect(tab.onGroupChange).toHaveBeenCalledTimes(2); + expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); + }); }); diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index dfbce0e2f..52135530d 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -8,8 +8,6 @@ import { PanelUpdateEvent } from '../../../panel/types'; import { GroupPanel } from '../../../groupview/groupviewPanel'; import { createCloseButton } from '../../../svg'; -export const DEFAULT_TAB_IDENTIFIER = '__default__tab__'; - export class DefaultTab extends CompositeDisposable implements ITabRenderer { private _element: HTMLElement; @@ -26,10 +24,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { return this._element; } - get id() { - return DEFAULT_TAB_IDENTIFIER; - } - constructor() { super(); @@ -69,18 +63,13 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { this.render(); } - public toJSON() { - return { id: this.id }; - } - focus() { //noop } public init(params: GroupPanelPartInitParameters) { this.params = params; - this._content.textContent = - typeof params.title === 'string' ? params.title : this.id; + this._content.textContent = params.title; addDisposableListener(this.action, 'click', (ev) => { ev.preventDefault(); // @@ -107,10 +96,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { private render() { if (this._content.textContent !== this.params.title) { - this._content.textContent = - typeof this.params.title === 'string' - ? this.params.title - : this.id; + this._content.textContent = this.params.title; } } } diff --git a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts b/packages/dockview-core/src/dockview/defaultGroupPanelView.ts index 4a7406a81..44628939b 100644 --- a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts +++ b/packages/dockview-core/src/dockview/defaultGroupPanelView.ts @@ -7,21 +7,32 @@ import { } from '../groupview/types'; import { GroupPanel } from '../groupview/groupviewPanel'; import { IDisposable } from '../lifecycle'; +import { createComponent } from '../panel/componentFactory'; +import { IDockviewComponent } from './dockviewComponent'; + +export interface SerializedGroupPanelView { + tab?: { id: string }; + content: { id: string }; +} export interface IGroupPanelView extends IDisposable { + readonly contentComponent: string; + readonly tabComponent?: string; readonly content: IContentRenderer; readonly tab?: ITabRenderer; update(event: GroupPanelUpdateEvent): void; layout(width: number, height: number): void; init(params: GroupPanelPartInitParameters): void; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; - toJSON(): {}; } export class DefaultGroupPanelView implements IGroupPanelView { private readonly _content: IContentRenderer; private readonly _tab: ITabRenderer; + private _group: GroupPanel | null = null; + private _isPanelVisible: boolean | null = null; + get content(): IContentRenderer { return this._content; } @@ -30,9 +41,15 @@ export class DefaultGroupPanelView implements IGroupPanelView { return this._tab; } - constructor(renderers: { content: IContentRenderer; tab?: ITabRenderer }) { - this._content = renderers.content; - this._tab = renderers.tab ?? new DefaultTab(); + constructor( + private readonly accessor: IDockviewComponent, + private readonly id: string, + readonly contentComponent: string, + readonly tabComponent?: string + ) { + this._content = this.createContentComponent(this.id, contentComponent); + this._tab = + this.createTabComponent(this.id, tabComponent) ?? new DefaultTab(); } init(params: GroupPanelPartInitParameters): void { @@ -41,35 +58,65 @@ export class DefaultGroupPanelView implements IGroupPanelView { } updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { - this._content.updateParentGroup(group, isPanelVisible); - this._tab?.updateParentGroup(group, isPanelVisible); + if (group !== this._group) { + this._group = group; + if (this._content.onGroupChange) { + this._content.onGroupChange(group); + } + if (this._tab.onGroupChange) { + this._tab.onGroupChange(group); + } + } + + if (isPanelVisible !== this._isPanelVisible) { + this._isPanelVisible = isPanelVisible; + if (this._content.onPanelVisibleChange) { + this._content.onPanelVisibleChange(isPanelVisible); + } + if (this._tab.onPanelVisibleChange) { + this._tab.onPanelVisibleChange(isPanelVisible); + } + } } layout(width: number, height: number): void { - this.content.layout(width, height); + this.content.layout?.(width, height); } update(event: GroupPanelUpdateEvent): void { - this.content.update(event); - this.tab.update(event); - } - - toJSON(): {} { - let tab = - this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(); - - if (tab && Object.keys(tab).length === 0) { - tab = undefined; - } - - return { - content: this.content.toJSON(), - tab, - }; + this.content.update?.(event); + this.tab.update?.(event); } dispose(): void { - this.content.dispose(); - this.tab.dispose(); + this.content.dispose?.(); + this.tab.dispose?.(); + } + + private createContentComponent( + id: string, + componentName: string + ): IContentRenderer { + return createComponent( + id, + componentName, + this.accessor.options.components || {}, + this.accessor.options.frameworkComponents, + this.accessor.options.frameworkComponentFactory?.content + ); + } + + private createTabComponent( + id: string, + componentName?: string + ): ITabRenderer { + return createComponent( + id, + componentName, + this.accessor.options.tabComponents || {}, + this.accessor.options.frameworkTabComponents, + this.accessor.options.frameworkComponentFactory?.tab, + () => new DefaultTab() + ); } } diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index ef1a5b400..89a961341 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -1,7 +1,7 @@ import { GroupviewPanelState, ITabRenderer } from '../groupview/types'; import { GroupPanel } from '../groupview/groupviewPanel'; import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; -import { DockviewComponent } from './dockviewComponent'; +import { IDockviewComponent } from './dockviewComponent'; import { createComponent } from '../panel/componentFactory'; import { DefaultTab } from './components/tab/defaultTab'; import { DefaultGroupPanelView } from './defaultGroupPanelView'; @@ -12,7 +12,7 @@ export interface IPanelDeserializer { } export class DefaultDockviewDeserialzier implements IPanelDeserializer { - constructor(private readonly layout: DockviewComponent) {} + constructor(private readonly layout: IDockviewComponent) {} public fromJSON( panelData: GroupviewPanelState, @@ -21,14 +21,21 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { const panelId = panelData.id; const params = panelData.params; const title = panelData.title; - const viewData = panelData.view; + const viewData = panelData.view!; let tab: ITabRenderer; - if (viewData.tab?.id) { + const contentComponent = viewData + ? viewData.content.id + : panelData.contentComponent || 'unknown'; + const tabComponent = viewData + ? viewData.tab?.id + : panelData.tabComponent; + + if (tabComponent) { tab = createComponent( - viewData.tab.id, - viewData.tab.id, + panelId, + tabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, this.layout.options.frameworkComponentFactory?.tab, @@ -36,7 +43,7 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { ); } else if (this.layout.options.defaultTabComponent) { tab = createComponent( - this.layout.options.defaultTabComponent, + panelId, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, @@ -47,16 +54,12 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { tab = new DefaultTab(); } - const view = new DefaultGroupPanelView({ - content: createComponent( - viewData.content.id, - viewData.content.id, - this.layout.options.components, - this.layout.options.frameworkComponents, - this.layout.options.frameworkComponentFactory?.content - ), - tab, - }); + const view = new DefaultGroupPanelView( + this.layout, + panelId, + contentComponent, + tabComponent + ); const panel = new DockviewPanel( panelId, @@ -67,7 +70,7 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { panel.init({ view, - title, + title: title || panelId, params: params || {}, }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index f84353bfd..311e519f0 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -950,13 +950,16 @@ export class DockviewComponent options: AddPanelOptions, group: GroupPanel ): IDockviewPanel { - const view = new DefaultGroupPanelView({ - content: this.createContentComponent(options.id, options.component), - tab: this.createTabComponent( - options.id, - options.tabComponent || this.options.defaultTabComponent - ), - }); + const contentComponent = options.component; + const tabComponent = + options.tabComponent || this.options.defaultTabComponent; + + const view = new DefaultGroupPanelView( + this, + options.id, + contentComponent, + tabComponent + ); const panel = new DockviewPanel(options.id, this, this._api, group); panel.init({ @@ -968,33 +971,6 @@ export class DockviewComponent return panel; } - private createContentComponent( - id: string, - componentName: string - ): IContentRenderer { - return createComponent( - id, - componentName, - this.options.components || {}, - this.options.frameworkComponents, - this.options.frameworkComponentFactory?.content - ); - } - - private createTabComponent( - id: string, - componentName?: string - ): ITabRenderer { - return createComponent( - id, - componentName, - this.options.tabComponents || {}, - this.options.frameworkTabComponents, - this.options.frameworkComponentFactory?.tab, - () => new DefaultTab() - ); - } - private createGroupAtLocation(location: number[] = [0]): GroupPanel { const group = this.createGroup(); this.doAddGroup(group, location); diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 8378a1a6a..c3d543589 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -12,7 +12,7 @@ import { GroupPanel } from '../groupview/groupviewPanel'; import { CompositeDisposable, IDisposable } from '../lifecycle'; import { IPanel, Parameters } from '../panel/types'; import { IGroupPanelView } from './defaultGroupPanelView'; -import { DockviewComponent } from './dockviewComponent'; +import { IDockviewComponent } from './dockviewComponent'; export interface IDockviewPanel extends IDisposable, IPanel { readonly view?: IGroupPanelView; @@ -56,7 +56,7 @@ export class DockviewPanel constructor( public readonly id: string, - accessor: DockviewComponent, + accessor: IDockviewComponent, private readonly containerApi: DockviewApi, group: GroupPanel ) { @@ -82,9 +82,7 @@ export class DockviewPanel this._params = params.params; this._view = params.view; - if (typeof params.title === 'string') { - this.setTitle(params.title); - } + this.setTitle(params.title); this.view?.init({ ...params, @@ -100,7 +98,8 @@ export class DockviewPanel public toJSON(): GroupviewPanelState { return { id: this.id, - view: this.view!.toJSON(), + contentComponent: this.view?.contentComponent, + tabComponent: this.view?.tabComponent, params: Object.keys(this._params || {}).length > 0 ? this._params @@ -133,11 +132,9 @@ export class DockviewPanel ...event.params.params, }; - if (typeof params.title === 'string') { - if (params.title !== this.title) { - this._title = params.title; - this.api._onDidTitleChange.fire({ title: this.title }); - } + if (params.title !== this.title) { + this._title = params.title; + this.api._onDidTitleChange.fire({ title: this.title }); } this.view?.update({ diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index f45c1f108..5e24494d7 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -235,14 +235,14 @@ export abstract class BaseGrid if (this._activeGroup) { this._activeGroup.setActive(false); if (!skipFocus) { - this._activeGroup.focus(); + this._activeGroup.focus?.(); } } if (group) { group.setActive(true); if (!skipFocus) { - group.focus(); + group.focus?.(); } } diff --git a/packages/dockview-core/src/gridview/basePanelView.ts b/packages/dockview-core/src/gridview/basePanelView.ts index 74994ec04..d10a27be7 100644 --- a/packages/dockview-core/src/gridview/basePanelView.ts +++ b/packages/dockview-core/src/gridview/basePanelView.ts @@ -40,15 +40,15 @@ export abstract class BasePanelView */ protected abstract getComponent(): IFrameworkPart; - get element() { + get element(): HTMLElement { return this._element; } - get width() { + get width(): number { return this._width; } - get height() { + get height(): number { return this._height; } @@ -83,11 +83,11 @@ export abstract class BasePanelView ); } - focus() { + focus(): void { this.api._onFocusEvent.fire(); } - layout(width: number, height: number) { + layout(width: number, height: number): void { this._width = width; this._height = height; this.api._onDidDimensionChange.fire({ width, height }); @@ -104,7 +104,7 @@ export abstract class BasePanelView this.part = this.getComponent(); } - update(event: PanelUpdateEvent) { + update(event: PanelUpdateEvent): void { this._params = { ...this._params, params: { @@ -125,7 +125,7 @@ export abstract class BasePanelView }; } - dispose() { + dispose(): void { super.dispose(); this.api.dispose(); diff --git a/packages/dockview-core/src/groupview/groupview.ts b/packages/dockview-core/src/groupview/groupview.ts index 7e34326c0..cfb472ade 100644 --- a/packages/dockview-core/src/groupview/groupview.ts +++ b/packages/dockview-core/src/groupview/groupview.ts @@ -77,7 +77,7 @@ export interface IHeader { height: number | undefined; } -export interface IGroupview extends IDisposable, IGridPanelView { +export interface IGroupview extends IGridPanelView { readonly isActive: boolean; readonly size: number; readonly panels: IDockviewPanel[]; @@ -427,7 +427,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { } focus(): void { - this._activePanel?.focus(); + this._activePanel?.focus?.(); } public openPanel( @@ -525,7 +525,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { ): void { if (!force && this.isActive === isGroupActive) { if (!skipFocus) { - this._activePanel?.focus(); + this._activePanel?.focus?.(); } return; } @@ -545,7 +545,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { if (isGroupActive) { if (!skipFocus) { - this._activePanel?.focus(); + this._activePanel?.focus?.(); } } } diff --git a/packages/dockview-core/src/groupview/panel/content.ts b/packages/dockview-core/src/groupview/panel/content.ts index 82b827f3d..760bb99da 100644 --- a/packages/dockview-core/src/groupview/panel/content.ts +++ b/packages/dockview-core/src/groupview/panel/content.ts @@ -74,9 +74,8 @@ export class ContentContainer const disposable = new CompositeDisposable(); if (this.panel.view) { - const _onDidFocus: Event = - this.panel.view.content.onDidFocus!; - const _onDidBlur: Event = this.panel.view.content.onDidBlur!; + const _onDidFocus = this.panel.view.content.onDidFocus; + const _onDidBlur = this.panel.view.content.onDidBlur; const { onDidFocus, onDidBlur } = trackFocus(this._element); diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts index 670d4b939..2d389b5b2 100644 --- a/packages/dockview-core/src/groupview/types.ts +++ b/packages/dockview-core/src/groupview/types.ts @@ -9,7 +9,11 @@ import { import { DockviewApi } from '../api/component.api'; import { GroupPanel } from './groupviewPanel'; import { Event } from '../events'; -import { IGroupPanelView } from '../dockview/defaultGroupPanelView'; +import { + IGroupPanelView, + SerializedGroupPanelView, +} from '../dockview/defaultGroupPanelView'; +import { Optional } from '../types'; export interface IRenderable { id: string; @@ -19,7 +23,7 @@ export interface IRenderable { } export interface HeaderPartInitParameters { - title?: string; + title: string; } export interface GroupPanelPartInitParameters @@ -40,20 +44,28 @@ export interface IWatermarkRenderer extends IPanel { updateParentGroup(group: GroupPanel, visible: boolean): void; } -export interface ITabRenderer extends IPanel { +export interface ITabRenderer + extends Optional< + Omit, + 'dispose' | 'update' | 'layout' | 'toJSON' + > { readonly element: HTMLElement; init(parameters: GroupPanelPartInitParameters): void; - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; + onGroupChange?(group: GroupPanel): void; + onPanelVisibleChange?(isPanelVisible: boolean): void; } -export interface IContentRenderer extends IPanel { +export interface IContentRenderer + extends Optional< + Omit, + 'dispose' | 'update' | 'layout' | 'toJSON' + > { readonly element: HTMLElement; - readonly actions?: HTMLElement; readonly onDidFocus?: Event; readonly onDidBlur?: Event; - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; init(parameters: GroupPanelContentPartInitParameters): void; - layout(width: number, height: number): void; + onGroupChange?(group: GroupPanel): void; + onPanelVisibleChange?(isPanelVisible: boolean): void; } // watermark component @@ -88,7 +100,9 @@ export type GroupPanelUpdateEvent = PanelUpdateEvent<{ export interface GroupviewPanelState { id: string; - view?: any; + contentComponent?: string; + tabComponent?: string; title?: string; params?: { [key: string]: any }; + view?: SerializedGroupPanelView; // depreciated } diff --git a/packages/dockview-core/src/panel/types.ts b/packages/dockview-core/src/panel/types.ts index 7519da20a..ed536ada6 100644 --- a/packages/dockview-core/src/panel/types.ts +++ b/packages/dockview-core/src/panel/types.ts @@ -22,7 +22,7 @@ export interface IPanel extends IDisposable { layout(width: number, height: number): void; update(event: PanelUpdateEvent): void; toJSON(): object; - focus(): void; + focus?(): void; } export interface IFrameworkPart extends IDisposable { diff --git a/packages/dockview-core/src/types.ts b/packages/dockview-core/src/types.ts index fbe4b5799..367e00a8f 100644 --- a/packages/dockview-core/src/types.ts +++ b/packages/dockview-core/src/types.ts @@ -11,3 +11,5 @@ export type FunctionOrValue = (() => T) | T; export function isBooleanValue(value: any): value is boolean { return typeof value === 'boolean'; } + +export type Optional = Pick, K> & Omit; diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index 8c32bc717..e14be1c62 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -11,7 +11,6 @@ import { ITabRenderer, watchElementResize, GroupPanel, - DEFAULT_TAB_IDENTIFIER, DefaultDockviewDeserialzier, } from 'dockview-core'; import { ReactPanelContentPart } from './reactContentPart'; @@ -72,6 +71,8 @@ export interface IDockviewReactProps { singleTabMode?: 'fullwidth' | 'default'; } +const DEFAULT_REACT_TAB = 'props.defaultTabComponent'; + export const DockviewReact = React.forwardRef( (props: IDockviewReactProps, ref: React.ForwardedRef) => { const domRef = React.useRef(null); @@ -144,16 +145,22 @@ export const DockviewReact = React.forwardRef( const element = document.createElement('div'); + const frameworkTabComponents = props.tabComponents || {}; + + if (props.defaultTabComponent) { + frameworkTabComponents[DEFAULT_REACT_TAB] = + props.defaultTabComponent; + } + const dockview = new DockviewComponent(element, { frameworkComponentFactory: factory, frameworkComponents: props.components, - frameworkTabComponents: { - ...(props.tabComponents || {}), - [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent, - }, + frameworkTabComponents, tabHeight: props.tabHeight, watermarkFrameworkComponent: props.watermarkComponent, - defaultTabComponent: DEFAULT_TAB_IDENTIFIER, + defaultTabComponent: props.defaultTabComponent + ? DEFAULT_REACT_TAB + : undefined, styles: props.hideBorders ? { separatorBorder: 'transparent' } : undefined, @@ -241,12 +248,19 @@ export const DockviewReact = React.forwardRef( if (!dockviewRef.current) { return; } + + const frameworkTabComponents = props.tabComponents || {}; + + if (props.defaultTabComponent) { + frameworkTabComponents[DEFAULT_REACT_TAB] = + props.defaultTabComponent; + } + dockviewRef.current.updateOptions({ - defaultTabComponent: DEFAULT_TAB_IDENTIFIER, - frameworkTabComponents: { - ...(props.tabComponents || {}), - [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent, - }, + defaultTabComponent: props.defaultTabComponent + ? DEFAULT_REACT_TAB + : undefined, + frameworkTabComponents, }); }, [props.defaultTabComponent]); diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts index 3a7cc7180..79552bf13 100644 --- a/packages/dockview/src/dockview/reactContentPart.ts +++ b/packages/dockview/src/dockview/reactContentPart.ts @@ -52,12 +52,6 @@ export class ReactPanelContentPart implements IContentRenderer { ); } - public toJSON() { - return { - id: this.id, - }; - } - public update(event: PanelUpdateEvent) { this.part?.update(event.params); } diff --git a/packages/dockview/src/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts index 54ea58e07..31ee3c16e 100644 --- a/packages/dockview/src/dockview/reactHeaderPart.ts +++ b/packages/dockview/src/dockview/reactHeaderPart.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { ReactPart, ReactPortalStore } from '../react'; import { IGroupPanelBaseProps } from './dockview'; import { - DEFAULT_TAB_IDENTIFIER, PanelUpdateEvent, GroupPanel, ITabRenderer, @@ -47,16 +46,6 @@ export class ReactPanelHeaderPart implements ITabRenderer { this.part?.update(event.params); } - public toJSON() { - if (this.id === DEFAULT_TAB_IDENTIFIER) { - return {}; - } - - return { - id: this.id, - }; - } - public layout(_width: number, _height: number) { // noop - retrieval from api } diff --git a/packages/dockview/src/dockview/v2/webviewContentRenderer.ts b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts index 374b887ba..d001205f8 100644 --- a/packages/dockview/src/dockview/v2/webviewContentRenderer.ts +++ b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts @@ -32,10 +32,6 @@ export class WebviewContentRenderer implements IContentRenderer { this.parameters = parameters; } - public toJSON() { - return {}; - } - public update(params: PanelUpdateEvent) { if (this.parameters) { this.parameters.params = params.params; From b883e2fd312d523c5f9b5616d68981468705d013 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 1 Mar 2023 21:29:40 +0800 Subject: [PATCH 2/6] refactor: renaming --- ...iew.spec.ts => dockviewPanelModel.spec.ts} | 10 +++---- .../components/watermark/watermark.ts | 16 +++-------- .../src/dockview/deserializer.ts | 8 +++--- .../src/dockview/dockviewComponent.ts | 15 ++++++---- .../src/dockview/dockviewPanel.ts | 18 ++++-------- ...roupPanelView.ts => dockviewPanelModel.ts} | 4 +-- .../dockview-core/src/groupview/groupview.ts | 4 +-- .../src/groupview/groupviewPanel.ts | 7 +---- packages/dockview-core/src/groupview/types.ts | 28 ++++++------------- packages/dockview-core/src/index.ts | 1 - 10 files changed, 43 insertions(+), 68 deletions(-) rename packages/dockview-core/src/__tests__/dockview/{defaultGroupPanelView.spec.ts => dockviewPanelModel.spec.ts} (94%) rename packages/dockview-core/src/dockview/{defaultGroupPanelView.ts => dockviewPanelModel.ts} (96%) diff --git a/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts similarity index 94% rename from packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts rename to packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index a714f4e91..f0ca53db1 100644 --- a/packages/dockview-core/src/__tests__/dockview/defaultGroupPanelView.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -1,8 +1,8 @@ -import { DefaultGroupPanelView } from '../../dockview/defaultGroupPanelView'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { GroupPanel } from '../../groupview/groupviewPanel'; import { IContentRenderer, ITabRenderer } from '../../groupview/types'; -describe('defaultGroupPanelView', () => { +describe('dockviewGroupPanel', () => { test('that dispose is called on content and tab renderers when present', () => { const contentMock = jest.fn(() => { const partial: Partial = { @@ -23,7 +23,7 @@ describe('defaultGroupPanelView', () => { const content = new contentMock(); const tab = new tabMock(); - const cut = new DefaultGroupPanelView({ + const cut = new DockviewGroupPanel({ content, tab, contentComponent: 'contentComponent', @@ -55,7 +55,7 @@ describe('defaultGroupPanelView', () => { const content = new contentMock(); const tab = new tabMock(); - const cut = new DefaultGroupPanelView({ + const cut = new DockviewGroupPanel({ content, tab, contentComponent: 'contentComponent', @@ -91,7 +91,7 @@ describe('defaultGroupPanelView', () => { const content = new contentMock(); const tab = new tabMock(); - let cut = new DefaultGroupPanelView({ + let cut = new DockviewGroupPanel({ content, tab, contentComponent: 'contentComponent', diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index 3fa360a5c..c67fc6a6d 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -18,8 +18,8 @@ export class Watermark private group: GroupPanel | undefined; private params: GroupPanelPartInitParameters | undefined; - get id() { - return 'watermark'; + get element() { + return this._element; } constructor() { @@ -67,10 +67,6 @@ export class Watermark // noop } - toJSON() { - return {}; - } - layout(_width: number, _height: number) { // noop } @@ -92,8 +88,8 @@ export class Watermark this.render(); } - get element() { - return this._element; + dispose() { + super.dispose(); } private render() { @@ -102,8 +98,4 @@ export class Watermark ); toggleClass(this.element, 'has-actions', isOneGroup); } - - dispose() { - super.dispose(); - } } diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index 89a961341..f1f4b6bd3 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -4,7 +4,7 @@ import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; import { IDockviewComponent } from './dockviewComponent'; import { createComponent } from '../panel/componentFactory'; import { DefaultTab } from './components/tab/defaultTab'; -import { DefaultGroupPanelView } from './defaultGroupPanelView'; +import { DockviewPanelModel } from './dockviewPanelModel'; import { DockviewApi } from '../api/component.api'; export interface IPanelDeserializer { @@ -54,7 +54,7 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { tab = new DefaultTab(); } - const view = new DefaultGroupPanelView( + const view = new DockviewPanelModel( this.layout, panelId, contentComponent, @@ -65,11 +65,11 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { panelId, this.layout, new DockviewApi(this.layout), - group + group, + view ); panel.init({ - view, title: title || panelId, params: params || {}, }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 311e519f0..5a330291e 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -44,7 +44,7 @@ import { GroupviewDropEvent, } from '../groupview/groupview'; import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel'; -import { DefaultGroupPanelView } from './defaultGroupPanelView'; +import { DockviewPanelModel } from './dockviewPanelModel'; import { getPanelData } from '../dnd/dataTransfer'; import { DockviewDropTargets } from '../groupview/dnd'; @@ -660,7 +660,7 @@ export class DockviewComponent } } else if (this.watermark) { this.watermark.element.parentElement!.remove(); - this.watermark.dispose(); + this.watermark.dispose?.(); this.watermark = null; } } @@ -954,16 +954,21 @@ export class DockviewComponent const tabComponent = options.tabComponent || this.options.defaultTabComponent; - const view = new DefaultGroupPanelView( + const view = new DockviewPanelModel( this, options.id, contentComponent, tabComponent ); - const panel = new DockviewPanel(options.id, this, this._api, group); + const panel = new DockviewPanel( + options.id, + this, + this._api, + group, + view + ); panel.init({ - view, title: options.title || options.id, params: options?.params || {}, }); diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index c3d543589..b89deeae7 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -11,11 +11,11 @@ import { import { GroupPanel } from '../groupview/groupviewPanel'; import { CompositeDisposable, IDisposable } from '../lifecycle'; import { IPanel, Parameters } from '../panel/types'; -import { IGroupPanelView } from './defaultGroupPanelView'; +import { IDockviewPanelModel } from './dockviewPanelModel'; import { IDockviewComponent } from './dockviewComponent'; export interface IDockviewPanel extends IDisposable, IPanel { - readonly view?: IGroupPanelView; + readonly view: IDockviewPanelModel; readonly group: GroupPanel; readonly api: DockviewPanelApi; readonly title: string; @@ -34,8 +34,6 @@ export class DockviewPanel private _group: GroupPanel; private _params?: Parameters; - private _view?: IGroupPanelView; - private _title: string; get params(): Parameters | undefined { @@ -50,15 +48,12 @@ export class DockviewPanel return this._group; } - get view(): IGroupPanelView | undefined { - return this._view; - } - constructor( public readonly id: string, accessor: IDockviewComponent, private readonly containerApi: DockviewApi, - group: GroupPanel + group: GroupPanel, + readonly view: IDockviewPanelModel ) { super(); this._title = ''; @@ -80,7 +75,6 @@ export class DockviewPanel public init(params: IGroupPanelInitParameters): void { this._params = params.params; - this._view = params.view; this.setTitle(params.title); @@ -98,8 +92,8 @@ export class DockviewPanel public toJSON(): GroupviewPanelState { return { id: this.id, - contentComponent: this.view?.contentComponent, - tabComponent: this.view?.tabComponent, + contentComponent: this.view.contentComponent, + tabComponent: this.view.tabComponent, params: Object.keys(this._params || {}).length > 0 ? this._params diff --git a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts similarity index 96% rename from packages/dockview-core/src/dockview/defaultGroupPanelView.ts rename to packages/dockview-core/src/dockview/dockviewPanelModel.ts index 44628939b..210463ea1 100644 --- a/packages/dockview-core/src/dockview/defaultGroupPanelView.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -15,7 +15,7 @@ export interface SerializedGroupPanelView { content: { id: string }; } -export interface IGroupPanelView extends IDisposable { +export interface IDockviewPanelModel extends IDisposable { readonly contentComponent: string; readonly tabComponent?: string; readonly content: IContentRenderer; @@ -26,7 +26,7 @@ export interface IGroupPanelView extends IDisposable { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; } -export class DefaultGroupPanelView implements IGroupPanelView { +export class DockviewPanelModel implements IDockviewPanelModel { private readonly _content: IContentRenderer; private readonly _tab: ITabRenderer; diff --git a/packages/dockview-core/src/groupview/groupview.ts b/packages/dockview-core/src/groupview/groupview.ts index cfb472ade..9387dffb2 100644 --- a/packages/dockview-core/src/groupview/groupview.ts +++ b/packages/dockview-core/src/groupview/groupview.ts @@ -681,7 +681,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { } if (!this.isEmpty && this.watermark) { this.watermark.element.remove(); - this.watermark.dispose(); + this.watermark.dispose?.(); this.watermark = undefined; this.tabsContainer.show(); } @@ -760,7 +760,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { public dispose(): void { super.dispose(); - this.watermark?.dispose(); + this.watermark?.dispose?.(); for (const panel of this.panels) { panel.dispose(); diff --git a/packages/dockview-core/src/groupview/groupviewPanel.ts b/packages/dockview-core/src/groupview/groupviewPanel.ts index 4ef6caa77..db35c677a 100644 --- a/packages/dockview-core/src/groupview/groupviewPanel.ts +++ b/packages/dockview-core/src/groupview/groupviewPanel.ts @@ -1,9 +1,6 @@ import { IFrameworkPart } from '../panel/types'; import { DockviewComponent } from '../dockview/dockviewComponent'; -import { - GridviewPanelApi, - GridviewPanelApiImpl, -} from '../api/gridviewPanelApi'; +import { GridviewPanelApi } from '../api/gridviewPanelApi'; import { Groupview, GroupOptions, IHeader } from './groupview'; import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel'; import { IDockviewPanel } from '../dockview/dockviewPanel'; @@ -20,8 +17,6 @@ export type IGroupviewPanelPublic = IGroupviewPanel; export type GroupviewPanelApi = GridviewPanelApi; -class GroupviewApi extends GridviewPanelApiImpl implements GroupviewPanelApi {} - export class GroupPanel extends GridviewPanel implements IGroupviewPanel { private readonly _model: Groupview; diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts index 2d389b5b2..cacebb5b6 100644 --- a/packages/dockview-core/src/groupview/types.ts +++ b/packages/dockview-core/src/groupview/types.ts @@ -10,18 +10,11 @@ import { DockviewApi } from '../api/component.api'; import { GroupPanel } from './groupviewPanel'; import { Event } from '../events'; import { - IGroupPanelView, + IDockviewPanelModel, SerializedGroupPanelView, -} from '../dockview/defaultGroupPanelView'; +} from '../dockview/dockviewPanelModel'; import { Optional } from '../types'; -export interface IRenderable { - id: string; - element: HTMLElement; - onDidFocus?: Event; - onDidBlur?: Event; -} - export interface HeaderPartInitParameters { title: string; } @@ -38,7 +31,11 @@ export interface GroupPanelContentPartInitParameters tab: ITabRenderer; } -export interface IWatermarkRenderer extends IPanel { +export interface IWatermarkRenderer + extends Optional< + Omit, + 'dispose' | 'update' | 'layout' | 'toJSON' + > { readonly element: HTMLElement; init: (params: GroupPanelPartInitParameters) => void; updateParentGroup(group: GroupPanel, visible: boolean): void; @@ -76,13 +73,6 @@ export interface WatermarkPartInitParameters { // constructors -export interface PanelHeaderPartConstructor { - new (): ITabRenderer; -} -export interface PanelContentPartConstructor { - new (): IContentRenderer; -} - export interface WatermarkConstructor { new (): IWatermarkRenderer; } @@ -90,7 +80,7 @@ export interface WatermarkConstructor { export interface IGroupPanelInitParameters extends PanelInitParameters, HeaderPartInitParameters { - view: IGroupPanelView; + // } export type GroupPanelUpdateEvent = PanelUpdateEvent<{ @@ -104,5 +94,5 @@ export interface GroupviewPanelState { tabComponent?: string; title?: string; params?: { [key: string]: any }; - view?: SerializedGroupPanelView; // depreciated + view: SerializedGroupPanelView; // depreciated } diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index 5697c58b0..b5a753dca 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -50,7 +50,6 @@ export * from './splitview/splitviewPanel'; export * from './paneview/paneviewPanel'; export * from './groupview/types'; -export { Event } from './events'; export { Position, positionToDirection, From 52e458772e0759d143dec9473f2c8d59df3b6cd7 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 6 Mar 2023 23:12:51 +0800 Subject: [PATCH 3/6] tests: fix tests --- .../__mocks__/mockDockviewPanelMode.ts | 39 +++++ .../dockview/dockviewComponent.spec.ts | 141 ++++++----------- .../__tests__/dockview/dockviewPanel.spec.ts | 63 +++++--- .../dockview/dockviewPanelModel.spec.ts | 142 +++++++++++------- .../src/__tests__/groupview/groupview.spec.ts | 80 +++++----- .../__tests__/groupview/panel/content.spec.ts | 6 +- packages/dockview-core/src/groupview/types.ts | 2 +- .../react/dockview/reactHeaderPart.spec.ts | 24 --- 8 files changed, 269 insertions(+), 228 deletions(-) create mode 100644 packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts delete mode 100644 packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts new file mode 100644 index 000000000..9b85e2feb --- /dev/null +++ b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts @@ -0,0 +1,39 @@ +import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; +import { GroupPanel } from '../../groupview/groupviewPanel'; +import { + GroupPanelPartInitParameters, + GroupPanelUpdateEvent, + IContentRenderer, + ITabRenderer, +} from '../../groupview/types'; + +export class DockviewPanelModelMock implements IDockviewPanelModel { + constructor( + readonly contentComponent: string, + readonly content: IContentRenderer, + readonly tabComponent?: string, + readonly tab?: ITabRenderer + ) { + // + } + + init(params: GroupPanelPartInitParameters): void { + // + } + + update(event: GroupPanelUpdateEvent): void { + // + } + + layout(width: number, height: number): void { + // + } + + updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { + // + } + + dispose(): void { + // + } +} diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 7e04afc83..346abb44f 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -13,8 +13,6 @@ import { GroupviewPanelState, IGroupPanelInitParameters, } from '../../groupview/types'; -import { IGroupPanelView } from '../../dockview/defaultGroupPanelView'; -import { DefaultTab } from '../../dockview/components/tab/defaultTab'; import { Emitter } from '../../events'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; import { @@ -22,6 +20,9 @@ import { DockviewPanelApiImpl, } from '../../api/dockviewPanelApi'; import { DefaultDockviewDeserialzier } from '../../dockview/deserializer'; +import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; +import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode'; +import { DefaultTab } from '../../dockview/components/tab/defaultTab'; class PanelContentPartTest implements IContentRenderer { element: HTMLElement = document.createElement('div'); @@ -93,10 +94,6 @@ class PanelTabPartTest implements ITabRenderer { //noop } - toJSON(): object { - return { id: this.id }; - } - focus(): void { //noop } @@ -107,43 +104,11 @@ class PanelTabPartTest implements ITabRenderer { } } -class TestGroupPanelView implements IGroupPanelView { - readonly tab: ITabRenderer = new DefaultTab(); - - constructor(public readonly content: IContentRenderer) { - // - } - - update(event: GroupPanelUpdateEvent): void { - // - } - - layout(width: number, height: number): void { - // - } - - init(params: GroupPanelPartInitParameters): void { - // - } - - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { - // - } - - toJSON(): {} { - return {}; - } - - dispose(): void { - // - } -} - class TestGroupPanel implements IDockviewPanel { private _group: GroupPanel | undefined; - readonly view: IGroupPanelView; readonly api: DockviewPanelApi; + readonly view: IDockviewPanelModel; constructor( public readonly id: string, @@ -152,8 +117,11 @@ class TestGroupPanel implements IDockviewPanel { ) { this.api = new DockviewPanelApiImpl(this, this._group!); this._group = new GroupPanel(accessor, id, {}); - this.view = new TestGroupPanelView( - new PanelContentPartTest(id, 'component') + this.view = new DockviewPanelModelMock( + 'component', + new PanelContentPartTest(id, 'component'), + 'tabComponent', + new DefaultTab() ); } @@ -562,27 +530,27 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, panel4: { id: 'panel4', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel4', }, panel5: { id: 'panel5', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel5', }, }, @@ -647,27 +615,27 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, panel4: { id: 'panel4', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel4', }, panel5: { id: 'panel5', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel5', }, }, @@ -1098,17 +1066,14 @@ describe('dockviewComponent', () => { view_1: { id: 'view_1', title: 'view_1_title', - view: {}, }, view_2: { id: 'view_2', title: 'view_2_title', - view: {}, }, view_3: { id: 'view_3', title: 'view_3_title', - view: {}, }, }, options: {}, @@ -1602,27 +1567,27 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, panel4: { id: 'panel4', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel4', }, panel5: { id: 'panel5', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel5', }, }, @@ -1736,30 +1701,28 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { - content: { id: 'default' }, - tab: { id: '__non__existant_tab__' }, - }, + contentComponent: 'default', + tabComponent: '__non__existant_tab__', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, panel4: { id: 'panel4', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel4', }, panel5: { id: 'panel5', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel5', }, }, @@ -1863,15 +1826,13 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { - content: { id: 'default' }, - tab: { id: 'test_tab_id' }, - }, + contentComponent: 'default', + tabComponent: 'test_tab_id', title: 'panel2', }, }, @@ -1926,20 +1887,18 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { - content: { id: 'default' }, - tab: { id: 'test_tab_id' }, - }, + contentComponent: 'default', + tabComponent: 'test_tab_id', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, }, @@ -1959,7 +1918,7 @@ describe('dockviewComponent', () => { expect(viewQuery2.length).toBe(1); const viewQuery3 = group.element.querySelectorAll( - '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-test_tab_id' + '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-panel2' ); expect(viewQuery3.length).toBe(1); }); @@ -2009,7 +1968,7 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, }, @@ -2061,12 +2020,12 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, }, @@ -2124,12 +2083,12 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, }, @@ -2196,18 +2155,18 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, }, @@ -2256,7 +2215,7 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, }, @@ -2325,17 +2284,17 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel1', }, panel2: { id: 'panel2', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel2', }, panel3: { id: 'panel3', - view: { content: { id: 'default' } }, + contentComponent: 'default', title: 'panel3', }, }, diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index 23846480b..3d13adb4b 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -1,8 +1,8 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewApi } from '../../api/component.api'; -import { IGroupPanelView } from '../../dockview/defaultGroupPanelView'; import { DockviewPanel } from '../../dockview/dockviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel'; +import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; describe('dockviewPanel', () => { test('update title', () => { @@ -17,10 +17,19 @@ describe('dockviewPanel', () => { const groupMock = jest.fn(() => { return {} as any; }); + const panelModelMock = jest.fn, []>(() => { + return { + update: jest.fn(), + init: jest.fn(), + }; + }); + const api = new dockviewApiMock(); const accessor = new accessorMock(); const group = new groupMock(); - const cut = new DockviewPanel('fake-id', accessor, api, group); + const model = new panelModelMock(); + + const cut = new DockviewPanel('fake-id', accessor, api, group, model); let latestTitle: string | undefined = undefined; @@ -30,7 +39,7 @@ describe('dockviewPanel', () => { expect(cut.title).toBe(''); - cut.init({ title: 'new title', params: {}, view: null }); + cut.init({ title: 'new title', params: {} }); expect(latestTitle).toBe('new title'); expect(cut.title).toBe('new title'); @@ -51,26 +60,26 @@ describe('dockviewPanel', () => { const groupMock = jest.fn(() => { return {} as any; }); + const panelModelMock = jest.fn, []>(() => { + return { + update: jest.fn(), + init: jest.fn(), + dispose: jest.fn(), + }; + }); + const api = new dockviewApiMock(); const accessor = new accessorMock(); const group = new groupMock(); + const model = new panelModelMock(); - const cut = new DockviewPanel('fake-id', accessor, api, group); + const cut = new DockviewPanel('fake-id', accessor, api, group, model); - const viewMock = jest.fn(() => { - return { - init: jest.fn(), - dispose: jest.fn(), - update: jest.fn(), - } as any; - }); - const view = new viewMock(); - - cut.init({ params: {}, view, title: 'title' }); + cut.init({ params: {}, title: 'title' }); cut.dispose(); - expect(view.dispose).toHaveBeenCalled(); + expect(model.dispose).toHaveBeenCalled(); }); test('get params', () => { @@ -83,10 +92,20 @@ describe('dockviewPanel', () => { const groupMock = jest.fn(() => { return {} as any; }); + const panelModelMock = jest.fn, []>(() => { + return { + update: jest.fn(), + init: jest.fn(), + dispose: jest.fn(), + }; + }); + const api = new dockviewApiMock(); const accessor = new accessorMock(); const group = new groupMock(); - const cut = new DockviewPanel('fake-id', accessor, api, group); + const model = new panelModelMock(); + + const cut = new DockviewPanel('fake-id', accessor, api, group, model); expect(cut.params).toEqual(undefined); @@ -109,10 +128,20 @@ describe('dockviewPanel', () => { }, } as any; }); + const panelModelMock = jest.fn, []>(() => { + return { + update: jest.fn(), + init: jest.fn(), + dispose: jest.fn(), + }; + }); + const api = new dockviewApiMock(); const accessor = new accessorMock(); const group = new groupMock(); - const cut = new DockviewPanel('fake-id', accessor, api, group); + const model = new panelModelMock(); + + const cut = new DockviewPanel('fake-id', accessor, api, group, model); cut.api.setSize({ height: 123, width: 456 }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index f0ca53db1..28c1e17d8 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -1,5 +1,8 @@ -import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { + DockviewComponent, + IDockviewComponent, +} from '../../dockview/dockviewComponent'; +import { DockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { IContentRenderer, ITabRenderer } from '../../groupview/types'; describe('dockviewGroupPanel', () => { @@ -20,19 +23,30 @@ describe('dockviewGroupPanel', () => { return partial as IContentRenderer; }); - const content = new contentMock(); - const tab = new tabMock(); - - const cut = new DockviewGroupPanel({ - content, - tab, - contentComponent: 'contentComponent', + const accessorMock = jest.fn, []>(() => { + return { + options: { + components: { + contentComponent: contentMock, + }, + tabComponents: { + tabComponent: tabMock, + }, + }, + }; }); + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent', + 'tabComponent' + ); + cut.dispose(); - expect(content.dispose).toHaveBeenCalled(); - expect(tab.dispose).toHaveBeenCalled(); + expect(cut.content.dispose).toHaveBeenCalled(); + expect(cut.tab.dispose).toHaveBeenCalled(); }); test('that update is called on content and tab renderers when present', () => { @@ -52,24 +66,34 @@ describe('dockviewGroupPanel', () => { return partial as IContentRenderer; }); - const content = new contentMock(); - const tab = new tabMock(); - - const cut = new DockviewGroupPanel({ - content, - tab, - contentComponent: 'contentComponent', + const accessorMock = jest.fn, []>(() => { + return { + options: { + components: { + contentComponent: contentMock, + }, + tabComponents: { + tabComponent: tabMock, + }, + }, + }; }); + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent', + 'tabComponent' + ); cut.update({ params: {}, }); - expect(content.update).toHaveBeenCalled(); - expect(tab.update).toHaveBeenCalled(); + expect(cut.content.update).toHaveBeenCalled(); + expect(cut.tab.update).toHaveBeenCalled(); }); - test('test1', () => { + test('that events are fired', () => { const contentMock = jest.fn(() => { const partial: Partial = { element: document.createElement('div'), @@ -88,44 +112,60 @@ describe('dockviewGroupPanel', () => { return partial as IContentRenderer; }); - const content = new contentMock(); - const tab = new tabMock(); - - let cut = new DockviewGroupPanel({ - content, - tab, - contentComponent: 'contentComponent', + const accessorMock = jest.fn, []>(() => { + return { + options: { + components: { + contentComponent: contentMock, + }, + tabComponents: { + tabComponent: tabMock, + }, + }, + }; }); + const cut = new DockviewPanelModel( + new accessorMock(), + 'id', + 'contentComponent', + 'tabComponent' + ); const group1 = jest.fn() as any; const group2 = jest.fn() as any; - cut.updateParentGroup(group1 as GroupPanel, false); + cut.updateParentGroup(group1, false); - expect(content.onGroupChange).toHaveBeenNthCalledWith(1, group1); - expect(tab.onGroupChange).toHaveBeenNthCalledWith(1, group1); - expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); - expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); - expect(content.onGroupChange).toHaveBeenCalledTimes(1); - expect(tab.onGroupChange).toHaveBeenCalledTimes(1); - expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(1); - expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(1); + expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(1, group1); + expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(1, group1); + expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith( + 1, + false + ); + expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); + expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1); + expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1); + expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(1); + expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(1); - cut.updateParentGroup(group1 as GroupPanel, true); + cut.updateParentGroup(group1, true); - expect(content.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); - expect(tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); - expect(content.onGroupChange).toHaveBeenCalledTimes(1); - expect(tab.onGroupChange).toHaveBeenCalledTimes(1); - expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2); - expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith( + 2, + true + ); + expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); + expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1); + expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1); + expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); - cut.updateParentGroup(group2 as GroupPanel, true); + cut.updateParentGroup(group2, true); - expect(content.onGroupChange).toHaveBeenNthCalledWith(2, group2); - expect(tab.onGroupChange).toHaveBeenNthCalledWith(2, group2); - expect(content.onGroupChange).toHaveBeenCalledTimes(2); - expect(tab.onGroupChange).toHaveBeenCalledTimes(2); - expect(content.onPanelVisibleChange).toHaveBeenCalledTimes(2); - expect(tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(2, group2); + expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(2, group2); + expect(cut.content.onGroupChange).toHaveBeenCalledTimes(2); + expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(2); + expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2); + expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts b/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts index 9df238d59..36d4193c9 100644 --- a/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts @@ -1,5 +1,6 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; import { + GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters, } from '../../groupview/types'; @@ -11,16 +12,16 @@ import { } from '../../groupview/types'; import { PanelUpdateEvent } from '../../panel/types'; import { GroupOptions, Groupview } from '../../groupview/groupview'; -import { - DefaultGroupPanelView, - IGroupPanelView, -} from '../../dockview/defaultGroupPanelView'; import { GroupPanel } from '../../groupview/groupviewPanel'; import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { CompositeDisposable } from '../../lifecycle'; import { DockviewPanelApi } from '../../api/dockviewPanelApi'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; +import { + IDockviewPanelModel, + DockviewPanelModel, +} from '../../dockview/dockviewPanelModel'; enum GroupChangeKind2 { ADD_PANEL, @@ -28,6 +29,38 @@ enum GroupChangeKind2 { PANEL_ACTIVE, } +class TestModel implements IDockviewPanelModel { + readonly content: IContentRenderer; + readonly contentComponent: string; + readonly tab: ITabRenderer; + + constructor(id: string) { + this.content = new TestHeaderPart(id); + this.contentComponent = id; + this.tab = new TestContentPart(id); + } + + update(event: GroupPanelUpdateEvent): void { + // + } + + layout(width: number, height: number): void { + // + } + + init(params: GroupPanelPartInitParameters): void { + // + } + + updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { + // + } + + dispose(): void { + // + } +} + class Watermark implements IWatermarkRenderer { public readonly element = document.createElement('div'); @@ -140,9 +173,9 @@ class TestHeaderPart implements ITabRenderer { } export class TestPanel implements IDockviewPanel { - private _view: IGroupPanelView | undefined; private _group: GroupPanel | undefined; private _params: IGroupPanelInitParameters; + readonly view: IDockviewPanelModel; get title() { return ''; @@ -152,28 +185,19 @@ export class TestPanel implements IDockviewPanel { return this._group!; } - get view() { - return this._view; - } - get params(): Record { return {}; } constructor(public readonly id: string, public api: DockviewPanelApi) { + this.view = new TestModel(id); this.init({ - view: new DefaultGroupPanelView({ - tab: new TestHeaderPart(id), - content: new TestContentPart(id), - }), title: `${id}`, params: {}, }); } init(params: IGroupPanelInitParameters) { - this._view = params.view; - this._params = params; } @@ -196,7 +220,6 @@ export class TestPanel implements IDockviewPanel { toJSON(): GroupviewPanelState { return { id: this.id, - view: this._view?.toJSON(), title: this._params?.title, }; } @@ -236,31 +259,6 @@ describe('groupview', () => { groupview.initialize(); }); - test('serialized layout shows active panel', () => { - const panel1 = new TestPanel('panel1', jest.fn() as any); - const panel2 = new TestPanel('panel2', jest.fn() as any); - const panel3 = new TestPanel('panel3', jest.fn() as any); - - const groupview2 = new GroupPanel(dockview, 'groupview-2', { - tabHeight: 25, - panels: [panel1, panel2, panel3], - activePanel: panel2, - }); - groupview2.initialize(); - - expect(groupview2.model.activePanel).toBe(panel2); - - expect( - groupview2.element.querySelector('.content-part-panel1') - ).toBeFalsy(); - expect( - groupview2.element.querySelector('.content-part-panel2') - ).toBeTruthy(); - expect( - groupview2.element.querySelector('.content-part-panel3') - ).toBeFalsy(); - }); - test('panel events are captured during de-serialization', () => { const panel1 = new TestPanel('panel1', jest.fn() as any); const panel2 = new TestPanel('panel2', jest.fn() as any); diff --git a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts index 136b34352..5ddaafb11 100644 --- a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts @@ -7,9 +7,9 @@ import { } from '../../../groupview/types'; import { CompositeDisposable } from '../../../lifecycle'; import { PanelUpdateEvent } from '../../../panel/types'; -import { IGroupPanelView } from '../../../dockview/defaultGroupPanelView'; import { GroupPanel } from '../../../groupview/groupviewPanel'; import { IDockviewPanel } from '../../../dockview/dockviewPanel'; +import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel'; class TestContentRenderer extends CompositeDisposable @@ -77,7 +77,7 @@ describe('contentContainer', () => { const panel = { view: { content: contentRenderer, - } as Partial, + } as Partial, } as Partial; cut.openPanel(panel as IDockviewPanel); @@ -111,7 +111,7 @@ describe('contentContainer', () => { const panel2 = { view: { content: contentRenderer2, - } as Partial, + } as Partial, } as Partial; cut.openPanel(panel2 as IDockviewPanel); diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts index cacebb5b6..dcda379ba 100644 --- a/packages/dockview-core/src/groupview/types.ts +++ b/packages/dockview-core/src/groupview/types.ts @@ -94,5 +94,5 @@ export interface GroupviewPanelState { tabComponent?: string; title?: string; params?: { [key: string]: any }; - view: SerializedGroupPanelView; // depreciated + view?: SerializedGroupPanelView; // depreciated } diff --git a/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts b/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts deleted file mode 100644 index 9ba01ba0f..000000000 --- a/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { DEFAULT_TAB_IDENTIFIER } from 'dockview-core'; -import { ReactPanelHeaderPart } from '../../../dockview/reactHeaderPart'; - -describe('reactHeaderPart', () => { - test('that tab id is present in toJSON when not the default tab', () => { - const cut = new ReactPanelHeaderPart( - 'test-id', - jest.fn(), - jest.fn() - ); - - expect(cut.toJSON()).toEqual({ id: 'test-id' }); - }); - - test('that tab id is not present in the toJSON when is default tab', () => { - const cut = new ReactPanelHeaderPart( - DEFAULT_TAB_IDENTIFIER, - jest.fn(), - jest.fn() - ); - - expect(cut.toJSON()).toEqual({}); - }); -}); From c3e2ed1a8743de370b3ef1325e9bcf4d351b24b6 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 6 Mar 2023 23:37:50 +0800 Subject: [PATCH 4/6] refactor: renaming files --- .../__mocks__/mockDockviewPanelMode.ts | 7 +- .../__tests__/api/dockviewPanelApi.spec.ts | 10 +- .../dockview/dockviewComponent.spec.ts | 28 ++-- .../__tests__/dockview/dockviewPanel.spec.ts | 10 +- .../__tests__/gridview/gridviewPanel.spec.ts | 4 +- ...pec.ts => dockviewGroupPanelModel.spec.ts} | 150 ++++++++++-------- .../__tests__/groupview/panel/content.spec.ts | 5 - .../src/__tests__/groupview/tab.spec.ts | 94 ++++++----- .../groupview/titlebar/tabsContainer.spec.ts | 96 ++++++----- .../dockview-core/src/api/component.api.ts | 23 +-- .../dockview-core/src/api/dockviewPanelApi.ts | 12 +- .../dockview-core/src/dnd/groupDragHandler.ts | 4 +- .../src/dockview/components/tab/defaultTab.ts | 7 +- .../components/watermark/watermark.ts | 6 +- .../src/dockview/deserializer.ts | 9 +- .../src/dockview/dockviewComponent.ts | 58 ++++--- .../src/dockview/dockviewPanel.ts | 17 +- .../src/dockview/dockviewPanelModel.ts | 11 +- .../dockview-core/src/dockview/options.ts | 22 ++- ...groupview.scss => dockviewGroupPanel.scss} | 0 ...roupviewPanel.ts => dockviewGroupPanel.ts} | 31 ++-- ...roupview.ts => dockviewGroupPanelModel.ts} | 15 +- packages/dockview-core/src/groupview/tab.ts | 4 +- .../src/groupview/titlebar/tabsContainer.ts | 4 +- .../src/groupview/titlebar/voidContainer.ts | 4 +- packages/dockview-core/src/groupview/types.ts | 8 +- packages/dockview-core/src/index.ts | 4 +- .../dockview/src/dockview/reactContentPart.ts | 6 +- 28 files changed, 358 insertions(+), 291 deletions(-) rename packages/dockview-core/src/__tests__/groupview/{groupview.spec.ts => dockviewGroupPanelModel.spec.ts} (87%) rename packages/dockview-core/src/groupview/{groupview.scss => dockviewGroupPanel.scss} (100%) rename packages/dockview-core/src/groupview/{groupviewPanel.ts => dockviewGroupPanel.ts} (73%) rename packages/dockview-core/src/groupview/{groupview.ts => dockviewGroupPanelModel.ts} (98%) diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts index 9b85e2feb..e116982d6 100644 --- a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts +++ b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts @@ -1,5 +1,5 @@ import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; import { GroupPanelPartInitParameters, GroupPanelUpdateEvent, @@ -29,7 +29,10 @@ export class DockviewPanelModelMock implements IDockviewPanelModel { // } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { + updateParentGroup( + group: DockviewGroupPanel, + isPanelVisible: boolean + ): void { // } diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts index 148e0ff2e..096761ee8 100644 --- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts +++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts @@ -1,7 +1,7 @@ import { DockviewPanelApiImpl, TitleEvent } from '../../api/dockviewPanelApi'; import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; describe('groupPanelApi', () => { test('title', () => { @@ -10,7 +10,7 @@ describe('groupPanelApi', () => { update: jest.fn(), } as any; }); - const groupMock = jest.fn(() => { + const groupMock = jest.fn(() => { return {} as any; }); @@ -37,7 +37,7 @@ describe('groupPanelApi', () => { onDidRemovePanel: jest.fn(), options: {}, }; - const groupViewPanel = new GroupPanel( + const groupViewPanel = new DockviewGroupPanel( accessor, '', {} @@ -45,7 +45,7 @@ describe('groupPanelApi', () => { const cut = new DockviewPanelApiImpl( groupPanel, - groupViewPanel + groupViewPanel ); let events = 0; @@ -57,7 +57,7 @@ describe('groupPanelApi', () => { expect(events).toBe(0); expect(cut.group).toBe(groupViewPanel); - const groupViewPanel2 = new GroupPanel( + const groupViewPanel2 = new DockviewGroupPanel( accessor, '', {} diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 346abb44f..e8ed2e4c5 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -6,7 +6,6 @@ import { } from '../../groupview/types'; import { PanelUpdateEvent } from '../../panel/types'; import { Orientation } from '../../splitview/core/splitview'; -import { GroupPanel } from '../../groupview/groupviewPanel'; import { CompositeDisposable } from '../../lifecycle'; import { GroupPanelUpdateEvent, @@ -23,6 +22,7 @@ import { DefaultDockviewDeserialzier } from '../../dockview/deserializer'; import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode'; import { DefaultTab } from '../../dockview/components/tab/defaultTab'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; class PanelContentPartTest implements IContentRenderer { element: HTMLElement = document.createElement('div'); @@ -36,10 +36,6 @@ class PanelContentPartTest implements IContentRenderer { this.element.classList.add(`testpanel-${id}`); } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { - //noop - } - init(parameters: GroupPanelPartInitParameters): void { //noop } @@ -78,10 +74,6 @@ class PanelTabPartTest implements ITabRenderer { this.element.className = `panel-tab-part-${id}`; } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { - //noop - } - init(parameters: GroupPanelPartInitParameters): void { //noop } @@ -105,7 +97,7 @@ class PanelTabPartTest implements ITabRenderer { } class TestGroupPanel implements IDockviewPanel { - private _group: GroupPanel | undefined; + private _group: DockviewGroupPanel | undefined; readonly api: DockviewPanelApi; readonly view: IDockviewPanelModel; @@ -116,7 +108,7 @@ class TestGroupPanel implements IDockviewPanel { accessor: DockviewComponent ) { this.api = new DockviewPanelApiImpl(this, this._group!); - this._group = new GroupPanel(accessor, id, {}); + this._group = new DockviewGroupPanel(accessor, id, {}); this.view = new DockviewPanelModelMock( 'component', new PanelContentPartTest(id, 'component'), @@ -128,11 +120,11 @@ class TestGroupPanel implements IDockviewPanel { get params(): Record { return {}; } - get group(): GroupPanel { + get group(): DockviewGroupPanel { return this._group!; } - updateParentGroup(group: GroupPanel, isGroupActive: boolean): void { + updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void { this._group = group; } @@ -838,7 +830,7 @@ describe('dockviewComponent', () => { let events: { panel?: IDockviewPanel; - group?: GroupPanel | undefined; + group?: DockviewGroupPanel | undefined; type: string; }[] = []; @@ -1028,7 +1020,7 @@ describe('dockviewComponent', () => { position: { referencePanel: 'panel2', direction: 'below' }, }); - const removedGroups: GroupPanel[] = []; + const removedGroups: DockviewGroupPanel[] = []; const removedPanels: IDockviewPanel[] = []; const disposable = new CompositeDisposable( @@ -1481,9 +1473,9 @@ describe('dockviewComponent', () => { dockview.layout(1000, 1000); - let addGroup: GroupPanel[] = []; - let removeGroup: GroupPanel[] = []; - let activeGroup: (GroupPanel | undefined)[] = []; + let addGroup: DockviewGroupPanel[] = []; + let removeGroup: DockviewGroupPanel[] = []; + let activeGroup: (DockviewGroupPanel | undefined)[] = []; let addPanel: IDockviewPanel[] = []; let removePanel: IDockviewPanel[] = []; let activePanel: (IDockviewPanel | undefined)[] = []; diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index 3d13adb4b..60022dcc6 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -1,8 +1,8 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewApi } from '../../api/component.api'; import { DockviewPanel } from '../../dockview/dockviewPanel'; -import { GroupPanel } from '../../groupview/groupviewPanel'; import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; describe('dockviewPanel', () => { test('update title', () => { @@ -14,7 +14,7 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { + const groupMock = jest.fn(() => { return {} as any; }); const panelModelMock = jest.fn, []>(() => { @@ -57,7 +57,7 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { + const groupMock = jest.fn(() => { return {} as any; }); const panelModelMock = jest.fn, []>(() => { @@ -89,7 +89,7 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { + const groupMock = jest.fn(() => { return {} as any; }); const panelModelMock = jest.fn, []>(() => { @@ -121,7 +121,7 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { + const groupMock = jest.fn(() => { return { api: { setSize: jest.fn(), diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts index c251d2dbe..94b90ca9c 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts @@ -1,5 +1,5 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; describe('gridviewPanel', () => { test('get panel', () => { @@ -13,7 +13,7 @@ describe('gridviewPanel', () => { const accessor = new accessorMock(); - const cut = new GroupPanel(accessor, 'id', {}); + const cut = new DockviewGroupPanel(accessor, 'id', {}); expect(cut.params).toEqual(undefined); diff --git a/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts similarity index 87% rename from packages/dockview-core/src/__tests__/groupview/groupview.spec.ts rename to packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts index 36d4193c9..a3284a3d8 100644 --- a/packages/dockview-core/src/__tests__/groupview/groupview.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts @@ -11,8 +11,10 @@ import { IWatermarkRenderer, } from '../../groupview/types'; import { PanelUpdateEvent } from '../../panel/types'; -import { GroupOptions, Groupview } from '../../groupview/groupview'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { + DockviewGroupPanelModel, + GroupOptions, +} from '../../groupview/dockviewGroupPanelModel'; import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { CompositeDisposable } from '../../lifecycle'; @@ -22,6 +24,7 @@ import { IDockviewPanelModel, DockviewPanelModel, } from '../../dockview/dockviewPanelModel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; enum GroupChangeKind2 { ADD_PANEL, @@ -52,7 +55,10 @@ class TestModel implements IDockviewPanelModel { // } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { + updateParentGroup( + group: DockviewGroupPanel, + isPanelVisible: boolean + ): void { // } @@ -120,10 +126,6 @@ class TestContentPart implements IContentRenderer { //void } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean) { - //noop - } - focus() { //noop } @@ -155,10 +157,6 @@ class TestHeaderPart implements ITabRenderer { //void } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean) { - //noop - } - focus() { //noop } @@ -173,7 +171,7 @@ class TestHeaderPart implements ITabRenderer { } export class TestPanel implements IDockviewPanel { - private _group: GroupPanel | undefined; + private _group: DockviewGroupPanel | undefined; private _params: IGroupPanelInitParameters; readonly view: IDockviewPanelModel; @@ -201,8 +199,8 @@ export class TestPanel implements IDockviewPanel { this._params = params; } - updateParentGroup(group: GroupPanel, isGroupActive: boolean) { - this._group = group; + updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void { + // } layout(width: number, height: number) { @@ -230,7 +228,7 @@ export class TestPanel implements IDockviewPanel { } describe('groupview', () => { - let groupview: GroupPanel; + let groupview: DockviewGroupPanel; let dockview: DockviewComponent; let options: GroupOptions; @@ -255,7 +253,7 @@ describe('groupview', () => { options = { tabHeight: 30, }; - groupview = new GroupPanel(dockview, 'groupview-1', options); + groupview = new DockviewGroupPanel(dockview, 'groupview-1', options); groupview.initialize(); }); @@ -264,7 +262,7 @@ describe('groupview', () => { const panel2 = new TestPanel('panel2', jest.fn() as any); const panel3 = new TestPanel('panel3', jest.fn() as any); - const groupview2 = new GroupPanel(dockview, 'groupview-2', { + const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', { tabHeight: 25, panels: [panel1, panel2, panel3], activePanel: panel2, @@ -518,7 +516,7 @@ describe('groupview', () => { } ); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( document.createElement('div'), dockviewComponent, 'id', @@ -543,7 +541,7 @@ describe('groupview', () => { } ); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( document.createElement('div'), dockviewComponent, 'id', @@ -574,7 +572,7 @@ describe('groupview', () => { ); const groupviewContainer = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( groupviewContainer, dockviewComponent, 'id', @@ -621,28 +619,32 @@ describe('groupview', () => { }; }); const accessor = new accessorMock() as DockviewComponent; - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { - return { - id: 'testgroupid', - model: groupView, - }; - }); + const groupPanelMock = jest.fn, []>( + () => { + return { + id: 'testgroupid', + model: groupView, + }; + } + ); const container = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( container, accessor, 'groupviewid', {}, - new groupPanelMock() as GroupPanel + new groupPanelMock() as DockviewGroupPanel ); const element = container @@ -678,15 +680,17 @@ describe('groupview', () => { }; }); const accessor = new accessorMock() as DockviewComponent; - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -694,12 +698,12 @@ describe('groupview', () => { }); const container = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( container, accessor, 'groupviewid', {}, - new groupPanelMock() as GroupPanel + new groupPanelMock() as DockviewGroupPanel ); cut.openPanel(new TestPanel('panel1', jest.fn() as any)); @@ -742,15 +746,17 @@ describe('groupview', () => { }; }); const accessor = new accessorMock() as DockviewComponent; - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -758,12 +764,12 @@ describe('groupview', () => { }); const container = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( container, accessor, 'groupviewid', {}, - new groupPanelMock() as GroupPanel + new groupPanelMock() as DockviewGroupPanel ); cut.openPanel(new TestPanel('panel1', jest.fn() as any)); @@ -807,15 +813,17 @@ describe('groupview', () => { }; }); const accessor = new accessorMock() as DockviewComponent; - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -823,12 +831,12 @@ describe('groupview', () => { }); const container = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( container, accessor, 'groupviewid', {}, - new groupPanelMock() as GroupPanel + new groupPanelMock() as DockviewGroupPanel ); cut.openPanel(new TestPanel('panel1', jest.fn() as any)); @@ -859,15 +867,17 @@ describe('groupview', () => { }); test('that watermark is added', () => { - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -876,12 +886,12 @@ describe('groupview', () => { const container = document.createElement('div'); - const cut = new Groupview( + const cut = new DockviewGroupPanelModel( container, dockview, 'groupviewid', {}, - new groupPanelMock() as GroupPanel + new groupPanelMock() as DockviewGroupPanel ); cut.initialize(); diff --git a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts index 5ddaafb11..5fbc3806e 100644 --- a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts @@ -7,7 +7,6 @@ import { } from '../../../groupview/types'; import { CompositeDisposable } from '../../../lifecycle'; import { PanelUpdateEvent } from '../../../panel/types'; -import { GroupPanel } from '../../../groupview/groupviewPanel'; import { IDockviewPanel } from '../../../dockview/dockviewPanel'; import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel'; @@ -27,10 +26,6 @@ class TestContentRenderer this.element = document.createElement('div'); } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { - // - } - init(parameters: GroupPanelContentPartInitParameters): void { // } diff --git a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts b/packages/dockview-core/src/__tests__/groupview/tab.spec.ts index abe02fcf9..a3d65516b 100644 --- a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/tab.spec.ts @@ -1,8 +1,8 @@ import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { Groupview } from '../../groupview/groupview'; -import { GroupPanel } from '../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanelModel } from '../../groupview/dockviewGroupPanelModel'; import { Tab } from '../../groupview/tab'; describe('tab', () => { @@ -34,15 +34,17 @@ describe('tab', () => { id: 'testcomponentid', }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -50,7 +52,7 @@ describe('tab', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new Tab('panelId', accessor, groupPanel); @@ -77,15 +79,17 @@ describe('tab', () => { id: 'testcomponentid', }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -93,7 +97,7 @@ describe('tab', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new Tab('panel1', accessor, groupPanel); @@ -125,15 +129,17 @@ describe('tab', () => { id: 'testcomponentid', }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -141,7 +147,7 @@ describe('tab', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new Tab('panel1', accessor, groupPanel); @@ -173,15 +179,17 @@ describe('tab', () => { id: 'testcomponentid', }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -189,7 +197,7 @@ describe('tab', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new Tab('panel1', accessor, groupPanel); @@ -227,15 +235,17 @@ describe('tab', () => { id: 'testcomponentid', }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -243,7 +253,7 @@ describe('tab', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new Tab('panel1', accessor, groupPanel); diff --git a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts index 51a4f132a..d404cc8b0 100644 --- a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts @@ -1,13 +1,13 @@ import { DockviewComponent } from '../../../dockview/dockviewComponent'; -import { GroupPanel } from '../../../groupview/groupviewPanel'; import { TabsContainer } from '../../../groupview/titlebar/tabsContainer'; import { fireEvent } from '@testing-library/dom'; -import { Groupview } from '../../../groupview/groupview'; import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer'; -import { TestPanel } from '../groupview.spec'; +import { TestPanel } from '../dockviewGroupPanelModel.spec'; +import { DockviewGroupPanelModel } from '../../../groupview/dockviewGroupPanelModel'; +import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; describe('tabsContainer', () => { test('that an external event does not render a drop target and calls through to the group mode', () => { @@ -18,22 +18,24 @@ describe('tabsContainer', () => { options: {}, }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { model: groupView, }; }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -71,15 +73,17 @@ describe('tabsContainer', () => { options: {}, }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -88,7 +92,7 @@ describe('tabsContainer', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -137,15 +141,17 @@ describe('tabsContainer', () => { options: {}, }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -154,7 +160,7 @@ describe('tabsContainer', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -200,15 +206,17 @@ describe('tabsContainer', () => { options: {}, }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -217,7 +225,7 @@ describe('tabsContainer', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -263,15 +271,17 @@ describe('tabsContainer', () => { options: {}, }; }); - const groupviewMock = jest.fn, []>(() => { - return { - canDisplayOverlay: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + canDisplayOverlay: jest.fn(), + }; + } + ); - const groupView = new groupviewMock() as Groupview; + const groupView = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { id: 'testgroupid', model: groupView, @@ -279,7 +289,7 @@ describe('tabsContainer', () => { }); const accessor = new accessorMock() as DockviewComponent; - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index c61d81c46..54619e319 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -30,7 +30,10 @@ import { } from '../splitview/splitviewComponent'; import { IView, Orientation, Sizing } from '../splitview/core/splitview'; import { ISplitviewPanel } from '../splitview/splitviewPanel'; -import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel'; +import { + DockviewGroupPanel, + IDockviewGroupPanel, +} from '../groupview/dockviewGroupPanel'; import { Emitter, Event } from '../events'; import { IDockviewPanel } from '../dockview/dockviewPanel'; import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel'; @@ -362,15 +365,15 @@ export class DockviewApi implements CommonApi { return this.component.totalPanels; } - get onDidActiveGroupChange(): Event { + get onDidActiveGroupChange(): Event { return this.component.onDidActiveGroupChange; } - get onDidAddGroup(): Event { + get onDidAddGroup(): Event { return this.component.onDidAddGroup; } - get onDidRemoveGroup(): Event { + get onDidRemoveGroup(): Event { return this.component.onDidRemoveGroup; } @@ -402,7 +405,7 @@ export class DockviewApi implements CommonApi { return this.component.panels; } - get groups(): GroupPanel[] { + get groups(): DockviewGroupPanel[] { return this.component.groups; } @@ -410,7 +413,7 @@ export class DockviewApi implements CommonApi { return this.component.activePanel; } - get activeGroup(): GroupPanel | undefined { + get activeGroup(): DockviewGroupPanel | undefined { return this.component.activeGroup; } @@ -440,7 +443,7 @@ export class DockviewApi implements CommonApi { return this.component.addPanel(options); } - addGroup(options?: AddGroupOptions): IGroupviewPanel { + addGroup(options?: AddGroupOptions): IDockviewGroupPanel { return this.component.addGroup(options); } @@ -456,11 +459,11 @@ export class DockviewApi implements CommonApi { return this.component.closeAllGroups(); } - removeGroup(group: IGroupviewPanel): void { - this.component.removeGroup(group); + removeGroup(group: IDockviewGroupPanel): void { + this.component.removeGroup(group); } - getGroup(id: string): GroupPanel | undefined { + getGroup(id: string): DockviewGroupPanel | undefined { return this.component.getPanel(id); } diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 6da42de2c..3da452efc 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -1,6 +1,6 @@ import { Emitter, Event } from '../events'; import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi'; -import { GroupPanel } from '../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; import { MutableDisposable } from '../lifecycle'; import { IDockviewPanel } from '../dockview/dockviewPanel'; @@ -13,7 +13,7 @@ export interface TitleEvent { * because it belongs to a groupview */ export interface DockviewPanelApi extends Omit { - readonly group: GroupPanel; + readonly group: DockviewGroupPanel; readonly isGroupActive: boolean; readonly title: string; readonly onDidActiveGroupChange: Event; @@ -26,7 +26,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi { - private _group: GroupPanel; + private _group: DockviewGroupPanel; readonly _onDidTitleChange = new Emitter(); readonly onDidTitleChange = this._onDidTitleChange.event; @@ -47,7 +47,7 @@ export class DockviewPanelApiImpl return !!this.group?.isActive; } - set group(value: GroupPanel) { + set group(value: DockviewGroupPanel) { const isOldGroupActive = this.isGroupActive; this._group = value; @@ -65,11 +65,11 @@ export class DockviewPanelApiImpl } } - get group(): GroupPanel { + get group(): DockviewGroupPanel { return this._group; } - constructor(private panel: IDockviewPanel, group: GroupPanel) { + constructor(private panel: IDockviewPanel, group: DockviewGroupPanel) { super(panel.id); this.initialize(panel); diff --git a/packages/dockview-core/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts index 28ab895a0..4d3fa2ba2 100644 --- a/packages/dockview-core/src/dnd/groupDragHandler.ts +++ b/packages/dockview-core/src/dnd/groupDragHandler.ts @@ -1,4 +1,4 @@ -import { GroupPanel } from '../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; import { IDisposable } from '../lifecycle'; import { DragHandler } from './abstractDragHandler'; import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer'; @@ -11,7 +11,7 @@ export class GroupDragHandler extends DragHandler { constructor( element: HTMLElement, private readonly accessorId: string, - private readonly group: GroupPanel + private readonly group: DockviewGroupPanel ) { super(element); } diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index 52135530d..40f8881b8 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -5,7 +5,7 @@ import { } from '../../../groupview/types'; import { addDisposableListener } from '../../../events'; import { PanelUpdateEvent } from '../../../panel/types'; -import { GroupPanel } from '../../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; import { createCloseButton } from '../../../svg'; export class DefaultTab extends CompositeDisposable implements ITabRenderer { @@ -77,7 +77,10 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { }); } - public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) { + public updateParentGroup( + group: DockviewGroupPanel, + isPanelVisible: boolean + ) { const changed = this._isPanelVisible !== isPanelVisible || this._isGroupActive !== group.isActive; diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index c67fc6a6d..85d29d5ac 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -6,7 +6,7 @@ import { ActionContainer } from '../../../actionbar/actionsContainer'; import { addDisposableListener } from '../../../events'; import { toggleClass } from '../../../dom'; import { CompositeDisposable } from '../../../lifecycle'; -import { GroupPanel } from '../../../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; import { PanelUpdateEvent } from '../../../panel/types'; import { createCloseButton } from '../../../svg'; @@ -15,7 +15,7 @@ export class Watermark implements IWatermarkRenderer { private _element: HTMLElement; - private group: GroupPanel | undefined; + private group: DockviewGroupPanel | undefined; private params: GroupPanelPartInitParameters | undefined; get element() { @@ -83,7 +83,7 @@ export class Watermark this.render(); } - updateParentGroup(group: GroupPanel, _visible: boolean): void { + updateParentGroup(group: DockviewGroupPanel, _visible: boolean): void { this.group = group; this.render(); } diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index f1f4b6bd3..37a9d213a 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -1,5 +1,5 @@ import { GroupviewPanelState, ITabRenderer } from '../groupview/types'; -import { GroupPanel } from '../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; import { IDockviewComponent } from './dockviewComponent'; import { createComponent } from '../panel/componentFactory'; @@ -8,7 +8,10 @@ import { DockviewPanelModel } from './dockviewPanelModel'; import { DockviewApi } from '../api/component.api'; export interface IPanelDeserializer { - fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel; + fromJSON( + panelData: GroupviewPanelState, + group: DockviewGroupPanel + ): IDockviewPanel; } export class DefaultDockviewDeserialzier implements IPanelDeserializer { @@ -16,7 +19,7 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { public fromJSON( panelData: GroupviewPanelState, - group: GroupPanel + group: DockviewGroupPanel ): IDockviewPanel { const panelId = panelData.id; const params = panelData.params; diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 5a330291e..08acc2f1c 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -42,8 +42,11 @@ import { GroupOptions, GroupPanelViewState, GroupviewDropEvent, -} from '../groupview/groupview'; -import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel'; +} from '../groupview/dockviewGroupPanelModel'; +import { + DockviewGroupPanel, + IDockviewGroupPanel, +} from '../groupview/dockviewGroupPanel'; import { DockviewPanelModel } from './dockviewPanelModel'; import { getPanelData } from '../dnd/dataTransfer'; import { DockviewDropTargets } from '../groupview/dnd'; @@ -80,10 +83,10 @@ export type DockviewComponentUpdateOptions = Pick< export interface DockviewDropEvent extends GroupviewDropEvent { api: DockviewApi; - group: GroupPanel | null; + group: DockviewGroupPanel | null; } -export interface IDockviewComponent extends IBaseGrid { +export interface IDockviewComponent extends IBaseGrid { readonly activePanel: IDockviewPanel | undefined; readonly totalPanels: number; readonly panels: IDockviewPanel[]; @@ -93,21 +96,21 @@ export interface IDockviewComponent extends IBaseGrid { deserializer: IPanelDeserializer | undefined; updateOptions(options: DockviewComponentUpdateOptions): void; moveGroupOrPanel( - referenceGroup: GroupPanel, + referenceGroup: DockviewGroupPanel, groupId: string, itemId: string, target: Position, index?: number ): void; - doSetGroupActive: (group: GroupPanel, skipFocus?: boolean) => void; - removeGroup: (group: GroupPanel) => void; + doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void; + removeGroup: (group: DockviewGroupPanel) => void; options: DockviewComponentOptions; addPanel(options: AddPanelOptions): IDockviewPanel; removePanel(panel: IDockviewPanel): void; getGroupPanel: (id: string) => IDockviewPanel | undefined; createWatermarkComponent(): IWatermarkRenderer; // lifecycle - addGroup(options?: AddGroupOptions): IGroupviewPanel; + addGroup(options?: AddGroupOptions): IDockviewGroupPanel; closeAllGroups(): void; // events moveToNext(options?: MovementOptions): void; @@ -124,7 +127,7 @@ export interface IDockviewComponent extends IBaseGrid { } export class DockviewComponent - extends BaseGrid + extends BaseGrid implements IDockviewComponent { private readonly nextGroupId = sequentialNumberGenerator(); @@ -301,7 +304,7 @@ export class DockviewComponent this.updateWatermark(); } - private orthogonalize(position: Position): GroupPanel { + private orthogonalize(position: Position): DockviewGroupPanel { switch (position) { case 'top': case 'bottom': @@ -381,7 +384,7 @@ export class DockviewComponent } const location = getGridLocation(options.group.element); - const next = this.gridview.next(location)?.view; + const next = this.gridview.next(location)?.view; this.doSetGroupActive(next); } @@ -403,7 +406,7 @@ export class DockviewComponent const location = getGridLocation(options.group.element); const next = this.gridview.previous(location)?.view; if (next) { - this.doSetGroupActive(next as GroupPanel); + this.doSetGroupActive(next as DockviewGroupPanel); } } @@ -532,7 +535,7 @@ export class DockviewComponent throw new Error(`panel with id ${options.id} already exists`); } - let referenceGroup: GroupPanel | undefined; + let referenceGroup: DockviewGroupPanel | undefined; if (options.position) { if (isPanelOptionsWithPanel(options.position)) { @@ -665,11 +668,11 @@ export class DockviewComponent } } - addGroup(options?: AddGroupOptions): GroupPanel { + addGroup(options?: AddGroupOptions): DockviewGroupPanel { const group = this.createGroup(); if (options) { - let referenceGroup: GroupPanel | undefined; + let referenceGroup: DockviewGroupPanel | undefined; if (isGroupOptionsWithPanel(options)) { const referencePanel = @@ -726,7 +729,7 @@ export class DockviewComponent } } - removeGroup(group: GroupPanel, skipActive = false): void { + removeGroup(group: DockviewGroupPanel, skipActive = false): void { const panels = [...group.panels]; // reassign since group panels will mutate for (const panel of panels) { @@ -740,7 +743,7 @@ export class DockviewComponent } moveGroupOrPanel( - referenceGroup: GroupPanel, + referenceGroup: DockviewGroupPanel, groupId: string, itemId: string | undefined, target: Position, @@ -831,8 +834,8 @@ export class DockviewComponent } private moveGroup( - sourceGroup: GroupPanel, - referenceGroup: GroupPanel, + sourceGroup: DockviewGroupPanel, + referenceGroup: DockviewGroupPanel, target: Position ): void { if (sourceGroup) { @@ -872,7 +875,10 @@ export class DockviewComponent } } - doSetGroupActive(group: GroupPanel | undefined, skipFocus?: boolean): void { + doSetGroupActive( + group: DockviewGroupPanel | undefined, + skipFocus?: boolean + ): void { const isGroupAlreadyFocused = this._activeGroup === group; super.doSetGroupActive(group, skipFocus); @@ -881,7 +887,7 @@ export class DockviewComponent } } - createGroup(options?: GroupOptions): GroupPanel { + createGroup(options?: GroupOptions): DockviewGroupPanel { if (!options) { options = { tabHeight: this.tabHeight }; } @@ -905,7 +911,7 @@ export class DockviewComponent } } - const view = new GroupPanel(this, id, options); + const view = new DockviewGroupPanel(this, id, options); view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group if (!this._groups.has(view.id)) { @@ -948,7 +954,7 @@ export class DockviewComponent private createPanel( options: AddPanelOptions, - group: GroupPanel + group: DockviewGroupPanel ): IDockviewPanel { const contentComponent = options.component; const tabComponent = @@ -976,13 +982,15 @@ export class DockviewComponent return panel; } - private createGroupAtLocation(location: number[] = [0]): GroupPanel { + private createGroupAtLocation( + location: number[] = [0] + ): DockviewGroupPanel { const group = this.createGroup(); this.doAddGroup(group, location); return group; } - private findGroup(panel: IDockviewPanel): GroupPanel | undefined { + private findGroup(panel: IDockviewPanel): DockviewGroupPanel | undefined { return Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel) )?.value; diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index b89deeae7..14823fbc3 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -8,7 +8,7 @@ import { GroupviewPanelState, IGroupPanelInitParameters, } from '../groupview/types'; -import { GroupPanel } from '../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; import { CompositeDisposable, IDisposable } from '../lifecycle'; import { IPanel, Parameters } from '../panel/types'; import { IDockviewPanelModel } from './dockviewPanelModel'; @@ -16,11 +16,11 @@ import { IDockviewComponent } from './dockviewComponent'; export interface IDockviewPanel extends IDisposable, IPanel { readonly view: IDockviewPanelModel; - readonly group: GroupPanel; + readonly group: DockviewGroupPanel; readonly api: DockviewPanelApi; readonly title: string; readonly params: Record | undefined; - updateParentGroup(group: GroupPanel, isGroupActive: boolean): void; + updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; init(params: IGroupPanelInitParameters): void; toJSON(): GroupviewPanelState; update(event: GroupPanelUpdateEvent): void; @@ -31,7 +31,7 @@ export class DockviewPanel implements IDockviewPanel { readonly api: DockviewPanelApiImpl; - private _group: GroupPanel; + private _group: DockviewGroupPanel; private _params?: Parameters; private _title: string; @@ -44,7 +44,7 @@ export class DockviewPanel return this._title; } - get group(): GroupPanel { + get group(): DockviewGroupPanel { return this._group; } @@ -52,7 +52,7 @@ export class DockviewPanel public readonly id: string, accessor: IDockviewComponent, private readonly containerApi: DockviewApi, - group: GroupPanel, + group: DockviewGroupPanel, readonly view: IDockviewPanelModel ) { super(); @@ -139,7 +139,10 @@ export class DockviewPanel }); } - public updateParentGroup(group: GroupPanel, isGroupActive: boolean): void { + public updateParentGroup( + group: DockviewGroupPanel, + isGroupActive: boolean + ): void { this._group = group; this.api.group = group; diff --git a/packages/dockview-core/src/dockview/dockviewPanelModel.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts index 210463ea1..0025d9549 100644 --- a/packages/dockview-core/src/dockview/dockviewPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -5,7 +5,7 @@ import { ITabRenderer, GroupPanelUpdateEvent, } from '../groupview/types'; -import { GroupPanel } from '../groupview/groupviewPanel'; +import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; import { IDisposable } from '../lifecycle'; import { createComponent } from '../panel/componentFactory'; import { IDockviewComponent } from './dockviewComponent'; @@ -23,14 +23,14 @@ export interface IDockviewPanelModel extends IDisposable { update(event: GroupPanelUpdateEvent): void; layout(width: number, height: number): void; init(params: GroupPanelPartInitParameters): void; - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; + updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void; } export class DockviewPanelModel implements IDockviewPanelModel { private readonly _content: IContentRenderer; private readonly _tab: ITabRenderer; - private _group: GroupPanel | null = null; + private _group: DockviewGroupPanel | null = null; private _isPanelVisible: boolean | null = null; get content(): IContentRenderer { @@ -57,7 +57,10 @@ export class DockviewPanelModel implements IDockviewPanelModel { this.tab.init(params); } - updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void { + updateParentGroup( + group: DockviewGroupPanel, + isPanelVisible: boolean + ): void { if (group !== this._group) { this._group = group; if (this._content.onGroupChange) { diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 5a01c750e..862aeb476 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -7,7 +7,10 @@ import { WatermarkConstructor, IWatermarkRenderer, } from '../groupview/types'; -import { GroupPanel, GroupviewPanelApi } from '../groupview/groupviewPanel'; +import { + DockviewGroupPanel, + DockviewGroupPanelApi, +} from '../groupview/dockviewGroupPanel'; import { ISplitviewStyles, Orientation } from '../splitview/core/splitview'; import { FrameworkFactory } from '../types'; import { DockviewDropTargets } from '../groupview/dnd'; @@ -18,7 +21,10 @@ import { IDockviewPanel } from './dockviewPanel'; export interface IGroupControlRenderer extends IDisposable { readonly element: HTMLElement; - init(params: { containerApi: DockviewApi; api: GroupviewPanelApi }): void; + init(params: { + containerApi: DockviewApi; + api: DockviewGroupPanelApi; + }): void; } export interface GroupPanelFrameworkComponentFactory { @@ -61,7 +67,7 @@ export interface DockviewDndOverlayEvent { nativeEvent: DragEvent; target: DockviewDropTargets; position: Position; - group?: GroupPanel; + group?: DockviewGroupPanel; getData: () => PanelTransfer | undefined; } @@ -74,7 +80,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions { styles?: ISplitviewStyles; defaultTabComponent?: string; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean; - createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer; + createGroupControlElement?: ( + group: DockviewGroupPanel + ) => IGroupControlRenderer; singleTabMode?: 'fullwidth' | 'default'; } @@ -93,7 +101,7 @@ type RelativePanel = { type RelativeGroup = { direction?: Direction; - referenceGroup: string | GroupPanel; + referenceGroup: string | DockviewGroupPanel; }; type AbsolutePosition = { @@ -136,7 +144,7 @@ type AddGroupOptionsWithPanel = { }; type AddGroupOptionsWithGroup = { - referenceGroup: string | GroupPanel; + referenceGroup: string | DockviewGroupPanel; direction?: Omit; }; @@ -169,5 +177,5 @@ export interface MovementOptions2 { export interface MovementOptions extends MovementOptions2 { includePanel?: boolean; - group?: GroupPanel; + group?: DockviewGroupPanel; } diff --git a/packages/dockview-core/src/groupview/groupview.scss b/packages/dockview-core/src/groupview/dockviewGroupPanel.scss similarity index 100% rename from packages/dockview-core/src/groupview/groupview.scss rename to packages/dockview-core/src/groupview/dockviewGroupPanel.scss diff --git a/packages/dockview-core/src/groupview/groupviewPanel.ts b/packages/dockview-core/src/groupview/dockviewGroupPanel.ts similarity index 73% rename from packages/dockview-core/src/groupview/groupviewPanel.ts rename to packages/dockview-core/src/groupview/dockviewGroupPanel.ts index db35c677a..1b9ae4abd 100644 --- a/packages/dockview-core/src/groupview/groupviewPanel.ts +++ b/packages/dockview-core/src/groupview/dockviewGroupPanel.ts @@ -1,24 +1,31 @@ import { IFrameworkPart } from '../panel/types'; import { DockviewComponent } from '../dockview/dockviewComponent'; import { GridviewPanelApi } from '../api/gridviewPanelApi'; -import { Groupview, GroupOptions, IHeader } from './groupview'; +import { + DockviewGroupPanelModel, + GroupOptions, + IHeader, +} from './dockviewGroupPanelModel'; import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel'; import { IDockviewPanel } from '../dockview/dockviewPanel'; -export interface IGroupviewPanel extends IGridviewPanel { - model: Groupview; +export interface IDockviewGroupPanel extends IGridviewPanel { + model: DockviewGroupPanelModel; locked: boolean; readonly size: number; readonly panels: IDockviewPanel[]; readonly activePanel: IDockviewPanel | undefined; } -export type IGroupviewPanelPublic = IGroupviewPanel; +export type IDockviewGroupPanelPublic = IDockviewGroupPanel; -export type GroupviewPanelApi = GridviewPanelApi; +export type DockviewGroupPanelApi = GridviewPanelApi; -export class GroupPanel extends GridviewPanel implements IGroupviewPanel { - private readonly _model: Groupview; +export class DockviewGroupPanel + extends GridviewPanel + implements IDockviewGroupPanel +{ + private readonly _model: DockviewGroupPanelModel; get panels(): IDockviewPanel[] { return this._model.panels; @@ -32,7 +39,7 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel { return this._model.size; } - get model(): Groupview { + get model(): DockviewGroupPanelModel { return this._model; } @@ -71,7 +78,13 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel { ) { super(id, 'groupview_default'); - this._model = new Groupview(this.element, accessor, id, options, this); + this._model = new DockviewGroupPanelModel( + this.element, + accessor, + id, + options, + this + ); } initialize() { diff --git a/packages/dockview-core/src/groupview/groupview.ts b/packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts similarity index 98% rename from packages/dockview-core/src/groupview/groupview.ts rename to packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts index 9387dffb2..c737d4448 100644 --- a/packages/dockview-core/src/groupview/groupview.ts +++ b/packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts @@ -11,19 +11,19 @@ import { PanelInitParameters, PanelUpdateEvent } from '../panel/types'; import { ContentContainer, IContentContainer } from './panel/content'; import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer'; import { IWatermarkRenderer } from './types'; -import { GroupPanel } from './groupviewPanel'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewDropTargets } from './dnd'; import { IDockviewPanel } from '../dockview/dockviewPanel'; import { IGroupControlRenderer } from '../dockview/options'; export interface DndService { canDisplayOverlay( - group: IGroupview, + group: IDockviewGroupPanelModel, event: DragEvent, target: DockviewDropTargets ): boolean; onDrop( - group: IGroupview, + group: IDockviewGroupPanelModel, event: DragEvent, position: Position, index?: number @@ -77,7 +77,7 @@ export interface IHeader { height: number | undefined; } -export interface IGroupview extends IGridPanelView { +export interface IDockviewGroupPanelModel extends IGridPanelView { readonly isActive: boolean; readonly size: number; readonly panels: IDockviewPanel[]; @@ -117,7 +117,10 @@ export interface IGroupview extends IGridPanelView { ): boolean; } -export class Groupview extends CompositeDisposable implements IGroupview { +export class DockviewGroupPanelModel + extends CompositeDisposable + implements IDockviewGroupPanelModel +{ private readonly tabsContainer: ITabsContainer; private readonly contentContainer: IContentContainer; private readonly dropTarget: Droptarget; @@ -232,7 +235,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { private accessor: DockviewComponent, public id: string, private readonly options: GroupOptions, - private readonly groupPanel: GroupPanel + private readonly groupPanel: DockviewGroupPanel ) { super(); diff --git a/packages/dockview-core/src/groupview/tab.ts b/packages/dockview-core/src/groupview/tab.ts index 72b1e44e7..36da8f5fa 100644 --- a/packages/dockview-core/src/groupview/tab.ts +++ b/packages/dockview-core/src/groupview/tab.ts @@ -8,7 +8,7 @@ import { import { toggleClass } from '../dom'; import { IDockviewComponent } from '../dockview/dockviewComponent'; import { ITabRenderer } from './types'; -import { GroupPanel } from './groupviewPanel'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { DroptargetEvent, Droptarget } from '../dnd/droptarget'; import { DockviewDropTargets } from './dnd'; import { DragHandler } from '../dnd/abstractDragHandler'; @@ -40,7 +40,7 @@ export class Tab extends CompositeDisposable implements ITab { constructor( public readonly panelId: string, private readonly accessor: IDockviewComponent, - private readonly group: GroupPanel + private readonly group: DockviewGroupPanel ) { super(); diff --git a/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts b/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts index 74d746e3f..882dbafe2 100644 --- a/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts @@ -6,7 +6,7 @@ import { import { addDisposableListener, Emitter, Event } from '../../events'; import { ITab, Tab } from '../tab'; import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { GroupPanel } from '../groupviewPanel'; +import { DockviewGroupPanel } from '../dockviewGroupPanel'; import { VoidContainer } from './voidContainer'; import { toggleClass } from '../../dom'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; @@ -135,7 +135,7 @@ export class TabsContainer constructor( private readonly accessor: DockviewComponent, - private readonly group: GroupPanel + private readonly group: DockviewGroupPanel ) { super(); diff --git a/packages/dockview-core/src/groupview/titlebar/voidContainer.ts b/packages/dockview-core/src/groupview/titlebar/voidContainer.ts index 70990ca7c..b73ec720b 100644 --- a/packages/dockview-core/src/groupview/titlebar/voidContainer.ts +++ b/packages/dockview-core/src/groupview/titlebar/voidContainer.ts @@ -6,7 +6,7 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; import { addDisposableListener, Emitter, Event } from '../../events'; import { CompositeDisposable } from '../../lifecycle'; import { DockviewDropTargets } from '../dnd'; -import { GroupPanel } from '../groupviewPanel'; +import { DockviewGroupPanel } from '../dockviewGroupPanel'; export class VoidContainer extends CompositeDisposable { private readonly _element: HTMLElement; @@ -21,7 +21,7 @@ export class VoidContainer extends CompositeDisposable { constructor( private readonly accessor: DockviewComponent, - private readonly group: GroupPanel + private readonly group: DockviewGroupPanel ) { super(); diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/groupview/types.ts index dcda379ba..af36505a4 100644 --- a/packages/dockview-core/src/groupview/types.ts +++ b/packages/dockview-core/src/groupview/types.ts @@ -7,7 +7,7 @@ import { Parameters, } from '../panel/types'; import { DockviewApi } from '../api/component.api'; -import { GroupPanel } from './groupviewPanel'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { Event } from '../events'; import { IDockviewPanelModel, @@ -38,7 +38,7 @@ export interface IWatermarkRenderer > { readonly element: HTMLElement; init: (params: GroupPanelPartInitParameters) => void; - updateParentGroup(group: GroupPanel, visible: boolean): void; + updateParentGroup(group: DockviewGroupPanel, visible: boolean): void; } export interface ITabRenderer @@ -48,7 +48,7 @@ export interface ITabRenderer > { readonly element: HTMLElement; init(parameters: GroupPanelPartInitParameters): void; - onGroupChange?(group: GroupPanel): void; + onGroupChange?(group: DockviewGroupPanel): void; onPanelVisibleChange?(isPanelVisible: boolean): void; } @@ -61,7 +61,7 @@ export interface IContentRenderer readonly onDidFocus?: Event; readonly onDidBlur?: Event; init(parameters: GroupPanelContentPartInitParameters): void; - onGroupChange?(group: GroupPanel): void; + onGroupChange?(group: DockviewGroupPanel): void; onPanelVisibleChange?(isPanelVisible: boolean): void; } diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index b5a753dca..62b231c69 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -23,7 +23,7 @@ export * from './splitview/core/options'; export * from './paneview/paneview'; export * from './gridview/gridview'; -export * from './groupview/groupview'; +export * from './groupview/dockviewGroupPanelModel'; export * from './gridview/baseComponentGridview'; export * from './paneview/draggablePaneviewPanel'; @@ -32,7 +32,7 @@ export * from './groupview/panel/content'; export * from './groupview/tab'; export * from './groupview/dnd'; export * from './groupview/types'; -export * from './groupview/groupviewPanel'; +export * from './groupview/dockviewGroupPanel'; export * from './dockview/options'; export * from './dockview/dockviewPanel'; diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts index 79552bf13..3099dfa7b 100644 --- a/packages/dockview/src/dockview/reactContentPart.ts +++ b/packages/dockview/src/dockview/reactContentPart.ts @@ -3,7 +3,7 @@ import { ReactPart, ReactPortalStore } from '../react'; import { IDockviewPanelProps } from '../dockview/dockview'; import { DockviewEmitter, - Event, + DockviewEvent, GroupPanel, PanelUpdateEvent, IContentRenderer, @@ -17,10 +17,10 @@ export class ReactPanelContentPart implements IContentRenderer { private _group: GroupPanel | undefined; private readonly _onDidFocus = new DockviewEmitter(); - readonly onDidFocus: Event = this._onDidFocus.event; + readonly onDidFocus: DockviewEvent = this._onDidFocus.event; private readonly _onDidBlur = new DockviewEmitter(); - readonly onDidBlur: Event = this._onDidBlur.event; + readonly onDidBlur: DockviewEvent = this._onDidBlur.event; get element(): HTMLElement { return this._element; From 7d50eb54535814515e22c07b8be404fc94349051 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 6 Mar 2023 23:39:58 +0800 Subject: [PATCH 5/6] refactor: moving files --- .../__mocks__/mockDockviewPanelMode.ts | 4 +- .../__tests__/api/dockviewPanelApi.spec.ts | 2 +- .../dockview/dockviewComponent.spec.ts | 12 +-- .../__tests__/dockview/dockviewPanel.spec.ts | 2 +- .../dockview/dockviewPanelModel.spec.ts | 2 +- .../__tests__/gridview/gridviewPanel.spec.ts | 2 +- .../groupview/dockviewGroupPanelModel.spec.ts | 8 +- .../__tests__/groupview/panel/content.spec.ts | 4 +- .../src/__tests__/groupview/tab.spec.ts | 6 +- .../groupview/titlebar/tabsContainer.spec.ts | 6 +- .../src/actionbar/actionsContainer.ts | 4 +- .../dockview-core/src/api/component.api.ts | 10 +- .../dockview-core/src/api/dockviewPanelApi.ts | 2 +- .../src/dnd/abstractDragHandler.ts | 2 +- packages/dockview-core/src/dnd/ghost.ts | 2 +- .../dockview-core/src/dnd/groupDragHandler.ts | 2 +- .../components}/panel/content.ts | 8 +- .../src/dockview/components/tab/defaultTab.ts | 7 +- .../components/tab}/tab.ts | 19 ++-- .../components}/titlebar/tabsContainer.scss | 0 .../components}/titlebar/tabsContainer.ts | 14 +-- .../components}/titlebar/voidContainer.ts | 18 ++-- .../components/watermark/watermark.ts | 7 +- .../src/dockview/deserializer.ts | 17 ++- .../src/dockview/dockviewComponent.ts | 14 +-- .../dockviewGroupPanel.scss | 0 .../dockviewGroupPanel.ts | 0 .../dockviewGroupPanelModel.ts | 21 ++-- .../src/dockview/dockviewPanel.ts | 4 +- .../src/dockview/dockviewPanelModel.ts | 9 +- .../dockview-core/src/dockview/options.ts | 6 +- .../src/{groupview => dockview}/types.ts | 16 +-- packages/dockview-core/src/dom.ts | 20 ++-- packages/dockview-core/src/events.ts | 8 +- .../src/gridview/baseComponentGridview.ts | 40 +++---- .../dockview-core/src/gridview/branchNode.ts | 16 +-- .../dockview-core/src/gridview/gridview.ts | 100 ++++++++++-------- .../src/gridview/gridviewComponent.ts | 34 +++--- .../src/gridview/gridviewPanel.ts | 18 ++-- .../dockview-core/src/gridview/leafNode.ts | 18 ++-- packages/dockview-core/src/groupview/dnd.ts | 6 -- packages/dockview-core/src/index.ts | 13 ++- packages/dockview-core/src/lifecycle.ts | 10 +- packages/dockview-core/src/types.ts | 8 +- .../dockview/groupControlsRenderer.spec.ts | 30 +++--- packages/dockview/src/dockview/dockview.tsx | 6 +- .../src/dockview/groupControlsRenderer.ts | 24 ++--- .../dockview/src/dockview/reactContentPart.ts | 10 +- .../dockview/src/dockview/reactHeaderPart.ts | 14 +-- .../src/dockview/reactWatermarkPart.ts | 25 ++--- .../src/dockview/v2/reactContentRenderer.ts | 23 ++-- .../src/dockview/v2/webviewContentRenderer.ts | 10 +- 52 files changed, 331 insertions(+), 332 deletions(-) rename packages/dockview-core/src/{groupview => dockview/components}/panel/content.ts (94%) rename packages/dockview-core/src/{groupview => dockview/components/tab}/tab.ts (89%) rename packages/dockview-core/src/{groupview => dockview/components}/titlebar/tabsContainer.scss (100%) rename packages/dockview-core/src/{groupview => dockview/components}/titlebar/tabsContainer.ts (95%) rename packages/dockview-core/src/{groupview => dockview/components}/titlebar/voidContainer.ts (79%) rename packages/dockview-core/src/{groupview => dockview}/dockviewGroupPanel.scss (100%) rename packages/dockview-core/src/{groupview => dockview}/dockviewGroupPanel.ts (100%) rename packages/dockview-core/src/{groupview => dockview}/dockviewGroupPanelModel.ts (97%) rename packages/dockview-core/src/{groupview => dockview}/types.ts (91%) delete mode 100644 packages/dockview-core/src/groupview/dnd.ts diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts index e116982d6..31fe58f8d 100644 --- a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts +++ b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts @@ -1,11 +1,11 @@ import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { GroupPanelPartInitParameters, GroupPanelUpdateEvent, IContentRenderer, ITabRenderer, -} from '../../groupview/types'; +} from '../../dockview/types'; export class DockviewPanelModelMock implements IDockviewPanelModel { constructor( diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts index 096761ee8..243a2f4d1 100644 --- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts +++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts @@ -1,7 +1,7 @@ import { DockviewPanelApiImpl, TitleEvent } from '../../api/dockviewPanelApi'; import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; describe('groupPanelApi', () => { test('title', () => { diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index e8ed2e4c5..1ebb3f33c 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -3,15 +3,13 @@ import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer, -} from '../../groupview/types'; -import { PanelUpdateEvent } from '../../panel/types'; -import { Orientation } from '../../splitview/core/splitview'; -import { CompositeDisposable } from '../../lifecycle'; -import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters, -} from '../../groupview/types'; +} from '../../dockview/types'; +import { PanelUpdateEvent } from '../../panel/types'; +import { Orientation } from '../../splitview/core/splitview'; +import { CompositeDisposable } from '../../lifecycle'; import { Emitter } from '../../events'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; import { @@ -22,7 +20,7 @@ import { DefaultDockviewDeserialzier } from '../../dockview/deserializer'; import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode'; import { DefaultTab } from '../../dockview/components/tab/defaultTab'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; class PanelContentPartTest implements IContentRenderer { element: HTMLElement = document.createElement('div'); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index 60022dcc6..da7555cc6 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -2,7 +2,7 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewApi } from '../../api/component.api'; import { DockviewPanel } from '../../dockview/dockviewPanel'; import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; describe('dockviewPanel', () => { test('update title', () => { diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index 28c1e17d8..b1cf604b0 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -3,7 +3,7 @@ import { IDockviewComponent, } from '../../dockview/dockviewComponent'; import { DockviewPanelModel } from '../../dockview/dockviewPanelModel'; -import { IContentRenderer, ITabRenderer } from '../../groupview/types'; +import { IContentRenderer, ITabRenderer } from '../../dockview/types'; describe('dockviewGroupPanel', () => { test('that dispose is called on content and tab renderers when present', () => { diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts index 94b90ca9c..cfae5ea6b 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewPanel.spec.ts @@ -1,5 +1,5 @@ import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; describe('gridviewPanel', () => { test('get panel', () => { diff --git a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts index a3284a3d8..64ba6c717 100644 --- a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts @@ -3,18 +3,16 @@ import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters, -} from '../../groupview/types'; -import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer, IWatermarkRenderer, -} from '../../groupview/types'; +} from '../../dockview/types'; import { PanelUpdateEvent } from '../../panel/types'; import { DockviewGroupPanelModel, GroupOptions, -} from '../../groupview/dockviewGroupPanelModel'; +} from '../../dockview/dockviewGroupPanelModel'; import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { CompositeDisposable } from '../../lifecycle'; @@ -24,7 +22,7 @@ import { IDockviewPanelModel, DockviewPanelModel, } from '../../dockview/dockviewPanelModel'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; enum GroupChangeKind2 { ADD_PANEL, diff --git a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts index 5fbc3806e..58de628a3 100644 --- a/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/panel/content.spec.ts @@ -1,10 +1,10 @@ import { fireEvent } from '@testing-library/dom'; import { Emitter, Event } from '../../../events'; -import { ContentContainer } from '../../../groupview/panel/content'; +import { ContentContainer } from '../../../dockview/components/panel/content'; import { GroupPanelContentPartInitParameters, IContentRenderer, -} from '../../../groupview/types'; +} from '../../../dockview/types'; import { CompositeDisposable } from '../../../lifecycle'; import { PanelUpdateEvent } from '../../../panel/types'; import { IDockviewPanel } from '../../../dockview/dockviewPanel'; diff --git a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts b/packages/dockview-core/src/__tests__/groupview/tab.spec.ts index a3d65516b..012732e73 100644 --- a/packages/dockview-core/src/__tests__/groupview/tab.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/tab.spec.ts @@ -1,9 +1,9 @@ import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { DockviewGroupPanel } from '../../groupview/dockviewGroupPanel'; -import { DockviewGroupPanelModel } from '../../groupview/dockviewGroupPanelModel'; -import { Tab } from '../../groupview/tab'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; +import { DockviewGroupPanelModel } from '../../dockview/dockviewGroupPanelModel'; +import { Tab } from '../../dockview/components/tab/tab'; describe('tab', () => { test('that empty tab has inactive-tab class', () => { diff --git a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts index d404cc8b0..0bcc96f50 100644 --- a/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/titlebar/tabsContainer.spec.ts @@ -1,13 +1,13 @@ import { DockviewComponent } from '../../../dockview/dockviewComponent'; -import { TabsContainer } from '../../../groupview/titlebar/tabsContainer'; +import { TabsContainer } from '../../../dockview/components/titlebar/tabsContainer'; import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer'; import { TestPanel } from '../dockviewGroupPanelModel.spec'; -import { DockviewGroupPanelModel } from '../../../groupview/dockviewGroupPanelModel'; -import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel'; +import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel'; describe('tabsContainer', () => { test('that an external event does not render a drop target and calls through to the group mode', () => { diff --git a/packages/dockview-core/src/actionbar/actionsContainer.ts b/packages/dockview-core/src/actionbar/actionsContainer.ts index 1f8f7ce56..c6f17e0be 100644 --- a/packages/dockview-core/src/actionbar/actionsContainer.ts +++ b/packages/dockview-core/src/actionbar/actionsContainer.ts @@ -2,7 +2,7 @@ export class ActionContainer { private _element: HTMLElement; private _list: HTMLElement; - get element() { + get element(): HTMLElement { return this._element; } @@ -16,7 +16,7 @@ export class ActionContainer { this._element.appendChild(this._list); } - public add(element: HTMLElement) { + public add(element: HTMLElement): void { const listItem = document.createElement('li'); listItem.className = 'action-item'; this._list.appendChild(element); diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index 54619e319..95a93be5a 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -12,7 +12,7 @@ import { Direction } from '../gridview/baseComponentGridview'; import { AddComponentOptions, IGridviewComponent, - SerializedGridview, + SerializedGridviewComponent, } from '../gridview/gridviewComponent'; import { IGridviewPanel } from '../gridview/gridviewPanel'; @@ -33,7 +33,7 @@ import { ISplitviewPanel } from '../splitview/splitviewPanel'; import { DockviewGroupPanel, IDockviewGroupPanel, -} from '../groupview/dockviewGroupPanel'; +} from '../dockview/dockviewGroupPanel'; import { Emitter, Event } from '../events'; import { IDockviewPanel } from '../dockview/dockviewPanel'; import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel'; @@ -229,7 +229,7 @@ export class PaneviewApi implements CommonApi { } } -export class GridviewApi implements CommonApi { +export class GridviewApi implements CommonApi { get minimumHeight(): number { return this.component.minimumHeight; } @@ -315,11 +315,11 @@ export class GridviewApi implements CommonApi { return this.component.getPanel(id); } - fromJSON(data: SerializedGridview): void { + fromJSON(data: SerializedGridviewComponent): void { return this.component.fromJSON(data); } - toJSON(): SerializedGridview { + toJSON(): SerializedGridviewComponent { return this.component.toJSON(); } diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 3da452efc..8d037d5fb 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -1,6 +1,6 @@ import { Emitter, Event } from '../events'; import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi'; -import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; import { MutableDisposable } from '../lifecycle'; import { IDockviewPanel } from '../dockview/dockviewPanel'; diff --git a/packages/dockview-core/src/dnd/abstractDragHandler.ts b/packages/dockview-core/src/dnd/abstractDragHandler.ts index 19ee381cc..94ce20ff7 100644 --- a/packages/dockview-core/src/dnd/abstractDragHandler.ts +++ b/packages/dockview-core/src/dnd/abstractDragHandler.ts @@ -21,7 +21,7 @@ export abstract class DragHandler extends CompositeDisposable { abstract getData(dataTransfer?: DataTransfer | null): IDisposable; - private configure() { + private configure(): void { this.addDisposables( this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => { diff --git a/packages/dockview-core/src/dnd/ghost.ts b/packages/dockview-core/src/dnd/ghost.ts index 496ac16f7..04262544d 100644 --- a/packages/dockview-core/src/dnd/ghost.ts +++ b/packages/dockview-core/src/dnd/ghost.ts @@ -3,7 +3,7 @@ import { addClasses } from '../dom'; export function addGhostImage( dataTransfer: DataTransfer, ghostElement: HTMLElement -) { +): void { // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues addClasses(ghostElement, 'dv-dragged'); diff --git a/packages/dockview-core/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts index 4d3fa2ba2..e7f99e062 100644 --- a/packages/dockview-core/src/dnd/groupDragHandler.ts +++ b/packages/dockview-core/src/dnd/groupDragHandler.ts @@ -1,4 +1,4 @@ -import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; import { IDisposable } from '../lifecycle'; import { DragHandler } from './abstractDragHandler'; import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer'; diff --git a/packages/dockview-core/src/groupview/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts similarity index 94% rename from packages/dockview-core/src/groupview/panel/content.ts rename to packages/dockview-core/src/dockview/components/panel/content.ts index 760bb99da..0b294abe2 100644 --- a/packages/dockview-core/src/groupview/panel/content.ts +++ b/packages/dockview-core/src/dockview/components/panel/content.ts @@ -2,10 +2,10 @@ import { CompositeDisposable, IDisposable, MutableDisposable, -} from '../../lifecycle'; -import { Emitter, Event } from '../../events'; -import { trackFocus } from '../../dom'; -import { IDockviewPanel } from '../../dockview/dockviewPanel'; +} from '../../../lifecycle'; +import { Emitter, Event } from '../../../events'; +import { trackFocus } from '../../../dom'; +import { IDockviewPanel } from '../../dockviewPanel'; export interface IContentContainer extends IDisposable { onDidFocus: Event; diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index 40f8881b8..3335b5737 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -1,11 +1,8 @@ import { CompositeDisposable } from '../../../lifecycle'; -import { - ITabRenderer, - GroupPanelPartInitParameters, -} from '../../../groupview/types'; +import { ITabRenderer, GroupPanelPartInitParameters } from '../../types'; import { addDisposableListener } from '../../../events'; import { PanelUpdateEvent } from '../../../panel/types'; -import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockviewGroupPanel'; import { createCloseButton } from '../../../svg'; export class DefaultTab extends CompositeDisposable implements ITabRenderer { diff --git a/packages/dockview-core/src/groupview/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts similarity index 89% rename from packages/dockview-core/src/groupview/tab.ts rename to packages/dockview-core/src/dockview/components/tab/tab.ts index 36da8f5fa..550752e53 100644 --- a/packages/dockview-core/src/groupview/tab.ts +++ b/packages/dockview-core/src/dockview/components/tab/tab.ts @@ -1,17 +1,16 @@ -import { addDisposableListener, Emitter, Event } from '../events'; -import { CompositeDisposable, IDisposable } from '../lifecycle'; +import { addDisposableListener, Emitter, Event } from '../../../events'; +import { CompositeDisposable, IDisposable } from '../../../lifecycle'; import { getPanelData, LocalSelectionTransfer, PanelTransfer, -} from '../dnd/dataTransfer'; -import { toggleClass } from '../dom'; -import { IDockviewComponent } from '../dockview/dockviewComponent'; -import { ITabRenderer } from './types'; -import { DockviewGroupPanel } from './dockviewGroupPanel'; -import { DroptargetEvent, Droptarget } from '../dnd/droptarget'; -import { DockviewDropTargets } from './dnd'; -import { DragHandler } from '../dnd/abstractDragHandler'; +} from '../../../dnd/dataTransfer'; +import { toggleClass } from '../../../dom'; +import { IDockviewComponent } from '../../dockviewComponent'; +import { DockviewDropTargets, ITabRenderer } from '../../types'; +import { DockviewGroupPanel } from '../../dockviewGroupPanel'; +import { DroptargetEvent, Droptarget } from '../../../dnd/droptarget'; +import { DragHandler } from '../../../dnd/abstractDragHandler'; export interface ITab { readonly panelId: string; diff --git a/packages/dockview-core/src/groupview/titlebar/tabsContainer.scss b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss similarity index 100% rename from packages/dockview-core/src/groupview/titlebar/tabsContainer.scss rename to packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss diff --git a/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts similarity index 95% rename from packages/dockview-core/src/groupview/titlebar/tabsContainer.ts rename to packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 882dbafe2..bb73409ad 100644 --- a/packages/dockview-core/src/groupview/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -2,14 +2,14 @@ import { IDisposable, CompositeDisposable, IValueDisposable, -} from '../../lifecycle'; -import { addDisposableListener, Emitter, Event } from '../../events'; -import { ITab, Tab } from '../tab'; -import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { DockviewGroupPanel } from '../dockviewGroupPanel'; +} from '../../../lifecycle'; +import { addDisposableListener, Emitter, Event } from '../../../events'; +import { ITab, Tab } from '../tab/tab'; +import { DockviewComponent } from '../../dockviewComponent'; +import { DockviewGroupPanel } from '../../dockviewGroupPanel'; import { VoidContainer } from './voidContainer'; -import { toggleClass } from '../../dom'; -import { IDockviewPanel } from '../../dockview/dockviewPanel'; +import { toggleClass } from '../../../dom'; +import { IDockviewPanel } from '../../dockviewPanel'; export interface TabDropIndexEvent { event: DragEvent; diff --git a/packages/dockview-core/src/groupview/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts similarity index 79% rename from packages/dockview-core/src/groupview/titlebar/voidContainer.ts rename to packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts index b73ec720b..992dcf2f4 100644 --- a/packages/dockview-core/src/groupview/titlebar/voidContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts @@ -1,12 +1,12 @@ -import { last } from '../../array'; -import { getPanelData } from '../../dnd/dataTransfer'; -import { Droptarget, DroptargetEvent } from '../../dnd/droptarget'; -import { GroupDragHandler } from '../../dnd/groupDragHandler'; -import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { addDisposableListener, Emitter, Event } from '../../events'; -import { CompositeDisposable } from '../../lifecycle'; -import { DockviewDropTargets } from '../dnd'; -import { DockviewGroupPanel } from '../dockviewGroupPanel'; +import { last } from '../../../array'; +import { getPanelData } from '../../../dnd/dataTransfer'; +import { Droptarget, DroptargetEvent } from '../../../dnd/droptarget'; +import { GroupDragHandler } from '../../../dnd/groupDragHandler'; +import { DockviewComponent } from '../../dockviewComponent'; +import { addDisposableListener, Emitter, Event } from '../../../events'; +import { CompositeDisposable } from '../../../lifecycle'; +import { DockviewGroupPanel } from '../../dockviewGroupPanel'; +import { DockviewDropTargets } from '../../types'; export class VoidContainer extends CompositeDisposable { private readonly _element: HTMLElement; diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index 85d29d5ac..2a2fe49d5 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -1,12 +1,9 @@ -import { - GroupPanelPartInitParameters, - IWatermarkRenderer, -} from '../../../groupview/types'; +import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../types'; import { ActionContainer } from '../../../actionbar/actionsContainer'; import { addDisposableListener } from '../../../events'; import { toggleClass } from '../../../dom'; import { CompositeDisposable } from '../../../lifecycle'; -import { DockviewGroupPanel } from '../../../groupview/dockviewGroupPanel'; +import { DockviewGroupPanel } from '../../dockviewGroupPanel'; import { PanelUpdateEvent } from '../../../panel/types'; import { createCloseButton } from '../../../svg'; diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index 37a9d213a..5c6936c4d 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -1,5 +1,5 @@ -import { GroupviewPanelState, ITabRenderer } from '../groupview/types'; -import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; +import { GroupviewPanelState, ITabRenderer } from './types'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewPanel, IDockviewPanel } from './dockviewPanel'; import { IDockviewComponent } from './dockviewComponent'; import { createComponent } from '../panel/componentFactory'; @@ -14,6 +14,14 @@ export interface IPanelDeserializer { ): IDockviewPanel; } +// depreciated +interface LegacyState extends GroupviewPanelState { + view?: { + tab?: { id: string }; + content: { id: string }; + }; +} + export class DefaultDockviewDeserialzier implements IPanelDeserializer { constructor(private readonly layout: IDockviewComponent) {} @@ -24,9 +32,8 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { const panelId = panelData.id; const params = panelData.params; const title = panelData.title; - const viewData = panelData.view!; - let tab: ITabRenderer; + const viewData = (panelData as LegacyState).view!; const contentComponent = viewData ? viewData.content.id @@ -35,6 +42,8 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { ? viewData.tab?.id : panelData.tabComponent; + let tab: ITabRenderer; + if (tabComponent) { tab = createComponent( panelId, diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 08acc2f1c..c2ab01930 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -11,11 +11,10 @@ import { CompositeDisposable } from '../lifecycle'; import { Event, Emitter } from '../events'; import { Watermark } from './components/watermark/watermark'; import { - IContentRenderer, - ITabRenderer, IWatermarkRenderer, GroupviewPanelState, -} from '../groupview/types'; + DockviewDropTargets, +} from './types'; import { sequentialNumberGenerator } from '../math'; import { IPanelDeserializer } from './deserializer'; import { createComponent } from '../panel/componentFactory'; @@ -37,19 +36,14 @@ import { } from '../gridview/baseComponentGridview'; import { DockviewApi } from '../api/component.api'; import { Orientation, Sizing } from '../splitview/core/splitview'; -import { DefaultTab } from './components/tab/defaultTab'; import { GroupOptions, GroupPanelViewState, GroupviewDropEvent, -} from '../groupview/dockviewGroupPanelModel'; -import { - DockviewGroupPanel, - IDockviewGroupPanel, -} from '../groupview/dockviewGroupPanel'; +} from './dockviewGroupPanelModel'; +import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewPanelModel } from './dockviewPanelModel'; import { getPanelData } from '../dnd/dataTransfer'; -import { DockviewDropTargets } from '../groupview/dnd'; export interface PanelReference { update: (event: { params: { [key: string]: any } }) => void; diff --git a/packages/dockview-core/src/groupview/dockviewGroupPanel.scss b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss similarity index 100% rename from packages/dockview-core/src/groupview/dockviewGroupPanel.scss rename to packages/dockview-core/src/dockview/dockviewGroupPanel.scss diff --git a/packages/dockview-core/src/groupview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts similarity index 100% rename from packages/dockview-core/src/groupview/dockviewGroupPanel.ts rename to packages/dockview-core/src/dockview/dockviewGroupPanel.ts diff --git a/packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts similarity index 97% rename from packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts rename to packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index c737d4448..30229eb02 100644 --- a/packages/dockview-core/src/groupview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -1,20 +1,25 @@ import { DockviewApi } from '../api/component.api'; import { getPanelData, PanelTransfer } from '../dnd/dataTransfer'; import { Droptarget, Position } from '../dnd/droptarget'; -import { DockviewComponent } from '../dockview/dockviewComponent'; +import { DockviewComponent } from './dockviewComponent'; import { isAncestor, toggleClass } from '../dom'; import { addDisposableListener, Emitter, Event } from '../events'; import { IGridPanelView } from '../gridview/baseComponentGridview'; import { IViewSize } from '../gridview/gridview'; -import { CompositeDisposable, IDisposable } from '../lifecycle'; +import { CompositeDisposable } from '../lifecycle'; import { PanelInitParameters, PanelUpdateEvent } from '../panel/types'; -import { ContentContainer, IContentContainer } from './panel/content'; -import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer'; -import { IWatermarkRenderer } from './types'; +import { + ContentContainer, + IContentContainer, +} from './components/panel/content'; +import { + ITabsContainer, + TabsContainer, +} from './components/titlebar/tabsContainer'; +import { DockviewDropTargets, IWatermarkRenderer } from './types'; import { DockviewGroupPanel } from './dockviewGroupPanel'; -import { DockviewDropTargets } from './dnd'; -import { IDockviewPanel } from '../dockview/dockviewPanel'; -import { IGroupControlRenderer } from '../dockview/options'; +import { IDockviewPanel } from './dockviewPanel'; +import { IGroupControlRenderer } from './options'; export interface DndService { canDisplayOverlay( diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 14823fbc3..b9b113e55 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -7,8 +7,8 @@ import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanelInitParameters, -} from '../groupview/types'; -import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; +} from './types'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { CompositeDisposable, IDisposable } from '../lifecycle'; import { IPanel, Parameters } from '../panel/types'; import { IDockviewPanelModel } from './dockviewPanelModel'; diff --git a/packages/dockview-core/src/dockview/dockviewPanelModel.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts index 0025d9549..c8e2aee8f 100644 --- a/packages/dockview-core/src/dockview/dockviewPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -4,17 +4,12 @@ import { IContentRenderer, ITabRenderer, GroupPanelUpdateEvent, -} from '../groupview/types'; -import { DockviewGroupPanel } from '../groupview/dockviewGroupPanel'; +} from './types'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; import { IDisposable } from '../lifecycle'; import { createComponent } from '../panel/componentFactory'; import { IDockviewComponent } from './dockviewComponent'; -export interface SerializedGroupPanelView { - tab?: { id: string }; - content: { id: string }; -} - export interface IDockviewPanelModel extends IDisposable { readonly contentComponent: string; readonly tabComponent?: string; diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 862aeb476..52a29ad0d 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -6,14 +6,14 @@ import { ITabRenderer, WatermarkConstructor, IWatermarkRenderer, -} from '../groupview/types'; + DockviewDropTargets, +} from './types'; import { DockviewGroupPanel, DockviewGroupPanelApi, -} from '../groupview/dockviewGroupPanel'; +} from './dockviewGroupPanel'; import { ISplitviewStyles, Orientation } from '../splitview/core/splitview'; import { FrameworkFactory } from '../types'; -import { DockviewDropTargets } from '../groupview/dnd'; import { PanelTransfer } from '../dnd/dataTransfer'; import { IDisposable } from '../lifecycle'; import { Position } from '../dnd/droptarget'; diff --git a/packages/dockview-core/src/groupview/types.ts b/packages/dockview-core/src/dockview/types.ts similarity index 91% rename from packages/dockview-core/src/groupview/types.ts rename to packages/dockview-core/src/dockview/types.ts index af36505a4..6dcd6f13f 100644 --- a/packages/dockview-core/src/groupview/types.ts +++ b/packages/dockview-core/src/dockview/types.ts @@ -1,4 +1,4 @@ -import { IDockviewComponent } from '../dockview/dockviewComponent'; +import { IDockviewComponent } from './dockviewComponent'; import { DockviewPanelApi } from '../api/dockviewPanelApi'; import { PanelInitParameters, @@ -7,13 +7,16 @@ import { Parameters, } from '../panel/types'; import { DockviewApi } from '../api/component.api'; -import { DockviewGroupPanel } from './dockviewGroupPanel'; import { Event } from '../events'; -import { - IDockviewPanelModel, - SerializedGroupPanelView, -} from '../dockview/dockviewPanelModel'; import { Optional } from '../types'; +import { DockviewGroupPanel } from './dockviewGroupPanel'; + +export enum DockviewDropTargets { + Tab, + Panel, + TabContainer, + Edge, +} export interface HeaderPartInitParameters { title: string; @@ -94,5 +97,4 @@ export interface GroupviewPanelState { tabComponent?: string; title?: string; params?: { [key: string]: any }; - view?: SerializedGroupPanelView; // depreciated } diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts index 6817add51..3d08bb8b2 100644 --- a/packages/dockview-core/src/dom.ts +++ b/packages/dockview-core/src/dom.ts @@ -25,7 +25,10 @@ export function watchElementResize( }; } -export const removeClasses = (element: HTMLElement, ...classes: string[]) => { +export const removeClasses = ( + element: HTMLElement, + ...classes: string[] +): void => { for (const classname of classes) { if (element.classList.contains(classname)) { element.classList.remove(classname); @@ -33,7 +36,10 @@ export const removeClasses = (element: HTMLElement, ...classes: string[]) => { } }; -export const addClasses = (element: HTMLElement, ...classes: string[]) => { +export const addClasses = ( + element: HTMLElement, + ...classes: string[] +): void => { for (const classname of classes) { if (!element.classList.contains(classname)) { element.classList.add(classname); @@ -45,7 +51,7 @@ export const toggleClass = ( element: HTMLElement, className: string, isToggled: boolean -) => { +): void => { const hasClass = element.classList.contains(className); if (isToggled && !hasClass) { element.classList.add(className); @@ -74,8 +80,8 @@ export function getElementsByTagName(tag: string): HTMLElement[] { } export interface IFocusTracker extends IDisposable { - onDidFocus: Event; - onDidBlur: Event; + readonly onDidFocus: Event; + readonly onDidBlur: Event; refreshState?(): void; } @@ -153,11 +159,11 @@ class FocusTracker extends CompositeDisposable implements IFocusTracker { } } - refreshState() { + refreshState(): void { this._refreshStateHandler(); } - public dispose() { + public dispose(): void { super.dispose(); this._onDidBlur.dispose(); diff --git a/packages/dockview-core/src/events.ts b/packages/dockview-core/src/events.ts index 3308e578d..7f6b07ebf 100644 --- a/packages/dockview-core/src/events.ts +++ b/packages/dockview-core/src/events.ts @@ -5,7 +5,7 @@ export interface Event { } export interface EmitterOptions { - replay?: boolean; + readonly replay?: boolean; } export namespace Event { @@ -35,7 +35,7 @@ export class Emitter implements IDisposable { constructor(private readonly options?: EmitterOptions) {} - get event() { + get event(): Event { if (!this._event) { this._event = (listener: (e: T) => void): IDisposable => { if (this.options?.replay && this._last !== undefined) { @@ -57,14 +57,14 @@ export class Emitter implements IDisposable { return this._event; } - public fire(e: T) { + public fire(e: T): void { this._last = e; for (const listener of this._listeners) { listener(e); } } - public dispose() { + public dispose(): void { this._listeners = []; this._disposed = true; } diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index 5e24494d7..9fbb82a2b 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -92,40 +92,40 @@ export abstract class BaseGrid protected readonly _bufferOnDidLayoutChange = new TickDelayedEvent(); - get id() { + get id(): string { return this._id; } - get element() { + get element(): HTMLElement { return this._element; } - get size() { + get size(): number { return this._groups.size; } - get groups() { + get groups(): T[] { return Array.from(this._groups.values()).map((_) => _.value); } - get width() { + get width(): number { return this.gridview.width; } - get height() { + get height(): number { return this.gridview.height; } - get minimumHeight() { + get minimumHeight(): number { return this.gridview.minimumHeight; } - get maximumHeight() { + get maximumHeight(): number { return this.gridview.maximumHeight; } - get minimumWidth() { + get minimumWidth(): number { return this.gridview.minimumWidth; } - get maximumWidth() { + get maximumWidth(): number { return this.gridview.maximumWidth; } @@ -176,16 +176,20 @@ export abstract class BaseGrid public abstract clear(): void; - public setVisible(panel: T, visible: boolean) { + public setVisible(panel: T, visible: boolean): void { this.gridview.setViewVisible(getGridLocation(panel.element), visible); this._onDidLayoutChange.fire(); } - public isVisible(panel: T) { + public isVisible(panel: T): boolean { return this.gridview.isViewVisible(getGridLocation(panel.element)); } - protected doAddGroup(group: T, location: number[] = [0], size?: number) { + protected doAddGroup( + group: T, + location: number[] = [0], + size?: number + ): void { this.gridview.addView(group, size ?? Sizing.Distribute, location); this._onDidAddGroup.fire(group); @@ -196,7 +200,7 @@ export abstract class BaseGrid protected doRemoveGroup( group: T, options?: { skipActive?: boolean; skipDispose?: boolean } - ) { + ): T { if (!this._groups.has(group.id)) { throw new Error('invalid operation'); } @@ -228,7 +232,7 @@ export abstract class BaseGrid return this._groups.get(id)?.value; } - public doSetGroupActive(group: T | undefined, skipFocus?: boolean) { + public doSetGroupActive(group: T | undefined, skipFocus?: boolean): void { if (this._activeGroup === group) { return; } @@ -251,11 +255,11 @@ export abstract class BaseGrid this._onDidActiveGroupChange.fire(group); } - public removeGroup(group: T) { + public removeGroup(group: T): void { this.doRemoveGroup(group); } - public moveToNext(options?: MovementOptions2) { + public moveToNext(options?: MovementOptions2): void { if (!options) { options = {}; } @@ -271,7 +275,7 @@ export abstract class BaseGrid this.doSetGroupActive(next as T); } - public moveToPrevious(options?: MovementOptions2) { + public moveToPrevious(options?: MovementOptions2): void { if (!options) { options = {}; } diff --git a/packages/dockview-core/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts index bc8f591a9..7e91187a6 100644 --- a/packages/dockview-core/src/gridview/branchNode.ts +++ b/packages/dockview-core/src/gridview/branchNode.ts @@ -22,6 +22,8 @@ export class BranchNode extends CompositeDisposable implements IView { private splitview: Splitview; private _orthogonalSize: number; private _size: number; + private _childrenDisposable: IDisposable = Disposable.NONE; + public readonly children: Node[] = []; private readonly _onDidChange = new Emitter<{ @@ -61,11 +63,11 @@ export class BranchNode extends CompositeDisposable implements IView { return this.splitview.maximumSize; } - get orthogonalSize() { + get orthogonalSize(): number { return this._orthogonalSize; } - get size() { + get size(): number { return this._size; } @@ -168,7 +170,7 @@ export class BranchNode extends CompositeDisposable implements IView { this.setupChildrenEvents(); } - setVisible(visible: boolean) { + setVisible(visible: boolean): void { for (const child of this.children) { child.setVisible(visible); } @@ -258,7 +260,7 @@ export class BranchNode extends CompositeDisposable implements IView { return this.splitview.getViewCachedVisibleSize(index); } - public removeChild(index: number, sizing?: Sizing) { + public removeChild(index: number, sizing?: Sizing): void { if (index < 0 || index >= this.children.length) { throw new Error('Invalid index'); } @@ -279,9 +281,7 @@ export class BranchNode extends CompositeDisposable implements IView { return child; } - private _childrenDisposable: IDisposable = Disposable.NONE; - - private setupChildrenEvents() { + private setupChildrenEvents(): void { this._childrenDisposable.dispose(); this._childrenDisposable = Event.any( @@ -295,7 +295,7 @@ export class BranchNode extends CompositeDisposable implements IView { }); } - public dispose() { + public dispose(): void { super.dispose(); this._childrenDisposable.dispose(); this.children.forEach((child) => child.dispose()); diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index 74f96b43e..5afce5c12 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -261,6 +261,14 @@ export interface INodeDescriptor { export interface IViewDeserializer { fromJSON: (data: ISerializedLeafNode) => IGridView; } + +export interface SerializedGridview { + root: SerializedGridObject; + width: number; + height: number; + orientation: Orientation; +} + export class Gridview implements IDisposable { private _root: BranchNode | undefined; public readonly element: HTMLElement; @@ -277,7 +285,41 @@ export class Gridview implements IDisposable { return this._root ? this._root.children.length : 0; } - public serialize() { + public get orientation(): Orientation { + return this.root.orientation; + } + + public set orientation(orientation: Orientation) { + if (this.root.orientation === orientation) { + return; + } + + const { size, orthogonalSize } = this.root; + this.root = flipNode(this.root, orthogonalSize, size); + this.root.layout(size, orthogonalSize); + } + + get width(): number { + return this.root.width; + } + get height(): number { + return this.root.height; + } + + get minimumWidth(): number { + return this.root.minimumWidth; + } + get minimumHeight(): number { + return this.root.minimumHeight; + } + get maximumWidth(): number { + return this.root.maximumHeight; + } + get maximumHeight(): number { + return this.root.maximumHeight; + } + + public serialize(): SerializedGridview { const root = serializeBranchNode(this.getView(), this.orientation); return { @@ -288,7 +330,7 @@ export class Gridview implements IDisposable { }; } - public dispose() { + public dispose(): void { this.disposable.dispose(); this._onDidChange.dispose(); this.root.dispose(); @@ -296,7 +338,7 @@ export class Gridview implements IDisposable { this.element.remove(); } - public clear() { + public clear(): void { const orientation = this.root.orientation; this.root = new BranchNode( orientation, @@ -307,7 +349,7 @@ export class Gridview implements IDisposable { ); } - public deserialize(json: any, deserializer: IViewDeserializer) { + public deserialize(json: any, deserializer: IViewDeserializer): void { const orientation = json.orientation; const height = orientation === Orientation.VERTICAL ? json.height : json.width; @@ -378,20 +420,6 @@ export class Gridview implements IDisposable { return result; } - public get orientation() { - return this.root.orientation; - } - - public set orientation(orientation: Orientation) { - if (this.root.orientation === orientation) { - return; - } - - const { size, orthogonalSize } = this.root; - this.root = flipNode(this.root, orthogonalSize, size); - this.root.layout(size, orthogonalSize); - } - private get root(): BranchNode { return this._root!; } @@ -448,11 +476,11 @@ export class Gridview implements IDisposable { }); } - public next(location: number[]) { + public next(location: number[]): LeafNode { return this.progmaticSelect(location); } - public previous(location: number[]) { + public previous(location: number[]): LeafNode { return this.progmaticSelect(location, true); } @@ -492,7 +520,7 @@ export class Gridview implements IDisposable { return { box, children }; } - private progmaticSelect(location: number[], reverse = false) { + private progmaticSelect(location: number[], reverse = false): LeafNode { const [path, node] = this.getNode(location); if (!(node instanceof LeafNode)) { @@ -513,26 +541,6 @@ export class Gridview implements IDisposable { return findLeaf(this.root, reverse); } - get width(): number { - return this.root.width; - } - get height(): number { - return this.root.height; - } - - get minimumWidth(): number { - return this.root.minimumWidth; - } - get minimumHeight(): number { - return this.root.minimumHeight; - } - get maximumWidth(): number { - return this.root.maximumHeight; - } - get maximumHeight(): number { - return this.root.maximumHeight; - } - constructor( readonly proportionalLayout: boolean, readonly styles: ISplitviewStyles | undefined, @@ -581,7 +589,11 @@ export class Gridview implements IDisposable { parent.moveChild(from, to); } - public addView(view: IGridView, size: number | Sizing, location: number[]) { + public addView( + view: IGridView, + size: number | Sizing, + location: number[] + ): void { const [rest, index] = tail(location); const [pathToParent, parent] = this.getNode(rest); @@ -636,7 +648,7 @@ export class Gridview implements IDisposable { } } - public remove(view: IGridView, sizing?: Sizing) { + public remove(view: IGridView, sizing?: Sizing): IGridView { const location = getGridLocation(view.element); return this.removeView(location, sizing); } @@ -721,7 +733,7 @@ export class Gridview implements IDisposable { return node.view; } - public layout(width: number, height: number) { + public layout(width: number, height: number): void { const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL ? [height, width] diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts index 70d564bfe..c6b8d45df 100644 --- a/packages/dockview-core/src/gridview/gridviewComponent.ts +++ b/packages/dockview-core/src/gridview/gridviewComponent.ts @@ -2,6 +2,7 @@ import { getRelativeLocation, SerializedGridObject, getGridLocation, + SerializedGridview, } from './gridview'; import { tail, sequenceEquals } from '../array'; import { CompositeDisposable } from '../lifecycle'; @@ -26,13 +27,8 @@ import { createComponent } from '../panel/componentFactory'; import { Emitter, Event } from '../events'; import { Position } from '../dnd/droptarget'; -export interface SerializedGridview { - grid: { - height: number; - width: number; - orientation: Orientation; - root: SerializedGridObject; - }; +export interface SerializedGridviewComponent { + grid: SerializedGridview; activePanel?: string; } @@ -64,8 +60,8 @@ export interface IGridviewComponent extends IBaseGrid { addPanel(options: AddComponentOptions): IGridviewPanel; removePanel(panel: IGridviewPanel, sizing?: Sizing): void; focus(): void; - fromJSON(serializedGridview: SerializedGridview): void; - toJSON(): SerializedGridview; + fromJSON(serializedGridview: SerializedGridviewComponent): void; + toJSON(): SerializedGridviewComponent; movePanel( panel: IGridviewPanel, options: { direction: Direction; reference: string; size?: number } @@ -84,7 +80,7 @@ export class GridviewComponent private readonly _onDidLayoutfromJSON = new Emitter(); readonly onDidLayoutFromJSON: Event = this._onDidLayoutfromJSON.event; - get orientation() { + get orientation(): Orientation { return this.gridview.orientation; } @@ -92,7 +88,7 @@ export class GridviewComponent this.gridview.orientation = value; } - get options() { + get options(): GridviewComponentOptions { return this._options; } @@ -135,7 +131,7 @@ export class GridviewComponent this.layout(this.gridview.width, this.gridview.height, true); } - removePanel(panel: GridviewPanel) { + removePanel(panel: GridviewPanel): void { this.removeGroup(panel); } @@ -144,7 +140,7 @@ export class GridviewComponent * * @returns A JSON respresentation of the layout */ - public toJSON(): SerializedGridview { + public toJSON(): SerializedGridviewComponent { const data = this.gridview.serialize() as { height: number; width: number; @@ -168,11 +164,11 @@ export class GridviewComponent }); } - focus() { + focus(): void { this.activeGroup?.focus(); } - public fromJSON(serializedGridview: SerializedGridview) { + public fromJSON(serializedGridview: SerializedGridviewComponent): void { this.clear(); const { grid, activePanel } = serializedGridview; @@ -339,7 +335,7 @@ export class GridviewComponent return view; } - private registerPanel(panel: GridviewPanel) { + private registerPanel(panel: GridviewPanel): void { const disposable = new CompositeDisposable( panel.api.onDidFocusChange((event) => { if (!event.isFocused) { @@ -366,7 +362,7 @@ export class GridviewComponent referenceGroup: IGridPanelComponentView, groupId: string, target: Position - ) { + ): void { const sourceGroup = this.getPanel(groupId); if (!sourceGroup) { @@ -411,11 +407,11 @@ export class GridviewComponent this.doAddGroup(targetGroup, location); } - removeGroup(group: GridviewPanel) { + removeGroup(group: GridviewPanel): void { super.removeGroup(group); } - public dispose() { + public dispose(): void { super.dispose(); this._onDidLayoutfromJSON.dispose(); diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts index b95603bec..81ed2e4dc 100644 --- a/packages/dockview-core/src/gridview/gridviewPanel.ts +++ b/packages/dockview-core/src/gridview/gridviewPanel.ts @@ -62,11 +62,11 @@ export abstract class GridviewPanel return this._priority; } - get snap() { + get snap(): boolean { return this._snap; } - get minimumWidth() { + get minimumWidth(): number { const width = typeof this._minimumWidth === 'function' ? this._minimumWidth() @@ -80,7 +80,7 @@ export abstract class GridviewPanel return width; } - get minimumHeight() { + get minimumHeight(): number { const height = typeof this._minimumHeight === 'function' ? this._minimumHeight() @@ -94,7 +94,7 @@ export abstract class GridviewPanel return height; } - get maximumHeight() { + get maximumHeight(): number { const height = typeof this._maximumHeight === 'function' ? this._maximumHeight() @@ -108,7 +108,7 @@ export abstract class GridviewPanel return height; } - get maximumWidth() { + get maximumWidth(): number { const width = typeof this._maximumWidth === 'function' ? this._maximumWidth() @@ -122,7 +122,7 @@ export abstract class GridviewPanel return width; } - get isActive() { + get isActive(): boolean { return this.api.isActive; } @@ -177,11 +177,11 @@ export abstract class GridviewPanel ); } - setVisible(isVisible: boolean) { + setVisible(isVisible: boolean): void { this.api._onDidVisibilityChange.fire({ isVisible }); } - setActive(isActive: boolean) { + setActive(isActive: boolean): void { this.api._onDidActiveChange.fire({ isActive }); } @@ -209,7 +209,7 @@ export abstract class GridviewPanel } } - private updateConstraints() { + private updateConstraints(): void { this.api._onDidConstraintsChange.fire({ minimumWidth: this._evaluatedMinimumWidth, maximumWidth: this._evaluatedMaximumWidth, diff --git a/packages/dockview-core/src/gridview/leafNode.ts b/packages/dockview-core/src/gridview/leafNode.ts index eed4a55bf..02f3469d0 100644 --- a/packages/dockview-core/src/gridview/leafNode.ts +++ b/packages/dockview-core/src/gridview/leafNode.ts @@ -43,7 +43,7 @@ export class LeafNode implements IView { return this.view.priority; } - get snap() { + get snap(): boolean | undefined { return this.view.snap; } @@ -71,25 +71,25 @@ export class LeafNode implements IView { : this.maximumHeight; } - get orthogonalSize() { + get orthogonalSize(): number { return this._orthogonalSize; } - get size() { + get size(): number { return this._size; } - get element() { + get element(): HTMLElement { return this.view.element; } - get width() { + get width(): number { return this.orientation === Orientation.HORIZONTAL ? this.orthogonalSize : this.size; } - get height() { + get height(): number { return this.orientation === Orientation.HORIZONTAL ? this.size : this.orthogonalSize; @@ -122,21 +122,21 @@ export class LeafNode implements IView { }); } - public setVisible(visible: boolean) { + public setVisible(visible: boolean): void { if (this.view.setVisible) { this.view.setVisible(visible); this._onDidChange.fire({}); } } - public layout(size: number, orthogonalSize: number) { + public layout(size: number, orthogonalSize: number): void { this._size = size; this._orthogonalSize = orthogonalSize; this.view.layout(this.width, this.height); } - public dispose() { + public dispose(): void { this._onDidChange.dispose(); this._disposable.dispose(); } diff --git a/packages/dockview-core/src/groupview/dnd.ts b/packages/dockview-core/src/groupview/dnd.ts deleted file mode 100644 index 4d31a64e2..000000000 --- a/packages/dockview-core/src/groupview/dnd.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum DockviewDropTargets { - Tab, - Panel, - TabContainer, - Edge, -} diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index 62b231c69..71347bb1c 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -23,16 +23,15 @@ export * from './splitview/core/options'; export * from './paneview/paneview'; export * from './gridview/gridview'; -export * from './groupview/dockviewGroupPanelModel'; +export * from './dockview/dockviewGroupPanelModel'; export * from './gridview/baseComponentGridview'; export * from './paneview/draggablePaneviewPanel'; -export * from './groupview/panel/content'; -export * from './groupview/tab'; -export * from './groupview/dnd'; -export * from './groupview/types'; -export * from './groupview/dockviewGroupPanel'; +export * from './dockview/components/panel/content'; +export * from './dockview/components/tab/tab'; +export * from './dockview/types'; +export * from './dockview/dockviewGroupPanel'; export * from './dockview/options'; export * from './dockview/dockviewPanel'; @@ -48,7 +47,7 @@ export { PaneviewComponentOptions } from './paneview/options'; export * from './gridview/gridviewPanel'; export * from './splitview/splitviewPanel'; export * from './paneview/paneviewPanel'; -export * from './groupview/types'; +export * from './dockview/types'; export { Position, diff --git a/packages/dockview-core/src/lifecycle.ts b/packages/dockview-core/src/lifecycle.ts index 0486cedff..20f1eb425 100644 --- a/packages/dockview-core/src/lifecycle.ts +++ b/packages/dockview-core/src/lifecycle.ts @@ -3,8 +3,8 @@ export interface IDisposable { } export interface IValueDisposable { - value: T; - disposable: IDisposable; + readonly value: T; + readonly disposable: IDisposable; } export namespace Disposable { @@ -26,11 +26,11 @@ export class CompositeDisposable { this.disposables = args; } - public addDisposables(...args: IDisposable[]) { + public addDisposables(...args: IDisposable[]): void { args.forEach((arg) => this.disposables.push(arg)); } - public dispose() { + public dispose(): void { this.disposables.forEach((arg) => arg.dispose()); } } @@ -45,7 +45,7 @@ export class MutableDisposable implements IDisposable { this._disposable = disposable; } - public dispose() { + public dispose(): void { if (this._disposable) { this._disposable.dispose(); this._disposable = Disposable.NONE; diff --git a/packages/dockview-core/src/types.ts b/packages/dockview-core/src/types.ts index 367e00a8f..e5bd8f0d3 100644 --- a/packages/dockview-core/src/types.ts +++ b/packages/dockview-core/src/types.ts @@ -1,15 +1,11 @@ -export interface Constructor { - new (): T; -} - export interface FrameworkFactory { createComponent: (id: string, componentId: string, component: any) => T; } -export type FunctionOrValue = (() => T) | T; - export function isBooleanValue(value: any): value is boolean { return typeof value === 'boolean'; } +export type FunctionOrValue = (() => T) | T; + export type Optional = Pick, K> & Omit; diff --git a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts index 4162d4a00..d3a056372 100644 --- a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts +++ b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts @@ -1,26 +1,32 @@ -import { GroupPanel, GroupviewPanelApi, Groupview } from 'dockview-core'; +import { + DockviewGroupPanel, + DockviewGroupPanelApi, + DockviewGroupPanelModel, +} from 'dockview-core'; import { ReactGroupControlsRendererPart } from '../../../dockview/groupControlsRenderer'; describe('groupControlsRenderer', () => { test('#1', () => { - const groupviewMock = jest.fn, []>(() => { - return { - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - onDidActivePanelChange: jest.fn(), - }; - }); + const groupviewMock = jest.fn, []>( + () => { + return { + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + onDidActivePanelChange: jest.fn(), + }; + } + ); - const groupview = new groupviewMock() as Groupview; + const groupview = new groupviewMock() as DockviewGroupPanelModel; - const groupPanelMock = jest.fn, []>(() => { + const groupPanelMock = jest.fn, []>(() => { return { - api: {} as GroupviewPanelApi as any, + api: {} as DockviewGroupPanelApi as any, model: groupview, }; }); - const groupPanel = new groupPanelMock() as GroupPanel; + const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new ReactGroupControlsRendererPart( jest.fn(), diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index e14be1c62..7d1fe46fa 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -10,7 +10,7 @@ import { IContentRenderer, ITabRenderer, watchElementResize, - GroupPanel, + DockviewGroupPanel, DefaultDockviewDeserialzier, } from 'dockview-core'; import { ReactPanelContentPart } from './reactContentPart'; @@ -27,9 +27,9 @@ import { function createGroupControlElement( component: React.FunctionComponent | undefined, store: ReactPortalStore -): ((groupPanel: GroupPanel) => IGroupControlRenderer) | undefined { +): ((groupPanel: DockviewGroupPanel) => IGroupControlRenderer) | undefined { return component - ? (groupPanel: GroupPanel) => { + ? (groupPanel: DockviewGroupPanel) => { return new ReactGroupControlsRendererPart( component, store, diff --git a/packages/dockview/src/dockview/groupControlsRenderer.ts b/packages/dockview/src/dockview/groupControlsRenderer.ts index 57375e907..9890d6ece 100644 --- a/packages/dockview/src/dockview/groupControlsRenderer.ts +++ b/packages/dockview/src/dockview/groupControlsRenderer.ts @@ -5,13 +5,13 @@ import { DockviewCompositeDisposable, DockviewMutableDisposable, DockviewApi, - GroupPanel, - GroupviewPanelApi, + DockviewGroupPanel, + DockviewGroupPanelApi, PanelUpdateEvent, } from 'dockview-core'; export interface IDockviewGroupControlProps { - api: GroupviewPanelApi; + api: DockviewGroupPanelApi; containerApi: DockviewApi; panels: IDockviewPanel[]; activePanel: IDockviewPanel | undefined; @@ -31,26 +31,26 @@ export class ReactGroupControlsRendererPart { return this._part; } - get group(): GroupPanel { + get group(): DockviewGroupPanel { return this._group; } constructor( private readonly component: React.FunctionComponent, private readonly reactPortalStore: ReactPortalStore, - private readonly _group: GroupPanel + private readonly _group: DockviewGroupPanel ) { this._element = document.createElement('div'); this._element.className = 'dockview-react-part'; } - focus() { + focus(): void { // TODO } public init(parameters: { containerApi: DockviewApi; - api: GroupviewPanelApi; + api: DockviewGroupPanelApi; }): void { this.mutableDisposable.value = new DockviewCompositeDisposable( this._group.model.onDidAddPanel(() => { @@ -81,20 +81,20 @@ export class ReactGroupControlsRendererPart { ); } - public update(event: PanelUpdateEvent) { + public update(event: PanelUpdateEvent): void { this._part?.update(event.params); } - public dispose() { + public dispose(): void { this.mutableDisposable.dispose(); this._part?.dispose(); } - private updatePanels() { + private updatePanels(): void { this.update({ params: { panels: this._group.model.panels } }); } - private updateActivePanel() { + private updateActivePanel(): void { this.update({ params: { activePanel: this._group.model.activePanel, @@ -102,7 +102,7 @@ export class ReactGroupControlsRendererPart { }); } - private updateGroupActive() { + private updateGroupActive(): void { this.update({ params: { isGroupActive: this._group.api.isActive, diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts index 3099dfa7b..1703046c0 100644 --- a/packages/dockview/src/dockview/reactContentPart.ts +++ b/packages/dockview/src/dockview/reactContentPart.ts @@ -4,7 +4,7 @@ import { IDockviewPanelProps } from '../dockview/dockview'; import { DockviewEmitter, DockviewEvent, - GroupPanel, + DockviewGroupPanel, PanelUpdateEvent, IContentRenderer, GroupPanelContentPartInitParameters, @@ -14,7 +14,7 @@ export class ReactPanelContentPart implements IContentRenderer { private _element: HTMLElement; private part?: ReactPart; // - private _group: GroupPanel | undefined; + private _group: DockviewGroupPanel | undefined; private readonly _onDidFocus = new DockviewEmitter(); readonly onDidFocus: DockviewEvent = this._onDidFocus.event; @@ -35,7 +35,7 @@ export class ReactPanelContentPart implements IContentRenderer { this._element.className = 'dockview-react-part'; } - focus() { + focus(): void { // TODO } @@ -57,7 +57,7 @@ export class ReactPanelContentPart implements IContentRenderer { } public updateParentGroup( - group: GroupPanel, + group: DockviewGroupPanel, _isPanelVisible: boolean ): void { this._group = group; @@ -67,7 +67,7 @@ export class ReactPanelContentPart implements IContentRenderer { // noop } - public dispose() { + public dispose(): void { this._onDidFocus.dispose(); this._onDidBlur.dispose(); this.part?.dispose(); diff --git a/packages/dockview/src/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts index 31ee3c16e..efb496793 100644 --- a/packages/dockview/src/dockview/reactHeaderPart.ts +++ b/packages/dockview/src/dockview/reactHeaderPart.ts @@ -3,7 +3,7 @@ import { ReactPart, ReactPortalStore } from '../react'; import { IGroupPanelBaseProps } from './dockview'; import { PanelUpdateEvent, - GroupPanel, + DockviewGroupPanel, ITabRenderer, GroupPanelPartInitParameters, } from 'dockview-core'; @@ -12,7 +12,7 @@ export class ReactPanelHeaderPart implements ITabRenderer { private _element: HTMLElement; private part?: ReactPart; - get element() { + get element(): HTMLElement { return this._element; } @@ -25,7 +25,7 @@ export class ReactPanelHeaderPart implements ITabRenderer { this._element.className = 'dockview-react-part'; } - focus() { + focus(): void { //noop } @@ -42,22 +42,22 @@ export class ReactPanelHeaderPart implements ITabRenderer { ); } - public update(event: PanelUpdateEvent) { + public update(event: PanelUpdateEvent): void { this.part?.update(event.params); } - public layout(_width: number, _height: number) { + public layout(_width: number, _height: number): void { // noop - retrieval from api } public updateParentGroup( - _group: GroupPanel, + _group: DockviewGroupPanel, _isPanelVisible: boolean ): void { // noop - retrieval from api } - public dispose() { + public dispose(): void { this.part?.dispose(); } } diff --git a/packages/dockview/src/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts index e0b7253ed..9f85a9b1f 100644 --- a/packages/dockview/src/dockview/reactWatermarkPart.ts +++ b/packages/dockview/src/dockview/reactWatermarkPart.ts @@ -3,7 +3,7 @@ import { ReactPart, ReactPortalStore } from '../react'; import { IGroupPanelBaseProps } from './dockview'; import { PanelUpdateEvent, - GroupPanel, + DockviewGroupPanel, GroupPanelPartInitParameters, IWatermarkRenderer, } from 'dockview-core'; @@ -15,12 +15,12 @@ export interface IWatermarkPanelProps extends IGroupPanelBaseProps { export class ReactWatermarkPart implements IWatermarkRenderer { private _element: HTMLElement; private part?: ReactPart; - private _groupRef: { value: GroupPanel | undefined } = { + private _groupRef: { value: DockviewGroupPanel | undefined } = { value: undefined, }; private parameters: GroupPanelPartInitParameters | undefined; - get element() { + get element(): HTMLElement { return this._element; } @@ -55,11 +55,11 @@ export class ReactWatermarkPart implements IWatermarkRenderer { ); } - focus() { + focus(): void { // noop } - update(params: PanelUpdateEvent) { + update(params: PanelUpdateEvent): void { if (this.parameters) { this.parameters.params = params.params; } @@ -67,22 +67,19 @@ export class ReactWatermarkPart implements IWatermarkRenderer { this.part?.update({ params: this.parameters?.params || {} }); } - toJSON() { - return { - id: this.id, - }; - } - - layout(_width: number, _height: number) { + layout(_width: number, _height: number): void { // noop - retrieval from api } - updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void { + updateParentGroup( + group: DockviewGroupPanel, + _isPanelVisible: boolean + ): void { // noop - retrieval from api this._groupRef.value = group; } - dispose() { + dispose(): void { this.part?.dispose(); } } diff --git a/packages/dockview/src/dockview/v2/reactContentRenderer.ts b/packages/dockview/src/dockview/v2/reactContentRenderer.ts index 2ffeef9ae..f2ccb4db8 100644 --- a/packages/dockview/src/dockview/v2/reactContentRenderer.ts +++ b/packages/dockview/src/dockview/v2/reactContentRenderer.ts @@ -1,9 +1,10 @@ import { GroupPanelPartInitParameters, IContentRenderer, - GroupPanel, + DockviewGroupPanel, HostedContainer, PanelUpdateEvent, + DockviewEvent, } from 'dockview-core'; import { ReactPart, ReactPortalStore } from '../../react'; import { IDockviewPanelProps } from '../dockview'; @@ -13,7 +14,7 @@ export class ReactContentRenderer implements IContentRenderer { private _element: HTMLElement; private part?: ReactPart; - private _group: GroupPanel | undefined; + private _group: DockviewGroupPanel | undefined; private parameters: GroupPanelPartInitParameters | undefined; @@ -21,11 +22,11 @@ export class ReactContentRenderer implements IContentRenderer { return this._element; } - get onDidBlur() { + get onDidBlur(): DockviewEvent { return this._hostedContainer.onDidBlur; } - get onDidFocus() { + get onDidFocus(): DockviewEvent { return this._hostedContainer.onDidFocus; } @@ -46,7 +47,7 @@ export class ReactContentRenderer implements IContentRenderer { this._element.style.width = '100%'; } - focus() { + focus(): void { // noop } @@ -74,13 +75,7 @@ export class ReactContentRenderer implements IContentRenderer { ); } - public toJSON() { - return { - id: this.id, - }; - } - - public update(params: PanelUpdateEvent) { + public update(params: PanelUpdateEvent): void { if (this.parameters) { this.parameters.params = params.params; } @@ -89,7 +84,7 @@ export class ReactContentRenderer implements IContentRenderer { } public updateParentGroup( - group: GroupPanel, + group: DockviewGroupPanel, _isPanelVisible: boolean ): void { this._group = group; @@ -99,7 +94,7 @@ export class ReactContentRenderer implements IContentRenderer { this._hostedContainer.layout(this.element); } - public dispose() { + public dispose(): void { this.part?.dispose(); } } diff --git a/packages/dockview/src/dockview/v2/webviewContentRenderer.ts b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts index d001205f8..a1bbda1a1 100644 --- a/packages/dockview/src/dockview/v2/webviewContentRenderer.ts +++ b/packages/dockview/src/dockview/v2/webviewContentRenderer.ts @@ -1,7 +1,7 @@ import { GroupPanelPartInitParameters, IContentRenderer, - GroupPanel, + DockviewGroupPanel, HostedContainer, PanelUpdateEvent, } from 'dockview-core'; @@ -24,7 +24,7 @@ export class WebviewContentRenderer implements IContentRenderer { this._element.style.width = '100%'; } - focus() { + focus(): void { // noop } @@ -32,14 +32,14 @@ export class WebviewContentRenderer implements IContentRenderer { this.parameters = parameters; } - public update(params: PanelUpdateEvent) { + public update(params: PanelUpdateEvent): void { if (this.parameters) { this.parameters.params = params.params; } } public updateParentGroup( - _group: GroupPanel, + _group: DockviewGroupPanel, _isPanelVisible: boolean ): void { // @@ -49,7 +49,7 @@ export class WebviewContentRenderer implements IContentRenderer { this._hostedContainer.layout(this._element); } - public dispose() { + public dispose(): void { // } } From 8918e254ed6db868ce7eabf7050bc76e9c6a6c20 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 7 Mar 2023 18:46:36 +0800 Subject: [PATCH 6/6] refactor: improve typings --- .../dockview/dockviewComponent.spec.ts | 9 ++- .../src/dockview/dockviewGroupPanel.ts | 3 +- .../src/paneview/defaultPaneviewHeader.ts | 10 ++-- .../src/paneview/draggablePaneviewPanel.ts | 4 +- .../dockview-core/src/paneview/paneview.ts | 26 ++++----- .../src/paneview/paneviewComponent.ts | 20 +++---- .../src/paneview/paneviewPanel.ts | 18 +++--- .../src/splitview/core/splitview.ts | 40 ++++++------- .../src/splitview/core/viewItem.ts | 56 +++++++++---------- 9 files changed, 91 insertions(+), 95 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 1ebb3f33c..6ee389a3b 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -1767,15 +1767,14 @@ describe('dockviewComponent', () => { panels: { panel1: { id: 'panel1', - view: { content: { id: 'default' } }, + contentComponent: 'default', + title: 'panel1', }, panel2: { id: 'panel2', - view: { - content: { id: 'default' }, - tab: { id: 'test_tab_id' }, - }, + contentComponent: 'default', + tabComponent: 'test_tab_id', title: 'panel2', }, }, diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index 1b9ae4abd..f5e7b943f 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts @@ -87,7 +87,7 @@ export class DockviewGroupPanel ); } - initialize() { + initialize(): void { this._model.initialize(); } @@ -106,6 +106,7 @@ export class DockviewGroupPanel } toJSON(): any { + // TODO fix typing return this.model.toJSON(); } } diff --git a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts index 278483c9a..3a8931967 100644 --- a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts +++ b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts @@ -18,7 +18,7 @@ export class DefaultHeader private readonly _expander: HTMLElement; private apiRef: { api: PaneviewPanelApiImpl | null } = { api: null }; - get element() { + get element(): HTMLElement { return this._element; } @@ -42,7 +42,7 @@ export class DefaultHeader ); } - init(params: PanePanelInitParameter & { api: PaneviewPanelApiImpl }) { + init(params: PanePanelInitParameter & { api: PaneviewPanelApiImpl }): void { this.apiRef.api = params.api; this._content.textContent = params.title; @@ -54,7 +54,7 @@ export class DefaultHeader }); } - private updateIcon() { + private updateIcon(): void { const isExpanded = !!this.apiRef.api?.isExpanded; toggleClass(this._expander, 'collapsed', !isExpanded); @@ -75,11 +75,11 @@ export class DefaultHeader } } - update(_params: PanelUpdateEvent) { + update(_params: PanelUpdateEvent): void { // } - dispose() { + dispose(): void { this.disposable.dispose(); super.dispose(); } diff --git a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts index ee31cd78c..bb141b686 100644 --- a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts +++ b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts @@ -45,7 +45,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel { } } - private initDragFeatures() { + private initDragFeatures(): void { if (!this.header) { return; } @@ -110,7 +110,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel { ); } - private onDrop(event: DroptargetEvent) { + private onDrop(event: DroptargetEvent): void { const data = getPaneData(); if (!data || data.viewId !== this.accessor.id) { diff --git a/packages/dockview-core/src/paneview/paneview.ts b/packages/dockview-core/src/paneview/paneview.ts index 6f9bf4631..aa085d446 100644 --- a/packages/dockview-core/src/paneview/paneview.ts +++ b/packages/dockview-core/src/paneview/paneview.ts @@ -25,30 +25,30 @@ export class Paneview extends CompositeDisposable implements IDisposable { private readonly _onDidChange = new Emitter(); readonly onDidChange: Event = this._onDidChange.event; - get onDidAddView() { + get onDidAddView(): Event { return >this.splitview.onDidAddView; } - get onDidRemoveView() { + get onDidRemoveView(): Event { return >this.splitview.onDidRemoveView; } - get minimumSize() { + get minimumSize(): number { return this.splitview.minimumSize; } - get maximumSize() { + get maximumSize(): number { return this.splitview.maximumSize; } - get orientation() { + get orientation(): Orientation { return this.splitview.orientation; } - get size() { + get size(): number { return this.splitview.size; } - get orthogonalSize() { + get orthogonalSize(): number { return this.splitview.orthogonalSize; } @@ -113,7 +113,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { size?: number | Sizing, index = this.splitview.length, skipLayout = false - ) { + ): void { const disposable = pane.onDidChangeExpansionState(() => { this.setupAnimation(); this._onDidChange.fire(undefined); @@ -134,7 +134,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { this.splitview.addView(pane, size, index, skipLayout); } - getViewSize(index: number) { + getViewSize(index: number): number { return this.splitview.getViewSize(index); } @@ -145,7 +145,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { public removePane( index: number, options: { skipDispose: boolean } = { skipDispose: false } - ) { + ): PaneItem { const paneItem = this.paneItems.splice(index, 1)[0]; this.splitview.removeView(index); @@ -157,7 +157,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { return paneItem; } - public moveView(from: number, to: number) { + public moveView(from: number, to: number): void { if (from === to) { return; } @@ -176,7 +176,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { this.splitview.layout(size, orthogonalSize); } - private setupAnimation() { + private setupAnimation(): void { if (this.skipAnimation) { return; } @@ -194,7 +194,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { }, 200); } - public dispose() { + public dispose(): void { super.dispose(); if (this.animationTimer) { diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index 7cf3b04a1..07e2576bd 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -175,25 +175,25 @@ export class PaneviewComponent ); } - get paneview() { + get paneview(): Paneview { return this._paneview; } - get minimumSize() { + get minimumSize(): number { return this.paneview.minimumSize; } - get maximumSize() { + get maximumSize(): number { return this.paneview.maximumSize; } - get height() { + get height(): number { return this.paneview.orientation === Orientation.HORIZONTAL ? this.paneview.orthogonalSize : this.paneview.size; } - get width() { + get width(): number { return this.paneview.orientation === Orientation.HORIZONTAL ? this.paneview.size : this.paneview.orthogonalSize; @@ -234,8 +234,8 @@ export class PaneviewComponent this.addDisposables(this._disposable); } - focus() { - // + focus(): void { + //noop } updateOptions(options: Partial): void { @@ -311,7 +311,7 @@ export class PaneviewComponent return view; } - removePanel(panel: PaneviewPanel) { + removePanel(panel: PaneviewPanel): void { const views = this.panels; const index = views.findIndex((_) => _ === panel); this.paneview.removePane(index); @@ -462,7 +462,7 @@ export class PaneviewComponent this.paneview.dispose(); } - private doAddPanel(panel: PaneFramework) { + private doAddPanel(panel: PaneFramework): void { const disposable = panel.onDidDrop((event) => { this._onDidDrop.fire(event); }); @@ -470,7 +470,7 @@ export class PaneviewComponent this._viewDisposables.set(panel.id, disposable); } - private doRemovePanel(panel: PaneviewPanel) { + private doRemovePanel(panel: PaneviewPanel): void { const disposable = this._viewDisposables.get(panel.id); if (disposable) { diff --git a/packages/dockview-core/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts index 310ea3da0..951db8ebd 100644 --- a/packages/dockview-core/src/paneview/paneviewPanel.ts +++ b/packages/dockview-core/src/paneview/paneviewPanel.ts @@ -96,7 +96,7 @@ export abstract class PaneviewPanel this._orientation = value; } - get orientation() { + get orientation(): Orientation { return this._orientation; } @@ -116,11 +116,11 @@ export abstract class PaneviewPanel return headerSize + maximumBodySize; } - get size() { + get size(): number { return this._size; } - get orthogonalSize() { + get orthogonalSize(): number { return this._orthogonalSize; } @@ -128,7 +128,7 @@ export abstract class PaneviewPanel this._orthogonalSize = size; } - get minimumBodySize() { + get minimumBodySize(): number { return this._minimumBodySize; } @@ -136,7 +136,7 @@ export abstract class PaneviewPanel this._minimumBodySize = typeof value === 'number' ? value : 0; } - get maximumBodySize() { + get maximumBodySize(): number { return this._maximumBodySize; } @@ -217,11 +217,11 @@ export abstract class PaneviewPanel this.renderOnce(); } - setVisible(isVisible: boolean) { + setVisible(isVisible: boolean): void { this.api._onDidVisibilityChange.fire({ isVisible }); } - setActive(isActive: boolean) { + setActive(isActive: boolean): void { this.api._onDidActiveChange.fire({ isActive }); } @@ -253,7 +253,7 @@ export abstract class PaneviewPanel this._onDidChangeExpansionState.fire(expanded); } - layout(size: number, orthogonalSize: number) { + layout(size: number, orthogonalSize: number): void { this._size = size; this._orthogonalSize = orthogonalSize; const [width, height] = @@ -299,7 +299,7 @@ export abstract class PaneviewPanel }; } - private renderOnce() { + private renderOnce(): void { this.header = document.createElement('div'); this.header.tabIndex = 0; diff --git a/packages/dockview-core/src/splitview/core/splitview.ts b/packages/dockview-core/src/splitview/core/splitview.ts index 6b9d3a013..e4f6f004b 100644 --- a/packages/dockview-core/src/splitview/core/splitview.ts +++ b/packages/dockview-core/src/splitview/core/splitview.ts @@ -105,6 +105,8 @@ export class Splitview { private contentSize = 0; private _proportions: number[] | undefined = undefined; private proportionalLayout: boolean; + private _startSnappingEnabled = true; + private _endSnappingEnabled = true; private readonly _onDidSashEnd = new Emitter(); readonly onDidSashEnd = this._onDidSashEnd.event; @@ -113,7 +115,7 @@ export class Splitview { private readonly _onDidRemoveView = new Emitter(); readonly onDidRemoveView = this._onDidRemoveView.event; - get size() { + get size(): number { return this._size; } @@ -121,7 +123,7 @@ export class Splitview { this._size = value; } - get orthogonalSize() { + get orthogonalSize(): number { return this._orthogonalSize; } @@ -129,15 +131,15 @@ export class Splitview { this._orthogonalSize = value; } - public get length() { + public get length(): number { return this.views.length; } - public get proportions() { + public get proportions(): number[] | undefined { return this._proportions ? [...this._proportions] : undefined; } - get orientation() { + get orientation(): Orientation { return this._orientation; } @@ -166,10 +168,10 @@ export class Splitview { : this.views.reduce((r, item) => r + item.maximumSize, 0); } - private _startSnappingEnabled = true; get startSnappingEnabled(): boolean { return this._startSnappingEnabled; } + set startSnappingEnabled(startSnappingEnabled: boolean) { if (this._startSnappingEnabled === startSnappingEnabled) { return; @@ -179,10 +181,10 @@ export class Splitview { this.updateSashEnablement(); } - private _endSnappingEnabled = true; get endSnappingEnabled(): boolean { return this._endSnappingEnabled; } + set endSnappingEnabled(endSnappingEnabled: boolean) { if (this._endSnappingEnabled === endSnappingEnabled) { return; @@ -321,7 +323,7 @@ export class Splitview { this.relayout(lowPriorityIndexes, highPriorityIndexes); } - public getViews() { + public getViews(): T[] { return this.views.map((x) => x.view as T); } @@ -345,7 +347,7 @@ export class Splitview { size: number | Sizing = { type: 'distribute' }, index: number = this.views.length, skipLayout?: boolean - ) { + ): void { const container = document.createElement('div'); container.className = 'view'; @@ -622,7 +624,7 @@ export class Splitview { return viewItem.cachedVisibleSize; } - public moveView(from: number, to: number) { + public moveView(from: number, to: number): void { const cachedVisibleSize = this.getViewCachedVisibleSize(from); const sizing = typeof cachedVisibleSize === 'undefined' @@ -632,7 +634,7 @@ export class Splitview { this.addView(view, sizing, to); } - public layout(size: number, orthogonalSize: number) { + public layout(size: number, orthogonalSize: number): void { const previousSize = Math.max(this.size, this.contentSize); this.size = size; this.orthogonalSize = orthogonalSize; @@ -672,7 +674,7 @@ export class Splitview { private relayout( lowPriorityIndexes?: number[], highPriorityIndexes?: number[] - ) { + ): void { const contentSize = this.views.reduce((r, i) => r + i.size, 0); this.resize( @@ -687,7 +689,7 @@ export class Splitview { this.saveProportions(); } - private distributeEmptySpace(lowPriorityIndex?: number) { + private distributeEmptySpace(lowPriorityIndex?: number): void { const contentSize = this.views.reduce((r, i) => r + i.size, 0); let emptyDelta = this.size - contentSize; @@ -733,7 +735,7 @@ export class Splitview { } } - private layoutViews() { + private layoutViews(): void { this.contentSize = this.views.reduce((r, i) => r + i.size, 0); let sum = 0; const x: number[] = []; @@ -875,7 +877,7 @@ export class Splitview { } } - private updateSash(sash: ISashItem, state: SashState) { + private updateSash(sash: ISashItem, state: SashState): void { toggleClass(sash.container, 'disabled', state === SashState.DISABLED); toggleClass(sash.container, 'enabled', state === SashState.ENABLED); toggleClass(sash.container, 'maximum', state === SashState.MAXIMUM); @@ -1011,19 +1013,19 @@ export class Splitview { return delta; }; - private createViewContainer() { + private createViewContainer(): HTMLElement { const element = document.createElement('div'); element.className = 'view-container'; return element; } - private createSashContainer() { + private createSashContainer(): HTMLElement { const element = document.createElement('div'); element.className = 'sash-container'; return element; } - private createContainer() { + private createContainer(): HTMLElement { const element = document.createElement('div'); const orientationClassname = this._orientation === Orientation.HORIZONTAL @@ -1033,7 +1035,7 @@ export class Splitview { return element; } - public dispose() { + public dispose(): void { this._onDidSashEnd.dispose(); this._onDidAddView.dispose(); this._onDidRemoveView.dispose(); diff --git a/packages/dockview-core/src/splitview/core/viewItem.ts b/packages/dockview-core/src/splitview/core/viewItem.ts index ceb6ffeef..b440da073 100644 --- a/packages/dockview-core/src/splitview/core/viewItem.ts +++ b/packages/dockview-core/src/splitview/core/viewItem.ts @@ -4,6 +4,8 @@ import { IView, LayoutPriority } from './splitview'; export class ViewItem { private _size: number; + private _cachedVisibleSize: number | undefined = undefined; + set size(size: number) { this._size = size; } @@ -12,7 +14,6 @@ export class ViewItem { return this._size; } - private _cachedVisibleSize: number | undefined = undefined; get cachedVisibleSize(): number | undefined { return this._cachedVisibleSize; } @@ -21,31 +22,6 @@ export class ViewItem { return typeof this._cachedVisibleSize === 'undefined'; } - setVisible(visible: boolean, size?: number): void { - if (visible === this.visible) { - return; - } - - if (visible) { - this.size = clamp( - this._cachedVisibleSize ?? 0, - this.viewMinimumSize, - this.viewMaximumSize - ); - this._cachedVisibleSize = undefined; - } else { - this._cachedVisibleSize = - typeof size === 'number' ? size : this.size; - this.size = 0; - } - - this.container.classList.toggle('visible', visible); - - if (this.view.setVisible) { - this.view.setVisible(visible); - } - } - get minimumSize(): number { return this.visible ? this.view.minimumSize : 0; } @@ -87,12 +63,30 @@ export class ViewItem { } } - // layout(offset: number, layoutContext: TLayoutContext | undefined): void { - // this.layoutContainer(offset); - // this.view.layout(this.size, offset, layoutContext); - // } + setVisible(visible: boolean, size?: number): void { + if (visible === this.visible) { + return; + } - // abstract layoutContainer(offset: number): void; + if (visible) { + this.size = clamp( + this._cachedVisibleSize ?? 0, + this.viewMinimumSize, + this.viewMaximumSize + ); + this._cachedVisibleSize = undefined; + } else { + this._cachedVisibleSize = + typeof size === 'number' ? size : this.size; + this.size = 0; + } + + this.container.classList.toggle('visible', visible); + + if (this.view.setVisible) { + this.view.setVisible(visible); + } + } dispose(): IView { this.disposable.dispose();