dockview-core 2.1.4 → 3.0.0

package/dist/dockview-core.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 2.1.4
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -127,6 +127,17 @@ class DockviewEvent {
         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();
@@ -1518,6 +1529,23 @@ class Splitview {
     }
 }
 
+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;
@@ -2647,6 +2675,21 @@ class Gridview {
     }
 }
 
+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;
@@ -3124,15 +3167,10 @@ class PaneviewApi {
      * 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;
@@ -4059,6 +4097,28 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     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();
@@ -4482,6 +4542,9 @@ class DraggablePaneviewPanel extends PaneviewPanel {
         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();
         }
@@ -4508,7 +4571,7 @@ class DraggablePaneviewPanel extends PaneviewPanel {
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: (event, position) => {
                 const data = getPaneData();
                 if (data) {
                     if (data.paneId !== this.id &&
@@ -4516,14 +4579,9 @@ class DraggablePaneviewPanel extends PaneviewPanel {
                         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) => {
@@ -4978,15 +5036,7 @@ class TabsContainer extends CompositeDisposable {
         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,
@@ -5031,20 +5081,6 @@ class TabsContainer extends CompositeDisposable {
     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];
@@ -5052,6 +5088,7 @@ class TabsContainer extends CompositeDisposable {
         disposable.dispose();
         value.dispose();
         value.element.remove();
+        this.updateClassnames();
     }
     setActivePanel(panel) {
         this.tabs.forEach((tab) => {
@@ -5120,25 +5157,37 @@ class TabsContainer extends CompositeDisposable {
         }
         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`
@@ -9007,31 +9056,6 @@ class DockviewComponent extends BaseGrid {
     }
 }
 
-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;
@@ -9049,10 +9073,13 @@ class GridviewComponent extends BaseGrid {
         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,
         });
@@ -9072,12 +9099,6 @@ class GridviewComponent extends BaseGrid {
         }), 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);
@@ -9127,14 +9148,11 @@ class GridviewComponent extends BaseGrid {
             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,
@@ -9212,7 +9230,7 @@ class GridviewComponent extends BaseGrid {
         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;
@@ -9228,14 +9246,12 @@ class GridviewComponent extends BaseGrid {
                 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,
@@ -9363,12 +9379,6 @@ 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);
     }
@@ -9431,18 +9441,17 @@ 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,
@@ -9504,17 +9513,14 @@ 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({
@@ -9697,16 +9703,12 @@ 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,
@@ -9731,22 +9733,19 @@ 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({
@@ -9764,7 +9763,7 @@ 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,
@@ -9829,24 +9828,20 @@ 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({
@@ -9894,9 +9889,11 @@ 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) {
@@ -10038,5 +10035,5 @@ function createPaneview(element, options) {
     return new PaneviewApi(component);
 }
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, toTarget };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDidDropEvent, Disposable as DockviewDisposable, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewUnhandledDragOverEvent, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, LayoutPriority, Orientation, PROPERTY_KEYS_DOCKVIEW, PROPERTY_KEYS_GRIDVIEW, PROPERTY_KEYS_PANEVIEW, PROPERTY_KEYS_SPLITVIEW, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewUnhandledDragOverEvent, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, Tab, WillShowOverlayLocationEvent, createDockview, createGridview, createPaneview, createSplitview, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, orthogonal, positionToDirection, toTarget };
 //# sourceMappingURL=dockview-core.esm.js.map