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

Merge pull request #112 from mathuo/111-api-improvements

Browse Source 
feat: fix typo
This commit is contained in:
mathuo 2022-05-21 20:28:17 +01:00 committed by GitHub
commit 87d474d11b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 71 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview/src/__tests__/api/component.api.spec.ts
View File

@ -134,7 +134,7 @@ describe('component.api', () => {
'onDidActivePanelChange', 'onDidActivePanelChange',
'onDidAddPanel', 'onDidAddPanel',
'onDidRemovePanel', 'onDidRemovePanel',
'onDidLayoutfromJSON', 'onDidLayoutFromJSON',
]; ];
for (const _ of list) { for (const _ of list) {

12
packages/dockview/src/__tests__/api/groupPanelApi.spec.ts
View File

@ -1,4 +1,4 @@
import { IDockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewComponent } from '../../dockview/dockviewComponent';
import { DockviewPanelApiImpl, TitleEvent } from '../../api/groupPanelApi'; import { DockviewPanelApiImpl, TitleEvent } from '../../api/groupPanelApi';
import { IDockviewPanel } from '../../groupview/groupPanel'; import { IDockviewPanel } from '../../groupview/groupPanel';
import { GroupPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
@ -10,9 +10,9 @@ describe('groupPanelApi', () => {
title: 'test_title', title: 'test_title',
}; };
const accessor: Partial<IDockviewComponent> = {}; const accessor: Partial<DockviewComponent> = {};
const groupViewPanel = new GroupPanel( const groupViewPanel = new GroupPanel(
<IDockviewComponent>accessor, <DockviewComponent>accessor,
'', '',
{} {}
); );
@ -44,9 +44,9 @@ describe('groupPanelApi', () => {
id: 'test_id', id: 'test_id',
}; };
const accessor: Partial<IDockviewComponent> = {}; const accessor: Partial<DockviewComponent> = {};
const groupViewPanel = new GroupPanel( const groupViewPanel = new GroupPanel(
<IDockviewComponent>accessor, <DockviewComponent>accessor,
'', '',
{} {}
); );
@ -66,7 +66,7 @@ describe('groupPanelApi', () => {
expect(cut.group).toBe(groupViewPanel); expect(cut.group).toBe(groupViewPanel);
const groupViewPanel2 = new GroupPanel( const groupViewPanel2 = new GroupPanel(
<IDockviewComponent>accessor, <DockviewComponent>accessor,
'', '',
{} {}
); );

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

@ -1,7 +1,4 @@
import { import { DockviewComponent } from '../../dockview/dockviewComponent';
DockviewComponent,
IDockviewComponent,
} from '../../dockview/dockviewComponent';
import { import {
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IContentRenderer, IContentRenderer,
@ -153,7 +150,7 @@ class TestGroupPanel implements IDockviewPanel {
constructor( constructor(
public readonly id: string, public readonly id: string,
public readonly title: string, public readonly title: string,
accessor: IDockviewComponent accessor: DockviewComponent
) { ) {
this.api = new DockviewPanelApiImpl(this, this._group); this.api = new DockviewPanelApiImpl(this, this._group);
this._group = new GroupPanel(accessor, id, {}); this._group = new GroupPanel(accessor, id, {});

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

@ -1,7 +1,4 @@
import { import { DockviewComponent } from '../../dockview/dockviewComponent';
IDockviewComponent,
DockviewComponent,
} from '../../dockview/dockviewComponent';
import { import {
GroupviewPanelState, GroupviewPanelState,
IDockviewPanel, IDockviewPanel,
@ -210,7 +207,7 @@ class TestPanel implements IDockviewPanel {
describe('groupview', () => { describe('groupview', () => {
let groupview: GroupPanel; let groupview: GroupPanel;
let dockview: IDockviewComponent; let dockview: DockviewComponent;
let options: GroupOptions; let options: GroupOptions;
let removePanelMock: jest.Mock; let removePanelMock: jest.Mock;
@ -528,7 +525,7 @@ describe('groupview', () => {
}); });
test("that openPanel with skipSetActive doesn't set panel to active", () => { test("that openPanel with skipSetActive doesn't set panel to active", () => {
const dockviewComponent: IDockviewComponent = new DockviewComponent( const dockviewComponent = new DockviewComponent(
document.createElement('div'), document.createElement('div'),
{ {
components: { components: {

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

@ -369,7 +369,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
} }
get onDidLayoutFromJSON(): Event<void> { get onDidLayoutFromJSON(): Event<void> {
return this.component.onDidLayoutfromJSON; return this.component.onDidLayoutFromJSON;
} }
get onDidLayoutChange(): Event<void> { get onDidLayoutChange(): Event<void> {

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

@ -63,7 +63,7 @@ export interface SerializedDockview {
} }
export type DockviewComponentUpdateOptions = Pick< export type DockviewComponentUpdateOptions = Pick<
DockviewComponentOptions, DockviewComponentOptions,
| 'orientation' | 'orientation'
| 'components' | 'components'
| 'frameworkComponents' | 'frameworkComponents'
@ -98,13 +98,11 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
addPanel(options: AddPanelOptions): IDockviewPanel; addPanel(options: AddPanelOptions): IDockviewPanel;
removePanel(panel: IDockviewPanel): void; removePanel(panel: IDockviewPanel): void;
getGroupPanel: (id: string) => IDockviewPanel | undefined; getGroupPanel: (id: string) => IDockviewPanel | undefined;
fireMouseEvent(event: LayoutMouseEvent): void;
createWatermarkComponent(): IWatermarkRenderer; createWatermarkComponent(): IWatermarkRenderer;
// lifecycle // lifecycle
addEmptyGroup(options?: AddGroupOptions): void; addEmptyGroup(options?: AddGroupOptions): void;
closeAllGroups(): void; closeAllGroups(): void;
// events // events
onTabInteractionEvent: Event<LayoutMouseEvent>;
onTabContextMenu: Event<TabContextMenuEvent>; onTabContextMenu: Event<TabContextMenuEvent>;
moveToNext(options?: MovementOptions): void; moveToNext(options?: MovementOptions): void;
moveToPrevious(options?: MovementOptions): void; moveToPrevious(options?: MovementOptions): void;
@ -115,7 +113,7 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
// //
readonly onDidRemovePanel: Event<IDockviewPanel>; readonly onDidRemovePanel: Event<IDockviewPanel>;
readonly onDidAddPanel: Event<IDockviewPanel>; readonly onDidAddPanel: Event<IDockviewPanel>;
readonly onDidLayoutfromJSON: Event<void>; readonly onDidLayoutFromJSON: Event<void>;
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>; readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
} }
@ -127,11 +125,6 @@ export class DockviewComponent
private _api: DockviewApi; private _api: DockviewApi;
private _options: DockviewComponentOptions; private _options: DockviewComponentOptions;
// events
private readonly _onTabInteractionEvent = new Emitter<LayoutMouseEvent>();
readonly onTabInteractionEvent: Event<LayoutMouseEvent> =
this._onTabInteractionEvent.event;
private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>(); private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>();
readonly onTabContextMenu: Event<TabContextMenuEvent> = readonly onTabContextMenu: Event<TabContextMenuEvent> =
this._onTabContextMenu.event; this._onTabContextMenu.event;
@ -147,7 +140,7 @@ export class DockviewComponent
readonly onDidAddPanel: Event<IDockviewPanel> = this._onDidAddPanel.event; readonly onDidAddPanel: Event<IDockviewPanel> = this._onDidAddPanel.event;
private readonly _onDidLayoutfromJSON = new Emitter<void>(); private readonly _onDidLayoutfromJSON = new Emitter<void>();
readonly onDidLayoutfromJSON: Event<void> = this._onDidLayoutfromJSON.event; readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutfromJSON.event;
private readonly _onDidActivePanelChange = new Emitter< private readonly _onDidActivePanelChange = new Emitter<
IDockviewPanel | undefined IDockviewPanel | undefined
@ -204,7 +197,6 @@ export class DockviewComponent
}); });
this.addDisposables( this.addDisposables(
this._onTabInteractionEvent,
this._onTabContextMenu, this._onTabContextMenu,
this._onDidDrop, this._onDidDrop,
Event.any( Event.any(
@ -278,9 +270,7 @@ export class DockviewComponent
if (options.includePanel && options.group) { if (options.includePanel && options.group) {
if ( if (
options.group.activePanel !== options.group.activePanel !==
options.group.panels[ options.group.panels[options.group.panels.length - 1]
options.group.panels.length - 1
]
) { ) {
options.group.model.moveToNext({ suppressRoll: true }); options.group.model.moveToNext({ suppressRoll: true });
return; return;
@ -288,7 +278,7 @@ export class DockviewComponent
} }
const location = getGridLocation(options.group.element); const location = getGridLocation(options.group.element);
const next = <GroupPanel>this.gridview.next(location)?.view const next = <GroupPanel>this.gridview.next(location)?.view;
this.doSetGroupActive(next); this.doSetGroupActive(next);
} }
@ -301,10 +291,7 @@ export class DockviewComponent
} }
if (options.includePanel && options.group) { if (options.includePanel && options.group) {
if ( if (options.group.activePanel !== options.group.panels[0]) {
options.group.activePanel !==
options.group.panels[0]
) {
options.group.model.moveToPrevious({ suppressRoll: true }); options.group.model.moveToPrevious({ suppressRoll: true });
return; return;
} }
@ -362,14 +349,14 @@ export class DockviewComponent
} }
this.gridview.deserialize( this.gridview.deserialize(
grid, grid,
new DefaultDeserializer(this, { new DefaultDeserializer(this, {
createPanel: (id, group) => { createPanel: (id, group) => {
const panelData = panels[id]; const panelData = panels[id];
return this.deserializer!.fromJSON(panelData, group); return this.deserializer!.fromJSON(panelData, group);
}, },
}) })
); );
if (typeof activeGroup === 'string') { if (typeof activeGroup === 'string') {
const panel = this.getPanel(activeGroup); const panel = this.getPanel(activeGroup);
@ -411,27 +398,27 @@ export class DockviewComponent
let referenceGroup: GroupPanel | undefined; let referenceGroup: GroupPanel | undefined;
if (options.position?.referencePanel) { if (options.position?.referencePanel) {
const referencePanel = this.getGroupPanel( const referencePanel = this.getGroupPanel(
options.position.referencePanel options.position.referencePanel
); );
if (!referencePanel) { if (!referencePanel) {
throw new Error( throw new Error(
`referencePanel ${options.position.referencePanel} does not exist` `referencePanel ${options.position.referencePanel} does not exist`
); );
} }
referenceGroup = this.findGroup(referencePanel); referenceGroup = this.findGroup(referencePanel);
} else { } else {
referenceGroup = this.activeGroup; referenceGroup = this.activeGroup;
} }
let panel: IDockviewPanel let panel: IDockviewPanel;
if (referenceGroup) { if (referenceGroup) {
const target = toTarget(options.position?.direction || 'within'); const target = toTarget(options.position?.direction || 'within');
if (target === Position.Center) { if (target === Position.Center) {
panel = this.createPanel(options, referenceGroup) panel = this.createPanel(options, referenceGroup);
referenceGroup.model.openPanel(panel); referenceGroup.model.openPanel(panel);
} else { } else {
const location = getGridLocation(referenceGroup.element); const location = getGridLocation(referenceGroup.element);
@ -441,13 +428,13 @@ export class DockviewComponent
target target
); );
const group = this.createGroupAtLocation(relativeLocation); const group = this.createGroupAtLocation(relativeLocation);
panel = this.createPanel(options, group) panel = this.createPanel(options, group);
group.model.openPanel(panel); group.model.openPanel(panel);
} }
} else { } else {
const group = this.createGroupAtLocation(); const group = this.createGroupAtLocation();
panel = this.createPanel(options, group); panel = this.createPanel(options, group);
group.model.openPanel(panel); group.model.openPanel(panel);
} }
return panel; return panel;
@ -624,25 +611,25 @@ export class DockviewComponent
target target
); );
const group = this.createGroupAtLocation( dropLocation); const group = this.createGroupAtLocation(dropLocation);
group.model.openPanel(groupItem); group.model.openPanel(groupItem);
} }
} }
} }
override doSetGroupActive( override doSetGroupActive(
group: GroupPanel | undefined, group: GroupPanel | undefined,
skipFocus?: boolean skipFocus?: boolean
): void { ): void {
const isGroupAlreadyFocused = this._activeGroup === group; const isGroupAlreadyFocused = this._activeGroup === group;
super.doSetGroupActive(group, skipFocus); super.doSetGroupActive(group, skipFocus);
if (!isGroupAlreadyFocused && this._activeGroup?.activePanel) { if (!isGroupAlreadyFocused && this._activeGroup?.activePanel) {
this._onDidActivePanelChange.fire( this._onDidActivePanelChange.fire(
this._activeGroup?.activePanel this._activeGroup?.activePanel
); );
} }
} }
createGroup(options?: GroupOptions): GroupPanel { createGroup(options?: GroupOptions): GroupPanel {
if (!options) { if (!options) {
@ -713,13 +700,21 @@ export class DockviewComponent
return view; return view;
} }
private createPanel(options: AddPanelOptions, group: GroupPanel): IDockviewPanel { private createPanel(
options: AddPanelOptions,
group: GroupPanel
): IDockviewPanel {
const view = new DefaultGroupPanelView({ const view = new DefaultGroupPanelView({
content: this.createContentComponent(options.id, options.component), content: this.createContentComponent(options.id, options.component),
tab: this.createTabComponent(options.id, options.tabComponent), tab: this.createTabComponent(options.id, options.tabComponent),
}); });
const panel = new DockviewGroupPanel(options.id, this, this._api, group); const panel = new DockviewGroupPanel(
options.id,
this,
this._api,
group
);
panel.init({ panel.init({
view, view,
title: options.title || options.id, title: options.title || options.id,
@ -757,12 +752,10 @@ export class DockviewComponent
); );
} }
private createGroupAtLocation( private createGroupAtLocation(location: number[] = [0]): GroupPanel {
location: number[] = [0]
): GroupPanel {
const group = this.createGroup(); const group = this.createGroup();
this.doAddGroup(group, location); this.doAddGroup(group, location);
return group return group;
} }
private findGroup(panel: IDockviewPanel): GroupPanel | undefined { private findGroup(panel: IDockviewPanel): GroupPanel | undefined {

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

@ -20,7 +20,6 @@ export interface BasePanelViewExported<T extends PanelApiImpl> {
readonly width: number; readonly width: number;
readonly height: number; readonly height: number;
readonly params: Record<string, any> | undefined; readonly params: Record<string, any> | undefined;
focus(): void;
toJSON(): object; toJSON(): object;
update(event: PanelUpdateEvent): void; update(event: PanelUpdateEvent): void;
} }

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

@ -1,7 +1,7 @@
import { DockviewApi } from '../api/component.api'; import { DockviewApi } from '../api/component.api';
import { getPanelData, PanelTransfer } from '../dnd/dataTransfer'; import { getPanelData, PanelTransfer } from '../dnd/dataTransfer';
import { Droptarget, Position } from '../dnd/droptarget'; import { Droptarget, Position } from '../dnd/droptarget';
import { IDockviewComponent } from '../dockview/dockviewComponent'; import { DockviewComponent } from '../dockview/dockviewComponent';
import { isAncestor, toggleClass } from '../dom'; import { isAncestor, toggleClass } from '../dom';
import { addDisposableListener, Emitter, Event } from '../events'; import { addDisposableListener, Emitter, Event } from '../events';
import { IGridPanelView } from '../gridview/baseComponentGridview'; import { IGridPanelView } from '../gridview/baseComponentGridview';
@ -217,7 +217,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
constructor( constructor(
private readonly container: HTMLElement, private readonly container: HTMLElement,
private accessor: IDockviewComponent, private accessor: DockviewComponent,
public id: string, public id: string,
private readonly options: GroupOptions, private readonly options: GroupOptions,
private readonly parent: GroupPanel private readonly parent: GroupPanel

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

@ -1,5 +1,5 @@
import { IFrameworkPart } from '../panel/types'; import { IFrameworkPart } from '../panel/types';
import { IDockviewComponent } from '../dockview/dockviewComponent'; import { DockviewComponent } from '../dockview/dockviewComponent';
import { import {
GridviewPanelApi, GridviewPanelApi,
GridviewPanelApiImpl, GridviewPanelApiImpl,
@ -70,7 +70,7 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel {
} }
constructor( constructor(
accessor: IDockviewComponent, accessor: DockviewComponent,
id: string, id: string,
options: GroupOptions options: GroupOptions
) { ) {

4
packages/dockview/src/groupview/titlebar/tabsContainer.ts
View File

@ -7,7 +7,7 @@ import { addDisposableListener, Emitter, Event } from '../../events';
import { ITab, MouseEventKind, Tab } from '../tab'; import { ITab, MouseEventKind, Tab } from '../tab';
import { last } from '../../array'; import { last } from '../../array';
import { IDockviewPanel } from '../groupPanel'; import { IDockviewPanel } from '../groupPanel';
import { IDockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewComponent } from '../../dockview/dockviewComponent';
import { getPanelData } from '../../dnd/dataTransfer'; import { getPanelData } from '../../dnd/dataTransfer';
import { GroupPanel } from '../groupviewPanel'; import { GroupPanel } from '../groupviewPanel';
import { Droptarget } from '../../dnd/droptarget'; import { Droptarget } from '../../dnd/droptarget';
@ -138,7 +138,7 @@ export class TabsContainer
} }
constructor( constructor(
private accessor: IDockviewComponent, private accessor: DockviewComponent,
private group: GroupPanel, private group: GroupPanel,
options: { tabHeight?: number } options: { tabHeight?: number }
) { ) {