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

feat: api changes

Browse Source
This commit is contained in:
mathuo 2022-04-28 21:41:36 +01:00
parent 15ccdfa3c0
commit 7f0786dd7a
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
7 changed files with 93 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dockview/src/__tests__/dnd/droptarget.spec.ts
View File

@ -20,6 +20,11 @@ describe('droptarget', () => {
beforeEach(() => {
element = document.createElement('div');
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
});
test('non-directional', () => {

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

@ -21,7 +21,7 @@ import { createComponent } from '../panel/componentFactory';
import {
AddGroupOptions,
AddPanelOptions,
DockviewOptions as DockviewComponentOptions,
DockviewComponentOptions,
MovementOptions,
TabContextMenuEvent,
} from './options';
@ -63,7 +63,7 @@ export interface SerializedDockview {
}
export type DockviewComponentUpdateOptions = Pick<
DockviewComponentOptions,
DockviewComponentOptions,
| 'orientation'
| 'components'
| 'frameworkComponents'
@ -160,7 +160,7 @@ export class DockviewComponent
}
get panels(): IGroupPanel[] {
return this.groups.flatMap((group) => group.model.panels);
return this.groups.flatMap((group) => group.panels);
}
get deserializer(): IPanelDeserializer | undefined {
@ -182,7 +182,7 @@ export class DockviewComponent
return undefined;
}
return activeGroup.model.activePanel;
return activeGroup.activePanel;
}
set tabHeight(height: number | undefined) {
@ -280,9 +280,9 @@ export class DockviewComponent
if (options.includePanel && options.group) {
if (
options.group.model.activePanel !==
options.group.model.panels[
options.group.model.panels.length - 1
options.group.activePanel !==
options.group.panels[
options.group.panels.length - 1
]
) {
options.group.model.moveToNext({ suppressRoll: true });
@ -291,7 +291,7 @@ export class DockviewComponent
}
const location = getGridLocation(options.group.element);
const next = this.gridview.next(location)?.view as GroupviewPanel;
const next = <GroupviewPanel>this.gridview.next(location)?.view
this.doSetGroupActive(next);
}
@ -305,8 +305,8 @@ export class DockviewComponent
if (options.includePanel && options.group) {
if (
options.group.model.activePanel !==
options.group.model.panels[0]
options.group.activePanel !==
options.group.panels[0]
) {
options.group.model.moveToPrevious({ suppressRoll: true });
return;
@ -474,7 +474,7 @@ export class DockviewComponent
if (
!retainGroupForWatermark &&
group.model.size === 0 &&
group.size === 0 &&
options.removeEmptyGroup
) {
this.removeGroup(group);
@ -532,7 +532,7 @@ export class DockviewComponent
}
removeGroup(group: GroupviewPanel, skipActive = false): void {
const panels = [...group.model.panels]; // reassign since group panels will mutate
const panels = [...group.panels]; // reassign since group panels will mutate
for (const panel of panels) {
this.removePanel(panel, {
@ -577,7 +577,7 @@ export class DockviewComponent
target
);
if (sourceGroup && sourceGroup.model.size < 2) {
if (sourceGroup && sourceGroup.size < 2) {
const [targetParentLocation, to] = tail(targetLocation);
const sourceLocation = getGridLocation(sourceGroup.element);
const [sourceParentLocation, from] = tail(sourceLocation);
@ -634,9 +634,9 @@ export class DockviewComponent
const isGroupAlreadyFocused = this._activeGroup === group;
super.doSetGroupActive(group, skipFocus);
if (!isGroupAlreadyFocused && this._activeGroup?.model.activePanel) {
if (!isGroupAlreadyFocused && this._activeGroup?.activePanel) {
this._onDidActivePanelChange.fire(
this._activeGroup?.model.activePanel
this._activeGroup?.activePanel
);
}
}

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

@ -49,7 +49,7 @@ export interface ViewFactoryData {
tab?: string;
}
export interface DockviewOptions extends DockviewRenderFunctions {
export interface DockviewComponentOptions extends DockviewRenderFunctions {
watermarkComponent?: WatermarkConstructor;
watermarkFrameworkComponent?: any;
frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;

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

@ -1,5 +1,5 @@
import { DockviewApi } from '../api/component.api';
import { getPanelData } from '../dnd/dataTransfer';
import { getPanelData, PanelTransfer } from '../dnd/dataTransfer';
import { Droptarget, Position } from '../dnd/droptarget';
import { IDockviewComponent } from '../dockview/dockviewComponent';
import { isAncestor, toggleClass } from '../dom';
@ -74,6 +74,7 @@ export interface GroupviewChangeEvent {
export interface GroupviewDropEvent {
nativeEvent: DragEvent;
position: Position;
getData(): PanelTransfer | undefined;
index?: number;
}
@ -87,9 +88,12 @@ export interface IGroupview extends IDisposable, IGridPanelView {
readonly size: number;
readonly panels: IGroupPanel[];
readonly activePanel: IGroupPanel | undefined;
locked: boolean;
readonly header: IHeader;
readonly isContentFocused: boolean;
readonly onDidDrop: Event<GroupviewDropEvent>;
readonly onDidGroupChange: Event<GroupviewChangeEvent>;
readonly onMove: Event<GroupMoveEvent>;
locked: boolean;
// state
isPanelActive: (panel: IGroupPanel) => boolean;
indexOf(panel: IGroupPanel): number;
@ -102,16 +106,11 @@ export interface IGroupview extends IDisposable, IGridPanelView {
closeAllPanels(): void;
containsPanel(panel: IGroupPanel): boolean;
removePanel: (panelOrId: IGroupPanel | string) => IGroupPanel;
// events
onDidGroupChange: Event<GroupviewChangeEvent>;
onMove: Event<GroupMoveEvent>;
moveToNext(options?: { panel?: IGroupPanel; suppressRoll?: boolean }): void;
moveToPrevious(options?: {
panel?: IGroupPanel;
suppressRoll?: boolean;
}): void;
isContentFocused(): boolean;
updateActions(): void;
canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean;
}
@ -203,6 +202,16 @@ export class Groupview extends CompositeDisposable implements IGroupview {
return this.tabsContainer;
}
get isContentFocused(): boolean {
if (!document.activeElement) {
return false;
}
return isAncestor(
document.activeElement,
this.contentContainer.element
);
}
constructor(
private readonly container: HTMLElement,
private accessor: IDockviewComponent,
@ -289,16 +298,6 @@ export class Groupview extends CompositeDisposable implements IGroupview {
this.updateContainer();
}
isContentFocused() {
if (!document.activeElement) {
return false;
}
return isAncestor(
document.activeElement,
this.contentContainer.element
);
}
public indexOf(panel: IGroupPanel) {
return this.tabsContainer.indexOf(panel.id);
}
@ -679,7 +678,12 @@ export class Groupview extends CompositeDisposable implements IGroupview {
index,
});
} else {
this._onDidDrop.fire({ nativeEvent: event, position, index });
this._onDidDrop.fire({
nativeEvent: event,
position,
index,
getData: () => getPanelData(),
});
}
}

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

@ -1,42 +1,76 @@
import { IFrameworkPart } from '../panel/types';
import { IDockviewComponent } from '../dockview/dockviewComponent';
import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
import {
GridviewPanelApi,
GridviewPanelApiImpl,
} from '../api/gridviewPanelApi';
import { Groupview, GroupOptions, IGroupview } from './groupview';
import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
import { IGroupPanel } from './groupPanel';
export interface IGroupviewPanel extends IGridviewPanel {
model: IGroupview;
model: Groupview;
locked: boolean;
readonly size: number;
readonly panels: IGroupPanel[];
readonly activePanel: IGroupPanel | undefined;
}
export type IGroupviewPanelPublic = IGroupviewPanel;
export type GroupviewPanelApi = GridviewPanelApi;
class GroupviewApi extends GridviewPanelApiImpl implements GroupviewPanelApi {}
export class GroupviewPanel extends GridviewPanel implements IGroupviewPanel {
private readonly _model: Groupview;
get model(): IGroupview {
get panels(): IGroupPanel[] {
return this._model.panels;
}
get activePanel(): IGroupPanel | undefined {
return this._model.activePanel;
}
get size(): number {
return this._model.size;
}
get model(): Groupview {
return this._model;
}
get minimumHeight() {
get minimumHeight(): number {
return this._model.minimumHeight;
}
get maximumHeight() {
get maximumHeight(): number {
return this._model.maximumHeight;
}
get minimumWidth() {
get minimumWidth(): number {
return this._model.minimumWidth;
}
get maximumWidth() {
get maximumWidth(): number {
return this._model.maximumWidth;
}
get locked(): boolean {
return this._model.locked;
}
set locked(value: boolean) {
this._model.locked = value;
}
constructor(
accessor: IDockviewComponent,
id: string,
options: GroupOptions
) {
super(id, 'groupview_default', new GridviewPanelApiImpl(id));
super(id, 'groupview_default', new GroupviewApi(id));
this._model = new Groupview(this.element, accessor, id, options, this);
}

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

@ -265,7 +265,7 @@ export class TabsContainer
tabToAdd.onChanged((event) => {
const alreadyFocused =
panel.id === this.group.model.activePanel?.id &&
this.group.model.isContentFocused();
this.group.model.isContentFocused;
this.accessor.fireMouseEvent({ ...event, panel, tab: true });
const isLeftClick = event.event.button === 0;

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

@ -1,5 +1,4 @@
export * from './dnd/dataTransfer';
export * from './api/component.api';
export * from './splitview/core/splitview';
export * from './paneview/paneview';
@ -50,3 +49,10 @@ export {
SplitviewPanelApi,
} from './api/splitviewPanelApi';
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
export {
CommonApi,
SplitviewApi,
PaneviewApi,
GridviewApi,
DockviewApi,
} from './api/component.api';