dockview 6.2.2 → 6.4.0

package/README.md

@@ -26,6 +26,7 @@ Please see the website: https://dockview.dev
 -   Support for split-views, grid-views and 'dockable' views
 -   Themeable and customizable
 -   Tab and Group docking / Drag n' Drop
+-   Touch & mobile support
 -   Popout Windows
 -   Floating Groups
 -   Edge Groups

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';