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

feat: unify component api methods

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

11
README.md
View File

@ -17,7 +17,7 @@
##
A zero dependency layout manager based on the layering of split-view components with ReactJS support.
- View the live demo [here](https://mathuo.github.io/dockview/).
- View the live demo [here](https://mathuo.github.io/dockview/).
- Storybook demo [here](https://mathuo.github.io/dockview/output/storybook-static).
- Code examples [here](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories).
- Generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
@ -86,9 +86,14 @@ 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.
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.
| CSS Property | Description |
@ -107,7 +112,7 @@ The theme can be customized using the below set of CSS properties. You can find
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |

11
packages/dockview/README.md
View File

@ -17,7 +17,7 @@
##
A zero dependency layout manager based on the layering of split-view components with ReactJS support.
- View the live demo [here](https://mathuo.github.io/dockview/).
- View the live demo [here](https://mathuo.github.io/dockview/).
- Storybook demo [here](https://mathuo.github.io/dockview/output/storybook-static).
- Code examples [here](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories).
- Generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
@ -86,9 +86,14 @@ 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.
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.
| CSS Property | Description |
@ -107,7 +112,7 @@ The theme can be customized using the below set of CSS properties. You can find
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |

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;