mirror of
https://github.com/mathuo/dockview
synced 2025-02-10 10:25:46 +00:00
Merge pull request #200 from mathuo/198-vanillajs-rendering-and-persistance
198 vanillajs rendering and persistance
This commit is contained in:
mathuo
GitHub
commit
3fdb3fd3d6
2
.github/workflows/deploy-docs.yml
vendored
2
.github/workflows/deploy-docs.yml
vendored
@ -27,6 +27,8 @@ jobs:
|
||||
|
||||
- run: yarn install
|
||||
- run: lerna bootstrap
|
||||
- run: npm run build
|
||||
working-directory: packages/dockview-core
|
||||
- run: npm run build
|
||||
working-directory: packages/dockview
|
||||
- run: npm run build
|
||||
|
||||
18
packages/README.md
Normal file
18
packages/README.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Project Structure
|
||||
|
||||
This mono-repository has a number of packages containing the code for the [dockview](https://www.npmjs.com/package/dockview) library and the documentation website [dockview.dev](dockview.dev).
|
||||
|
||||
## dockview-core
|
||||
|
||||
- Contains the core logic for the dockview library.
|
||||
- Written entirely in vanilla JavaScript/TypeScript.
|
||||
|
||||
## dockview
|
||||
|
||||
- Depends on `dockview-core`.
|
||||
- Exports a `React` wrapper.
|
||||
- Published as [dockview](https://www.npmjs.com/package/dockview) on npm.
|
||||
|
||||
## docs
|
||||
|
||||
- Code for [dockview.dev](dockview.dev).
|
||||
@ -16,7 +16,6 @@ import {
|
||||
DockviewPanelApi,
|
||||
DockviewPanelApiImpl,
|
||||
} from '../../api/dockviewPanelApi';
|
||||
import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
|
||||
import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
|
||||
import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode';
|
||||
import { DefaultTab } from '../../dockview/components/tab/defaultTab';
|
||||
@ -94,66 +93,6 @@ class PanelTabPartTest implements ITabRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
class TestGroupPanel implements IDockviewPanel {
|
||||
private _group: DockviewGroupPanel | undefined;
|
||||
|
||||
readonly api: DockviewPanelApi;
|
||||
readonly view: IDockviewPanelModel;
|
||||
|
||||
constructor(
|
||||
public readonly id: string,
|
||||
public readonly title: string,
|
||||
accessor: DockviewComponent
|
||||
) {
|
||||
this.api = new DockviewPanelApiImpl(this, this._group!);
|
||||
this._group = new DockviewGroupPanel(accessor, id, {});
|
||||
this.view = new DockviewPanelModelMock(
|
||||
'component',
|
||||
new PanelContentPartTest(id, 'component'),
|
||||
'tabComponent',
|
||||
new DefaultTab()
|
||||
);
|
||||
}
|
||||
|
||||
get params(): Record<string, any> {
|
||||
return {};
|
||||
}
|
||||
get group(): DockviewGroupPanel {
|
||||
return this._group!;
|
||||
}
|
||||
|
||||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void {
|
||||
this._group = group;
|
||||
}
|
||||
|
||||
init(params: IGroupPanelInitParameters): void {
|
||||
//
|
||||
}
|
||||
|
||||
layout(width: number, height: number): void {
|
||||
//
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
//
|
||||
}
|
||||
|
||||
toJSON(): GroupviewPanelState {
|
||||
return {
|
||||
id: this.id,
|
||||
title: this.title,
|
||||
};
|
||||
}
|
||||
|
||||
update(event: GroupPanelUpdateEvent): void {
|
||||
//
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
describe('dockviewComponent', () => {
|
||||
let container: HTMLElement;
|
||||
let dockview: DockviewComponent;
|
||||
@ -470,7 +409,6 @@ describe('dockviewComponent', () => {
|
||||
test('serialization', () => {
|
||||
dockview.layout(1000, 1000);
|
||||
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -992,15 +930,6 @@ describe('dockviewComponent', () => {
|
||||
|
||||
test('#1', () => {
|
||||
dockview.layout(500, 500);
|
||||
dockview.deserializer = {
|
||||
fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
|
||||
return new TestGroupPanel(
|
||||
panelData.id,
|
||||
panelData.title || '',
|
||||
dockview
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const panel1 = dockview.addPanel({
|
||||
id: 'panel1',
|
||||
@ -1055,14 +984,17 @@ describe('dockviewComponent', () => {
|
||||
panels: {
|
||||
view_1: {
|
||||
id: 'view_1',
|
||||
contentComponent: 'default',
|
||||
title: 'view_1_title',
|
||||
},
|
||||
view_2: {
|
||||
id: 'view_2',
|
||||
contentComponent: 'default',
|
||||
title: 'view_2_title',
|
||||
},
|
||||
view_3: {
|
||||
id: 'view_3',
|
||||
contentComponent: 'default',
|
||||
title: 'view_3_title',
|
||||
},
|
||||
},
|
||||
@ -1382,7 +1314,6 @@ describe('dockviewComponent', () => {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
dockview.layout(500, 1000);
|
||||
|
||||
@ -1507,7 +1438,6 @@ describe('dockviewComponent', () => {
|
||||
})
|
||||
);
|
||||
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1641,7 +1571,6 @@ describe('dockviewComponent', () => {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1731,7 +1660,6 @@ describe('dockviewComponent', () => {
|
||||
test_tab_id: PanelTabPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1840,7 +1768,6 @@ describe('dockviewComponent', () => {
|
||||
test_tab_id: PanelTabPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1928,7 +1855,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2034,7 +1960,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2175,7 +2100,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2303,7 +2227,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.groups.length).toBe(0);
|
||||
});
|
||||
@ -2320,7 +2243,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.groups.length).toBe(0);
|
||||
|
||||
@ -2360,7 +2282,6 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
|
||||
grid: {
|
||||
|
||||
@ -16,7 +16,7 @@ import {
|
||||
DockviewDropTargets,
|
||||
} from './types';
|
||||
import { sequentialNumberGenerator } from '../math';
|
||||
import { IPanelDeserializer } from './deserializer';
|
||||
import { DefaultDockviewDeserialzier } from './deserializer';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import {
|
||||
AddGroupOptions,
|
||||
@ -87,7 +87,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
|
||||
readonly onDidDrop: Event<DockviewDropEvent>;
|
||||
readonly orientation: Orientation;
|
||||
tabHeight: number | undefined;
|
||||
deserializer: IPanelDeserializer | undefined;
|
||||
updateOptions(options: DockviewComponentUpdateOptions): void;
|
||||
moveGroupOrPanel(
|
||||
referenceGroup: DockviewGroupPanel,
|
||||
@ -125,8 +124,8 @@ export class DockviewComponent
|
||||
implements IDockviewComponent
|
||||
{
|
||||
private readonly nextGroupId = sequentialNumberGenerator();
|
||||
private _deserializer: IPanelDeserializer | undefined;
|
||||
private _api: DockviewApi;
|
||||
private readonly _deserializer = new DefaultDockviewDeserialzier(this);
|
||||
private readonly _api: DockviewApi;
|
||||
private _options: Exclude<DockviewComponentOptions, 'orientation'>;
|
||||
private watermark: IWatermarkRenderer | null = null;
|
||||
|
||||
@ -161,14 +160,6 @@ export class DockviewComponent
|
||||
return this.groups.flatMap((group) => group.panels);
|
||||
}
|
||||
|
||||
get deserializer(): IPanelDeserializer | undefined {
|
||||
return this._deserializer;
|
||||
}
|
||||
|
||||
set deserializer(value: IPanelDeserializer | undefined) {
|
||||
this._deserializer = value;
|
||||
}
|
||||
|
||||
get options(): DockviewComponentOptions {
|
||||
return this._options;
|
||||
}
|
||||
@ -428,9 +419,6 @@ export class DockviewComponent
|
||||
fromJSON(data: SerializedDockview): void {
|
||||
this.clear();
|
||||
|
||||
if (!this.deserializer) {
|
||||
throw new Error('no deserializer provided');
|
||||
}
|
||||
const { grid, panels, options, activeGroup } = data;
|
||||
|
||||
if (typeof options?.tabHeight === 'number') {
|
||||
@ -454,7 +442,7 @@ export class DockviewComponent
|
||||
this._onDidAddGroup.fire(group);
|
||||
|
||||
for (const child of views) {
|
||||
const panel = this.deserializer!.fromJSON(
|
||||
const panel = this._deserializer.fromJSON(
|
||||
panels[child],
|
||||
group
|
||||
);
|
||||
|
||||
@ -11,7 +11,6 @@ import {
|
||||
ITabRenderer,
|
||||
watchElementResize,
|
||||
DockviewGroupPanel,
|
||||
DefaultDockviewDeserialzier,
|
||||
} from 'dockview-core';
|
||||
import { ReactPanelContentPart } from './reactContentPart';
|
||||
import { ReactPanelHeaderPart } from './reactHeaderPart';
|
||||
@ -173,7 +172,6 @@ export const DockviewReact = React.forwardRef(
|
||||
});
|
||||
|
||||
domRef.current?.appendChild(dockview.element);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
const { clientWidth, clientHeight } = domRef.current!;
|
||||
dockview.layout(clientWidth, clientHeight);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user