dockview-core 2.1.4 → 3.0.0

package/dist/dockview-core.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 2.1.4
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -99,6 +99,17 @@ define(['exports'], (function (exports) { 'use strict';
             this._defaultPrevented = true;
         }
     }
+    class AcceptableEvent {
+        constructor() {
+            this._isAccepted = false;
+        }
+        get isAccepted() {
+            return this._isAccepted;
+        }
+        accept() {
+            this._isAccepted = true;
+        }
+    }
     class LeakageMonitor {
         constructor() {
             this.events = new Map();
@@ -1490,6 +1501,23 @@ define(['exports'], (function (exports) { 'use strict';
         }
     }
 
+    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);
+    })();
+
     class Paneview extends CompositeDisposable {
         get onDidAddView() {
             return this.splitview.onDidAddView;
@@ -2619,6 +2647,21 @@ define(['exports'], (function (exports) { 'use strict';
         }
     }
 
+    const PROPERTY_KEYS_GRIDVIEW = (() => {
+        /**
+         * 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,
+            proportionalLayout: undefined,
+            orientation: undefined,
+            hideBorders: undefined,
+            className: undefined,
+        };
+        return Object.keys(properties);
+    })();
+
     class Resizable extends CompositeDisposable {
         get element() {
             return this._element;
@@ -3096,15 +3139,10 @@ define(['exports'], (function (exports) { 'use strict';
          * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
          */
         get onDidDrop() {
-            const emitter = new Emitter();
-            const disposable = this.component.onDidDrop((e) => {
-                emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
-            });
-            emitter.dispose = () => {
-                disposable.dispose();
-                emitter.dispose();
-            };
-            return emitter.event;
+            return this.component.onDidDrop;
+        }
+        get onUnhandledDragOverEvent() {
+            return this.component.onUnhandledDragOverEvent;
         }
         constructor(component) {
             this.component = component;
@@ -4031,6 +4069,28 @@ define(['exports'], (function (exports) { 'use strict';
         return 'center';
     }
 
+    const PROPERTY_KEYS_PANEVIEW = (() => {
+        /**
+         * 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,
+            disableDnd: undefined,
+            className: undefined,
+        };
+        return Object.keys(properties);
+    })();
+    class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
+        constructor(nativeEvent, position, getData, panel) {
+            super();
+            this.nativeEvent = nativeEvent;
+            this.position = position;
+            this.getData = getData;
+            this.panel = panel;
+        }
+    }
+
     class WillFocusEvent extends DockviewEvent {
         constructor() {
             super();
@@ -4454,6 +4514,9 @@ define(['exports'], (function (exports) { 'use strict';
             this.accessor = accessor;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
+            this._onUnhandledDragOverEvent = new Emitter();
+            this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+            this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
             if (!disableDnd) {
                 this.initDragFeatures();
             }
@@ -4480,7 +4543,7 @@ define(['exports'], (function (exports) { 'use strict';
                 overlayModel: {
                     activationSize: { type: 'percentage', value: 50 },
                 },
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: (event, position) => {
                     const data = getPaneData();
                     if (data) {
                         if (data.paneId !== this.id &&
@@ -4488,14 +4551,9 @@ define(['exports'], (function (exports) { 'use strict';
                             return true;
                         }
                     }
-                    if (this.accessor.options.showDndOverlay) {
-                        return this.accessor.options.showDndOverlay({
-                            nativeEvent: event,
-                            getData: getPaneData,
-                            panel: this,
-                        });
-                    }
-                    return false;
+                    const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+                    this._onUnhandledDragOverEvent.fire(firedEvent);
+                    return firedEvent.isAccepted;
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -4950,15 +5008,7 @@ define(['exports'], (function (exports) { 'use strict';
             this._element.appendChild(this.leftActionsContainer);
             this._element.appendChild(this.voidContainer.element);
             this._element.appendChild(this.rightActionsContainer);
-            this.addDisposables(this.accessor.onDidAddPanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
-                }
-            }), this.accessor.onDidRemovePanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(this._element, 'dv-single-tab', this.size === 1);
-                }
-            }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+            this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
                 this._onGroupDragStart.fire({
                     nativeEvent: event,
                     group: this.group,
@@ -5003,20 +5053,6 @@ define(['exports'], (function (exports) { 'use strict';
         setActive(_isGroupActive) {
             // noop
         }
-        addTab(tab, index = this.tabs.length) {
-            if (index < 0 || index > this.tabs.length) {
-                throw new Error('invalid location');
-            }
-            this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-            this.tabs = [
-                ...this.tabs.slice(0, index),
-                tab,
-                ...this.tabs.slice(index),
-            ];
-            if (this.selectedIndex < 0) {
-                this.selectedIndex = index;
-            }
-        }
         delete(id) {
             const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
             const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -5024,6 +5060,7 @@ define(['exports'], (function (exports) { 'use strict';
             disposable.dispose();
             value.dispose();
             value.element.remove();
+            this.updateClassnames();
         }
         setActivePanel(panel) {
             this.tabs.forEach((tab) => {
@@ -5092,25 +5129,37 @@ define(['exports'], (function (exports) { 'use strict';
             }
             this.tabs = [];
         }
+        addTab(tab, index = this.tabs.length) {
+            if (index < 0 || index > this.tabs.length) {
+                throw new Error('invalid location');
+            }
+            this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+            this.tabs = [
+                ...this.tabs.slice(0, index),
+                tab,
+                ...this.tabs.slice(index),
+            ];
+            if (this.selectedIndex < 0) {
+                this.selectedIndex = index;
+            }
+            this.updateClassnames();
+        }
+        updateClassnames() {
+            toggleClass(this._element, 'dv-single-tab', this.size === 1);
+        }
     }
 
-    class DockviewUnhandledDragOverEvent {
-        get isAccepted() {
-            return this._isAccepted;
-        }
+    class DockviewUnhandledDragOverEvent extends AcceptableEvent {
         constructor(nativeEvent, target, position, getData, group) {
+            super();
             this.nativeEvent = nativeEvent;
             this.target = target;
             this.position = position;
             this.getData = getData;
             this.group = group;
-            this._isAccepted = false;
-        }
-        accept() {
-            this._isAccepted = true;
         }
     }
-    const PROPERTY_KEYS = (() => {
+    const PROPERTY_KEYS_DOCKVIEW = (() => {
         /**
          * by readong the keys from an empty value object TypeScript will error
          * when we add or remove new properties to `DockviewOptions`
@@ -8979,31 +9028,6 @@ define(['exports'], (function (exports) { 'use strict';
         }
     }
 
-    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);
-    }
-
     class GridviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -9021,10 +9045,13 @@ define(['exports'], (function (exports) { 'use strict';
             this._deserializer = value;
         }
         constructor(parentElement, options) {
+            var _a;
             super(parentElement, {
-                proportionalLayout: options.proportionalLayout,
+                proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
                 orientation: options.orientation,
-                styles: options.styles,
+                styles: options.hideBorders
+                    ? { separatorBorder: 'transparent' }
+                    : undefined,
                 disableAutoResizing: options.disableAutoResizing,
                 className: options.className,
             });
@@ -9044,12 +9071,6 @@ define(['exports'], (function (exports) { 'use strict';
             }), this.onDidActiveChange((event) => {
                 this._onDidActiveGroupChange.fire(event);
             }));
-            if (!this.options.components) {
-                this.options.components = {};
-            }
-            if (!this.options.frameworkComponents) {
-                this.options.frameworkComponents = {};
-            }
         }
         updateOptions(options) {
             super.updateOptions(options);
@@ -9099,14 +9120,11 @@ define(['exports'], (function (exports) { 'use strict';
                 const height = this.height;
                 this.gridview.deserialize(grid, {
                     fromJSON: (node) => {
-                        var _a, _b;
                         const { data } = node;
-                        const view = 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.frameworkComponentFactory
-                            ? {
-                                createComponent: this.options.frameworkComponentFactory
-                                    .createComponent,
-                            }
-                            : undefined);
+                        const view = this.options.createComponent({
+                            id: data.id,
+                            name: data.component,
+                        });
                         queue.push(() => view.init({
                             params: data.params,
                             minimumWidth: data.minimumWidth,
@@ -9184,7 +9202,7 @@ define(['exports'], (function (exports) { 'use strict';
             this.doAddGroup(removedPanel, relativeLocation, options.size);
         }
         addPanel(options) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             let relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
             if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
                 const referenceGroup = (_c = this._groups.get(options.position.referencePanel)) === null || _c === void 0 ? void 0 : _c.value;
@@ -9200,14 +9218,12 @@ define(['exports'], (function (exports) { 'use strict';
                     relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                 }
             }
-            const view = createComponent(options.id, options.component, (_d = this.options.components) !== null && _d !== void 0 ? _d : {}, (_e = this.options.frameworkComponents) !== null && _e !== void 0 ? _e : {}, this.options.frameworkComponentFactory
-                ? {
-                    createComponent: this.options.frameworkComponentFactory
-                        .createComponent,
-                }
-                : undefined);
+            const view = this.options.createComponent({
+                id: options.id,
+                name: options.component,
+            });
             view.init({
-                params: (_f = options.params) !== null && _f !== void 0 ? _f : {},
+                params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
                 minimumWidth: options.minimumWidth,
                 maximumWidth: options.maximumWidth,
                 minimumHeight: options.minimumHeight,
@@ -9335,12 +9351,6 @@ define(['exports'], (function (exports) { 'use strict';
             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);
         }
@@ -9403,18 +9413,17 @@ define(['exports'], (function (exports) { 'use strict';
             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,
@@ -9476,17 +9485,14 @@ define(['exports'], (function (exports) { 'use strict';
                 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({
@@ -9669,16 +9675,12 @@ define(['exports'], (function (exports) { 'use strict';
             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: exports.Orientation.VERTICAL,
@@ -9703,22 +9705,19 @@ define(['exports'], (function (exports) { 'use strict';
             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({
@@ -9736,7 +9735,7 @@ define(['exports'], (function (exports) { 'use strict';
             const size = typeof options.size === 'number' ? options.size : exports.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,
@@ -9801,24 +9800,20 @@ define(['exports'], (function (exports) { 'use strict';
                 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({
@@ -9866,9 +9861,11 @@ define(['exports'], (function (exports) { 'use strict';
             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) {
@@ -10030,7 +10027,10 @@ define(['exports'], (function (exports) { 'use strict';
     exports.GridviewApi = GridviewApi;
     exports.GridviewComponent = GridviewComponent;
     exports.GridviewPanel = GridviewPanel;
-    exports.PROPERTY_KEYS = PROPERTY_KEYS;
+    exports.PROPERTY_KEYS_DOCKVIEW = PROPERTY_KEYS_DOCKVIEW;
+    exports.PROPERTY_KEYS_GRIDVIEW = PROPERTY_KEYS_GRIDVIEW;
+    exports.PROPERTY_KEYS_PANEVIEW = PROPERTY_KEYS_PANEVIEW;
+    exports.PROPERTY_KEYS_SPLITVIEW = PROPERTY_KEYS_SPLITVIEW;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
     exports.PanelTransfer = PanelTransfer;
@@ -10038,6 +10038,7 @@ define(['exports'], (function (exports) { 'use strict';
     exports.PaneviewApi = PaneviewApi;
     exports.PaneviewComponent = PaneviewComponent;
     exports.PaneviewPanel = PaneviewPanel;
+    exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;
     exports.Splitview = Splitview;
     exports.SplitviewApi = SplitviewApi;
     exports.SplitviewComponent = SplitviewComponent;