dockview 6.2.1 → 6.3.0

package/dist/cjs/dockview/dockview.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent, BuiltInContextMenuItem, BuiltInChipContextMenuItem, ContextMenuItemConfig, GetTabContextMenuItemsParams, GetTabGroupChipContextMenuItemsParams, IContextMenuItemComponentProps } from 'dockview-core';
 import { IDockviewTabGroupChipProps } from './reactTabGroupChipPart';
+import { IDockviewGroupDragGhostProps } from './reactGroupDragGhostPart';
 export interface ReactContextMenuItemConfig extends Omit<ContextMenuItemConfig, 'component'> {
     component?: React.FunctionComponent<IContextMenuItemComponentProps>;
 }
@@ -15,6 +16,16 @@ export interface IDockviewReactProps extends DockviewOptions {
     getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => (BuiltInContextMenuItem | ReactContextMenuItemConfig)[];
     getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ReactContextMenuItemConfig)[];
     tabGroupChipComponent?: React.FunctionComponent<IDockviewTabGroupChipProps>;
+    /**
+     * Component rendered as the drag ghost (the small floating chip) while
+     * a group of panels is being dragged. If omitted, the default
+     * `"Multiple Panels (N)"` ghost is used.
+     *
+     * Note: the ghost is captured by the browser at drag start, so the
+     * component must render fast / synchronously enough to be visible
+     * before the browser snapshots it.
+     */
+    groupDragGhostComponent?: React.FunctionComponent<IDockviewGroupDragGhostProps>;
     onReady: (event: DockviewReadyEvent) => void;
     onDidDrop?: (event: DockviewDidDropEvent) => void;
     onWillDrop?: (event: DockviewWillDropEvent) => void;

package/dist/cjs/dockview/dockview.js

@@ -40,6 +40,7 @@ var reactWatermarkPart_1 = require("./reactWatermarkPart");
 var headerActionsRenderer_1 = require("./headerActionsRenderer");
 var reactContextMenuItemPart_1 = require("./reactContextMenuItemPart");
 var reactTabGroupChipPart_1 = require("./reactTabGroupChipPart");
+var reactGroupDragGhostPart_1 = require("./reactGroupDragGhostPart");
 function createGroupControlElement(component, store) {
     return component
         ? function (groupPanel) {
@@ -130,6 +131,14 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
                 });
             };
         }
+        if (props.groupDragGhostComponent) {
+            var ghostComponent_1 = props.groupDragGhostComponent;
+            coreOptions.createGroupDragGhostComponent = function () {
+                return new reactGroupDragGhostPart_1.ReactGroupDragGhostPart(ghostComponent_1, {
+                    addPortal: addPortal,
+                });
+            };
+        }
         var api = (0, dockview_core_1.createDockview)(domRef.current, __assign(__assign({}, coreOptions), frameworkOptions));
         var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         api.layout(clientWidth, clientHeight);
@@ -186,6 +195,20 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
                 : undefined,
         });
     }, [props.tabGroupChipComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createGroupDragGhostComponent: props.groupDragGhostComponent
+                ? function () {
+                    return new reactGroupDragGhostPart_1.ReactGroupDragGhostPart(props.groupDragGhostComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+        });
+    }, [props.groupDragGhostComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;

package/dist/cjs/dockview/reactGroupDragGhostPart.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { IDockviewGroupPanel, IGroupDragGhostRenderer, DockviewApi } from 'dockview-core';
+export interface IDockviewGroupDragGhostProps {
+    group: IDockviewGroupPanel;
+    api: DockviewApi;
+}
+export declare class ReactGroupDragGhostPart implements IGroupDragGhostRenderer {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(component: React.FunctionComponent<IDockviewGroupDragGhostProps>, reactPortalStore: ReactPortalStore);
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactGroupDragGhostPart.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactGroupDragGhostPart = void 0;
+var react_1 = require("../react");
+var ReactGroupDragGhostPart = /** @class */ (function () {
+    function ReactGroupDragGhostPart(component, reactPortalStore) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.display = 'inline-flex';
+    }
+    Object.defineProperty(ReactGroupDragGhostPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactGroupDragGhostPart.prototype.init = function (params) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, {
+            group: params.group,
+            api: params.api,
+        });
+    };
+    ReactGroupDragGhostPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactGroupDragGhostPart;
+}());
+exports.ReactGroupDragGhostPart = ReactGroupDragGhostPart;

package/dist/cjs/index.d.ts

@@ -2,6 +2,7 @@ export * from 'dockview-core';
 export * from './dockview/dockview';
 export * from './dockview/defaultTab';
 export { IDockviewTabGroupChipProps } from './dockview/reactTabGroupChipPart';
+export { IDockviewGroupDragGhostProps } from './dockview/reactGroupDragGhostPart';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
 export * from './paneview/paneview';

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 6.2.1
+ * @version 6.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -409,6 +409,29 @@
       }
   }
 
+  class ReactGroupDragGhostPart {
+      get element() {
+          return this._element;
+      }
+      constructor(component, reactPortalStore) {
+          this.component = component;
+          this.reactPortalStore = reactPortalStore;
+          this._element = document.createElement('div');
+          this._element.className = 'dv-react-part';
+          this._element.style.display = 'inline-flex';
+      }
+      init(params) {
+          this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
+              group: params.group,
+              api: params.api,
+          });
+      }
+      dispose() {
+          var _a;
+          (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+      }
+  }
+
   function createGroupControlElement(component, store) {
       return component
           ? (groupPanel) => {
@@ -496,6 +519,14 @@
                   });
               };
           }
+          if (props.groupDragGhostComponent) {
+              const ghostComponent = props.groupDragGhostComponent;
+              coreOptions.createGroupDragGhostComponent = () => {
+                  return new ReactGroupDragGhostPart(ghostComponent, {
+                      addPortal,
+                  });
+              };
+          }
           const api = dockviewCore.createDockview(domRef.current, Object.assign(Object.assign({}, coreOptions), frameworkOptions));
           const { clientWidth, clientHeight } = domRef.current;
           api.layout(clientWidth, clientHeight);
@@ -552,6 +583,20 @@
                   : undefined,
           });
       }, [props.tabGroupChipComponent]);
+      React.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              createGroupDragGhostComponent: props.groupDragGhostComponent
+                  ? () => {
+                      return new ReactGroupDragGhostPart(props.groupDragGhostComponent, {
+                          addPortal,
+                      });
+                  }
+                  : undefined,
+          });
+      }, [props.groupDragGhostComponent]);
       React.useEffect(() => {
           if (!dockviewRef.current) {
               return;