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

bug: fix rendering issue

Browse Source
This commit is contained in:
mathuo 2024-01-23 17:21:20 +00:00
parent 75066f2420
commit a855c55132
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
4 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts
View File

@ -11,6 +11,8 @@ import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
import { OverlayRenderContainer } from '../../../../overlayRenderContainer';
import { fromPartial } from '@total-typescript/shoehorn';
import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
class TestContentRenderer
extends CompositeDisposable
@ -26,6 +28,7 @@ class TestContentRenderer
constructor(public id: string) {
super();
this.element = document.createElement('div');
this.element.id = id;
}
init(parameters: GroupPanelContentPartInitParameters): void {
@ -146,4 +149,40 @@ describe('contentContainer', () => {
disposable.dispose();
});
test("that panels renderered as 'onlyWhenVisibile' are removed when closed", () => {
const cut = new ContentContainer(
fromPartial<DockviewComponent>({
overlayRenderContainer: {
detatch: jest.fn(),
},
}),
fromPartial<DockviewGroupPanelModel>({})
);
const panel1 = fromPartial<IDockviewPanel>({
api: {
renderer: 'onlyWhenVisibile',
},
view: { content: new TestContentRenderer('panel_1') },
});
const panel2 = fromPartial<IDockviewPanel>({
api: {
renderer: 'onlyWhenVisibile',
},
view: { content: new TestContentRenderer('panel_2') },
});
cut.openPanel(panel1);
expect(panel1.view.content.element.parentElement).toBe(cut.element);
expect(cut.element.childNodes.length).toBe(1);
cut.openPanel(panel2);
expect(panel1.view.content.element.parentElement).toBeNull();
expect(panel2.view.content.element.parentElement).toBe(cut.element);
expect(cut.element.childNodes.length).toBe(1);
});
});

4
packages/dockview-core/src/dockview/components/panel/content.ts
View File

@ -203,11 +203,11 @@ export class ContentContainer
public closePanel(): void {
if (this.panel) {
if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
if (this.panel.api.renderer === 'onlyWhenVisibile') {
this._element.removeChild(this.panel.view.content.element);
}
this.panel = undefined;
}
this.panel = undefined;
}
public dispose(): void {

2
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -138,7 +138,6 @@ export class DockviewGroupPanelModel
{
private readonly tabsContainer: ITabsContainer;
private readonly contentContainer: IContentContainer;
// private readonly dropTarget: Droptarget;
private _activePanel: IDockviewPanel | undefined;
private watermark?: IWatermarkRenderer;
private _isGroupActive = false;
@ -527,6 +526,7 @@ export class DockviewGroupPanelModel
if (!skipSetGroupActive) {
this.accessor.doSetGroupActive(this.groupPanel);
}
this.contentContainer.renderPanel(panel, { asActive: true });
return;
}

23
packages/docs/sandboxes/demo-dockview/src/app.tsx
View File

@ -14,8 +14,27 @@ import './app.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return (
<div style={{ height: '100%', overflow: 'auto', color: 'white' }}>
{''}
<div
style={{
height: '100%',
overflow: 'auto',
color: 'white',
position: 'relative',
}}
>
<span
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
pointerEvents: 'none',
fontSize: '42px',
opacity: 0.5,
}}
>
{props.api.title}
</span>
</div>
);
},