dockview-core 1.12.0 → 1.13.0

package/dist/esm/api/component.api.d.ts

@@ -1,5 +1,5 @@
 import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
-import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
+import { AddGroupOptions, AddPanelOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
@@ -393,6 +393,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel(): Event<TabDragEvent>;
+    get onUnhandledDragOverEvent(): Event<DockviewDndOverlayEvent>;
     /**
      * All panel objects.
      */

package/dist/esm/api/component.api.js

@@ -541,6 +541,9 @@ export class DockviewApi {
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
     }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
+    }
     /**
      * All panel objects.
      */

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -1,11 +1,12 @@
 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly location: DockviewGroupLocation;
     /**
      * If you require the Window object
@@ -25,9 +26,12 @@ export interface DockviewGroupPanelFloatingChangeEvent {
 }
 export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private readonly accessor;
+    private readonly _mutableDisposable;
     private _group;
     readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     close(): void;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -1,5 +1,6 @@
 import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
+import { MutableDisposable } from '../lifecycle';
 import { GridviewPanelApiImpl } from './gridviewPanelApi';
 // TODO find a better way to initialize and avoid needing null checks
 const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
@@ -13,9 +14,12 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     constructor(id, accessor) {
         super(id, '__dockviewgroup__');
         this.accessor = accessor;
+        this._mutableDisposable = new MutableDisposable();
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;
-        this.addDisposables(this._onDidLocationChange);
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._mutableDisposable);
     }
     close() {
         if (!this._group) {
@@ -73,5 +77,18 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     }
     initialize(group) {
         this._group = group;
+        /**
+         * TODO: Annoying initialization order caveat
+         *
+         * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
+         * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
+         * finished ensuring the `model` is defined.
+         */
+        queueMicrotask(() => {
+            this._mutableDisposable.value =
+                this._group.model.onDidActivePanelChange((event) => {
+                    this._onDidActivePanelChange.fire(event);
+                });
+        });
     }
 }

package/dist/esm/dnd/droptarget.d.ts

@@ -18,7 +18,7 @@ export declare class WillShowOverlayEvent extends DockviewEvent implements Dropt
 export declare function directionToPosition(direction: Direction): Position;
 export declare function positionToDirection(position: Position): Direction;
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
-export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
+export type CanDisplayOverlay = (dragEvent: DragEvent, state: Position) => boolean;
 export type MeasuredValue = {
     value: number;
     type: 'pixels' | 'percentage';

package/dist/esm/dnd/droptarget.js

@@ -97,6 +97,10 @@ export class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
+                if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
+                    return;
+                }
                 const willShowOverlayEvent = new WillShowOverlayEvent({
                     nativeEvent: e,
                     position: quadrant,
@@ -110,16 +114,6 @@ export class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
-                if (typeof this.options.canDisplayOverlay === 'boolean') {
-                    if (!this.options.canDisplayOverlay) {
-                        this.removeDropTarget();
-                        return;
-                    }
-                }
-                else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                    this.removeDropTarget();
-                    return;
-                }
                 this.markAsUsed(e);
                 if (!this.targetElement) {
                     this.targetElement = document.createElement('div');

package/dist/esm/dockview/components/panel/content.js

@@ -92,17 +92,9 @@ export class ContentContainer extends CompositeDisposable {
                 break;
         }
         if (doRender) {
-            const _onDidFocus = panel.view.content.onDidFocus;
-            const _onDidBlur = panel.view.content.onDidBlur;
             const focusTracker = trackFocus(container);
             const disposable = new CompositeDisposable();
             disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
-            if (_onDidFocus) {
-                disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
-            }
-            if (_onDidBlur) {
-                disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
-            }
             this.disposable.value = disposable;
         }
     }

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

@@ -3,7 +3,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
-import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
@@ -42,7 +42,6 @@ export interface SerializedDockview {
     floatingGroups?: SerializedFloatingGroup[];
     popoutGroups?: SerializedPopoutGroup[];
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' | 'rootOverlayModel' | 'disableDnd'>;
 type MoveGroupOptions = {
     from: {
         group: DockviewGroupPanel;
@@ -80,8 +79,9 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     readonly onDidAddGroup: Event<DockviewGroupPanel>;
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     readonly options: DockviewComponentOptions;
-    updateOptions(options: DockviewComponentUpdateOptions): void;
+    updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
     moveGroup(options: MoveGroupOptions): void;
     doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void;
@@ -132,6 +132,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     private readonly _onWillShowOverlay;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     private readonly _onDidRemovePanel;
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     private readonly _onDidAddPanel;
@@ -184,7 +186,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
         skipActiveGroup?: boolean;
     }): void;
     private orthogonalize;
-    updateOptions(options: DockviewComponentUpdateOptions): void;
+    updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;

package/dist/esm/dockview/dockviewComponent.js

@@ -7,8 +7,7 @@ import { Event, Emitter, addDisposableWindowListener } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
-import { createComponent } from '../panel/componentFactory';
-import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
+import { DockviewUnhandledDragOverEvent, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/splitview';
@@ -147,11 +146,13 @@ export class DockviewComponent extends BaseGrid {
         return this._api;
     }
     constructor(options) {
-        var _a, _b;
+        var _a;
         super({
             proportionalLayout: true,
-            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            styles: options.styles,
+            orientation: Orientation.HORIZONTAL,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
@@ -169,6 +170,8 @@ export class DockviewComponent extends BaseGrid {
         this.onWillDrop = this._onWillDrop.event;
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
@@ -194,7 +197,7 @@ export class DockviewComponent extends BaseGrid {
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
             if (!this._moving) {
                 this._onDidAddGroup.fire(event);
             }
@@ -221,22 +224,6 @@ export class DockviewComponent extends BaseGrid {
             }
         }));
         this._options = options;
-        if (!this.options.components) {
-            this.options.components = {};
-        }
-        if (!this.options.frameworkComponents) {
-            this.options.frameworkComponents = {};
-        }
-        if (!this.options.frameworkTabComponents) {
-            this.options.frameworkTabComponents = {};
-        }
-        if (!this.options.tabComponents) {
-            this.options.tabComponents = {};
-        }
-        if (!this.options.watermarkComponent &&
-            !this.options.watermarkFrameworkComponent) {
-            this.options.watermarkComponent = Watermark;
-        }
         this._rootDropTarget = new Droptarget(this.element, {
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
@@ -251,26 +238,20 @@ export class DockviewComponent extends BaseGrid {
                     }
                     return true;
                 }
-                if (this.options.showDndOverlay) {
-                    if (position === 'center' && this.gridview.length !== 0) {
-                        /**
-                         * for external events only show the four-corner drag overlays, disable
-                         * the center position so that external drag events can fall through to the group
-                         * and panel drop target handlers
-                         */
-                        return false;
-                    }
-                    return this.options.showDndOverlay({
-                        nativeEvent: event,
-                        position: position,
-                        target: 'edge',
-                        getData: getPanelData,
-                    });
+                if (position === 'center' && this.gridview.length !== 0) {
+                    /**
+                     * for external events only show the four-corner drag overlays, disable
+                     * the center position so that external drag events can fall through to the group
+                     * and panel drop target handlers
+                     */
+                    return false;
                 }
-                return false;
+                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
         });
         this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
@@ -494,7 +475,7 @@ export class DockviewComponent extends BaseGrid {
                 skipDispose: true,
                 skipSetActiveGroup: true,
             }));
-            group.model.openPanel(item, { skipSetGroupActive: true });
+            this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
         }
         else {
             group = item;
@@ -567,7 +548,7 @@ export class DockviewComponent extends BaseGrid {
             // this is either a resize or a move
             // to inform the panels .layout(...) the group with it's current size
             // don't care about resize since the above watcher handles that
-            group.layout(group.height, group.width);
+            group.layout(group.width, group.height);
         }), overlay.onDidChangeEnd(() => {
             this._bufferOnDidLayoutChange.fire();
         }), group.onDidChange((event) => {
@@ -624,16 +605,11 @@ export class DockviewComponent extends BaseGrid {
     }
     updateOptions(options) {
         var _a, _b;
-        const changed_orientation = typeof options.orientation === 'string' &&
-            this.gridview.orientation !== options.orientation;
-        const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
+        const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+        const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
             options.rootOverlayModel !== this.options.rootOverlayModel;
         this._options = Object.assign(Object.assign({}, this.options), options);
-        if (changed_orientation) {
-            this.gridview.orientation = options.orientation;
-        }
         if (changed_floatingGroupBounds) {
             for (const group of this._floatingGroups) {
                 switch (this.options.floatingGroupBounds) {
@@ -921,7 +897,7 @@ export class DockviewComponent extends BaseGrid {
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
                 if (!referencePanel) {
-                    throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                    throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                 }
                 referenceGroup = this.findGroup(referencePanel);
             }
@@ -931,14 +907,19 @@ export class DockviewComponent extends BaseGrid {
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
                 if (!referenceGroup) {
-                    throw new Error(`referencePanel ${options.position.referenceGroup} does not exist`);
+                    throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
             }
             else {
                 const group = this.orthogonalize(directionToPosition(options.position.direction));
                 const panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return panel;
             }
         }
@@ -961,43 +942,64 @@ export class DockviewComponent extends BaseGrid {
                     skipActiveGroup: true,
                 });
                 panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
             }
             else if (referenceGroup.api.location.type === 'floating' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
-                referenceGroup.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(referenceGroup);
+                referenceGroup.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(referenceGroup);
+                }
             }
             else {
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
             }
         }
         else if (options.floating) {
             const group = this.createGroup();
             this._onDidAddGroup.fire(group);
-            const o = typeof options.floating === 'object' &&
+            const coordinates = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
                 : {};
-            this.addFloatingGroup(group, o, {
+            this.addFloatingGroup(group, coordinates, {
                 inDragMode: false,
                 skipRemoveGroup: true,
                 skipActiveGroup: true,
             });
             panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
+            group.model.openPanel(panel, {
+                skipSetActive: options.inactive,
+                skipSetGroupActive: options.inactive,
+            });
         }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
-            this.doSetGroupAndPanelActive(group);
+            group.model.openPanel(panel, {
+                skipSetActive: options.inactive,
+                skipSetGroupActive: options.inactive,
+            });
+            if (!options.inactive) {
+                this.doSetGroupAndPanelActive(group);
+            }
         }
         return panel;
     }
@@ -1021,12 +1023,10 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     createWatermarkComponent() {
-        var _a;
-        return createComponent('watermark-id', 'watermark-name', this.options.watermarkComponent
-            ? { 'watermark-name': this.options.watermarkComponent }
-            : {}, this.options.watermarkFrameworkComponent
-            ? { 'watermark-name': this.options.watermarkFrameworkComponent }
-            : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+        if (this.options.createWatermarkComponent) {
+            return this.options.createWatermarkComponent();
+        }
+        return new Watermark();
     }
     updateWatermark() {
         var _a, _b;
@@ -1407,6 +1407,8 @@ export class DockviewComponent extends BaseGrid {
                     return;
                 }
                 this._onWillShowOverlay.fire(event);
+            }), view.model.onUnhandledDragOverEvent((event) => {
+                this._onUnhandledDragOverEvent.fire(event);
             }), view.model.onDidAddPanel((event) => {
                 if (this._moving) {
                     return;

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

@@ -9,6 +9,7 @@ import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../pa
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
+import { DockviewDndOverlayEvent } from './options';
 import { OverlayRenderContainer } from '../overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 interface GroupMoveEvent {
@@ -181,6 +182,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     private readonly _api;
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -5,6 +5,7 @@ import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
+import { DockviewUnhandledDragOverEvent, } from './options';
 export class DockviewDidDropEvent extends DockviewEvent {
     get nativeEvent() {
         return this.options.nativeEvent;
@@ -182,6 +183,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
         this._overwriteRenderContainer = null;
         toggleClass(this.container, 'groupview', true);
         this._api = new DockviewApi(this.accessor);
@@ -212,7 +215,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 group: this.groupPanel,
                 getData: getPanelData,
             }));
-        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this._onUnhandledDragOverEvent);
     }
     focusContent() {
         this.contentContainer.element.focus();
@@ -243,33 +246,36 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
-        if (this.accessor.options.createRightHeaderActionsElement) {
+        if (this.accessor.options.createRightHeaderActionComponent) {
             this._rightHeaderActions =
-                this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
         }
-        if (this.accessor.options.createLeftHeaderActionsElement) {
+        if (this.accessor.options.createLeftHeaderActionComponent) {
             this._leftHeaderActions =
-                this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
-        if (this.accessor.options.createPrefixHeaderActionsElement) {
+        if (this.accessor.options.createPrefixHeaderActionComponent) {
             this._prefixHeaderActions =
-                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
@@ -468,7 +474,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.tabsContainer.delete(panel.id);
         this._panels.splice(index, 1);
         if (this.mostRecentlyUsed.includes(panel)) {
-            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+            const index = this.mostRecentlyUsed.indexOf(panel);
+            this.mostRecentlyUsed.splice(index, 1);
         }
         const disposable = this._panelDisposables.get(panel.id);
         if (disposable) {
@@ -543,17 +550,9 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
     }
     canDisplayOverlay(event, position, target) {
-        // custom overlay handler
-        if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay({
-                nativeEvent: event,
-                target,
-                group: this.accessor.getPanel(this.id),
-                position,
-                getData: getPanelData,
-            });
-        }
-        return false;
+        const firedEvent = new DockviewUnhandledDragOverEvent(event, target, position, getPanelData, this.accessor.getPanel(this.id));
+        this._onUnhandledDragOverEvent.fire(firedEvent);
+        return firedEvent.isAccepted;
     }
     handleDropEvent(type, event, position, index) {
         if (this.locked === 'no-drop-target') {

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();
     }
 }