rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-26 12:06:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reduce code smells

Browse Source
This commit is contained in:
mathuo 2021-03-29 17:53:48 +01:00
parent f368b3ea8e
commit cea4dcffc0
9 changed files with 91 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/dockview/src/gridview/gridview.ts
View File

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

12
packages/dockview/src/gridview/gridviewComponent.ts
View File

@ -65,7 +65,10 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
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();

65
packages/dockview/src/groupview/groupPanel.ts
View File

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

16
packages/dockview/src/groupview/titlebar/tabsContainer.ts
View File

@ -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<ITab> = { value: tab, disposable };
const value: IValueDisposable<ITab> = { value: tabToAdd, disposable };
this.addTab(value, index);
this.activePanel = panel;

6
packages/dockview/src/groupview/v2/component.ts
View File

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

12
packages/dockview/src/paneview/paneviewComponent.ts
View File

@ -126,7 +126,10 @@ export interface IPaneviewComponent extends IDisposable {
layout(width: number, height: number): void;
onDidLayoutChange: Event<void>;
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[] = [];

12
packages/dockview/src/react/react.ts
View File

@ -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;
}

63
packages/dockview/src/splitview/core/splitview.ts
View File

@ -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);
}
}
//

12
packages/dockview/src/splitview/splitviewComponent.ts
View File

@ -56,7 +56,10 @@ export interface ISplitviewComponent extends IDisposable {
layout(width: number, height: number): void;
onDidLayoutChange: Event<void>;
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();