diff --git a/packages/dockview/src/gridview/gridview.ts b/packages/dockview/src/gridview/gridview.ts index 005fca5d0..664bd7fd6 100644 --- a/packages/dockview/src/gridview/gridview.ts +++ b/packages/dockview/src/gridview/gridview.ts @@ -436,13 +436,15 @@ export class Gridview implements IDisposable { throw new Error('invalid location'); } - const findLeaf = (node: Node, last: boolean): LeafNode => { - if (node instanceof LeafNode) { - return node; + const findLeaf = (candiateNode: Node, last: boolean): LeafNode => { + if (candiateNode instanceof LeafNode) { + return candiateNode; } - if (node instanceof BranchNode) { + if (candiateNode instanceof BranchNode) { return findLeaf( - node.children[last ? node.children.length - 1 : 0], + candiateNode.children[ + last ? candiateNode.children.length - 1 : 0 + ], last ); } @@ -660,10 +662,10 @@ export class Gridview implements IDisposable { orthogonal(sibling.orientation), sibling.size ); - const sizing = isSiblingVisible + const siblingSizing = isSiblingVisible ? sibling.orthogonalSize : Sizing.Invisible(sibling.orthogonalSize); - grandParent.addChild(newSibling, sizing, parentIndex); + grandParent.addChild(newSibling, siblingSizing, parentIndex); } for (let i = 0; i < sizes.length; i++) { diff --git a/packages/dockview/src/gridview/gridviewComponent.ts b/packages/dockview/src/gridview/gridviewComponent.ts index 623eb632e..feb101070 100644 --- a/packages/dockview/src/gridview/gridviewComponent.ts +++ b/packages/dockview/src/gridview/gridviewComponent.ts @@ -65,7 +65,10 @@ export interface IGridviewComponent extends IBaseGrid { removePanel(panel: IGridviewPanel, sizing?: Sizing): void; toggleVisibility(panel: IGridviewPanel): void; focus(): void; - fromJSON(data: SerializedGridview, deferComponentLayout?: boolean): void; + fromJSON( + serializedGridview: SerializedGridview, + deferComponentLayout?: boolean + ): void; toJSON(): SerializedGridview; movePanel( panel: IGridviewPanel, @@ -156,8 +159,11 @@ export class GridviewComponent this.activeGroup?.focus(); } - public fromJSON(data: SerializedGridview, deferComponentLayout?: boolean) { - const { grid, activePanel } = data; + public fromJSON( + serializedGridview: SerializedGridview, + deferComponentLayout?: boolean + ) { + const { grid, activePanel } = serializedGridview; this.gridview.clear(); this.groups.clear(); diff --git a/packages/dockview/src/groupview/groupPanel.ts b/packages/dockview/src/groupview/groupPanel.ts index 8f2e61ef3..37370028e 100644 --- a/packages/dockview/src/groupview/groupPanel.ts +++ b/packages/dockview/src/groupview/groupPanel.ts @@ -15,14 +15,10 @@ import { IGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView'; export interface IGroupPanelInitParameters extends PanelInitParameters, HeaderPartInitParameters { - // headerPart: ITabRenderer; - // contentPart: IContentRenderer; view: IGroupPanelView; } export interface IGroupPanel extends IDisposable, IPanel { - // readonly header?: ITabRenderer; - // readonly content?: IContentRenderer; readonly view?: IGroupPanelView; readonly group?: GroupviewPanel; readonly api: IDockviewPanelApi; @@ -52,22 +48,12 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { readonly onDidStateChange: Event; - // private headerPart?: ITabRenderer; - // private contentPart?: IContentRenderer; private _view?: IGroupPanelView; get group(): GroupviewPanel | undefined { return this._group; } - // get header() { - // return this.headerPart; - // } - - // get content() { - // return this.contentPart; - // } - get view() { return this._view; } @@ -115,11 +101,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { return { id: this.id, view: this.view!.toJSON(), - // contentId: this.contentPart?.id as string, - // tabId: - // this.headerPart instanceof DefaultTab - // ? undefined - // : this.headerPart?.id, params: params && Object.keys(params).length > 0 ? params : undefined, title: this.params?.title as string, @@ -134,15 +115,10 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { } this.view?.update(params); - - // this.contentPart?.update(params); - // this.headerPart?.update(params); } public init(params: IGroupPanelInitParameters): void { this.params = params; - // this.contentPart = params.contentPart; - // this.headerPart = params.headerPart; this._view = params.view; if (params.state) { @@ -154,17 +130,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { api: this.api, containerApi: this.containerApi, }); - - // this.content?.init({ - // ...params, - // api: this.api, - // containerApi: this.containerApi, - // }); - // this.header?.init({ - // ...params, - // api: this.api, - // containerApi: this.containerApi, - // }); } public updateParentGroup(group: GroupviewPanel, isGroupActive: boolean) { @@ -174,28 +139,17 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { this.mutableDisposable.value = this._group.group.onDidGroupChange( (ev) => { if (ev.kind === GroupChangeKind.GROUP_ACTIVE) { - const isPanelVisible = !!this._group?.group.isPanelActive( - this - ); + const isVisible = !!this._group?.group.isPanelActive(this); this.api._onDidActiveChange.fire({ - isActive: isGroupActive && isPanelVisible, + isActive: isGroupActive && isVisible, }); this.api._onDidVisibilityChange.fire({ - isVisible: isPanelVisible, + isVisible, }); } } ); - // this.api._onDidChangeFocus.fire({ isFocused: isGroupActive }); - // this.api._onDidGroupPanelVisibleChange.fire({ - // isVisible: this._group.isPanelActive(this), - // }); - - // this.api._onDidGroupPanelVisibleChange.fire({ - // isVisible: this._group.isPanelActive(this), - // }); - const isPanelVisible = this._group.group.isPanelActive(this); this.api._onDidActiveChange.fire({ @@ -209,15 +163,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { this._group, this._group.group.isPanelActive(this) ); - - // this.headerPart?.updateParentGroup( - // this._group, - // this._group.group.isPanelActive(this) - // ); - // this.contentPart?.updateParentGroup( - // this._group, - // this._group.group.isPanelActive(this) - // ); } public layout(width: number, height: number) { @@ -227,7 +172,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { height: height - (this.group?.group.tabHeight || 0), }); - // this.contentPart?.layout(width, height); this.view?.layout(width, height); } @@ -236,8 +180,5 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel { this.mutableDisposable.dispose(); this.view?.dispose(); - - // this.headerPart?.dispose(); - // this.contentPart?.dispose(); } } diff --git a/packages/dockview/src/groupview/titlebar/tabsContainer.ts b/packages/dockview/src/groupview/titlebar/tabsContainer.ts index a280f2106..d53d76675 100644 --- a/packages/dockview/src/groupview/titlebar/tabsContainer.ts +++ b/packages/dockview/src/groupview/titlebar/tabsContainer.ts @@ -248,9 +248,9 @@ export class TabsContainer public delete(id: string) { const index = this.tabs.findIndex((tab) => tab.value.id === id); - const tab = this.tabs.splice(index, 1)[0]; + const tabToRemove = this.tabs.splice(index, 1)[0]; - const { value, disposable } = tab; + const { value, disposable } = tabToRemove; disposable.dispose(); value.element.remove(); @@ -267,14 +267,14 @@ export class TabsContainer if (this.tabs.find((tab) => tab.value.id === panel.id)) { return; } - const tab = new Tab(panel.id, this.accessor, this.group); + const tabToAdd = new Tab(panel.id, this.accessor, this.group); if (!panel.view?.tab) { throw new Error('invalid header component'); } - tab.setContent(panel.view.tab); + tabToAdd.setContent(panel.view.tab); const disposable = CompositeDisposable.from( - tab.onChanged((event) => { + tabToAdd.onChanged((event) => { const alreadyFocused = panel.id === this.group.group.activePanel?.id && this.group.group.isAncestor(focusedElement.element!); @@ -294,15 +294,15 @@ export class TabsContainer break; } }), - tab.onDropped((event) => { + tabToAdd.onDropped((event) => { this._onDropped.fire({ event, - index: this.tabs.findIndex((x) => x.value === tab), + index: this.tabs.findIndex((x) => x.value === tabToAdd), }); }) ); - const value: IValueDisposable = { value: tab, disposable }; + const value: IValueDisposable = { value: tabToAdd, disposable }; this.addTab(value, index); this.activePanel = panel; diff --git a/packages/dockview/src/groupview/v2/component.ts b/packages/dockview/src/groupview/v2/component.ts index 662174b6b..38337ee14 100644 --- a/packages/dockview/src/groupview/v2/component.ts +++ b/packages/dockview/src/groupview/v2/component.ts @@ -402,13 +402,13 @@ export class GroupComponent extends CompositeDisposable implements IGroupview { ? groupItemOrId : groupItemOrId.id; - const panel = this._panels.find((panel) => panel.id === id); + const panelToRemove = this._panels.find((panel) => panel.id === id); - if (!panel) { + if (!panelToRemove) { throw new Error('invalid operation'); } - return this._removePanel(panel); + return this._removePanel(panelToRemove); } public async closeAllPanels() { diff --git a/packages/dockview/src/paneview/paneviewComponent.ts b/packages/dockview/src/paneview/paneviewComponent.ts index 99de0a695..c30a4211b 100644 --- a/packages/dockview/src/paneview/paneviewComponent.ts +++ b/packages/dockview/src/paneview/paneviewComponent.ts @@ -126,7 +126,10 @@ export interface IPaneviewComponent extends IDisposable { layout(width: number, height: number): void; onDidLayoutChange: Event; toJSON(): SerializedPaneview; - fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void; + fromJSON( + serializedPaneview: SerializedPaneview, + deferComponentLayout?: boolean + ): void; resizeToFit(): void; focus(): void; getPanels(): IPaneviewPanel[]; @@ -338,8 +341,11 @@ export class PaneviewComponent }; } - fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void { - const { views, size } = data; + fromJSON( + serializedPaneview: SerializedPaneview, + deferComponentLayout?: boolean + ): void { + const { views, size } = serializedPaneview; const queue: Function[] = []; diff --git a/packages/dockview/src/react/react.ts b/packages/dockview/src/react/react.ts index 98d074e5d..800146f19 100644 --- a/packages/dockview/src/react/react.ts +++ b/packages/dockview/src/react/react.ts @@ -35,8 +35,8 @@ const ReactComponentBridge: React.ForwardRefRenderFunction< React.useImperativeHandle( ref, () => ({ - update: (props: object) => { - _props.current = { ..._props.current, ...props }; + update: (componentProps: object) => { + _props.current = { ..._props.current, ...componentProps }; /** * setting a arbitrary piece of state within this component will * trigger a re-render. @@ -164,7 +164,7 @@ export const usePortalsLifecycle: PortalLifecycleHook = () => { React.useDebugValue(`Portal count: ${portals.length}`); const addPortal = React.useCallback((portal: React.ReactPortal) => { - setPortals((portals) => [...portals, portal]); + setPortals((existingPortals) => [...existingPortals, portal]); let disposed = false; return { dispose: () => { @@ -174,7 +174,9 @@ export const usePortalsLifecycle: PortalLifecycleHook = () => { ); } disposed = true; - setPortals((portals) => portals.filter((p) => p !== portal)); + setPortals((existingPortals) => + existingPortals.filter((p) => p !== portal) + ); }, }; }, []); @@ -186,5 +188,5 @@ export const usePortalsLifecycle: PortalLifecycleHook = () => { export function isReactElement( element: any | React.ReactElement ): element is React.ReactElement { - return !!(element as any)?.type; + return (element as any)?.type; } diff --git a/packages/dockview/src/splitview/core/splitview.ts b/packages/dockview/src/splitview/core/splitview.ts index 8bf6f0730..7791cb2ca 100644 --- a/packages/dockview/src/splitview/core/splitview.ts +++ b/packages/dockview/src/splitview/core/splitview.ts @@ -313,7 +313,7 @@ export class Splitview { item.size = size; - this.relayout([index], undefined); + this.relayout([index]); } public addView( @@ -339,8 +339,8 @@ export class Splitview { viewSize = view.minimumSize; } - const disposable = view.onDidChange((size) => - this.onDidChange(viewItem, size) + const disposable = view.onDidChange((newSize) => + this.onDidChange(viewItem, newSize) ); const dispose = () => { @@ -385,7 +385,7 @@ export class Splitview { ? event.clientX : event.clientY; - const index = firstIndex( + const sashIndex = firstIndex( this.sashes, (s) => s.container === sash ); @@ -396,8 +396,8 @@ export class Splitview { // let snapBefore: ISashDragSnapState | undefined; let snapAfter: ISashDragSnapState | undefined; - const upIndexes = range(index, -1); - const downIndexes = range(index + 1, this.views.length); + const upIndexes = range(sashIndex, -1); + const downIndexes = range(sashIndex + 1, this.views.length); const minDeltaUp = upIndexes.reduce( (r, i) => r + (this.views[i].minimumSize - sizes[i]), 0 @@ -428,41 +428,45 @@ export class Splitview { const snapBeforeIndex = this.findFirstSnapIndex(upIndexes); const snapAfterIndex = this.findFirstSnapIndex(downIndexes); if (typeof snapBeforeIndex === 'number') { - const viewItem = this.views[snapBeforeIndex]; - const halfSize = Math.floor(viewItem.viewMinimumSize / 2); + const snappedViewItem = this.views[snapBeforeIndex]; + const halfSize = Math.floor( + snappedViewItem.viewMinimumSize / 2 + ); snapBefore = { index: snapBeforeIndex, - limitDelta: viewItem.visible + limitDelta: snappedViewItem.visible ? minDelta - halfSize : minDelta + halfSize, - size: viewItem.size, + size: snappedViewItem.size, }; } if (typeof snapAfterIndex === 'number') { - const viewItem = this.views[snapAfterIndex]; - const halfSize = Math.floor(viewItem.viewMinimumSize / 2); + const snappedViewItem = this.views[snapAfterIndex]; + const halfSize = Math.floor( + snappedViewItem.viewMinimumSize / 2 + ); snapAfter = { index: snapAfterIndex, - limitDelta: viewItem.visible + limitDelta: snappedViewItem.visible ? maxDelta + halfSize : maxDelta - halfSize, - size: viewItem.size, + size: snappedViewItem.size, }; } // - const mousemove = (event: MouseEvent) => { + const mousemove = (mousemoveEvent: MouseEvent) => { const current = this._orientation === Orientation.HORIZONTAL - ? event.clientX - : event.clientY; + ? mousemoveEvent.clientX + : mousemoveEvent.clientY; const delta = current - start; this.resize( - index, + sashIndex, delta, sizes, undefined, @@ -501,13 +505,14 @@ export class Splitview { sash.addEventListener('mousedown', onStart); - const disposable = () => { - sash.removeEventListener('mousedown', onStart); - this.sashContainer.removeChild(sash); + const sashItem: ISashItem = { + container: sash, + disposable: () => { + sash.removeEventListener('mousedown', onStart); + this.sashContainer.removeChild(sash); + }, }; - const sashItem: ISashItem = { container: sash, disposable }; - this.sashContainer.appendChild(sash); this.sashes.push(sashItem); } @@ -875,16 +880,16 @@ export class Splitview { const downIndexes = range(index + 1, this.views.length); // if (highPriorityIndexes) { - for (const index of highPriorityIndexes) { - pushToStart(upIndexes, index); - pushToStart(downIndexes, index); + for (const i of highPriorityIndexes) { + pushToStart(upIndexes, i); + pushToStart(downIndexes, i); } } if (lowPriorityIndexes) { - for (const index of lowPriorityIndexes) { - pushToEnd(upIndexes, index); - pushToEnd(downIndexes, index); + for (const i of lowPriorityIndexes) { + pushToEnd(upIndexes, i); + pushToEnd(downIndexes, i); } } // diff --git a/packages/dockview/src/splitview/splitviewComponent.ts b/packages/dockview/src/splitview/splitviewComponent.ts index 4515cfa56..586c64e73 100644 --- a/packages/dockview/src/splitview/splitviewComponent.ts +++ b/packages/dockview/src/splitview/splitviewComponent.ts @@ -56,7 +56,10 @@ export interface ISplitviewComponent extends IDisposable { layout(width: number, height: number): void; onDidLayoutChange: Event; toJSON(): SerializedSplitview; - fromJSON(data: SerializedSplitview, deferComponentLayout?: boolean): void; + fromJSON( + serializedSplitview: SerializedSplitview, + deferComponentLayout?: boolean + ): void; resizeToFit(): void; focus(): void; getPanel(id: string): ISplitviewPanel | undefined; @@ -286,8 +289,11 @@ export class SplitviewComponent }; } - fromJSON(data: SerializedSplitview, deferComponentLayout = false): void { - const { views, orientation, size, activeView } = data; + fromJSON( + serializedSplitview: SerializedSplitview, + deferComponentLayout = false + ): void { + const { views, orientation, size, activeView } = serializedSplitview; this.splitview.dispose();