dockview-core 2.1.4 → 3.0.0

package/dist/cjs/paneview/options.d.ts

@@ -1,25 +1,29 @@
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
-import { PaneviewDndOverlayEvent } from './paneviewComponent';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
-export interface PaneviewComponentOptions {
+import { PaneTransfer } from '../dnd/dataTransfer';
+import { Position } from '../dnd/droptarget';
+import { CreateComponentOptions } from '../dockview/options';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
+import { IPanePart, IPaneviewPanel } from './paneviewPanel';
+export interface PaneviewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    headerComponents?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    headerframeworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: {
-        header: FrameworkFactory<IPaneHeaderPart>;
-        body: FrameworkFactory<IPaneBodyPart>;
-    };
     disableDnd?: boolean;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     className?: string;
 }
+export interface PaneviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => IPanePart;
+    createHeaderComponent?: (options: CreateComponentOptions) => IPanePart | undefined;
+}
+export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
+export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
+export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
+    nativeEvent: DragEvent;
+    position: Position;
+    panel: IPaneviewPanel;
+    getData: () => PaneTransfer | undefined;
+}
+export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
+    readonly nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly getData: () => PaneTransfer | undefined;
+    readonly panel: IPaneviewPanel;
+    constructor(nativeEvent: DragEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
+}

package/dist/cjs/paneview/options.js

@@ -1,2 +1,44 @@
 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaneviewUnhandledDragOverEvent = exports.PROPERTY_KEYS_PANEVIEW = void 0;
+var events_1 = require("../events");
+exports.PROPERTY_KEYS_PANEVIEW = (function () {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    var properties = {
+        disableAutoResizing: undefined,
+        disableDnd: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+var PaneviewUnhandledDragOverEvent = /** @class */ (function (_super) {
+    __extends(PaneviewUnhandledDragOverEvent, _super);
+    function PaneviewUnhandledDragOverEvent(nativeEvent, position, getData, panel) {
+        var _this = _super.call(this) || this;
+        _this.nativeEvent = nativeEvent;
+        _this.position = position;
+        _this.getData = getData;
+        _this.panel = panel;
+        return _this;
+    }
+    return PaneviewUnhandledDragOverEvent;
+}(events_1.AcceptableEvent));
+exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;

package/dist/cjs/paneview/paneviewComponent.d.ts

@@ -1,18 +1,12 @@
 import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { LayoutPriority, Orientation } from '../splitview/splitview';
-import { PaneviewComponentOptions } from './options';
+import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from './options';
 import { Paneview } from './paneview';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
-import { DraggablePaneviewPanel, PaneviewDropEvent } from './draggablePaneviewPanel';
-import { PaneTransfer } from '../dnd/dataTransfer';
+import { IPanePart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
+import { DraggablePaneviewPanel, PaneviewDidDropEvent } from './draggablePaneviewPanel';
 import { Resizable } from '../resizable';
 import { Parameters } from '../panel/types';
-export interface PaneviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-}
 export interface SerializedPaneviewPanel {
     snap?: boolean;
     priority?: LayoutPriority;
@@ -40,15 +34,15 @@ export declare class PaneFramework extends DraggablePaneviewPanel {
         id: string;
         component: string;
         headerComponent: string | undefined;
-        body: IPaneBodyPart;
-        header: IPaneHeaderPart;
+        body: IPanePart;
+        header: IPanePart;
         orientation: Orientation;
         isExpanded: boolean;
         disableDnd: boolean;
         accessor: IPaneviewComponent;
     });
-    getBodyComponent(): IPaneBodyPart;
-    getHeaderComponent(): IPaneHeaderPart;
+    getBodyComponent(): IPanePart;
+    getHeaderComponent(): IPanePart;
 }
 export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     id: string;
@@ -72,9 +66,10 @@ export interface IPaneviewComponent extends IDisposable {
     readonly options: PaneviewComponentOptions;
     readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
@@ -98,11 +93,13 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     private readonly _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidDrop;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onDidAddView;
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     private readonly _classNames;
     get id(): string;
     get panels(): PaneviewPanel[];

package/dist/cjs/paneview/paneviewComponent.js

@@ -55,7 +55,6 @@ var __values = (this && this.__values) || function(o) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaneviewComponent = exports.PaneFramework = void 0;
 var component_api_1 = require("../api/component.api");
-var componentFactory_1 = require("../panel/componentFactory");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var splitview_1 = require("../splitview/splitview");
@@ -100,16 +99,12 @@ var PaneviewComponent = /** @class */ (function (_super) {
         _this.onDidAddView = _this._onDidAddView.event;
         _this._onDidRemoveView = new events_1.Emitter();
         _this.onDidRemoveView = _this._onDidRemoveView.event;
-        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView);
+        _this._onUnhandledDragOverEvent = new events_1.Emitter();
+        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView, _this._onUnhandledDragOverEvent);
         _this._classNames = new dom_1.Classnames(_this.element);
         _this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         _this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         _this.paneview = new paneview_1.Paneview(_this.element, {
             // only allow paneview in the vertical orientation for now
             orientation: splitview_1.Orientation.VERTICAL,
@@ -202,22 +197,19 @@ var PaneviewComponent = /** @class */ (function (_super) {
         this._options = __assign(__assign({}, this.options), options);
     };
     PaneviewComponent.prototype.addPanel = function (options) {
-        var _a, _b, _c, _d;
-        var body = (0, componentFactory_1.createComponent)(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.body.createComponent,
-            }
-            : undefined);
+        var _a;
+        var body = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         var header;
-        if (options.headerComponent) {
-            header = (0, componentFactory_1.createComponent)(options.id, options.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
-                ? {
-                    createComponent: this.options.frameworkWrapper.header
-                        .createComponent,
-                }
-                : undefined);
+        if (options.headerComponent && this.options.createHeaderComponent) {
+            header = this.options.createHeaderComponent({
+                id: options.id,
+                name: options.headerComponent,
+            });
         }
-        else {
+        if (!header) {
             header = new defaultPaneviewHeader_1.DefaultHeader();
         }
         var view = new PaneFramework({
@@ -235,7 +227,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
         var size = typeof options.size === 'number' ? options.size : splitview_1.Sizing.Distribute;
         var index = typeof options.index === 'number' ? options.index : undefined;
         view.init({
-            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumBodySize: options.minimumBodySize,
             maximumBodySize: options.maximumBodySize,
             isExpanded: options.isExpanded,
@@ -304,24 +296,20 @@ var PaneviewComponent = /** @class */ (function (_super) {
             descriptor: {
                 size: size,
                 views: views.map(function (view) {
-                    var _a, _b, _c, _d;
                     var data = view.data;
-                    var body = (0, componentFactory_1.createComponent)(data.id, data.component, (_a = _this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = _this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, _this.options.frameworkWrapper
-                        ? {
-                            createComponent: _this.options.frameworkWrapper.body
-                                .createComponent,
-                        }
-                        : undefined);
+                    var body = _this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     var header;
-                    if (data.headerComponent) {
-                        header = (0, componentFactory_1.createComponent)(data.id, data.headerComponent, (_c = _this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, (_d = _this.options.headerframeworkComponents) !== null && _d !== void 0 ? _d : {}, _this.options.frameworkWrapper
-                            ? {
-                                createComponent: _this.options.frameworkWrapper.header
-                                    .createComponent,
-                            }
-                            : undefined);
+                    if (data.headerComponent &&
+                        _this.options.createHeaderComponent) {
+                        header = _this.options.createHeaderComponent({
+                            id: data.id,
+                            name: data.headerComponent,
+                        });
                     }
-                    else {
+                    if (!header) {
                         header = new defaultPaneviewHeader_1.DefaultHeader();
                     }
                     var panel = new PaneFramework({
@@ -381,9 +369,11 @@ var PaneviewComponent = /** @class */ (function (_super) {
     };
     PaneviewComponent.prototype.doAddPanel = function (panel) {
         var _this = this;
-        var disposable = panel.onDidDrop(function (event) {
+        var disposable = new lifecycle_1.CompositeDisposable(panel.onDidDrop(function (event) {
             _this._onDidDrop.fire(event);
-        });
+        }), panel.onUnhandledDragOverEvent(function (event) {
+            _this._onUnhandledDragOverEvent.fire(event);
+        }));
         this._viewDisposables.set(panel.id, disposable);
     };
     PaneviewComponent.prototype.doRemovePanel = function (panel) {

package/dist/cjs/paneview/paneviewPanel.d.ts

@@ -21,12 +21,7 @@ export interface PanePanelInitParameter extends PanelInitParameters {
 export interface PanePanelComponentInitParameter extends PanePanelInitParameter {
     api: PaneviewPanelApiImpl;
 }
-export interface IPaneBodyPart extends IDisposable {
-    readonly element: HTMLElement;
-    update(params: PanelUpdateEvent): void;
-    init(parameters: PanePanelComponentInitParameter): void;
-}
-export interface IPaneHeaderPart extends IDisposable {
+export interface IPanePart extends IDisposable {
     readonly element: HTMLElement;
     update(params: PanelUpdateEvent): void;
     init(parameters: PanePanelComponentInitParameter): void;
@@ -89,6 +84,6 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     toJSON(): PanePanelViewState;
     private renderOnce;
     getComponent(): IFrameworkPart;
-    protected abstract getBodyComponent(): IPaneBodyPart;
-    protected abstract getHeaderComponent(): IPaneHeaderPart;
+    protected abstract getBodyComponent(): IPanePart;
+    protected abstract getHeaderComponent(): IPanePart;
 }

package/dist/cjs/splitview/options.d.ts

@@ -2,7 +2,7 @@ import { PanelInitParameters } from '../panel/types';
 import { SplitViewOptions, LayoutPriority } from './splitview';
 import { SplitviewPanel } from './splitviewPanel';
 import { SplitviewComponent } from './splitviewComponent';
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
+import { CreateComponentOptions } from '../dockview/options';
 export interface PanelViewInitParameters extends PanelInitParameters {
     minimumSize?: number;
     maximumSize?: number;
@@ -10,14 +10,12 @@ export interface PanelViewInitParameters extends PanelInitParameters {
     priority?: LayoutPriority;
     accessor: SplitviewComponent;
 }
-export interface SplitviewComponentOptions extends SplitViewOptions {
+export interface SplitviewOptions extends SplitViewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<SplitviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
     className?: string;
 }
+export interface SplitviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => SplitviewPanel;
+}
+export type SplitviewComponentOptions = SplitviewOptions & SplitviewFrameworkOptions;
+export declare const PROPERTY_KEYS_SPLITVIEW: (keyof SplitviewOptions)[];

package/dist/cjs/splitview/options.js

@@ -1,2 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROPERTY_KEYS_SPLITVIEW = void 0;
+exports.PROPERTY_KEYS_SPLITVIEW = (function () {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    var properties = {
+        orientation: undefined,
+        descriptor: undefined,
+        proportionalLayout: undefined,
+        styles: undefined,
+        margin: undefined,
+        disableAutoResizing: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();

package/dist/cjs/splitview/splitview.d.ts

@@ -14,11 +14,11 @@ export interface ISplitviewStyles {
     separatorBorder: string;
 }
 export interface SplitViewOptions {
-    readonly orientation: Orientation;
-    readonly descriptor?: ISplitViewDescriptor;
-    readonly proportionalLayout?: boolean;
-    readonly styles?: ISplitviewStyles;
-    readonly margin?: number;
+    orientation: Orientation;
+    descriptor?: ISplitViewDescriptor;
+    proportionalLayout?: boolean;
+    styles?: ISplitviewStyles;
+    margin?: number;
 }
 export declare enum LayoutPriority {
     Low = "low",// view is offered space last

package/dist/cjs/splitview/splitviewComponent.js

@@ -57,7 +57,6 @@ exports.SplitviewComponent = void 0;
 var lifecycle_1 = require("../lifecycle");
 var splitview_1 = require("./splitview");
 var events_1 = require("../events");
-var componentFactory_1 = require("../panel/componentFactory");
 var resizable_1 = require("../resizable");
 var dom_1 = require("../dom");
 /**
@@ -81,12 +80,6 @@ var SplitviewComponent = /** @class */ (function (_super) {
         _this._classNames = new dom_1.Classnames(_this.element);
         _this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         _this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         _this.splitview = new splitview_1.Splitview(_this.element, options);
         _this.addDisposables(_this._onDidAddView, _this._onDidLayoutfromJSON, _this._onDidRemoveView, _this._onDidLayoutChange);
         return _this;
@@ -226,18 +219,17 @@ var SplitviewComponent = /** @class */ (function (_super) {
         return this.panels.find(function (view) { return view.id === id; });
     };
     SplitviewComponent.prototype.addPanel = function (options) {
-        var _a, _b, _c;
+        var _a;
         if (this._panels.has(options.id)) {
             throw new Error("panel ".concat(options.id, " already exists"));
         }
-        var view = (0, componentFactory_1.createComponent)(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.createComponent,
-            }
-            : undefined);
+        var view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.orientation = this.splitview.orientation;
         view.init({
-            params: (_c = options.params) !== null && _c !== void 0 ? _c : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumSize: options.minimumSize,
             maximumSize: options.maximumSize,
             snap: options.snap,
@@ -302,17 +294,14 @@ var SplitviewComponent = /** @class */ (function (_super) {
             descriptor: {
                 size: size,
                 views: views.map(function (view) {
-                    var _a, _b;
                     var data = view.data;
                     if (_this._panels.has(data.id)) {
                         throw new Error("panel ".concat(data.id, " already exists"));
                     }
-                    var panel = (0, componentFactory_1.createComponent)(data.id, data.component, (_a = _this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = _this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, _this.options.frameworkWrapper
-                        ? {
-                            createComponent: _this.options.frameworkWrapper
-                                .createComponent,
-                        }
-                        : undefined);
+                    var panel = _this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(function () {
                         var _a;
                         panel.init({