dockview-core 3.0.1 → 3.1.0

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

@@ -31,11 +31,10 @@ export interface DockviewGroupPanelFloatingChangeEvent {
 }
 export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private readonly accessor;
-    private readonly _mutableDisposable;
     private _group;
     readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
-    private readonly _onDidActivePanelChange;
+    readonly _onDidActivePanelChange: Emitter<DockviewGroupChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);

package/dist/esm/api/dockviewGroupPanelApi.js

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

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -16,9 +16,6 @@ export class DefaultTab extends CompositeDisposable {
         this.action.appendChild(createCloseButton());
         this._element.appendChild(this._content);
         this._element.appendChild(this.action);
-        this.addDisposables(addDisposableListener(this.action, 'pointerdown', (ev) => {
-            ev.preventDefault();
-        }));
         this.render();
     }
     init(params) {

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -156,6 +156,9 @@ export class TabsContainer extends CompositeDisposable {
     delete(id) {
         const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
+        if (!tabToRemove) {
+            throw new Error(`dockview: Tab not found`);
+        }
         const { value, disposable } = tabToRemove;
         disposable.dispose();
         value.dispose();
@@ -177,6 +180,9 @@ export class TabsContainer extends CompositeDisposable {
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });
         }), tab.onChanged((event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
                 this.size === 1;
@@ -194,12 +200,15 @@ export class TabsContainer extends CompositeDisposable {
                 });
                 return;
             }
-            const isLeftClick = event.button === 0;
-            if (!isLeftClick || event.defaultPrevented) {
-                return;
-            }
-            if (this.group.activePanel !== panel) {
-                this.group.model.openPanel(panel);
+            switch (event.button) {
+                case 0: // left click or touch
+                    if (this.group.activePanel !== panel) {
+                        this.group.model.openPanel(panel);
+                    }
+                    break;
+                case 1: // middle click
+                    panel.api.close();
+                    break;
             }
         }), tab.onDrop((event) => {
             this._onDrop.fire({

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

@@ -207,7 +207,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get api(): DockviewApi;
     get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
-    constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
+    constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -73,9 +73,9 @@ export class DockviewComponent extends BaseGrid {
     get floatingGroups() {
         return this._floatingGroups;
     }
-    constructor(parentElement, options) {
+    constructor(container, options) {
         var _a;
-        super(parentElement, {
+        super(container, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
             styles: options.hideBorders
@@ -412,6 +412,9 @@ export class DockviewComponent extends BaseGrid {
             addDisposableWindowListener(_window.window, 'resize', () => {
                 group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, Disposable.from(() => {
+                if (this.isDisposed) {
+                    return; // cleanup may run after instance is disposed
+                }
                 if (isGroupAddedToDom &&
                     this.getPanel(referenceGroup.id)) {
                     this.movingLock(() => moveGroupWithoutDestroying({
@@ -431,6 +434,16 @@ export class DockviewComponent extends BaseGrid {
                     group.model.renderContainer =
                         this.overlayRenderContainer;
                     returnedGroup = group;
+                    const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
+                    if (alreadyRemoved) {
+                        /**
+                         * If this popout group was explicitly removed then we shouldn't run the additional
+                         * steps. To tell if the running of this disposable is the result of this popout group
+                         * being explicitly removed we can check if this popout group is still referenced in
+                         * the `this._popoutGroups` list.
+                         */
+                        return;
+                    }
                     if (floatingBox) {
                         this.addFloatingGroup(group, {
                             height: floatingBox.height,

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -67,6 +67,9 @@ export class DockviewGroupPanel extends GridviewPanel {
         }, new DockviewGroupPanelApiImpl(id, accessor));
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
+        this.addDisposables(this.model.onDidActivePanelChange((event) => {
+            this.api._onDidActivePanelChange.fire(event);
+        }));
     }
     focus() {
         if (!this.api.isActive) {

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -81,7 +81,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     get activeGroup(): T | undefined;
     get locked(): boolean;
     set locked(value: boolean);
-    constructor(parentElement: HTMLElement, options: BaseGridOptions);
+    constructor(container: HTMLElement, options: BaseGridOptions);
     abstract toJSON(): object;
     abstract fromJSON(data: any): void;
     abstract clear(): void;

package/dist/esm/gridview/baseComponentGridview.js

@@ -58,9 +58,9 @@ export class BaseGrid extends Resizable {
     set locked(value) {
         this.gridview.locked = value;
     }
-    constructor(parentElement, options) {
+    constructor(container, options) {
         var _a;
-        super(parentElement, options.disableAutoResizing);
+        super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._groups = new Map();
         this._onDidRemove = new Emitter();
@@ -79,6 +79,8 @@ export class BaseGrid extends Resizable {
         this.element.style.width = '100%';
         this._classNames = new Classnames(this.element);
         this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+        // the container is owned by the third-party, do not modify/delete it
+        container.appendChild(this.element);
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
         this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);

package/dist/esm/gridview/gridviewComponent.d.ts

@@ -61,7 +61,7 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     get options(): GridviewComponentOptions;
     get deserializer(): IPanelDeserializer | undefined;
     set deserializer(value: IPanelDeserializer | undefined);
-    constructor(parentElement: HTMLElement, options: GridviewComponentOptions);
+    constructor(container: HTMLElement, options: GridviewComponentOptions);
     updateOptions(options: Partial<GridviewComponentOptions>): void;
     removePanel(panel: GridviewPanel): void;
     /**

package/dist/esm/gridview/gridviewComponent.js

@@ -19,9 +19,9 @@ export class GridviewComponent extends BaseGrid {
     set deserializer(value) {
         this._deserializer = value;
     }
-    constructor(parentElement, options) {
+    constructor(container, options) {
         var _a;
-        super(parentElement, {
+        super(container, {
             proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
             orientation: options.orientation,
             styles: options.hideBorders

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

@@ -110,7 +110,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get height(): number;
     get width(): number;
     get options(): PaneviewComponentOptions;
-    constructor(parentElement: HTMLElement, options: PaneviewComponentOptions);
+    constructor(container: HTMLElement, options: PaneviewComponentOptions);
     setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;

package/dist/esm/paneview/paneviewComponent.js

@@ -56,9 +56,9 @@ export class PaneviewComponent extends Resizable {
     get options() {
         return this._options;
     }
-    constructor(parentElement, options) {
+    constructor(container, options) {
         var _a;
-        super(parentElement, options.disableAutoResizing);
+        super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
         this._viewDisposables = new Map();
@@ -74,9 +74,13 @@ export class PaneviewComponent extends Resizable {
         this.onDidRemoveView = this._onDidRemoveView.event;
         this._onUnhandledDragOverEvent = new Emitter();
         this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.element.style.height = '100%';
+        this.element.style.width = '100%';
         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 : '');
+        // the container is owned by the third-party, do not modify/delete it
+        container.appendChild(this.element);
         this._options = options;
         this.paneview = new Paneview(this.element, {
             // only allow paneview in the vertical orientation for now

package/dist/esm/splitview/splitview.d.ts

@@ -14,7 +14,7 @@ export interface ISplitviewStyles {
     separatorBorder: string;
 }
 export interface SplitViewOptions {
-    orientation: Orientation;
+    orientation?: Orientation;
     descriptor?: ISplitViewDescriptor;
     proportionalLayout?: boolean;
     styles?: ISplitviewStyles;

package/dist/esm/splitview/splitview.js

@@ -114,7 +114,7 @@ export class Splitview {
         this._margin = value;
     }
     constructor(container, options) {
-        var _a;
+        var _a, _b;
         this.container = container;
         this.viewItems = [];
         this.sashes = [];
@@ -212,9 +212,9 @@ export class Splitview {
             //
             return delta;
         };
-        this._orientation = options.orientation;
+        this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
         this.element = this.createContainer();
-        this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
+        this.margin = (_b = options.margin) !== null && _b !== void 0 ? _b : 0;
         this.proportionalLayout =
             options.proportionalLayout === undefined
                 ? true

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -83,7 +83,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     get maximumSize(): number;
     get height(): number;
     get width(): number;
-    constructor(parentElement: HTMLElement, options: SplitviewComponentOptions);
+    constructor(container: HTMLElement, options: SplitviewComponentOptions);
     updateOptions(options: Partial<SplitviewComponentOptions>): void;
     focus(): void;
     movePanel(from: number, to: number): void;

package/dist/esm/splitview/splitviewComponent.js

@@ -44,9 +44,9 @@ export class SplitviewComponent extends Resizable {
             ? this.splitview.size
             : this.splitview.orthogonalSize;
     }
-    constructor(parentElement, options) {
+    constructor(container, options) {
         var _a;
-        super(parentElement, options.disableAutoResizing);
+        super(document.createElement('div'), options.disableAutoResizing);
         this._splitviewChangeDisposable = new MutableDisposable();
         this._panels = new Map();
         this._onDidLayoutfromJSON = new Emitter();
@@ -57,8 +57,12 @@ export class SplitviewComponent extends Resizable {
         this.onDidRemoveView = this._onDidRemoveView.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this.element.style.height = '100%';
+        this.element.style.width = '100%';
         this._classNames = new Classnames(this.element);
         this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+        // the container is owned by the third-party, do not modify/delete it
+        container.appendChild(this.element);
         this._options = options;
         this.splitview = new Splitview(this.element, options);
         this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);

package/dist/styles/dockview.css

@@ -243,7 +243,7 @@
 .dockview-theme-replit .dv-groupview.dv-inactive-group {
   border: 1px solid transparent;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled)::after {
+.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
   content: "";
   height: 4px;
   width: 40px;
@@ -254,7 +254,7 @@
   background-color: var(--dv-separator-handle-background-color);
   position: absolute;
 }
-.dockview-theme-replit .vertical > .sash-container > .sash:not(.disabled):hover::after {
+.dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
   background-color: var(--dv-separator-handle-hover-background-color);
 }
 .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {

package/package.json

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