dockview-core 1.12.0 → 1.13.1

package/dist/esm/dockview/dockviewPanelModel.js

@@ -1,5 +1,4 @@
 import { DefaultTab } from './components/tab/defaultTab';
-import { createComponent } from '../panel/componentFactory';
 export class DockviewPanelModel {
     get content() {
         return this._content;
@@ -16,7 +15,7 @@ export class DockviewPanelModel {
         this._tab = this.createTabComponent(this.id, tabComponent);
     }
     init(params) {
-        this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
+        this.content.init(params);
         this.tab.init(params);
     }
     updateParentGroup(_group, _isPanelVisible) {
@@ -37,19 +36,28 @@ export class DockviewPanelModel {
         (_d = (_c = this.tab).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
     }
     createContentComponent(id, componentName) {
-        var _a, _b;
-        return createComponent(id, componentName, (_a = this.accessor.options.components) !== null && _a !== void 0 ? _a : {}, this.accessor.options.frameworkComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.content);
+        return this.accessor.options.createComponent({
+            id,
+            name: componentName,
+        });
     }
     createTabComponent(id, componentName) {
-        var _a, _b;
-        if (componentName) {
-            return createComponent(id, componentName, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_a = this.accessor.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
-        }
-        else if (this.accessor.options.defaultTabComponent) {
-            return createComponent(id, this.accessor.options.defaultTabComponent, this.accessor.options.tabComponents, this.accessor.options.frameworkTabComponents, (_b = this.accessor.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-        }
-        else {
-            return new DefaultTab();
+        const name = componentName !== null && componentName !== void 0 ? componentName : this.accessor.options.defaultTabComponent;
+        if (name) {
+            if (this.accessor.options.createTabComponent) {
+                const component = this.accessor.options.createTabComponent({
+                    id,
+                    name,
+                });
+                if (component) {
+                    return component;
+                }
+                else {
+                    return new DefaultTab();
+                }
+            }
+            console.warn(`dockview: tabComponent '${componentName}' was not found. falling back to the default tab.`);
         }
+        return new DefaultTab();
     }
 }

package/dist/esm/dockview/framework.d.ts

@@ -0,0 +1,38 @@
+import { DockviewApi } from '../api/component.api';
+import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
+import { DockviewPanelApi } from '../api/dockviewPanelApi';
+import { PanelParameters } from '../framwork';
+import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewPanel } from './dockviewPanel';
+export interface IGroupPanelBaseProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: DockviewPanelApi;
+    containerApi: DockviewApi;
+}
+export type IDockviewPanelHeaderProps<T extends {
+    [index: string]: any;
+} = any> = IGroupPanelBaseProps<T>;
+export type IDockviewPanelProps<T extends {
+    [index: string]: any;
+} = any> = IGroupPanelBaseProps<T>;
+export interface IDockviewHeaderActionsProps {
+    api: DockviewGroupPanelApi;
+    containerApi: DockviewApi;
+    panels: IDockviewPanel[];
+    activePanel: IDockviewPanel | undefined;
+    isGroupActive: boolean;
+    group: DockviewGroupPanel;
+}
+export interface IGroupHeaderProps {
+    api: DockviewGroupPanelApi;
+    containerApi: DockviewApi;
+    group: IDockviewGroupPanel;
+}
+export interface IWatermarkPanelProps {
+    containerApi: DockviewApi;
+    group?: IDockviewGroupPanel;
+}
+export interface DockviewReadyEvent {
+    api: DockviewApi;
+}

package/dist/esm/dockview/framework.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/dockview/options.d.ts

@@ -1,74 +1,33 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from './types';
+import { IContentRenderer, ITabRenderer, IWatermarkRenderer } from './types';
 import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
-import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
 import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
 import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
-import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
+import { IGroupHeaderProps } from './framework';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
-    init(params: {
-        containerApi: DockviewApi;
-        api: DockviewGroupPanelApi;
-    }): void;
-}
-export interface GroupPanelFrameworkComponentFactory {
-    content: FrameworkFactory<IContentRenderer>;
-    tab: FrameworkFactory<ITabRenderer>;
-    watermark: FrameworkFactory<IWatermarkRenderer>;
+    init(params: IGroupHeaderProps): void;
 }
 export interface TabContextMenuEvent {
     event: MouseEvent;
     api: DockviewApi;
     panel: IDockviewPanel;
 }
-export interface DockviewRenderFunctions {
-    tabComponents?: {
-        [componentName: string]: ComponentConstructor<ITabRenderer>;
-    };
-    components?: {
-        [componentName: string]: ComponentConstructor<IContentRenderer>;
-    };
-    frameworkTabComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-}
 export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
-export interface DockviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    target: DockviewGroupDropLocation;
-    position: Position;
-    group?: DockviewGroupPanel;
-    getData: () => PanelTransfer | undefined;
-}
-export interface DockviewComponentOptions extends DockviewRenderFunctions {
+export interface DockviewOptions {
     disableAutoResizing?: boolean;
-    watermarkComponent?: WatermarkConstructor;
-    watermarkFrameworkComponent?: any;
-    frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
-    orientation?: Orientation;
-    styles?: ISplitviewStyles;
-    defaultTabComponent?: string;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    createRightHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
-    createLeftHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
-    createPrefixHeaderActionsElement?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    hideBorders?: boolean;
     singleTabMode?: 'fullwidth' | 'default';
-    parentElement: HTMLElement;
     disableFloatingGroups?: boolean;
     floatingGroupBounds?: 'boundedWithinViewport' | {
         minimumHeightWithinViewport?: number;
@@ -81,6 +40,44 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     locked?: boolean;
     disableDnd?: boolean;
 }
+export interface DockviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    target: DockviewGroupDropLocation;
+    position: Position;
+    group?: DockviewGroupPanel;
+    getData: () => PanelTransfer | undefined;
+    isAccepted: boolean;
+    accept(): void;
+}
+export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
+    readonly nativeEvent: DragEvent;
+    readonly target: DockviewGroupDropLocation;
+    readonly position: Position;
+    readonly getData: () => PanelTransfer | undefined;
+    readonly group?: DockviewGroupPanel | undefined;
+    private _isAccepted;
+    get isAccepted(): boolean;
+    constructor(nativeEvent: DragEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
+    accept(): void;
+}
+export declare const PROPERTY_KEYS: (keyof DockviewOptions)[];
+export interface DockviewFrameworkOptions {
+    parentElement: HTMLElement;
+    defaultTabComponent?: string;
+    createRightHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createLeftHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createPrefixHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
+    createTabComponent?: (options: {
+        id: string;
+        name: string;
+    }) => ITabRenderer | undefined;
+    createComponent: (options: {
+        id: string;
+        name: string;
+    }) => IContentRenderer;
+    createWatermarkComponent?: () => IWatermarkRenderer;
+}
+export type DockviewComponentOptions = DockviewOptions & DockviewFrameworkOptions;
 export interface PanelOptions<P extends object = Parameters> {
     component: string;
     tabComponent?: string;
@@ -118,11 +115,36 @@ type AddPanelPositionUnion = {
 type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
 export type AddPanelOptions<P extends object = Parameters> = {
     params?: P;
+    /**
+     * The unique id for the panel
+     */
     id: string;
+    /**
+     * The title for the panel which can be accessed within both the tab and component.
+     *
+     * If using the default tab renderer this title will be displayed in the tab.
+     */
     title?: string;
+    /**
+     * The id of the component renderer
+     */
     component: string;
+    /**
+     * The id of the tab componnet renderer
+     */
     tabComponent?: string;
+    /**
+     * The rendering mode of the panel.
+     *
+     * This dictates what happens to the HTML of the panel when it is hidden.
+     */
     renderer?: DockviewPanelRenderer;
+    /**
+     * If true then add the panel without setting it as the active panel.
+     *
+     * Defaults to `false` which forces newly added panels to become active.
+     */
+    inactive?: boolean;
 } & Partial<AddPanelOptionsUnion>;
 type AddGroupOptionsWithPanel = {
     referencePanel: string | IDockviewPanel;

package/dist/esm/dockview/options.js

@@ -1,3 +1,39 @@
+export class DockviewUnhandledDragOverEvent {
+    get isAccepted() {
+        return this._isAccepted;
+    }
+    constructor(nativeEvent, target, position, getData, group) {
+        this.nativeEvent = nativeEvent;
+        this.target = target;
+        this.position = position;
+        this.getData = getData;
+        this.group = group;
+        this._isAccepted = false;
+    }
+    accept() {
+        this._isAccepted = true;
+    }
+}
+export const PROPERTY_KEYS = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        disableAutoResizing: undefined,
+        hideBorders: undefined,
+        singleTabMode: undefined,
+        disableFloatingGroups: undefined,
+        floatingGroupBounds: undefined,
+        popoutUrl: undefined,
+        defaultRenderer: undefined,
+        debug: undefined,
+        rootOverlayModel: undefined,
+        locked: undefined,
+        disableDnd: undefined,
+    };
+    return Object.keys(properties);
+})();
 export function isPanelOptionsWithPanel(data) {
     if (data.referencePanel) {
         return true;

package/dist/esm/dockview/types.d.ts

@@ -2,7 +2,6 @@ import { IDockviewComponent } from './dockviewComponent';
 import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
-import { Event } from '../events';
 import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
@@ -13,27 +12,22 @@ export interface GroupPanelPartInitParameters extends PanelInitParameters, Heade
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
-export interface GroupPanelContentPartInitParameters extends GroupPanelPartInitParameters {
-    tab: ITabRenderer;
-}
 export interface WatermarkRendererInitParameters {
     containerApi: DockviewApi;
     group?: IDockviewGroupPanel;
 }
-export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>, 'dispose' | 'update' | 'layout' | 'toJSON'> {
+export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>, 'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'> {
     readonly element: HTMLElement;
     init: (params: WatermarkRendererInitParameters) => void;
     updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
 }
-export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON'> {
+export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'> {
     readonly element: HTMLElement;
     init(parameters: GroupPanelPartInitParameters): void;
 }
-export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON'> {
+export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, 'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'> {
     readonly element: HTMLElement;
-    readonly onDidFocus?: Event<void>;
-    readonly onDidBlur?: Event<void>;
-    init(parameters: GroupPanelContentPartInitParameters): void;
+    init(parameters: GroupPanelPartInitParameters): void;
 }
 export interface WatermarkPartInitParameters {
     accessor: IDockviewComponent;

package/dist/esm/events.d.ts

@@ -47,9 +47,20 @@ export declare class Emitter<T> implements IDisposable {
 }
 export declare function addDisposableWindowListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 export declare function addDisposableListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
-export declare class TickDelayedEvent implements IDisposable {
-    private timer;
+/**
+ *
+ * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+ *
+ * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+ * This implementation exists to avoid external dependencies.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+ * @see https://rxjs.dev/api/index/const/asapScheduler
+ */
+export declare class AsapEvent implements IDisposable {
     private readonly _onFired;
+    private _currentFireCount;
+    private _queued;
     readonly onEvent: Event<void>;
     fire(): void;
     dispose(): void;

package/dist/esm/events.js

@@ -150,18 +150,49 @@ export function addDisposableListener(element, type, listener, options) {
         },
     };
 }
-export class TickDelayedEvent {
+/**
+ *
+ * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+ *
+ * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+ * This implementation exists to avoid external dependencies.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+ * @see https://rxjs.dev/api/index/const/asapScheduler
+ */
+export class AsapEvent {
     constructor() {
         this._onFired = new Emitter();
-        this.onEvent = this._onFired.event;
+        this._currentFireCount = 0;
+        this._queued = false;
+        this.onEvent = (e) => {
+            /**
+             * when the event is first subscribed to take note of the current fire count
+             */
+            const fireCountAtTimeOfEventSubscription = this._currentFireCount;
+            return this._onFired.event(() => {
+                /**
+                 * if the current fire count is greater than the fire count at event subscription
+                 * then the event has been fired since we subscribed and it's ok to "on_next" the event.
+                 *
+                 * if the count is not greater then what we are recieving is an event from the microtask
+                 * queue that was triggered before we actually subscribed and therfore we should ignore it.
+                 */
+                if (this._currentFireCount > fireCountAtTimeOfEventSubscription) {
+                    e();
+                }
+            });
+        };
     }
     fire() {
-        if (this.timer) {
-            clearTimeout(this.timer);
+        this._currentFireCount++;
+        if (this._queued) {
+            return;
         }
-        this.timer = setTimeout(() => {
+        this._queued = true;
+        queueMicrotask(() => {
+            this._queued = false;
             this._onFired.fire();
-            clearTimeout(this.timer);
         });
     }
     dispose() {

package/dist/esm/framwork.d.ts

@@ -0,0 +1,4 @@
+import { Parameters } from "./panel/types";
+export interface PanelParameters<T extends {} = Parameters> {
+    params: T;
+}

package/dist/esm/framwork.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -1,4 +1,4 @@
-import { Event, TickDelayedEvent } from '../events';
+import { Event, AsapEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { IValueDisposable } from '../lifecycle';
@@ -51,15 +51,14 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     protected readonly _groups: Map<string, IValueDisposable<T>>;
     protected readonly gridview: Gridview;
     protected _activeGroup: T | undefined;
-    private _onDidLayoutChange;
-    readonly onDidLayoutChange: Event<void>;
     private readonly _onDidRemove;
     readonly onDidRemove: Event<T>;
     private readonly _onDidAdd;
     readonly onDidAdd: Event<T>;
     private readonly _onDidActiveChange;
     readonly onDidActiveChange: Event<T | undefined>;
-    protected readonly _bufferOnDidLayoutChange: TickDelayedEvent;
+    protected readonly _bufferOnDidLayoutChange: AsapEvent;
+    readonly onDidLayoutChange: Event<void>;
     get id(): string;
     get size(): number;
     get groups(): T[];

package/dist/esm/gridview/baseComponentGridview.js

@@ -1,4 +1,4 @@
-import { Emitter, Event, TickDelayedEvent } from '../events';
+import { Emitter, Event, AsapEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
 import { Disposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
@@ -61,15 +61,14 @@ export class BaseGrid extends Resizable {
         super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._groups = new Map();
-        this._onDidLayoutChange = new Emitter();
-        this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidRemove = new Emitter();
         this.onDidRemove = this._onDidRemove.event;
         this._onDidAdd = new Emitter();
         this.onDidAdd = this._onDidAdd.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
-        this._bufferOnDidLayoutChange = new TickDelayedEvent();
+        this._bufferOnDidLayoutChange = new AsapEvent();
+        this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
         this.element.style.height = '100%';
         this.element.style.width = '100%';
         options.parentElement.appendChild(this.element);
@@ -84,13 +83,11 @@ export class BaseGrid extends Resizable {
             this._bufferOnDidLayoutChange.fire();
         }), Event.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
             this._bufferOnDidLayoutChange.fire();
-        }), this._bufferOnDidLayoutChange.onEvent(() => {
-            this._onDidLayoutChange.fire();
         }), this._bufferOnDidLayoutChange);
     }
     setVisible(panel, visible) {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        this._onDidLayoutChange.fire();
+        this._bufferOnDidLayoutChange.fire();
     }
     isVisible(panel) {
         return this.gridview.isViewVisible(getGridLocation(panel.element));
@@ -196,7 +193,6 @@ export class BaseGrid extends Resizable {
         this._onDidActiveChange.dispose();
         this._onDidAdd.dispose();
         this._onDidRemove.dispose();
-        this._onDidLayoutChange.dispose();
         for (const group of this.groups) {
             group.dispose();
         }

package/dist/esm/index.d.ts

@@ -12,14 +12,15 @@ export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview
 export * from './paneview/paneview';
 export * from './gridview/gridview';
 export { GridviewComponentOptions } from './gridview/options';
-export * from './dockview/dockviewGroupPanelModel';
 export * from './gridview/baseComponentGridview';
 export * from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
+export * from './dockview/dockviewGroupPanelModel';
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/dockviewPanel';
 export * from './dockview/components/tab/defaultTab';

package/dist/esm/index.js

@@ -10,11 +10,11 @@ export * from './panel/componentFactory';
 export * from './splitview/splitview';
 export * from './paneview/paneview';
 export * from './gridview/gridview';
-export * from './dockview/dockviewGroupPanelModel';
 export * from './gridview/baseComponentGridview';
 export * from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
+export * from './dockview/dockviewGroupPanelModel';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export * from './dockview/options';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dockview-core",
-  "version": "1.12.0",
-  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
+  "version": "1.13.1",
+  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
     "split-view",