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] 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();