Merge branch 'master' of https://github.com/mathuo/dockview into 538-interested-in-porting-dockview-to-vuejs

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.11.0",
+  "version": "1.12.0",
   "npmClient": "yarn",
   "command": {
     "publish": {

packages/dockview-core/package.json

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

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -31,6 +31,12 @@ export interface DockviewPanelApi
         // omit properties that do not make sense here
         'setVisible' | 'onDidConstraintsChange' | 'setConstraints'
     > {
+    /**
+     * The id of the tab component renderer
+     *
+     * Undefined if no custom tab renderer is provided
+     */
+    readonly tabComponent: string | undefined;
     readonly group: DockviewGroupPanel;
     readonly isGroupActive: boolean;
     readonly renderer: DockviewPanelRenderer;

packages/dockview-core/src/api/panelApi.ts

@@ -28,6 +28,10 @@ export interface PanelApi {
     setActive(): void;
     setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
+    /**
+     * The id of the component renderer
+     */
+    readonly component: string;
     /**
      * The id of the panel that would have been assigned when the panel was created
      */

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -15,6 +15,7 @@ import {
     DockviewGroupDropLocation,
     WillShowOverlayLocationEvent,
 } from '../../dockviewGroupPanelModel';
+import { getPanelData } from '../../../dnd/dataTransfer';
 
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
@@ -247,6 +248,10 @@ export class TabsContainer
                 this._onWillShowOverlay.fire(
                     new WillShowOverlayLocationEvent(event, {
                         kind: 'header_space',
+                        panel: this.group.activePanel,
+                        api: this.accessor.api,
+                        group: this.group,
+                        getData: getPanelData,
                     })
                 );
             }),
@@ -408,7 +413,13 @@ export class TabsContainer
             }),
             tab.onWillShowOverlay((event) => {
                 this._onWillShowOverlay.fire(
-                    new WillShowOverlayLocationEvent(event, { kind: 'tab' })
+                    new WillShowOverlayLocationEvent(event, {
+                        kind: 'tab',
+                        panel: this.group.activePanel,
+                        api: this.accessor.api,
+                        group: this.group,
+                        getData: getPanelData,
+                    })
                 );
             })
         );

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -419,6 +419,10 @@ export class DockviewComponent
         return this.options.defaultRenderer ?? 'onlyWhenVisible';
     }
 
+    get api(): DockviewApi {
+        return this._api;
+    }
+
     constructor(options: DockviewComponentOptions) {
         super({
             proportionalLayout: true,
@@ -572,6 +576,10 @@ export class DockviewComponent
                 this._onWillShowOverlay.fire(
                     new WillShowOverlayLocationEvent(event, {
                         kind: 'edge',
+                        panel: undefined,
+                        api: this._api,
+                        group: undefined,
+                        getData: getPanelData,
                     })
                 );
             }),

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -194,13 +194,9 @@ export type DockviewGroupLocation =
     | { type: 'floating' }
     | { type: 'popout'; getWindow: () => Window };
 
-type A = typeof WillShowOverlayEvent;
-
 export class WillShowOverlayLocationEvent implements IDockviewEvent {
-    private _kind: DockviewGroupDropLocation;
-
     get kind(): DockviewGroupDropLocation {
-        return this._kind;
+        return this.options.kind;
     }
 
     get nativeEvent(): DragEvent {
@@ -215,18 +211,36 @@ export class WillShowOverlayLocationEvent implements IDockviewEvent {
         return this.event.defaultPrevented;
     }
 
+    get panel(): IDockviewPanel | undefined {
+        return this.options.panel;
+    }
+
+    get api(): DockviewApi {
+        return this.options.api;
+    }
+
+    get group(): DockviewGroupPanel | undefined {
+        return this.options.group;
+    }
+
     preventDefault(): void {
         this.event.preventDefault();
     }
 
+    getData(): PanelTransfer | undefined {
+        return this.options.getData();
+    }
+
     constructor(
         private readonly event: WillShowOverlayEvent,
-        options: {
+        private readonly options: {
             kind: DockviewGroupDropLocation;
+            panel: IDockviewPanel | undefined;
+            api: DockviewApi;
+            group: DockviewGroupPanel | undefined;
+            getData: () => PanelTransfer | undefined;
         }
-    ) {
-        this._kind = options.kind;
-    }
+    ) {}
 }
 
 export class DockviewGroupPanelModel
@@ -473,6 +487,10 @@ export class DockviewGroupPanelModel
                 this._onWillShowOverlay.fire(
                     new WillShowOverlayLocationEvent(event, {
                         kind: 'content',
+                        panel: this.activePanel,
+                        api: this._api,
+                        group: this.groupPanel,
+                        getData: getPanelData,
                     })
                 );
             }),

packages/dockview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
@@ -54,6 +54,6 @@
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
   },
   "dependencies": {
-    "dockview-core": "^1.11.0"
+    "dockview-core": "^1.12.0"
   }
 }

packages/docs/blog/2024-04-15-dockview-1.12.0.md

@@ -0,0 +1,19 @@
+---
+slug: dockview-1.12.0-release
+title: Dockview 1.12.0
+tags: [release]
+---
+
+# Release Notes
+
+Please reference docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+
+-   Enhance `onWillShowOverlay` event to contain additional commonly used methods and properties [#564](https://github.com/mathuo/dockview/issues/564)
+
+-   Expose `api.component` and `api.tabComponent` on panel api [#569](https://github.com/mathuo/dockview/issues/569)
+
+## 🔥 Breaking changes
+
+-   Fix Typo: `onlyWhenVisibile` to `onlyWhenVisible` [#559](https://github.com/mathuo/dockview/pull/559)

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-docs",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "private": true,
   "scripts": {
     "build": "npm run create-templates && docusaurus build",
@@ -37,7 +37,7 @@
     "ag-grid-react": "^31.0.2",
     "axios": "^1.6.3",
     "clsx": "^2.1.0",
-    "dockview": "^1.11.0",
+    "dockview": "^1.12.0",
     "prism-react-renderer": "^2.3.1",
     "react-dnd": "^16.0.1",
     "react-laag": "^2.0.5",