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

feat: remove obsolete functionality

Browse Source 
IGroupPanel
- remove setDirty(isDirty: boolean): void

PanelApi
- remove onDidStateChange: Event<void>
- remove setState(key: string, value: StateObject): void
- remove setState(state: State): void
- remove getState(): State
- remove getStateKey: <T extends StateObject>(key:string) => T
This commit is contained in:
mathuo 2022-03-10 19:53:37 +00:00
parent 4a34374fd8
commit 58083bb6a9
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
19 changed files with 15 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -204,7 +204,6 @@ The theme can be customized using the below set of CSS properties. You can find
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance

1
packages/dockview/README.md
View File

@ -204,7 +204,6 @@ The theme can be customized using the below set of CSS properties. You can find
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance

33
packages/dockview/src/__tests__/api/api.spec.ts
View File

@ -1,4 +1,4 @@
import { PanelApiImpl, StateObject } from '../../api/panelApi';
import { PanelApiImpl } from '../../api/panelApi';
describe('api', () => {
let api: PanelApiImpl;
@ -7,36 +7,7 @@ describe('api', () => {
api = new PanelApiImpl('dummy_id');
});
it('sets api state', () => {
let state: StateObject;
const stream = api.onDidStateChange(() => {
state = api.getState();
});
expect(state).toBeUndefined();
expect(api.getState()).toEqual({});
api.setState('key1', 'value1');
expect(state).toEqual({ key1: 'value1' });
expect(api.getStateKey('key1')).toBe('value1');
api.setState('key2', 'value2');
expect(state).toEqual({ key1: 'value1', key2: 'value2' });
expect(api.getStateKey('key2')).toBe('value2');
api.setState('key1', 'value1_1');
expect(state).toEqual({ key2: 'value2', key1: 'value1_1' });
expect(api.getStateKey('key1')).toBe('value1_1');
api.setState({ key3: 'value3' });
expect(state).toEqual({ key3: 'value3' });
stream.dispose();
api.dispose();
});
it('shpuld update isFcoused getter', () => {
it('should update isFcoused getter', () => {
expect(api.isFocused).toBeFalsy();
api._onDidChangeFocus.fire({ isFocused: true });

7
packages/dockview/src/__tests__/groupview/groupview.spec.ts
View File

@ -1,5 +1,4 @@
import { IDockviewComponent } from '../../dockview/dockviewComponent';
import { Emitter } from '../../events';
import {
GroupviewPanelState,
IGroupPanel,
@ -131,8 +130,6 @@ class TestPanel implements IGroupPanel {
private _view: IGroupPanelView | undefined;
private _group: GroupviewPanel | undefined;
private _params: IGroupPanelInitParameters;
private _onDidChangeState = new Emitter<void>();
readonly onDidStateChange = this._onDidChangeState.event;
get title() {
return '';
@ -167,10 +164,6 @@ class TestPanel implements IGroupPanel {
this._params = params;
}
setDirty(isDirty: boolean) {
//noop
}
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean) {
this._group = group;
}

8
packages/dockview/src/api/groupPanelApi.ts
View File

@ -1,4 +1,4 @@
import { Emitter, Event } from '../events';
import { Emitter } from '../events';
import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
import { IGroupPanel } from '../groupview/groupPanel';
import { GroupviewPanel } from '../groupview/groupviewPanel';
@ -21,7 +21,6 @@ export interface DockviewPanelApi
readonly isGroupActive: boolean;
readonly title: string;
readonly suppressClosable: boolean;
readonly onDidDirtyChange: Event<boolean>;
close: () => Promise<boolean>;
interceptOnCloseAction(interceptor: () => Promise<boolean>): void;
setTitle(title: string): void;
@ -34,9 +33,6 @@ export class DockviewPanelApiImpl
private _group: GroupviewPanel | undefined;
private _interceptor: undefined | (() => Promise<boolean>);
readonly _onDidDirtyChange = new Emitter<boolean>();
readonly onDidDirtyChange = this._onDidDirtyChange.event;
readonly _onDidTitleChange = new Emitter<TitleEvent>();
readonly onDidTitleChange = this._onDidTitleChange.event;
@ -73,8 +69,6 @@ export class DockviewPanelApiImpl
constructor(private panel: IGroupPanel, group: GroupviewPanel | undefined) {
super(panel.id);
this._group = group;
this.addDisposables(this._onDidDirtyChange);
}
public setTitle(title: string) {

50
packages/dockview/src/api/panelApi.ts
View File

@ -1,25 +1,6 @@
import { Emitter, Event } from '../events';
import { CompositeDisposable } from '../lifecycle';
/**
* A valid JSON type
*/
export type StateObject =
| number
| string
| boolean
| null
| object
| StateObject[]
| { [key: string]: StateObject };
/**
* A JSON-serializable object
*/
export interface State {
[key: string]: StateObject;
}
export interface FocusEvent {
readonly isFocused: boolean;
}
@ -39,7 +20,6 @@ export interface ActiveEvent {
export interface PanelApi {
// events
readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>;
readonly onDidStateChange: Event<void>;
readonly onDidFocusChange: Event<FocusEvent>;
readonly onDidVisibilityChange: Event<VisibilityEvent>;
readonly onDidActiveChange: Event<ActiveEvent>;
@ -47,11 +27,6 @@ export interface PanelApi {
//
setVisible(isVisible: boolean): void;
setActive(): void;
// state
setState(key: string, value: StateObject): void;
setState(state: State): void;
getState: () => State;
getStateKey: <T extends StateObject>(key: string) => T;
/**
* The id of the panel that would have been assigned when the panel was created
*/
@ -82,16 +57,12 @@ export interface PanelApi {
* A core api implementation that should be used across all panel-like objects
*/
export class PanelApiImpl extends CompositeDisposable implements PanelApi {
private _state: State = {};
private _isFocused = false;
private _isActive = false;
private _isVisible = true;
private _width = 0;
private _height = 0;
readonly _onDidStateChange = new Emitter<void>();
readonly onDidStateChange: Event<void> = this._onDidStateChange.event;
//
readonly _onDidPanelDimensionChange =
new Emitter<PanelDimensionChangeEvent>({
replay: true,
@ -150,7 +121,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
super();
this.addDisposables(
this._onDidStateChange,
this._onDidPanelDimensionChange,
this._onDidChangeFocus,
this._onDidVisibilityChange,
@ -180,26 +150,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
this._onActiveChange.fire();
}
setState(
key: string | { [key: string]: StateObject },
value?: StateObject
): void {
if (typeof key === 'object') {
this._state = key;
} else if (typeof value !== undefined) {
this._state[key] = value!;
}
this._onDidStateChange.fire(undefined);
}
getState(): State {
return this._state;
}
getStateKey<T extends StateObject>(key: string): T {
return this._state[key] as T;
}
dispose() {
super.dispose();
}

10
packages/dockview/src/dockview/components/tab/defaultTab.scss
View File

@ -22,7 +22,7 @@
}
&.inactive-tab > .default-tab {
.tab-action:not(.dirty) {
.tab-action {
visibility: hidden;
}
&:hover {
@ -74,14 +74,6 @@
&.disable-close {
display: none;
}
&.dirty:not(:hover) {
display: block;
-webkit-mask: var(--dv-tab-dirty-icon) 50% 50% / 60% 60%
no-repeat;
mask: var(--dv-tab-dirty-icon) 50% 50% / 60% 60%
no-repeat;
}
}
}
}

14
packages/dockview/src/dockview/components/tab/defaultTab.ts
View File

@ -1,10 +1,9 @@
import { CompositeDisposable, MutableDisposable } from '../../../lifecycle';
import { CompositeDisposable } from '../../../lifecycle';
import {
ITabRenderer,
GroupPanelPartInitParameters,
} from '../../../groupview/types';
import { addDisposableListener } from '../../../events';
import { toggleClass } from '../../../dom';
import { PanelUpdateEvent } from '../../../panel/types';
import { GroupviewPanel } from '../../../groupview/groupviewPanel';
@ -80,8 +79,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
private action: HTMLElement;
//
private params: GroupPanelPartInitParameters = {} as any;
//
private isDirtyDisposable = new MutableDisposable();
get element() {
return this._element;
@ -94,8 +91,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
constructor() {
super();
this.addDisposables(this.isDirtyDisposable);
this._element = document.createElement('div');
this._element.className = 'default-tab';
//
@ -142,13 +137,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
this.params = params;
this._content.textContent = params.title;
this.isDirtyDisposable.value = this.params.api.onDidDirtyChange(
(event) => {
const isDirty = event;
toggleClass(this.action, 'dirty', isDirty);
}
);
if (!this.params.suppressClosable) {
addDisposableListener(this.action, 'click', (ev) => {
ev.preventDefault(); //

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

@ -15,7 +15,6 @@ import {
ITabRenderer,
IWatermarkRenderer,
} from '../groupview/types';
import { debounce } from '../functions';
import { sequentialNumberGenerator } from '../math';
import { DefaultDeserializer, IPanelDeserializer } from './deserializer';
import { createComponent } from '../panel/componentFactory';
@ -33,7 +32,6 @@ import {
toTarget,
} from '../gridview/baseComponentGridview';
import { DockviewApi } from '../api/component.api';
import { State } from '../api/panelApi';
import { LayoutMouseEvent, MouseEventKind } from '../groupview/tab';
import { Orientation } from '../splitview/core/splitview';
import { DefaultTab } from './components/tab/defaultTab';
@ -122,11 +120,7 @@ export class DockviewComponent
implements IDockviewComponent
{
private readonly _panels = new Map<string, IValueDisposable<IGroupPanel>>();
private readonly dirtyPanels = new Set<IGroupPanel>();
private readonly debouncedDeque = debounce(
this.syncConfigs.bind(this),
5000
);
// events
private readonly _onTabInteractionEvent = new Emitter<LayoutMouseEvent>();
readonly onTabInteractionEvent: Event<LayoutMouseEvent> =
@ -141,7 +135,6 @@ export class DockviewComponent
// everything else
private _deserializer: IPanelDeserializer | undefined;
private panelState: State = {};
private _api: DockviewApi;
private _options: DockviewComponentOptions;
@ -307,11 +300,14 @@ export class DockviewComponent
throw new Error(`panel ${panel.id} already exists`);
}
const disposable = new CompositeDisposable(
panel.onDidStateChange(() => this.addDirtyPanel(panel))
);
this._panels.set(panel.id, { value: panel, disposable });
this._panels.set(panel.id, {
value: panel,
disposable: {
dispose: () => {
/** noop */
},
},
});
}
private unregisterPanel(panel: IGroupPanel): void {
@ -334,15 +330,11 @@ export class DockviewComponent
* @returns A JSON respresentation of the layout
*/
toJSON(): SerializedDockview {
this.syncConfigs();
const data = this.gridview.serialize();
const panels = Array.from(this._panels.values()).reduce(
(collection, panel) => {
if (!this.panelState[panel.value.id]) {
collection[panel.value.id] = panel.value.toJSON();
}
collection[panel.value.id] = panel.value.toJSON();
return collection;
},
{} as { [key: string]: GroupviewPanelState }
@ -736,38 +728,6 @@ export class DockviewComponent
this._onTabInteractionEvent.dispose();
}
/**
* Ensure the local copy of the layout state is up-to-date
*/
private syncConfigs(): void {
const dirtyPanels = Array.from(this.dirtyPanels);
if (dirtyPanels.length === 0) {
//
}
this.dirtyPanels.clear();
const partialPanelState = dirtyPanels
.map((panel) => this._panels.get(panel.id))
.filter((_) => !!_)
.reduce((collection, panel) => {
collection[panel!.value.id] = panel!.value.toJSON();
return collection;
}, {} as State);
this.panelState = {
...this.panelState,
...partialPanelState,
};
dirtyPanels
.filter((p) => this._panels.has(p.id))
.forEach((panel) => {
panel.setDirty(false);
});
}
private _addPanel(options: AddPanelOptions): IGroupPanel {
const view = new DefaultGroupPanelView({
content: this.createContentComponent(options.id, options.component),
@ -831,10 +791,4 @@ export class DockviewComponent
group.value.model.containsPanel(panel)
)?.value;
}
private addDirtyPanel(panel: IGroupPanel): void {
this.dirtyPanels.add(panel);
panel.setDirty(true);
this.debouncedDeque();
}
}

15
packages/dockview/src/dockview/dockviewGroupPanel.ts
View File

@ -1,7 +1,6 @@
import { GroupChangeKind2 } from '../groupview/groupview';
import { DockviewApi } from '../api/component.api';
import { DockviewPanelApiImpl } from '../api/groupPanelApi';
import { Event } from '../events';
import {
GroupPanelUpdateEvent,
GroupviewPanelState,
@ -23,8 +22,6 @@ export class DockviewGroupPanel
private _group: GroupviewPanel | undefined;
private _params?: Parameters;
readonly onDidStateChange: Event<void>;
private _view?: IGroupPanelView;
private _title: string;
@ -55,7 +52,6 @@ export class DockviewGroupPanel
this._title = '';
this.api = new DockviewPanelApiImpl(this, this._group);
this.onDidStateChange = this.api.onDidStateChange;
this.addDisposables(
this.api.onActiveChange(() => {
@ -75,10 +71,6 @@ export class DockviewGroupPanel
this.setTitle(params.title);
this.setSuppressClosable(params.suppressClosable || false);
if (params.state) {
this.api.setState(params.state);
}
this.view?.init({
...params,
api: this.api,
@ -90,10 +82,6 @@ export class DockviewGroupPanel
this.api._onFocusEvent.fire();
}
public setDirty(isDirty: boolean) {
this.api._onDidDirtyChange.fire(isDirty);
}
public close(): Promise<boolean> {
if (this.api.tryClose) {
return this.api.tryClose();
@ -103,8 +91,6 @@ export class DockviewGroupPanel
}
public toJSON(): GroupviewPanelState {
const state = this.api.getState();
return <GroupviewPanelState>{
id: this.id,
view: this.view!.toJSON(),
@ -112,7 +98,6 @@ export class DockviewGroupPanel
Object.keys(this._params || {}).length > 0
? this._params
: undefined,
state: state && Object.keys(state).length > 0 ? state : undefined,
suppressClosable: this.suppressClosable || undefined,
title: this.title,
};

9
packages/dockview/src/functions.ts
View File

@ -1,9 +0,0 @@
export function debounce<T extends Function>(cb: T, wait: number) {
let timeout: any;
const callable = (...args: any) => {
clearTimeout(timeout);
timeout = setTimeout(() => cb(...args), wait);
};
return <T>(<any>callable);
}

4
packages/dockview/src/gridview/basePanelView.ts
View File

@ -12,7 +12,6 @@ export interface BasePanelViewState {
id: string;
component: string;
params?: Record<string, any>;
state?: Record<string, any>;
}
export interface BasePanelViewExported<T extends PanelApiImpl> {
@ -116,15 +115,12 @@ export abstract class BasePanelView<T extends PanelApiImpl>
}
toJSON(): BasePanelViewState {
const state = this.api.getState();
const params = this._params?.params ?? {};
return {
id: this.id,
component: this.component,
params: Object.keys(params).length > 0 ? params : undefined,
state: Object.keys(state).length === 0 ? undefined : state,
};
}

4
packages/dockview/src/groupview/groupPanel.ts
View File

@ -1,5 +1,4 @@
import { DockviewPanelApi } from '../api/groupPanelApi';
import { Event } from '../events';
import { IDisposable } from '../lifecycle';
import { HeaderPartInitParameters } from './types';
import {
@ -30,10 +29,8 @@ export interface IGroupPanel extends IDisposable, IPanel {
readonly title: string;
readonly suppressClosable: boolean;
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void;
setDirty(isDirty: boolean): void;
close?(): Promise<boolean>;
init(params: IGroupPanelInitParameters): void;
onDidStateChange: Event<void>;
toJSON(): GroupviewPanelState;
update(event: GroupPanelUpdateEvent): void;
}
@ -44,5 +41,4 @@ export interface GroupviewPanelState {
title: string;
params?: { [key: string]: any };
suppressClosable?: boolean;
state?: { [key: string]: any };
}

2
packages/dockview/src/index.ts
View File

@ -28,8 +28,6 @@ export * from './react'; // TODO: should be conditional on whether user wants th
export { Position } from './dnd/droptarget';
export {
StateObject,
State,
FocusEvent,
PanelDimensionChangeEvent,
VisibilityEvent,

2
packages/dockview/src/panel/types.ts
View File

@ -1,4 +1,3 @@
import { State } from '../api/panelApi';
import { IDisposable } from '../lifecycle';
import { LayoutPriority } from '../splitview/core/splitview';
@ -11,7 +10,6 @@ export interface Parameters {
export interface PanelInitParameters {
params: Parameters;
state?: State;
}
export interface PanelUpdateEvent<T extends Parameters = Parameters> {

1
packages/dockview/src/paneview/paneviewComponent.ts
View File

@ -36,7 +36,6 @@ export interface SerializedPaneviewPanel {
title: string;
headerComponent?: string;
params?: { [index: string]: any };
state?: { [index: string]: any };
};
size: number;
expanded?: boolean;

2
packages/dockview/src/react/deserializer.ts
View File

@ -14,7 +14,6 @@ export class ReactPanelDeserialzier implements IPanelDeserializer {
const panelId = panelData.id;
const params = panelData.params;
const title = panelData.title;
const state = panelData.state;
const suppressClosable = panelData.suppressClosable;
const viewData = panelData.view;
@ -47,7 +46,6 @@ export class ReactPanelDeserialzier implements IPanelDeserializer {
title,
suppressClosable,
params: params || {},
state: state || {},
});
return panel;

1
packages/dockview/src/splitview/splitviewComponent.ts
View File

@ -23,7 +23,6 @@ export interface SerializedSplitviewPanelData {
minimumSize?: number;
maximumSize?: number;
params?: { [index: string]: any };
state?: { [index: string]: any };
}
export interface SerializedSplitviewPanel {

3
packages/dockview/src/theme.scss
View File

@ -2,10 +2,7 @@
--dv-paneview-active-outline-color: dodgerblue;
--dv-tabs-and-actions-container-font-size: 13px;
--dv-tabs-and-actions-container-height: 35px;
// --dv-tab-close-icon: url('https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg');
// --dv-tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
--dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
--dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');
--dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
--dv-drag-over-border-color: white;
--dv-tabs-container-scrollbar-color: #888;