Merge branch 'master' into 90-api-enhancements

packages/dockview/src/__tests__/api/component.api.spec.ts

@@ -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', () => {

packages/dockview/src/api/component.api.ts

@@ -122,8 +122,8 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.layout(width, height);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): void {
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
     }
 
     resizeToFit(): void {
@@ -221,6 +221,10 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         this.component.layout(width, height);
     }
 
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
+        return this.component.addPanel(options);
+    }
+
     resizeToFit(): void {
         this.component.resizeToFit();
     }
@@ -301,8 +305,8 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddComponentOptions): void {
+    addPanel(options: AddComponentOptions): IGridviewPanel {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
     }
 
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void {

packages/dockview/src/dockview/dockviewComponent.ts

@@ -21,7 +21,7 @@ import { createComponent } from '../panel/componentFactory';
 import {
     AddGroupOptions,
     AddPanelOptions,
-    DockviewOptions as DockviewComponentOptions,
+    DockviewComponentOptions,
     MovementOptions,
     TabContextMenuEvent,
 } from './options';

packages/dockview/src/dockview/options.ts

@@ -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;

packages/dockview/src/gridview/gridviewComponent.ts

@@ -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) {

packages/dockview/src/react/dockview/dockview.tsx

@@ -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;
+    onReady: (event: DockviewReadyEvent) => void;
-    debug?: boolean;
     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' }

packages/dockview/src/react/gridview/gridview.tsx

@@ -22,8 +22,8 @@ export interface IGridviewPanelProps<T extends { [index: string]: any } = any>
 }
 
 export interface IGridviewReactProps {
-    orientation: Orientation;
+    orientation?: Orientation;
-    onReady?: (event: GridviewReadyEvent) => void;
+    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) => {

packages/dockview/src/react/paneview/paneview.tsx

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

packages/dockview/src/react/splitview/splitview.tsx

@@ -22,8 +22,8 @@ export interface ISplitviewPanelProps<T extends { [index: string]: any } = any>
 }
 
 export interface ISplitviewReactProps {
-    orientation: Orientation;
+    orientation?: Orientation;
-    onReady?: (event: SplitviewReadyEvent) => void;
+    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: (

packages/dockview/src/splitview/splitviewComponent.ts

@@ -63,7 +63,7 @@ export interface ISplitviewComponent extends IDisposable {
     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;
@@ -106,15 +106,23 @@ export class SplitviewComponent
         return this.splitview.getViews();
     }
 
-    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;
     }
 
@@ -132,21 +140,21 @@ 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;
@@ -199,20 +207,20 @@ 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) {
+    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.panels
@@ -229,7 +237,7 @@ export class SplitviewComponent
         }
     }
 
-    removePanel(panel: SplitviewPanel, sizing?: Sizing) {
+    removePanel(panel: SplitviewPanel, sizing?: Sizing): void {
         const disposable = this._panels.get(panel.id);
 
         if (!disposable) {
@@ -254,7 +262,7 @@ export class SplitviewComponent
         return this.panels.find((view) => view.id === id);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): void {
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
         if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
@@ -292,6 +300,8 @@ export class SplitviewComponent
 
         this.doAddView(view);
         this.setActive(view);
+
+        return view;
     }
 
     /**
@@ -314,7 +324,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;
@@ -422,7 +432,7 @@ export class SplitviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
-    dispose() {
+    dispose(): void {
         for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();
             value.value.dispose();