rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-23 01:28:28 +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'); throw new Error('invalid location');
} }
const findLeaf = (node: Node, last: boolean): LeafNode => { const findLeaf = (candiateNode: Node, last: boolean): LeafNode => {
if (node instanceof LeafNode) { if (candiateNode instanceof LeafNode) {
return node; return candiateNode;
} }
if (node instanceof BranchNode) { if (candiateNode instanceof BranchNode) {
return findLeaf( return findLeaf(
node.children[last ? node.children.length - 1 : 0], candiateNode.children[
last ? candiateNode.children.length - 1 : 0
],
last last
); );
} }
@ -660,10 +662,10 @@ export class Gridview implements IDisposable {
orthogonal(sibling.orientation), orthogonal(sibling.orientation),
sibling.size sibling.size
); );
const sizing = isSiblingVisible const siblingSizing = isSiblingVisible
? sibling.orthogonalSize ? sibling.orthogonalSize
: Sizing.Invisible(sibling.orthogonalSize); : Sizing.Invisible(sibling.orthogonalSize);
grandParent.addChild(newSibling, sizing, parentIndex); grandParent.addChild(newSibling, siblingSizing, parentIndex);
} }
for (let i = 0; i < sizes.length; i++) { 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; removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
toggleVisibility(panel: IGridviewPanel): void; toggleVisibility(panel: IGridviewPanel): void;
focus(): void; focus(): void;
fromJSON(data: SerializedGridview, deferComponentLayout?: boolean): void; fromJSON(
serializedGridview: SerializedGridview,
deferComponentLayout?: boolean
): void;
toJSON(): SerializedGridview; toJSON(): SerializedGridview;
movePanel( movePanel(
panel: IGridviewPanel, panel: IGridviewPanel,
@ -156,8 +159,11 @@ export class GridviewComponent
this.activeGroup?.focus(); this.activeGroup?.focus();
} }
public fromJSON(data: SerializedGridview, deferComponentLayout?: boolean) { public fromJSON(
const { grid, activePanel } = data; serializedGridview: SerializedGridview,
deferComponentLayout?: boolean
) {
const { grid, activePanel } = serializedGridview;
this.gridview.clear(); this.gridview.clear();
this.groups.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 export interface IGroupPanelInitParameters
extends PanelInitParameters, extends PanelInitParameters,
HeaderPartInitParameters { HeaderPartInitParameters {
// headerPart: ITabRenderer;
// contentPart: IContentRenderer;
view: IGroupPanelView; view: IGroupPanelView;
} }
export interface IGroupPanel extends IDisposable, IPanel { export interface IGroupPanel extends IDisposable, IPanel {
// readonly header?: ITabRenderer;
// readonly content?: IContentRenderer;
readonly view?: IGroupPanelView; readonly view?: IGroupPanelView;
readonly group?: GroupviewPanel; readonly group?: GroupviewPanel;
readonly api: IDockviewPanelApi; readonly api: IDockviewPanelApi;
@ -52,22 +48,12 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
readonly onDidStateChange: Event<void>; readonly onDidStateChange: Event<void>;
// private headerPart?: ITabRenderer;
// private contentPart?: IContentRenderer;
private _view?: IGroupPanelView; private _view?: IGroupPanelView;
get group(): GroupviewPanel | undefined { get group(): GroupviewPanel | undefined {
return this._group; return this._group;
} }
// get header() {
// return this.headerPart;
// }
// get content() {
// return this.contentPart;
// }
get view() { get view() {
return this._view; return this._view;
} }
@ -115,11 +101,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
return { return {
id: this.id, id: this.id,
view: this.view!.toJSON(), view: this.view!.toJSON(),
// contentId: this.contentPart?.id as string,
// tabId:
// this.headerPart instanceof DefaultTab
// ? undefined
// : this.headerPart?.id,
params: params:
params && Object.keys(params).length > 0 ? params : undefined, params && Object.keys(params).length > 0 ? params : undefined,
title: this.params?.title as string, title: this.params?.title as string,
@ -134,15 +115,10 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
} }
this.view?.update(params); this.view?.update(params);
// this.contentPart?.update(params);
// this.headerPart?.update(params);
} }
public init(params: IGroupPanelInitParameters): void { public init(params: IGroupPanelInitParameters): void {
this.params = params; this.params = params;
// this.contentPart = params.contentPart;
// this.headerPart = params.headerPart;
this._view = params.view; this._view = params.view;
if (params.state) { if (params.state) {
@ -154,17 +130,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
api: this.api, api: this.api,
containerApi: this.containerApi, 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) { public updateParentGroup(group: GroupviewPanel, isGroupActive: boolean) {
@ -174,28 +139,17 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
this.mutableDisposable.value = this._group.group.onDidGroupChange( this.mutableDisposable.value = this._group.group.onDidGroupChange(
(ev) => { (ev) => {
if (ev.kind === GroupChangeKind.GROUP_ACTIVE) { if (ev.kind === GroupChangeKind.GROUP_ACTIVE) {
const isPanelVisible = !!this._group?.group.isPanelActive( const isVisible = !!this._group?.group.isPanelActive(this);
this
);
this.api._onDidActiveChange.fire({ this.api._onDidActiveChange.fire({
isActive: isGroupActive && isPanelVisible, isActive: isGroupActive && isVisible,
}); });
this.api._onDidVisibilityChange.fire({ 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); const isPanelVisible = this._group.group.isPanelActive(this);
this.api._onDidActiveChange.fire({ this.api._onDidActiveChange.fire({
@ -209,15 +163,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
this._group, this._group,
this._group.group.isPanelActive(this) 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) { public layout(width: number, height: number) {
@ -227,7 +172,6 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
height: height - (this.group?.group.tabHeight || 0), height: height - (this.group?.group.tabHeight || 0),
}); });
// this.contentPart?.layout(width, height);
this.view?.layout(width, height); this.view?.layout(width, height);
} }
@ -236,8 +180,5 @@ export class GroupPanel extends CompositeDisposable implements IGroupPanel {
this.mutableDisposable.dispose(); this.mutableDisposable.dispose();
this.view?.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) { public delete(id: string) {
const index = this.tabs.findIndex((tab) => tab.value.id === id); 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(); disposable.dispose();
value.element.remove(); value.element.remove();
@ -267,14 +267,14 @@ export class TabsContainer
if (this.tabs.find((tab) => tab.value.id === panel.id)) { if (this.tabs.find((tab) => tab.value.id === panel.id)) {
return; 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) { if (!panel.view?.tab) {
throw new Error('invalid header component'); throw new Error('invalid header component');
} }
tab.setContent(panel.view.tab); tabToAdd.setContent(panel.view.tab);
const disposable = CompositeDisposable.from( const disposable = CompositeDisposable.from(
tab.onChanged((event) => { tabToAdd.onChanged((event) => {
const alreadyFocused = const alreadyFocused =
panel.id === this.group.group.activePanel?.id && panel.id === this.group.group.activePanel?.id &&
this.group.group.isAncestor(focusedElement.element!); this.group.group.isAncestor(focusedElement.element!);
@ -294,15 +294,15 @@ export class TabsContainer
break; break;
} }
}), }),
tab.onDropped((event) => { tabToAdd.onDropped((event) => {
this._onDropped.fire({ this._onDropped.fire({
event, 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.addTab(value, index);
this.activePanel = panel; 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
: groupItemOrId.id; : 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'); throw new Error('invalid operation');
} }
return this._removePanel(panel); return this._removePanel(panelToRemove);
} }
public async closeAllPanels() { 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; layout(width: number, height: number): void;
onDidLayoutChange: Event<void>; onDidLayoutChange: Event<void>;
toJSON(): SerializedPaneview; toJSON(): SerializedPaneview;
fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void; fromJSON(
serializedPaneview: SerializedPaneview,
deferComponentLayout?: boolean
): void;
resizeToFit(): void; resizeToFit(): void;
focus(): void; focus(): void;
getPanels(): IPaneviewPanel[]; getPanels(): IPaneviewPanel[];
@ -338,8 +341,11 @@ export class PaneviewComponent
}; };
} }
fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void { fromJSON(
const { views, size } = data; serializedPaneview: SerializedPaneview,
deferComponentLayout?: boolean
): void {
const { views, size } = serializedPaneview;
const queue: Function[] = []; const queue: Function[] = [];

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

@ -35,8 +35,8 @@ const ReactComponentBridge: React.ForwardRefRenderFunction<
React.useImperativeHandle( React.useImperativeHandle(
ref, ref,
() => ({ () => ({
update: (props: object) => { update: (componentProps: object) => {
_props.current = { ..._props.current, ...props }; _props.current = { ..._props.current, ...componentProps };
/** /**
* setting a arbitrary piece of state within this component will * setting a arbitrary piece of state within this component will
* trigger a re-render. * trigger a re-render.
@ -164,7 +164,7 @@ export const usePortalsLifecycle: PortalLifecycleHook = () => {
React.useDebugValue(`Portal count: ${portals.length}`); React.useDebugValue(`Portal count: ${portals.length}`);
const addPortal = React.useCallback((portal: React.ReactPortal) => { const addPortal = React.useCallback((portal: React.ReactPortal) => {
setPortals((portals) => [...portals, portal]); setPortals((existingPortals) => [...existingPortals, portal]);
let disposed = false; let disposed = false;
return { return {
dispose: () => { dispose: () => {
@ -174,7 +174,9 @@ export const usePortalsLifecycle: PortalLifecycleHook = () => {
); );
} }
disposed = true; 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( export function isReactElement(
element: any | React.ReactElement element: any | React.ReactElement
): element is 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; item.size = size;
this.relayout([index], undefined); this.relayout([index]);
} }
public addView( public addView(
@ -339,8 +339,8 @@ export class Splitview {
viewSize = view.minimumSize; viewSize = view.minimumSize;
} }
const disposable = view.onDidChange((size) => const disposable = view.onDidChange((newSize) =>
this.onDidChange(viewItem, size) this.onDidChange(viewItem, newSize)
); );
const dispose = () => { const dispose = () => {
@ -385,7 +385,7 @@ export class Splitview {
? event.clientX ? event.clientX
: event.clientY; : event.clientY;
const index = firstIndex( const sashIndex = firstIndex(
this.sashes, this.sashes,
(s) => s.container === sash (s) => s.container === sash
); );
@ -396,8 +396,8 @@ export class Splitview {
// //
let snapBefore: ISashDragSnapState | undefined; let snapBefore: ISashDragSnapState | undefined;
let snapAfter: ISashDragSnapState | undefined; let snapAfter: ISashDragSnapState | undefined;
const upIndexes = range(index, -1); const upIndexes = range(sashIndex, -1);
const downIndexes = range(index + 1, this.views.length); const downIndexes = range(sashIndex + 1, this.views.length);
const minDeltaUp = upIndexes.reduce( const minDeltaUp = upIndexes.reduce(
(r, i) => r + (this.views[i].minimumSize - sizes[i]), (r, i) => r + (this.views[i].minimumSize - sizes[i]),
0 0
@ -428,41 +428,45 @@ export class Splitview {
const snapBeforeIndex = this.findFirstSnapIndex(upIndexes); const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
const snapAfterIndex = this.findFirstSnapIndex(downIndexes); const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
if (typeof snapBeforeIndex === 'number') { if (typeof snapBeforeIndex === 'number') {
const viewItem = this.views[snapBeforeIndex]; const snappedViewItem = this.views[snapBeforeIndex];
const halfSize = Math.floor(viewItem.viewMinimumSize / 2); const halfSize = Math.floor(
snappedViewItem.viewMinimumSize / 2
);
snapBefore = { snapBefore = {
index: snapBeforeIndex, index: snapBeforeIndex,
limitDelta: viewItem.visible limitDelta: snappedViewItem.visible
? minDelta - halfSize ? minDelta - halfSize
: minDelta + halfSize, : minDelta + halfSize,
size: viewItem.size, size: snappedViewItem.size,
}; };
} }
if (typeof snapAfterIndex === 'number') { if (typeof snapAfterIndex === 'number') {
const viewItem = this.views[snapAfterIndex]; const snappedViewItem = this.views[snapAfterIndex];
const halfSize = Math.floor(viewItem.viewMinimumSize / 2); const halfSize = Math.floor(
snappedViewItem.viewMinimumSize / 2
);
snapAfter = { snapAfter = {
index: snapAfterIndex, index: snapAfterIndex,
limitDelta: viewItem.visible limitDelta: snappedViewItem.visible
? maxDelta + halfSize ? maxDelta + halfSize
: maxDelta - halfSize, : maxDelta - halfSize,
size: viewItem.size, size: snappedViewItem.size,
}; };
} }
// //
const mousemove = (event: MouseEvent) => { const mousemove = (mousemoveEvent: MouseEvent) => {
const current = const current =
this._orientation === Orientation.HORIZONTAL this._orientation === Orientation.HORIZONTAL
? event.clientX ? mousemoveEvent.clientX
: event.clientY; : mousemoveEvent.clientY;
const delta = current - start; const delta = current - start;
this.resize( this.resize(
index, sashIndex,
delta, delta,
sizes, sizes,
undefined, undefined,
@ -501,13 +505,14 @@ export class Splitview {
sash.addEventListener('mousedown', onStart); sash.addEventListener('mousedown', onStart);
const disposable = () => { const sashItem: ISashItem = {
sash.removeEventListener('mousedown', onStart); container: sash,
this.sashContainer.removeChild(sash); disposable: () => {
sash.removeEventListener('mousedown', onStart);
this.sashContainer.removeChild(sash);
},
}; };
const sashItem: ISashItem = { container: sash, disposable };
this.sashContainer.appendChild(sash); this.sashContainer.appendChild(sash);
this.sashes.push(sashItem); this.sashes.push(sashItem);
} }
@ -875,16 +880,16 @@ export class Splitview {
const downIndexes = range(index + 1, this.views.length); const downIndexes = range(index + 1, this.views.length);
// //
if (highPriorityIndexes) { if (highPriorityIndexes) {
for (const index of highPriorityIndexes) { for (const i of highPriorityIndexes) {
pushToStart(upIndexes, index); pushToStart(upIndexes, i);
pushToStart(downIndexes, index); pushToStart(downIndexes, i);
} }
} }
if (lowPriorityIndexes) { if (lowPriorityIndexes) {
for (const index of lowPriorityIndexes) { for (const i of lowPriorityIndexes) {
pushToEnd(upIndexes, index); pushToEnd(upIndexes, i);
pushToEnd(downIndexes, index); 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; layout(width: number, height: number): void;
onDidLayoutChange: Event<void>; onDidLayoutChange: Event<void>;
toJSON(): SerializedSplitview; toJSON(): SerializedSplitview;
fromJSON(data: SerializedSplitview, deferComponentLayout?: boolean): void; fromJSON(
serializedSplitview: SerializedSplitview,
deferComponentLayout?: boolean
): void;
resizeToFit(): void; resizeToFit(): void;
focus(): void; focus(): void;
getPanel(id: string): ISplitviewPanel | undefined; getPanel(id: string): ISplitviewPanel | undefined;
@ -286,8 +289,11 @@ export class SplitviewComponent
}; };
} }
fromJSON(data: SerializedSplitview, deferComponentLayout = false): void { fromJSON(
const { views, orientation, size, activeView } = data; serializedSplitview: SerializedSplitview,
deferComponentLayout = false
): void {
const { views, orientation, size, activeView } = serializedSplitview;
this.splitview.dispose(); this.splitview.dispose();