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

Merge branch 'master' of https://github.com/mathuo/dockview into master

Browse Source
This commit is contained in:
mathuo 2021-10-09 10:09:46 +01:00
commit 26177327a5
5 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -86,6 +86,11 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
[Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
[Panel Api]()
## Serialization / De-serialization
All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
## Theming
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.

5
packages/dockview/README.md
View File

@ -86,6 +86,11 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
[Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
[Panel Api]()
## Serialization / De-serialization
All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
## Theming
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.

18
packages/dockview/src/api/component.api.ts
View File

@ -6,7 +6,6 @@ import {
AddGroupOptions,
AddPanelOptions,
MovementOptions,
PanelOptions,
} from '../dockview/options';
import { Direction } from '../gridview/baseComponentGridview';
import {
@ -31,8 +30,13 @@ import {
import { Orientation, Sizing } from '../splitview/core/splitview';
import { ISplitviewPanel } from '../splitview/splitviewPanel';
import { GroupviewPanel } from '../groupview/groupviewPanel';
import { Event } from '../events';
export class SplitviewApi {
export interface CommonApi {
readonly onDidLayoutChange: Event<void>;
}
export class SplitviewApi implements CommonApi {
get minimumSize() {
return this.component.minimumSize;
}
@ -116,7 +120,7 @@ export class SplitviewApi {
}
}
export class PaneviewApi {
export class PaneviewApi implements CommonApi {
get width() {
return this.component.width;
}
@ -180,7 +184,7 @@ export class PaneviewApi {
}
}
export class GridviewApi {
export class GridviewApi implements CommonApi {
get width() {
return this.component.width;
}
@ -209,6 +213,10 @@ export class GridviewApi {
return this.component.onGridEvent;
}
get onDidLayoutChange() {
return this.component.onDidLayoutChange;
}
get panels() {
return this.component.groups;
}
@ -279,7 +287,7 @@ export class GridviewApi {
}
}
export class DockviewApi {
export class DockviewApi implements CommonApi {
get width() {
return this.component.width;
}

35
packages/dockview/src/dockview/dockviewComponent.ts
View File

@ -118,7 +118,6 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
focus(): void;
toJSON(): SerializedDockview;
fromJSON(data: SerializedDockview): void;
onDidLayoutChange: Event<void>;
}
export class DockviewComponent
@ -149,9 +148,6 @@ export class DockviewComponent
private _api: DockviewApi;
private _options: DockviewComponentOptions;
private _onDidLayoutChange = new Emitter<void>();
readonly onDidLayoutChange = this._onDidLayoutChange.event;
get totalPanels(): number {
return this._panels.size;
}
@ -192,37 +188,6 @@ export class DockviewComponent
this._options = options;
this.addDisposables(
(() => {
/**
* TODO Fix this relatively ugly 'merge and delay'
*/
let timer: any;
return this.onGridEvent((event) => {
if (
[
GroupChangeKind.ADD_GROUP,
GroupChangeKind.REMOVE_GROUP,
GroupChangeKind.ADD_PANEL,
GroupChangeKind.REMOVE_PANEL,
GroupChangeKind.GROUP_ACTIVE,
GroupChangeKind.PANEL_ACTIVE,
GroupChangeKind.LAYOUT,
].includes(event.kind)
) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
this._onDidLayoutChange.fire();
clearTimeout(timer);
});
}
});
})()
);
if (!this.options.components) {
this.options.components = {};
}

35
packages/dockview/src/gridview/baseComponentGridview.ts
View File

@ -56,6 +56,7 @@ export interface IBaseGrid<T extends IGridPanelView> {
readonly size: number;
readonly groups: T[];
readonly onGridEvent: Event<GroupChangeEvent>;
readonly onDidLayoutChange: Event<void>;
getPanel(id: string): T | undefined;
toJSON(): object;
fromJSON(data: any): void;
@ -78,6 +79,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
protected readonly _onGridEvent = new Emitter<GroupChangeEvent>();
readonly onGridEvent: Event<GroupChangeEvent> = this._onGridEvent.event;
private _onDidLayoutChange = new Emitter<void>();
readonly onDidLayoutChange = this._onDidLayoutChange.event;
get id() {
return this._id;
}
@ -141,6 +145,37 @@ export abstract class BaseGrid<T extends IGridPanelView>
this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
})
);
this.addDisposables(
(() => {
/**
* TODO Fix this relatively ugly 'merge and delay'
*/
let timer: any;
return this.onGridEvent((event) => {
if (
[
GroupChangeKind.ADD_GROUP,
GroupChangeKind.REMOVE_GROUP,
GroupChangeKind.ADD_PANEL,
GroupChangeKind.REMOVE_PANEL,
GroupChangeKind.GROUP_ACTIVE,
GroupChangeKind.PANEL_ACTIVE,
GroupChangeKind.LAYOUT,
].includes(event.kind)
) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
this._onDidLayoutChange.fire();
clearTimeout(timer);
});
}
});
})()
);
}
public abstract toJSON(): object;