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

feat: api improvements

Browse Source
This commit is contained in:
mathuo 2022-05-01 20:34:41 +01:00
parent 432ab10e7f
commit b77e7922bb
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
10 changed files with 72 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { DockviewComponent } from '../..';
import {
SplitviewApi,
PaneviewApi,
@ -8,6 +7,7 @@ import {
import { GridviewComponent } from '../../gridview/gridviewComponent';
import { PaneviewComponent } from '../../paneview/paneviewComponent';
import { SplitviewComponent } from '../../splitview/splitviewComponent';
import { DockviewComponent } from '../../dockview/dockviewComponent';
describe('component.api', () => {
describe('splitview', () => {
@ -22,7 +22,7 @@ describe('component.api', () => {
'onDidLayoutChange',
'onDidAddView',
'onDidRemoveView',
'getPanels',
'panels',
'focus',
'resizeToFit',
'toJSON',

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

@ -102,7 +102,7 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
}
getPanels(): ISplitviewPanel[] {
return this.component.getPanels();
return this.component.panels;
}
focus(): void {
@ -121,8 +121,8 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
return this.component.layout(width, height);
}
addPanel(options: AddSplitviewComponentOptions): void {
this.component.addPanel(options);
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
return this.component.addPanel(options);
}
resizeToFit(): void {
@ -216,8 +216,8 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
this.component.layout(width, height);
}
addPanel(options: AddPaneviewComponentOptions): void {
this.component.addPanel(options);
addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
return this.component.addPanel(options);
}
resizeToFit(): void {
@ -300,8 +300,8 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
this.component.layout(width, height, force);
}
addPanel(options: AddComponentOptions): void {
this.component.addPanel(options);
addPanel(options: AddComponentOptions): IGridviewPanel {
return this.component.addPanel(options);
}
removePanel(panel: IGridviewPanel, sizing?: Sizing): void {

2
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';

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

@ -49,12 +49,11 @@ export interface ViewFactoryData {
tab?: string;
}
export interface DockviewOptions extends DockviewRenderFunctions {
export interface DockviewComponentOptions extends DockviewRenderFunctions {
watermarkComponent?: WatermarkConstructor;
watermarkFrameworkComponent?: any;
frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
tabHeight?: number;
debug?: boolean;
orientation?: Orientation;
styles?: ISplitviewStyles;
showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;

14
packages/dockview/src/gridview/gridviewComponent.ts
View File

@ -44,7 +44,7 @@ export interface AddComponentOptions extends BaseComponentOptions {
maximumHeight?: number;
position?: {
direction: Direction;
reference: string;
referencePanel: string;
};
location?: number[];
}
@ -62,7 +62,7 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
readonly orientation: Orientation;
readonly onDidLayoutFromJSON: Event<void>;
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
addPanel(options: AddComponentOptions): void;
addPanel(options: AddComponentOptions): IGridviewPanel;
removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
toggleVisibility(panel: IGridviewPanel): void;
focus(): void;
@ -273,17 +273,17 @@ export class GridviewComponent
this.doAddGroup(removedPanel, relativeLocation, options.size);
}
public addPanel(options: AddComponentOptions): void {
public addPanel(options: AddComponentOptions): IGridviewPanel {
let relativeLocation: number[] = options.location || [0];
if (options.position?.reference) {
if (options.position?.referencePanel) {
const referenceGroup = this._groups.get(
options.position.reference
options.position.referencePanel
)?.value;
if (!referenceGroup) {
throw new Error(
`reference group ${options.position.reference} does not exist`
`reference group ${options.position.referencePanel} does not exist`
);
}
@ -329,6 +329,8 @@ export class GridviewComponent
this.registerPanel(view);
this.doAddGroup(view, relativeLocation, options.size);
return view;
}
private registerPanel(panel: GridviewPanel) {

6
packages/dockview/src/react/dockview/dockview.tsx
View File

@ -36,11 +36,10 @@ export interface DockviewReadyEvent {
}
export interface IDockviewReactProps {
components?: PanelCollection<IDockviewPanelProps>;
components: PanelCollection<IDockviewPanelProps>;
tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
onReady?: (event: DockviewReadyEvent) => void;
debug?: boolean;
onReady: (event: DockviewReadyEvent) => void;
tabHeight?: number;
onTabContextMenu?: (event: TabContextMenuEvent) => void;
onDidDrop?: (event: DockviewDropEvent) => void;
@ -127,7 +126,6 @@ export const DockviewReact = React.forwardRef(
frameworkComponents: props.components,
frameworkTabComponents: props.tabComponents,
tabHeight: props.tabHeight,
debug: props.debug,
watermarkFrameworkComponent: props.watermarkComponent,
styles: props.hideBorders
? { separatorBorder: 'transparent' }

6
packages/dockview/src/react/gridview/gridview.tsx
View File

@ -22,8 +22,8 @@ export interface IGridviewPanelProps<T extends { [index: string]: any } = any>
}
export interface IGridviewReactProps {
orientation: Orientation;
onReady?: (event: GridviewReadyEvent) => void;
orientation?: Orientation;
onReady: (event: GridviewReadyEvent) => void;
components: PanelCollection<IGridviewPanelProps>;
hideBorders?: boolean;
className?: string;
@ -64,7 +64,7 @@ export const GridviewReact = React.forwardRef(
typeof props.proportionalLayout === 'boolean'
? props.proportionalLayout
: true,
orientation: props.orientation,
orientation: props.orientation || Orientation.HORIZONTAL,
frameworkComponents: props.components,
frameworkComponentFactory: {
createComponent: (id: string, componentId, component) => {

4
packages/dockview/src/react/paneview/paneview.tsx
View File

@ -27,8 +27,8 @@ export interface PaneviewDropEvent extends PaneviewDropEvent2 {
}
export interface IPaneviewReactProps {
onReady?: (event: PaneviewReadyEvent) => void;
components?: PanelCollection<IPaneviewPanelProps>;
onReady: (event: PaneviewReadyEvent) => void;
components: PanelCollection<IPaneviewPanelProps>;
headerComponents?: PanelCollection<IPaneviewPanelProps>;
className?: string;
disableAutoResizing?: boolean;

6
packages/dockview/src/react/splitview/splitview.tsx
View File

@ -22,8 +22,8 @@ export interface ISplitviewPanelProps<T extends { [index: string]: any } = any>
}
export interface ISplitviewReactProps {
orientation: Orientation;
onReady?: (event: SplitviewReadyEvent) => void;
orientation?: Orientation;
onReady: (event: SplitviewReadyEvent) => void;
components: PanelCollection<ISplitviewPanelProps>;
proportionalLayout?: boolean;
hideBorders?: boolean;
@ -58,7 +58,7 @@ export const SplitviewReact = React.forwardRef(
React.useEffect(() => {
const splitview = new SplitviewComponent(domRef.current!, {
orientation: props.orientation,
orientation: props.orientation || Orientation.HORIZONTAL,
frameworkComponents: props.components,
frameworkWrapper: {
createComponent: (

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

@ -61,8 +61,9 @@ export interface ISplitviewComponent extends IDisposable {
readonly onDidAddView: Event<IView>;
readonly onDidRemoveView: Event<IView>;
readonly onDidLayoutFromJSON: Event<void>;
readonly panels: SplitviewPanel[];
updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
addPanel(options: AddSplitviewComponentOptions): void;
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
layout(width: number, height: number): void;
onDidLayoutChange: Event<void>;
toJSON(): SerializedSplitview;
@ -72,7 +73,7 @@ export interface ISplitviewComponent extends IDisposable {
getPanel(id: string): ISplitviewPanel | undefined;
setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
getPanels(): SplitviewPanel[];
setVisible(panel: ISplitviewPanel, visible: boolean): void;
movePanel(from: number, to: number): void;
}
@ -87,7 +88,7 @@ export class SplitviewComponent
private _disposable = new MutableDisposable();
private _splitview!: Splitview;
private _activePanel: SplitviewPanel | undefined;
private panels = new Map<string, IValueDisposable<SplitviewPanel>>();
private _panels = new Map<string, IValueDisposable<SplitviewPanel>>();
private _options: SplitviewComponentOptions;
private readonly _onDidLayoutfromJSON = new Emitter<void>();
@ -102,15 +103,23 @@ export class SplitviewComponent
private readonly _onDidLayoutChange = new Emitter<void>();
readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
get options() {
get options(): SplitviewComponentOptions {
return this._options;
}
get orientation() {
get panels(): SplitviewPanel[] {
return this.splitview.getViews();
}
get length(): number {
return this._panels.size;
}
get orientation(): Orientation {
return this.splitview.orientation;
}
get splitview() {
get splitview(): Splitview {
return this._splitview;
}
@ -128,30 +137,26 @@ export class SplitviewComponent
);
}
get minimumSize() {
get minimumSize(): number {
return this.splitview.minimumSize;
}
get maximumSize() {
get maximumSize(): number {
return this.splitview.maximumSize;
}
get height() {
get height(): number {
return this.splitview.orientation === Orientation.HORIZONTAL
? this.splitview.orthogonalSize
: this.splitview.size;
}
get width() {
get width(): number {
return this.splitview.orientation === Orientation.HORIZONTAL
? this.splitview.size
: this.splitview.orthogonalSize;
}
get length() {
return this.panels.size;
}
constructor(
private readonly element: HTMLElement,
options: SplitviewComponentOptions
@ -195,23 +200,23 @@ export class SplitviewComponent
);
}
focus() {
focus(): void {
this._activePanel?.focus();
}
movePanel(from: number, to: number) {
movePanel(from: number, to: number): void {
this.splitview.moveView(from, to);
}
setVisible(panel: SplitviewPanel, visible: boolean) {
const index = this.getPanels().indexOf(panel);
setVisible(panel: SplitviewPanel, visible: boolean): void {
const index = this.panels.indexOf(panel);
this.splitview.setViewVisible(index, visible);
}
setActive(view: SplitviewPanel, skipFocus?: boolean) {
setActive(view: SplitviewPanel, skipFocus?: boolean): void {
this._activePanel = view;
this.getPanels()
this.panels
.filter((v) => v !== view)
.forEach((v) => {
v.api._onDidActiveChange.fire({ isActive: false });
@ -225,12 +230,8 @@ export class SplitviewComponent
}
}
getPanels(): SplitviewPanel[] {
return this.splitview.getViews();
}
removePanel(panel: SplitviewPanel, sizing?: Sizing) {
const disposable = this.panels.get(panel.id);
removePanel(panel: SplitviewPanel, sizing?: Sizing): void {
const disposable = this._panels.get(panel.id);
if (!disposable) {
throw new Error(`unknown splitview panel ${panel.id}`);
@ -239,23 +240,23 @@ export class SplitviewComponent
disposable.disposable.dispose();
disposable.value.dispose();
this.panels.delete(panel.id);
this._panels.delete(panel.id);
const index = this.getPanels().findIndex((_) => _ === panel);
const index = this.panels.findIndex((_) => _ === panel);
this.splitview.removeView(index, sizing);
const panels = this.getPanels();
const panels = this.panels;
if (panels.length > 0) {
this.setActive(panels[panels.length - 1]);
}
}
getPanel(id: string): SplitviewPanel | undefined {
return this.getPanels().find((view) => view.id === id);
return this.panels.find((view) => view.id === id);
}
addPanel(options: AddSplitviewComponentOptions): void {
if (this.panels.has(options.id)) {
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
if (this._panels.has(options.id)) {
throw new Error(`panel ${options.id} already exists`);
}
@ -292,6 +293,8 @@ export class SplitviewComponent
this.doAddView(view);
this.setActive(view);
return view;
}
/**
@ -314,7 +317,7 @@ export class SplitviewComponent
this.splitview.layout(size, orthogonalSize);
}
private doAddView(view: SplitviewPanel) {
private doAddView(view: SplitviewPanel): void {
const disposable = view.api.onDidFocusChange((event) => {
if (!event.isFocused) {
return;
@ -322,7 +325,7 @@ export class SplitviewComponent
this.setActive(view, true);
});
this.panels.set(view.id, { disposable, value: view });
this._panels.set(view.id, { disposable, value: view });
}
toJSON(): SerializedSplitview {
@ -349,11 +352,11 @@ export class SplitviewComponent
fromJSON(serializedSplitview: SerializedSplitview): void {
const { views, orientation, size, activeView } = serializedSplitview;
for (const [_, value] of this.panels.entries()) {
for (const [_, value] of this._panels.entries()) {
value.disposable.dispose();
value.value.dispose();
}
this.panels.clear();
this._panels.clear();
this.splitview.dispose();
const queue: Function[] = [];
@ -366,7 +369,7 @@ export class SplitviewComponent
views: views.map((view) => {
const data = view.data;
if (this.panels.has(data.id)) {
if (this._panels.has(data.id)) {
throw new Error(`panel ${data.id} already exists`);
}
@ -422,12 +425,12 @@ export class SplitviewComponent
this._onDidLayoutfromJSON.fire();
}
dispose() {
for (const [_, value] of this.panels.entries()) {
dispose(): void {
for (const [_, value] of this._panels.entries()) {
value.disposable.dispose();
value.value.dispose();
}
this.panels.clear();
this._panels.clear();
this.splitview.dispose();