refactor: improve typings

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: {
+                    contentComponent: 'default',
-                        content: { id: 'default' },
+                    tabComponent: 'test_tab_id',
-                        tab: { id: 'test_tab_id' },
-                    },
                     title: 'panel2',
                 },
             },

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

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

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) {

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

@@ -25,30 +25,30 @@ export class Paneview extends CompositeDisposable implements IDisposable {
     private readonly _onDidChange = new Emitter<void>();
     readonly onDidChange: Event<void> = this._onDidChange.event;
 
-    get onDidAddView() {
+    get onDidAddView(): Event<PaneviewPanel> {
         return <Event<PaneviewPanel>>this.splitview.onDidAddView;
     }
-    get onDidRemoveView() {
+    get onDidRemoveView(): Event<PaneviewPanel> {
         return <Event<PaneviewPanel>>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) {

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<PaneviewComponentOptions>): 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) {

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;
 

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<void>();
     readonly onDidSashEnd = this._onDidSashEnd.event;
@@ -113,7 +115,7 @@ export class Splitview {
     private readonly _onDidRemoveView = new Emitter<IView>();
     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<T extends IView>() {
+    public getViews<T extends IView>(): 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();

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 {
+    setVisible(visible: boolean, size?: number): void {
-    //     this.layoutContainer(offset);
+        if (visible === this.visible) {
-    //     this.view.layout(this.size, offset, layoutContext);
+            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();