From 2fe3f53ac1571d71af121224381efd55a764a1bc Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 25 May 2022 22:32:07 +0100 Subject: [PATCH 1/2] feat: fix styles --- packages/dockview/src/paneview/defaultPaneviewHeader.ts | 7 +++++-- packages/dockview/src/paneview/paneview.scss | 6 +++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/dockview/src/paneview/defaultPaneviewHeader.ts b/packages/dockview/src/paneview/defaultPaneviewHeader.ts index f47f8f197..6f42b7db1 100644 --- a/packages/dockview/src/paneview/defaultPaneviewHeader.ts +++ b/packages/dockview/src/paneview/defaultPaneviewHeader.ts @@ -3,6 +3,7 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi'; import { CompositeDisposable, MutableDisposable } from '../lifecycle'; import { PanelUpdateEvent } from '../panel/types'; import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel'; +import { toggleClass } from '../dom'; export class DefaultHeader extends CompositeDisposable @@ -40,10 +41,12 @@ export class DefaultHeader this.apiRef.api = params.api; this._content.textContent = params.title; - this._expander.textContent = params.api.isExpanded ? '▼' : '▶'; + this._expander.textContent = '▼'; + + toggleClass(this._expander, 'collapsed', !params.api.isExpanded); this.disposable.value = params.api.onDidExpansionChange((e) => { - this._expander.textContent = e.isExpanded ? '▼' : '▶'; + toggleClass(this._expander, 'collapsed', !e.isExpanded); }); } diff --git a/packages/dockview/src/paneview/paneview.scss b/packages/dockview/src/paneview/paneview.scss index f4e2a9f19..77ab3a40c 100644 --- a/packages/dockview/src/paneview/paneview.scss +++ b/packages/dockview/src/paneview/paneview.scss @@ -31,12 +31,12 @@ padding: 0px 8px; cursor: pointer; - a { - padding-right: 8px; - width: 10px; + .collapsed { + transform: rotate(-90deg); } > span { + padding-left: 8px; flex-grow: 1; } } From 84463e42408024ee46bdb34fbd35c42fff1328ed Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 25 May 2022 22:19:59 +0100 Subject: [PATCH 2/2] feat: add clear method and fix .orientation setter --- .../gridview/baseComponentGridview.spec.ts | 4 ++ packages/dockview/src/api/component.api.ts | 17 +++++++ .../src/dockview/dockviewComponent.ts | 46 ++++++++++--------- .../src/gridview/baseComponentGridview.ts | 3 ++ .../src/gridview/gridviewComponent.ts | 36 ++++++++------- .../src/paneview/paneviewComponent.ts | 19 +++++--- .../src/splitview/splitviewComponent.ts | 19 +++++--- 7 files changed, 93 insertions(+), 51 deletions(-) diff --git a/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts b/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts index 896f67961..2019d8f3a 100644 --- a/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts +++ b/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts @@ -100,6 +100,10 @@ class ClassUnderTest extends BaseGrid { public toJSON(): object { return {}; } + + public clear(): void { + // + } } describe('baseComponentGridview', () => { diff --git a/packages/dockview/src/api/component.api.ts b/packages/dockview/src/api/component.api.ts index 3ae9cedf1..5802a546b 100644 --- a/packages/dockview/src/api/component.api.ts +++ b/packages/dockview/src/api/component.api.ts @@ -43,6 +43,7 @@ export interface CommonApi { layout(width: number, height: number): void; fromJSON(data: T): void; toJSON(): T; + clear(): void; } export class SplitviewApi implements CommonApi { @@ -127,6 +128,10 @@ export class SplitviewApi implements CommonApi { toJSON(): SerializedSplitview { return this.component.toJSON(); } + + clear(): void { + this.component.clear(); + } } export class PaneviewApi implements CommonApi { @@ -214,6 +219,10 @@ export class PaneviewApi implements CommonApi { toJSON(): SerializedPaneview { return this.component.toJSON(); } + + clear(): void { + this.component.clear(); + } } export class GridviewApi implements CommonApi { @@ -309,6 +318,10 @@ export class GridviewApi implements CommonApi { toJSON(): SerializedGridview { return this.component.toJSON(); } + + clear(): void { + this.component.clear(); + } } export class DockviewApi implements CommonApi { @@ -453,4 +466,8 @@ export class DockviewApi implements CommonApi { toJSON(): SerializedDockview { return this.component.toJSON(); } + + clear(): void { + this.component.clear(); + } } diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 819a0af7b..c3b631ff9 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/packages/dockview/src/dockview/dockviewComponent.ts @@ -125,7 +125,7 @@ export class DockviewComponent { private _deserializer: IPanelDeserializer | undefined; private _api: DockviewApi; - private _options: DockviewComponentOptions; + private _options: Exclude; private readonly _onTabContextMenu = new Emitter(); readonly onTabContextMenu: Event = @@ -237,7 +237,7 @@ export class DockviewComponent updateOptions(options: DockviewComponentUpdateOptions): void { const hasOrientationChanged = typeof options.orientation === 'string' && - this.options.orientation !== options.orientation; + this.gridview.orientation !== options.orientation; this._options = { ...this.options, ...options }; @@ -333,25 +333,7 @@ export class DockviewComponent } fromJSON(data: SerializedDockview): void { - const groups = Array.from(this._groups.values()).map((_) => _.value); - - const hasActiveGroup = !!this.activeGroup; - const hasActivePanel = !!this.activePanel - - for (const group of groups) { - // remove the group will automatically remove the panels - this.removeGroup(group, true); - } - - if (hasActiveGroup) { - this.doSetGroupActive(undefined); - } - - if( hasActivePanel) { - this._onDidActivePanelChange.fire(undefined); - } - - this.gridview.clear(); + this.clear() if (!this.deserializer) { throw new Error('invalid deserializer'); @@ -414,6 +396,28 @@ export class DockviewComponent this._onDidLayoutFromJSON.fire(); } + clear():void { + const groups = Array.from(this._groups.values()).map((_) => _.value); + + const hasActiveGroup = !!this.activeGroup; + const hasActivePanel = !!this.activePanel + + for (const group of groups) { + // remove the group will automatically remove the panels + this.removeGroup(group, true); + } + + if (hasActiveGroup) { + this.doSetGroupActive(undefined); + } + + if( hasActivePanel) { + this._onDidActivePanelChange.fire(undefined); + } + + this.gridview.clear(); + } + closeAllGroups(): void { for (const entry of this._groups.entries()) { const [_, group] = entry; diff --git a/packages/dockview/src/gridview/baseComponentGridview.ts b/packages/dockview/src/gridview/baseComponentGridview.ts index fddc69392..58399c1e1 100644 --- a/packages/dockview/src/gridview/baseComponentGridview.ts +++ b/packages/dockview/src/gridview/baseComponentGridview.ts @@ -61,6 +61,7 @@ export interface IBaseGrid { getPanel(id: string): T | undefined; toJSON(): object; fromJSON(data: any): void; + clear(): void; layout(width: number, height: number, force?: boolean): void; setVisible(panel: T, visible: boolean): void; isVisible(panel: T): boolean; @@ -173,6 +174,8 @@ export abstract class BaseGrid public abstract fromJSON(data: any): void; + public abstract clear(): void; + public setVisible(panel: T, visible: boolean) { this.gridview.setViewVisible(getGridLocation(panel.element), visible); this._onDidLayoutChange.fire(); diff --git a/packages/dockview/src/gridview/gridviewComponent.ts b/packages/dockview/src/gridview/gridviewComponent.ts index c9bbe6ba4..daf7ce013 100644 --- a/packages/dockview/src/gridview/gridviewComponent.ts +++ b/packages/dockview/src/gridview/gridviewComponent.ts @@ -78,7 +78,7 @@ export class GridviewComponent extends BaseGrid implements IGridviewComponent { - private _options: GridviewComponentOptions; + private _options: Exclude; private _deserializer: IPanelDeserializer | undefined; private readonly _onDidLayoutfromJSON = new Emitter(); @@ -124,7 +124,7 @@ export class GridviewComponent updateOptions(options: Partial): void { const hasOrientationChanged = typeof options.orientation === 'string' && - this.options.orientation !== options.orientation; + this.gridview.orientation !== options.orientation; this._options = { ...this.options, ...options }; @@ -173,22 +173,10 @@ export class GridviewComponent } public fromJSON(serializedGridview: SerializedGridview) { + this.clear(); + const { grid, activePanel } = serializedGridview; - const hasActiveGroup = this.activeGroup; - - const groups = Array.from(this._groups.values()); // reassign since group panels will mutate - for (const group of groups) { - group.disposable.dispose(); - this.doRemoveGroup(group.value, { skipActive: true }); - } - - if (hasActiveGroup) { - this.doSetGroupActive(undefined); - } - - this.gridview.clear(); - const queue: Function[] = []; this.gridview.deserialize(grid, { @@ -244,6 +232,22 @@ export class GridviewComponent this._onDidLayoutfromJSON.fire(); } + clear(): void { + const hasActiveGroup = this.activeGroup; + + const groups = Array.from(this._groups.values()); // reassign since group panels will mutate + for (const group of groups) { + group.disposable.dispose(); + this.doRemoveGroup(group.value, { skipActive: true }); + } + + if (hasActiveGroup) { + this.doSetGroupActive(undefined); + } + + this.gridview.clear(); + } + movePanel( panel: GridviewPanel, options: { direction: Direction; reference: string; size?: number } diff --git a/packages/dockview/src/paneview/paneviewComponent.ts b/packages/dockview/src/paneview/paneviewComponent.ts index 9ee70d861..9e9eafcd4 100644 --- a/packages/dockview/src/paneview/paneviewComponent.ts +++ b/packages/dockview/src/paneview/paneviewComponent.ts @@ -113,6 +113,7 @@ export interface IPaneviewComponent extends IDisposable { getPanel(id: string): IPaneviewPanel | undefined; movePanel(from: number, to: number): void; updateOptions(options: Partial): void; + clear(): void; } export class PaneviewComponent @@ -343,17 +344,12 @@ export class PaneviewComponent } fromJSON(serializedPaneview: SerializedPaneview): void { + this.clear(); + const { views, size } = serializedPaneview; const queue: Function[] = []; - for (const [_, value] of this._viewDisposables.entries()) { - value.dispose(); - } - this._viewDisposables.clear(); - - this.paneview.dispose(); - this.paneview = new Paneview(this.element, { orientation: Orientation.VERTICAL, descriptor: { @@ -437,6 +433,15 @@ export class PaneviewComponent this._onDidLayoutfromJSON.fire(); } + clear(): void { + for (const [_, value] of this._viewDisposables.entries()) { + value.dispose(); + } + this._viewDisposables.clear(); + + this.paneview.dispose(); + } + private doAddPanel(panel: PaneFramework) { const disposable = panel.onDidDrop((event) => { this._onDidDrop.fire(event); diff --git a/packages/dockview/src/splitview/splitviewComponent.ts b/packages/dockview/src/splitview/splitviewComponent.ts index d802ca4e0..1fb23846b 100644 --- a/packages/dockview/src/splitview/splitviewComponent.ts +++ b/packages/dockview/src/splitview/splitviewComponent.ts @@ -72,6 +72,7 @@ export interface ISplitviewComponent extends IDisposable { removePanel(panel: ISplitviewPanel, sizing?: Sizing): void; setVisible(panel: ISplitviewPanel, visible: boolean): void; movePanel(from: number, to: number): void; + clear(): void; } /** @@ -334,14 +335,9 @@ export class SplitviewComponent } fromJSON(serializedSplitview: SerializedSplitview): void { - const { views, orientation, size, activeView } = serializedSplitview; + this.clear(); - for (const [_, value] of this._panels.entries()) { - value.disposable.dispose(); - value.value.dispose(); - } - this._panels.clear(); - this.splitview.dispose(); + const { views, orientation, size, activeView } = serializedSplitview; const queue: Function[] = []; @@ -409,6 +405,15 @@ export class SplitviewComponent this._onDidLayoutfromJSON.fire(); } + clear(): void { + for (const [_, value] of this._panels.entries()) { + value.disposable.dispose(); + value.value.dispose(); + } + this._panels.clear(); + this.splitview.dispose(); + } + dispose(): void { for (const [_, value] of this._panels.entries()) { value.disposable.dispose();