From b5de6c7e43b8e198504ce553545504ce9f3a620b Mon Sep 17 00:00:00 2001 From: mathuo Date: Mon, 29 Mar 2021 17:21:08 +0100 Subject: [PATCH] refactor: reduce code smells --- .../src/dockview/dockviewComponent.ts | 6 +- .../dockview/src/gridview/basePanelView.ts | 8 +- packages/dockview/src/gridview/branchNode.ts | 2 +- .../src/gridview/gridviewComponent.ts | 5 +- packages/dockview/src/gridview/leafNode.ts | 16 ++-- .../dockview/src/groupview/panel/content.ts | 2 - .../dockview/src/groupview/v2/component.ts | 2 - .../dockview/src/panel/componentFactory.ts | 3 +- .../src/react/dockview/reactContentPart.ts | 74 ------------------- .../dockview/src/react/paneview/paneview.tsx | 29 +++----- 10 files changed, 28 insertions(+), 119 deletions(-) diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 0da63fd6c..8a5e0ca67 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/packages/dockview/src/dockview/dockviewComponent.ts @@ -262,7 +262,7 @@ export class DockviewComponent }, options: (() => PanelOptions) | PanelOptions ): IDisposable { - const disposables = new CompositeDisposable( + return new CompositeDisposable( addDisposableListener(target.element, 'dragstart', (event) => { if (!event.dataTransfer) { throw new Error('unsupported'); @@ -305,8 +305,6 @@ export class DockviewComponent this.drag.dispose(); }) ); - - return disposables; } setActivePanel(panel: IGroupPanel): void { @@ -514,7 +512,7 @@ export class DockviewComponent public async closeAllGroups(): Promise { for (const entry of this.groups.entries()) { - const [key, group] = entry; + const [_, group] = entry; const didCloseAll = await group.value.group.closeAllPanels(); if (!didCloseAll) { diff --git a/packages/dockview/src/gridview/basePanelView.ts b/packages/dockview/src/gridview/basePanelView.ts index ee909c823..42abb1d8d 100644 --- a/packages/dockview/src/gridview/basePanelView.ts +++ b/packages/dockview/src/gridview/basePanelView.ts @@ -105,16 +105,12 @@ export abstract class BasePanelView toJSON(): BasePanelViewState { const state = this.api.getState(); - const params = this.params?.params - ? Object.keys(this.params.params).length > 0 - ? this.params.params - : undefined - : undefined; + const params = this.params?.params ?? {}; return { id: this.id, component: this.component, - params, + params: Object.keys(params).length > 0 ? params : undefined, state: Object.keys(state).length === 0 ? undefined : state, }; } diff --git a/packages/dockview/src/gridview/branchNode.ts b/packages/dockview/src/gridview/branchNode.ts index c8076c214..0af9315df 100644 --- a/packages/dockview/src/gridview/branchNode.ts +++ b/packages/dockview/src/gridview/branchNode.ts @@ -108,7 +108,7 @@ export class BranchNode extends CompositeDisposable implements IView { readonly orientation: Orientation, readonly proportionalLayout: boolean, readonly styles: ISplitviewStyles | undefined, - size = 0, + size: number, orthogonalSize: number, childDescriptors?: INodeDescriptor[] ) { diff --git a/packages/dockview/src/gridview/gridviewComponent.ts b/packages/dockview/src/gridview/gridviewComponent.ts index 825b06e1c..623eb632e 100644 --- a/packages/dockview/src/gridview/gridviewComponent.ts +++ b/packages/dockview/src/gridview/gridviewComponent.ts @@ -124,7 +124,7 @@ export class GridviewComponent * * @returns A JSON respresentation of the layout */ - public toJSON() { + public toJSON(): SerializedGridview { const data = this.gridview.serialize() as { height: number; width: number; @@ -132,11 +132,10 @@ export class GridviewComponent root: SerializedGridObject; }; - const serializedData: SerializedGridview = { + return { grid: data, activePanel: this.activeGroup?.id, }; - return serializedData; } setVisible(panel: GridviewPanel, visible: boolean): void { diff --git a/packages/dockview/src/gridview/leafNode.ts b/packages/dockview/src/gridview/leafNode.ts index 02cdd22c5..71d300bb2 100644 --- a/packages/dockview/src/gridview/leafNode.ts +++ b/packages/dockview/src/gridview/leafNode.ts @@ -95,15 +95,17 @@ export class LeafNode implements IView { this._orthogonalSize = orthogonalSize; this._size = size; - this._disposable = this.view.onDidChange((event) => - this._onDidChange.fire( - event - ? this.orientation === Orientation.VERTICAL + this._disposable = this.view.onDidChange((event) => { + if (event) { + this._onDidChange.fire( + this.orientation === Orientation.VERTICAL ? event.width : event.height - : undefined - ) - ); + ); + } else { + this._onDidChange.fire(undefined); + } + }); } public setVisible(visible: boolean) { diff --git a/packages/dockview/src/groupview/panel/content.ts b/packages/dockview/src/groupview/panel/content.ts index 4b7d00e3d..26c526066 100644 --- a/packages/dockview/src/groupview/panel/content.ts +++ b/packages/dockview/src/groupview/panel/content.ts @@ -5,8 +5,6 @@ import { } from '../../lifecycle'; import { Emitter, Event } from '../../events'; import { trackFocus } from '../../dom'; -import { HostedContainer } from '../../hostedContainer'; -import { IDockviewPanelApi } from '../../api/groupPanelApi'; import { IGroupPanel } from '../groupPanel'; export interface IRenderable { diff --git a/packages/dockview/src/groupview/v2/component.ts b/packages/dockview/src/groupview/v2/component.ts index fc9a2b7c4..662174b6b 100644 --- a/packages/dockview/src/groupview/v2/component.ts +++ b/packages/dockview/src/groupview/v2/component.ts @@ -538,8 +538,6 @@ export class GroupComponent extends CompositeDisposable implements IGroupview { } private _removePanel(panel: IGroupPanel) { - const index = this._panels.indexOf(panel); - const isActivePanel = this._activePanel === panel; this.doRemovePanel(panel); diff --git a/packages/dockview/src/panel/componentFactory.ts b/packages/dockview/src/panel/componentFactory.ts index 6b401baa3..58ae86356 100644 --- a/packages/dockview/src/panel/componentFactory.ts +++ b/packages/dockview/src/panel/componentFactory.ts @@ -32,12 +32,11 @@ export function createComponent( `Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components` ); } - const wrappedComponent = createFrameworkComponent.createComponent( + return createFrameworkComponent.createComponent( id, componentName!, FrameworkComponent ); - return wrappedComponent; } if (!Component) { diff --git a/packages/dockview/src/react/dockview/reactContentPart.ts b/packages/dockview/src/react/dockview/reactContentPart.ts index 65afd6139..01c33541c 100644 --- a/packages/dockview/src/react/dockview/reactContentPart.ts +++ b/packages/dockview/src/react/dockview/reactContentPart.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { IContentRenderer, - GroupPanelPartInitParameters, GroupPanelContentPartInitParameters, } from '../../groupview/types'; import { ReactPart, ReactPortalStore } from '../react'; @@ -9,7 +8,6 @@ import { IDockviewPanelProps } from '../dockview/dockview'; import { PanelUpdateEvent } from '../../panel/types'; import { IDockviewPanelApi } from '../../api/groupPanelApi'; import { DockviewApi } from '../../api/component.api'; -import { HostedContainer } from '../../hostedContainer'; import { GroupviewPanel } from '../../groupview/v2/groupviewPanel'; import { Emitter, Event } from '../../events'; import { WrappedTab } from '../../dockview/components/tab/defaultTab'; @@ -19,78 +17,6 @@ export interface IGroupPanelActionbarProps { containerApi: DockviewApi; } -class BasePanelContentPart implements IContentRenderer { - protected _element: HTMLElement; - protected _group: GroupviewPanel | undefined; - // - protected _actionsElement: HTMLElement; - - protected parameters: GroupPanelPartInitParameters | undefined; - - private readonly _onDidFocus = new Emitter(); - readonly onDidFocus: Event = this._onDidFocus.event; - - private readonly _onDidBlur = new Emitter(); - readonly onDidBlur: Event = this._onDidBlur.event; - - get element(): HTMLElement { - return this._element; - } - - get actions(): HTMLElement { - return this._actionsElement; - } - - constructor(public readonly id: string) { - this._element = document.createElement('div'); - this._element.style.height = '100%'; - this._element.style.width = '100%'; - - this._actionsElement = document.createElement('div'); - this._actionsElement.style.height = '100%'; - this._actionsElement.style.width = '100%'; - } - - focus() { - // this._element.focus(); - } - - public init(parameters: GroupPanelPartInitParameters): void { - this.parameters = parameters; - } - - public toJSON() { - return { - id: this.id, - }; - } - - public update(params: PanelUpdateEvent) { - if (this.parameters) { - this.parameters.params = params.params; - } - } - - public updateParentGroup( - group: GroupviewPanel, - isPanelVisible: boolean - ): void { - this._group = group; - } - - public layout(width: number, height: number): void { - // noop - } - - public close(): Promise { - return Promise.resolve(true); - } - - public dispose() { - // - } -} - export interface ReactContentPartContext { api: IDockviewPanelApi; containerApi: DockviewApi; diff --git a/packages/dockview/src/react/paneview/paneview.tsx b/packages/dockview/src/react/paneview/paneview.tsx index 7eeeed06f..cdafd8cb2 100644 --- a/packages/dockview/src/react/paneview/paneview.tsx +++ b/packages/dockview/src/react/paneview/paneview.tsx @@ -55,6 +55,15 @@ export const PaneviewReact = React.forwardRef( }, [props.disableAutoResizing]); React.useEffect(() => { + const createComponent = ( + id: string, + componentId: string, + component: any + ) => + new PanePanelSection(id, component, { + addPortal, + }); + const paneview = new PaneviewComponent(domRef.current!, { frameworkComponents: props.components, components: {}, @@ -62,26 +71,10 @@ export const PaneviewReact = React.forwardRef( headerframeworkComponents: props.headerComponents, frameworkWrapper: { header: { - createComponent: ( - id: string, - componentId, - component: any - ) => { - return new PanePanelSection(id, component, { - addPortal, - }); - }, + createComponent, }, body: { - createComponent: ( - id: string, - componentId, - component: any - ) => { - return new PanePanelSection(id, component, { - addPortal, - }); - }, + createComponent, }, }, });