From 58083bb6a9e6ee00063e752dc33463be2a79ca05 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Thu, 10 Mar 2022 19:53:37 +0000 Subject: [PATCH] feat: remove obsolete functionality IGroupPanel - remove setDirty(isDirty: boolean): void PanelApi - remove onDidStateChange: Event - remove setState(key: string, value: StateObject): void - remove setState(state: State): void - remove getState(): State - remove getStateKey: (key:string) => T --- README.md | 1 - packages/dockview/README.md | 1 - .../dockview/src/__tests__/api/api.spec.ts | 33 +--------- .../src/__tests__/groupview/groupview.spec.ts | 7 -- packages/dockview/src/api/groupPanelApi.ts | 8 +-- packages/dockview/src/api/panelApi.ts | 50 -------------- .../dockview/components/tab/defaultTab.scss | 10 +-- .../src/dockview/components/tab/defaultTab.ts | 14 +--- .../src/dockview/dockviewComponent.ts | 66 +++---------------- .../src/dockview/dockviewGroupPanel.ts | 15 ----- packages/dockview/src/functions.ts | 9 --- .../dockview/src/gridview/basePanelView.ts | 4 -- packages/dockview/src/groupview/groupPanel.ts | 4 -- packages/dockview/src/index.ts | 2 - packages/dockview/src/panel/types.ts | 2 - .../src/paneview/paneviewComponent.ts | 1 - packages/dockview/src/react/deserializer.ts | 2 - .../src/splitview/splitviewComponent.ts | 1 - packages/dockview/src/theme.scss | 3 - 19 files changed, 15 insertions(+), 218 deletions(-) delete mode 100644 packages/dockview/src/functions.ts diff --git a/README.md b/README.md index 5b1a5c20d..c12d7a34a 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/packages/dockview/README.md b/packages/dockview/README.md index 5b1a5c20d..c12d7a34a 100644 --- a/packages/dockview/README.md +++ b/packages/dockview/README.md @@ -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 diff --git a/packages/dockview/src/__tests__/api/api.spec.ts b/packages/dockview/src/__tests__/api/api.spec.ts index 10dc26fb4..647ff98c4 100644 --- a/packages/dockview/src/__tests__/api/api.spec.ts +++ b/packages/dockview/src/__tests__/api/api.spec.ts @@ -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 }); diff --git a/packages/dockview/src/__tests__/groupview/groupview.spec.ts b/packages/dockview/src/__tests__/groupview/groupview.spec.ts index ed80936e0..7a1a7872c 100644 --- a/packages/dockview/src/__tests__/groupview/groupview.spec.ts +++ b/packages/dockview/src/__tests__/groupview/groupview.spec.ts @@ -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(); - 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; } diff --git a/packages/dockview/src/api/groupPanelApi.ts b/packages/dockview/src/api/groupPanelApi.ts index 8a0f34ee7..2dc4a1765 100644 --- a/packages/dockview/src/api/groupPanelApi.ts +++ b/packages/dockview/src/api/groupPanelApi.ts @@ -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; close: () => Promise; interceptOnCloseAction(interceptor: () => Promise): void; setTitle(title: string): void; @@ -34,9 +33,6 @@ export class DockviewPanelApiImpl private _group: GroupviewPanel | undefined; private _interceptor: undefined | (() => Promise); - readonly _onDidDirtyChange = new Emitter(); - readonly onDidDirtyChange = this._onDidDirtyChange.event; - readonly _onDidTitleChange = new Emitter(); 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) { diff --git a/packages/dockview/src/api/panelApi.ts b/packages/dockview/src/api/panelApi.ts index 68ec9d8b7..5609febe9 100644 --- a/packages/dockview/src/api/panelApi.ts +++ b/packages/dockview/src/api/panelApi.ts @@ -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; - readonly onDidStateChange: Event; readonly onDidFocusChange: Event; readonly onDidVisibilityChange: Event; readonly onDidActiveChange: Event; @@ -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: (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(); - readonly onDidStateChange: Event = this._onDidStateChange.event; - // readonly _onDidPanelDimensionChange = new Emitter({ 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(key: string): T { - return this._state[key] as T; - } - dispose() { super.dispose(); } diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.scss b/packages/dockview/src/dockview/components/tab/defaultTab.scss index 412d58a08..d10afffbe 100644 --- a/packages/dockview/src/dockview/components/tab/defaultTab.scss +++ b/packages/dockview/src/dockview/components/tab/defaultTab.scss @@ -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; - } } } } diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.ts b/packages/dockview/src/dockview/components/tab/defaultTab.ts index f9dc814c2..d349ed8a2 100644 --- a/packages/dockview/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview/src/dockview/components/tab/defaultTab.ts @@ -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(); // diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 2641d0799..0bc59136e 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/packages/dockview/src/dockview/dockviewComponent.ts @@ -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>(); - private readonly dirtyPanels = new Set(); - private readonly debouncedDeque = debounce( - this.syncConfigs.bind(this), - 5000 - ); + // events private readonly _onTabInteractionEvent = new Emitter(); readonly onTabInteractionEvent: Event = @@ -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(); - } } diff --git a/packages/dockview/src/dockview/dockviewGroupPanel.ts b/packages/dockview/src/dockview/dockviewGroupPanel.ts index 6e63201d1..c55c49e3e 100644 --- a/packages/dockview/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview/src/dockview/dockviewGroupPanel.ts @@ -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; - 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 { if (this.api.tryClose) { return this.api.tryClose(); @@ -103,8 +91,6 @@ export class DockviewGroupPanel } public toJSON(): GroupviewPanelState { - const state = this.api.getState(); - return { 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, }; diff --git a/packages/dockview/src/functions.ts b/packages/dockview/src/functions.ts deleted file mode 100644 index 5802af94a..000000000 --- a/packages/dockview/src/functions.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function debounce(cb: T, wait: number) { - let timeout: any; - - const callable = (...args: any) => { - clearTimeout(timeout); - timeout = setTimeout(() => cb(...args), wait); - }; - return (callable); -} diff --git a/packages/dockview/src/gridview/basePanelView.ts b/packages/dockview/src/gridview/basePanelView.ts index 00e221141..58ce67eef 100644 --- a/packages/dockview/src/gridview/basePanelView.ts +++ b/packages/dockview/src/gridview/basePanelView.ts @@ -12,7 +12,6 @@ export interface BasePanelViewState { id: string; component: string; params?: Record; - state?: Record; } export interface BasePanelViewExported { @@ -116,15 +115,12 @@ export abstract class BasePanelView } 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, }; } diff --git a/packages/dockview/src/groupview/groupPanel.ts b/packages/dockview/src/groupview/groupPanel.ts index a97514877..9b3179e05 100644 --- a/packages/dockview/src/groupview/groupPanel.ts +++ b/packages/dockview/src/groupview/groupPanel.ts @@ -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; init(params: IGroupPanelInitParameters): void; - onDidStateChange: Event; 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 }; } diff --git a/packages/dockview/src/index.ts b/packages/dockview/src/index.ts index 01b00ddac..17c3e58a9 100644 --- a/packages/dockview/src/index.ts +++ b/packages/dockview/src/index.ts @@ -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, diff --git a/packages/dockview/src/panel/types.ts b/packages/dockview/src/panel/types.ts index 0667a9815..83e067162 100644 --- a/packages/dockview/src/panel/types.ts +++ b/packages/dockview/src/panel/types.ts @@ -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 { diff --git a/packages/dockview/src/paneview/paneviewComponent.ts b/packages/dockview/src/paneview/paneviewComponent.ts index 5d2cbf017..f2aff1b94 100644 --- a/packages/dockview/src/paneview/paneviewComponent.ts +++ b/packages/dockview/src/paneview/paneviewComponent.ts @@ -36,7 +36,6 @@ export interface SerializedPaneviewPanel { title: string; headerComponent?: string; params?: { [index: string]: any }; - state?: { [index: string]: any }; }; size: number; expanded?: boolean; diff --git a/packages/dockview/src/react/deserializer.ts b/packages/dockview/src/react/deserializer.ts index 13d33e010..f9e5a827b 100644 --- a/packages/dockview/src/react/deserializer.ts +++ b/packages/dockview/src/react/deserializer.ts @@ -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; diff --git a/packages/dockview/src/splitview/splitviewComponent.ts b/packages/dockview/src/splitview/splitviewComponent.ts index 26117f4d1..96bf62041 100644 --- a/packages/dockview/src/splitview/splitviewComponent.ts +++ b/packages/dockview/src/splitview/splitviewComponent.ts @@ -23,7 +23,6 @@ export interface SerializedSplitviewPanelData { minimumSize?: number; maximumSize?: number; params?: { [index: string]: any }; - state?: { [index: string]: any }; } export interface SerializedSplitviewPanel { diff --git a/packages/dockview/src/theme.scss b/packages/dockview/src/theme.scss index 0b38ec72d..c574a64a4 100644 --- a/packages/dockview/src/theme.scss +++ b/packages/dockview/src/theme.scss @@ -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,'); - --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,'); --dv-drag-over-background-color: rgba(83, 89, 93, 0.5); --dv-drag-over-border-color: white; --dv-tabs-container-scrollbar-color: #888;