Skip to content

Commit 9e34faa

Browse files
mathuomathuo
committed
code
1 parent 9e26f3d commit 9e34faa

13 files changed

+148
-102
lines changed

‎packages/splitview/src/api/panePanelApi.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Emitter, Event } from '../events';
2+
import { IPanelApi, PanelApi } from './panelApi';
3+
4+
interface ExpansionEvent {
5+
isExpanded: boolean;
6+
}
7+
8+
export interface IPanePanelApi extends IPanelApi {
9+
onDidExpansionChange: Event<ExpansionEvent>;
10+
}
11+
12+
export class PanePanelApi extends PanelApi implements IPanePanelApi {
13+
readonly _onDidExpansionChange = new Emitter<ExpansionEvent>({
14+
emitLastValue: true,
15+
});
16+
readonly onDidExpansionChange: Event<ExpansionEvent> = this
17+
._onDidExpansionChange.event;
18+
19+
constructor() {
20+
super();
21+
}
22+
}

‎packages/splitview/src/paneview/componentPaneView.ts

+11
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,17 @@ export class ComponentPaneView implements IComponentPaneView {
7676
this.paneview.layout(size, orthogonalSize);
7777
}
7878

79+
/**
80+
* Resize the layout to fit the parent container
81+
*/
82+
public resizeToFit(): void {
83+
const {
84+
width,
85+
height,
86+
} = this.element.parentElement.getBoundingClientRect();
87+
this.layout(width, height);
88+
}
89+
7990
public dispose() {
8091
this.paneview.dispose();
8192
}

‎packages/splitview/src/paneview/paneview.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { SplitView, IView, Orientation } from '../splitview/splitview';
2-
import { IDisposable } from '../lifecycle';
2+
import { CompositeDisposable, IDisposable } from '../lifecycle';
33
import { Emitter, Event } from '../events';
44
import { addClasses, removeClasses } from '../dom';
55

@@ -13,7 +13,7 @@ export interface IPaneview extends IView {
1313
onDidChangeExpansionState: Event<boolean>;
1414
}
1515

16-
export abstract class Pane implements IPaneview {
16+
export abstract class Pane extends CompositeDisposable implements IPaneview {
1717
private _element: HTMLElement;
1818
private _minimumBodySize: number;
1919
private _maximumBodySize: number;
@@ -81,6 +81,10 @@ export abstract class Pane implements IPaneview {
8181
}
8282

8383
constructor(options: IPaneOptions) {
84+
super();
85+
86+
this.addDisposables(this._onDidChange, this._onDidChangeExpansionState);
87+
8488
this._element = document.createElement('div');
8589
this._element.className = 'pane';
8690

‎packages/splitview/src/react/dockview/dockview.tsx

+17-29
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
TabContextMenuEvent,
1010
} from '../../dockview/options';
1111
import { IGroupPanelApi } from '../../api/groupPanelApi';
12+
import { usePortalsLifecycle } from '../react';
1213

1314
export interface IGroupPanelProps {
1415
api: IGroupPanelApi;
@@ -51,23 +52,12 @@ export interface IDockviewComponentProps {
5152
export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps> = (
5253
props: IDockviewComponentProps
5354
) => {
54-
const domReference = React.useRef<HTMLDivElement>();
55-
const layoutReference = React.useRef<ComponentDockview>();
55+
const domRef = React.useRef<HTMLDivElement>();
56+
const dockviewRef = React.useRef<ComponentDockview>();
5657

57-
const [portals, setPortals] = React.useState<React.ReactPortal[]>([]);
58+
const [portals, addPortal] = usePortalsLifecycle();
5859

5960
React.useEffect(() => {
60-
const addPortal = (p: React.ReactPortal) => {
61-
setPortals((portals) => [...portals, p]);
62-
return {
63-
dispose: () => {
64-
setPortals((portals) =>
65-
portals.filter((portal) => portal !== p)
66-
);
67-
},
68-
};
69-
};
70-
7161
const factory: GroupPanelFrameworkComponentFactory = {
7262
content: {
7363
createComponent: (
@@ -95,7 +85,7 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
9585

9686
const element = document.createElement('div');
9787

98-
const layout = new ComponentDockview(element, {
88+
const dockview = new ComponentDockview(element, {
9989
frameworkComponentFactory: factory,
10090
frameworkComponents: props.components,
10191
frameworkTabComponents: props.tabComponents,
@@ -105,28 +95,28 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
10595
// orientation: props.orientation,
10696
});
10797

108-
layoutReference.current = layout;
109-
domReference.current.appendChild(layoutReference.current.element);
110-
111-
layout.deserializer = new ReactPanelDeserialzier(layout);
112-
113-
layout.resizeToFit();
98+
domRef.current.appendChild(dockview.element);
99+
dockview.deserializer = new ReactPanelDeserialzier(dockview);
114100

115101
if (props.serializedLayout) {
116-
layout.deserialize(props.serializedLayout);
102+
dockview.deserialize(props.serializedLayout);
117103
}
118104

105+
dockview.resizeToFit();
106+
119107
if (props.onReady) {
120-
props.onReady({ api: layout });
108+
props.onReady({ api: dockview });
121109
}
122110

111+
dockviewRef.current = dockview;
112+
123113
return () => {
124-
layout.dispose();
114+
dockview.dispose();
125115
};
126116
}, []);
127117

128118
React.useEffect(() => {
129-
const disposable = layoutReference.current.onTabContextMenu((event) => {
119+
const disposable = dockviewRef.current.onTabContextMenu((event) => {
130120
props.onTabContextMenu(event);
131121
});
132122

@@ -136,9 +126,7 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
136126
}, [props.onTabContextMenu]);
137127

138128
React.useEffect(() => {
139-
layoutReference.current.setAutoResizeToFit(
140-
props.autoSizeToFitContainer
141-
);
129+
dockviewRef.current.setAutoResizeToFit(props.autoSizeToFitContainer);
142130
}, [props.autoSizeToFitContainer]);
143131

144132
return (
@@ -147,7 +135,7 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
147135
// height: '100%',
148136
width: '100%',
149137
}}
150-
ref={domReference}
138+
ref={domRef}
151139
>
152140
{portals}
153141
</div>

‎packages/splitview/src/react/dockview/reactContentPart.ts

-3
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,6 @@ export class ReactPanelContentPart implements PanelContentPart {
5454
return Promise.resolve(ClosePanelResult.CLOSE);
5555
}
5656

57-
public focus(): void {}
58-
public onHide(): void {}
59-
6057
public dispose() {
6158
this.part?.dispose();
6259
}

‎packages/splitview/src/react/dockview/reactHeaderPart.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import { IGroupPanelApi } from '../../api/groupPanelApi';
32
import {
43
PanelHeaderPart,
54
GroupPanelPartInitParameters,

‎packages/splitview/src/react/gridview/gridview.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import { IGridPanelApi } from '../../api/gridPanelApi';
77
import { Orientation } from '../../splitview/splitview';
88
import { ReactComponentGridView } from './reactComponentGridView';
9+
import { usePortalsLifecycle } from '../react';
910

1011
export interface GridviewReadyEvent {
1112
api: IComponentGridview;
@@ -26,23 +27,12 @@ export interface IGridviewComponentProps {
2627
export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps> = (
2728
props: IGridviewComponentProps
2829
) => {
29-
const domReference = React.useRef<HTMLDivElement>();
30-
const gridview = React.useRef<IComponentGridview>();
31-
const [portals, setPortals] = React.useState<React.ReactPortal[]>([]);
32-
33-
const addPortal = React.useCallback((p: React.ReactPortal) => {
34-
setPortals((portals) => [...portals, p]);
35-
return {
36-
dispose: () => {
37-
setPortals((portals) =>
38-
portals.filter((portal) => portal !== p)
39-
);
40-
},
41-
};
42-
}, []);
30+
const domRef = React.useRef<HTMLDivElement>();
31+
const gridviewRef = React.useRef<IComponentGridview>();
32+
const [portals, addPortal] = usePortalsLifecycle();
4333

4434
React.useEffect(() => {
45-
gridview.current = new ComponentGridview(domReference.current, {
35+
const gridview = new ComponentGridview(domRef.current, {
4636
orientation: props.orientation,
4737
frameworkComponents: props.components,
4838
frameworkComponentFactory: {
@@ -59,9 +49,17 @@ export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps>
5949
},
6050
});
6151

52+
// gridview.resizeToFit();
53+
6254
if (props.onReady) {
63-
props.onReady({ api: gridview.current });
55+
props.onReady({ api: gridview });
6456
}
57+
58+
gridviewRef.current = gridview;
59+
60+
return () => {
61+
gridview.dispose();
62+
};
6563
}, []);
6664

6765
return (
@@ -70,7 +68,7 @@ export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps>
7068
height: '100%',
7169
width: '100%',
7270
}}
73-
ref={domReference}
71+
ref={domRef}
7472
>
7573
{portals}
7674
</div>

‎packages/splitview/src/react/paneview/paneview.tsx

+16-22
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import * as React from 'react';
2-
import { IPanelApi } from '../../api/panelApi';
2+
import { IPanePanelApi } from '../../api/panePanelApi';
33
import {
44
ComponentPaneView,
55
IComponentPaneView,
66
} from '../../paneview/componentPaneView';
77
import { PaneReact } from './reactPane';
8+
import { usePortalsLifecycle } from '../react';
89

910
export interface PaneviewReadyEvent {
1011
api: IComponentPaneView;
1112
}
1213

1314
export interface IPaneviewPanelProps {
14-
api: IPanelApi;
15+
api: IPanePanelApi;
1516
}
1617

1718
export interface IPaneviewComponentProps {
@@ -24,23 +25,12 @@ export interface IPaneviewComponentProps {
2425
export const PaneViewComponent: React.FunctionComponent<IPaneviewComponentProps> = (
2526
props: IPaneviewComponentProps
2627
) => {
27-
const domReference = React.useRef<HTMLDivElement>();
28-
const splitpanel = React.useRef<IComponentPaneView>();
29-
const [portals, setPortals] = React.useState<React.ReactPortal[]>([]);
30-
31-
const addPortal = React.useCallback((p: React.ReactPortal) => {
32-
setPortals((portals) => [...portals, p]);
33-
return {
34-
dispose: () => {
35-
setPortals((portals) =>
36-
portals.filter((portal) => portal !== p)
37-
);
38-
},
39-
};
40-
}, []);
28+
const domRef = React.useRef<HTMLDivElement>();
29+
const paneviewRef = React.useRef<IComponentPaneView>();
30+
const [portals, addPortal] = usePortalsLifecycle();
4131

4232
React.useEffect(() => {
43-
splitpanel.current = new ComponentPaneView(domReference.current, {
33+
const paneview = new ComponentPaneView(domRef.current, {
4434
frameworkComponents: props.components,
4535
components: {},
4636
frameworkWrapper: {
@@ -56,16 +46,20 @@ export const PaneViewComponent: React.FunctionComponent<IPaneviewComponentProps>
5646
},
5747
});
5848

59-
const { width, height } = domReference.current.getBoundingClientRect();
49+
const { width, height } = domRef.current.getBoundingClientRect();
6050
const [size, orthogonalSize] = [height, width];
61-
splitpanel.current.layout(size, orthogonalSize);
51+
paneview.layout(size, orthogonalSize);
6252

6353
if (props.onReady) {
64-
props.onReady({ api: splitpanel.current });
54+
props.onReady({ api: paneview });
6555
}
6656

57+
paneview.resizeToFit();
58+
59+
paneviewRef.current = paneview;
60+
6761
return () => {
68-
splitpanel.current.dispose();
62+
paneview.dispose();
6963
};
7064
}, []);
7165

@@ -75,7 +69,7 @@ export const PaneViewComponent: React.FunctionComponent<IPaneviewComponentProps>
7569
height: '100%',
7670
width: '100%',
7771
}}
78-
ref={domReference}
72+
ref={domRef}
7973
>
8074
{portals}
8175
</div>

‎packages/splitview/src/react/paneview/reactPane.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
2-
import { BaseViewApi, IBaseViewApi } from '../../api/api';
2+
import { IPanePanelApi, PanePanelApi } from '../../api/panePanelApi';
33
import { Pane } from '../../paneview/paneview';
44
import { ReactLayout } from '../dockview/dockview';
55
import { ReactPart } from '../react';
66

77
export class PaneReact extends Pane {
88
private params: {};
9-
private api: IBaseViewApi;
9+
private api: PanePanelApi;
1010

1111
private contentPart: ReactPart;
1212
private headerPart: ReactPart;
@@ -27,7 +27,14 @@ export class PaneReact extends Pane {
2727
// options.isExpanded
2828
});
2929

30-
this.api = new BaseViewApi();
30+
this.api = new PanePanelApi();
31+
32+
this.addDisposables(
33+
this.onDidChangeExpansionState((isExpanded) => {
34+
this.api._onDidExpansionChange.fire({ isExpanded });
35+
})
36+
);
37+
3138
this.render();
3239
}
3340

@@ -62,6 +69,7 @@ export class PaneReact extends Pane {
6269
}
6370

6471
public dispose() {
72+
super.dispose();
6573
this.headerPart.dispose();
6674
this.contentPart.dispose();
6775
this.api.dispose();

0 commit comments

Comments
 (0)