dockview-core 2.1.4 → 3.0.0

package/dist/esm/paneview/paneviewComponent.js

@@ -1,5 +1,4 @@
 import { PaneviewApi } from '../api/component.api';
-import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
 import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { Orientation, Sizing } from '../splitview/splitview';
@@ -73,16 +72,12 @@ export class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView, this._onUnhandledDragOverEvent);
         this._classNames = new 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(this.element, {
             // only allow paneview in the vertical orientation for now
             orientation: Orientation.VERTICAL,
@@ -107,22 +102,19 @@ export class PaneviewComponent extends Resizable {
         this._options = Object.assign(Object.assign({}, this.options), options);
     }
     addPanel(options) {
-        var _a, _b, _c, _d;
-        const body = 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;
+        const body = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         let header;
-        if (options.headerComponent) {
-            header = 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 DefaultHeader();
         }
         const view = new PaneFramework({
@@ -140,7 +132,7 @@ export class PaneviewComponent extends Resizable {
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
         const 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,
@@ -205,24 +197,20 @@ export class PaneviewComponent extends Resizable {
             descriptor: {
                 size,
                 views: views.map((view) => {
-                    var _a, _b, _c, _d;
                     const data = view.data;
-                    const body = 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);
+                    const body = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     let header;
-                    if (data.headerComponent) {
-                        header = 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 DefaultHeader();
                     }
                     const panel = new PaneFramework({
@@ -270,9 +258,11 @@ export class PaneviewComponent extends Resizable {
         this.paneview.dispose();
     }
     doAddPanel(panel) {
-        const disposable = panel.onDidDrop((event) => {
+        const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);
-        });
+        }), panel.onUnhandledDragOverEvent((event) => {
+            this._onUnhandledDragOverEvent.fire(event);
+        }));
         this._viewDisposables.set(panel.id, disposable);
     }
     doRemovePanel(panel) {

package/dist/esm/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/esm/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/esm/splitview/options.js

@@ -1 +1,16 @@
-export {};
+export const PROPERTY_KEYS_SPLITVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        orientation: undefined,
+        descriptor: undefined,
+        proportionalLayout: undefined,
+        styles: undefined,
+        margin: undefined,
+        disableAutoResizing: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();

package/dist/esm/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/esm/splitview/splitviewComponent.js

@@ -1,7 +1,6 @@
 import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { Orientation, Sizing, Splitview, } from './splitview';
 import { Emitter } from '../events';
-import { createComponent } from '../panel/componentFactory';
 import { Resizable } from '../resizable';
 import { Classnames } from '../dom';
 /**
@@ -61,12 +60,6 @@ export class SplitviewComponent extends Resizable {
         this._classNames = new 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(this.element, options);
         this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
     }
@@ -129,18 +122,17 @@ export class SplitviewComponent extends Resizable {
         return this.panels.find((view) => view.id === id);
     }
     addPanel(options) {
-        var _a, _b, _c;
+        var _a;
         if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
-        const view = 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);
+        const 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,
@@ -202,17 +194,14 @@ export class SplitviewComponent extends Resizable {
             descriptor: {
                 size,
                 views: views.map((view) => {
-                    var _a, _b;
                     const data = view.data;
                     if (this._panels.has(data.id)) {
                         throw new Error(`panel ${data.id} already exists`);
                     }
-                    const panel = 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);
+                    const panel = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(() => {
                         var _a;
                         panel.init({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",

package/dist/cjs/panel/componentFactory.d.ts

@@ -1,11 +0,0 @@
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
-}
-export type ComponentConstructor<T> = {
-    new (id: string, component: string): T;
-};
-export declare function createComponent<T>(id: string, componentName?: string, components?: {
-    [componentName: string]: ComponentConstructor<T>;
-}, frameworkComponents?: {
-    [componentName: string]: any;
-}, createFrameworkComponent?: FrameworkFactory<T>, fallback?: () => T): T;

package/dist/cjs/panel/componentFactory.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createComponent = void 0;
-function createComponent(id, componentName, components, frameworkComponents, createFrameworkComponent, fallback) {
-    if (components === void 0) { components = {}; }
-    if (frameworkComponents === void 0) { frameworkComponents = {}; }
-    var Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    var FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error("Cannot create '".concat(id, "'. component '").concat(componentName, "' registered as both a component and frameworkComponent"));
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error("Cannot create '".concat(id, "' for framework component '").concat(componentName, "'. you must register a frameworkPanelWrapper to use framework components"));
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error("Cannot create '".concat(id, "', no component '").concat(componentName, "' provided"));
-    }
-    return new Component(id, componentName);
-}
-exports.createComponent = createComponent;

package/dist/esm/panel/componentFactory.d.ts

@@ -1,11 +0,0 @@
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
-}
-export type ComponentConstructor<T> = {
-    new (id: string, component: string): T;
-};
-export declare function createComponent<T>(id: string, componentName?: string, components?: {
-    [componentName: string]: ComponentConstructor<T>;
-}, frameworkComponents?: {
-    [componentName: string]: any;
-}, createFrameworkComponent?: FrameworkFactory<T>, fallback?: () => T): T;

package/dist/esm/panel/componentFactory.js

@@ -1,24 +0,0 @@
-export function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-    const Component = typeof componentName === 'string'
-        ? components[componentName]
-        : undefined;
-    const FrameworkComponent = typeof componentName === 'string'
-        ? frameworkComponents[componentName]
-        : undefined;
-    if (Component && FrameworkComponent) {
-        throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-    }
-    if (FrameworkComponent) {
-        if (!createFrameworkComponent) {
-            throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-        }
-        return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-    }
-    if (!Component) {
-        if (fallback) {
-            return fallback();
-        }
-        throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-    }
-    return new Component(id, componentName);
-}