dockview 1.5.2 → 1.6.0

package/dist/esm/dnd/droptarget.js

@@ -2,24 +2,55 @@ import { toggleClass } from '../dom';
 import { Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
-export var Position;
-(function (Position) {
-    Position["Top"] = "Top";
-    Position["Left"] = "Left";
-    Position["Bottom"] = "Bottom";
-    Position["Right"] = "Right";
-    Position["Center"] = "Center";
-})(Position || (Position = {}));
-function isBooleanValue(canDisplayOverlay) {
-    return typeof canDisplayOverlay === 'boolean';
+import { clamp } from '../math';
+import { isBooleanValue } from '../types';
+function numberOrFallback(maybeNumber, fallback) {
+    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
+}
+export function directionToPosition(direction) {
+    switch (direction) {
+        case 'above':
+            return 'top';
+        case 'below':
+            return 'bottom';
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'within':
+            return 'center';
+        default:
+            throw new Error(`invalid direction '${direction}'`);
+    }
+}
+export function positionToDirection(position) {
+    switch (position) {
+        case 'top':
+            return 'above';
+        case 'bottom':
+            return 'below';
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'center':
+            return 'within';
+        default:
+            throw new Error(`invalid position '${position}'`);
+    }
 }
 export class Droptarget extends CompositeDisposable {
+    get state() {
+        return this._state;
+    }
     constructor(element, options) {
         super();
         this.element = element;
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
+        // use a set to take advantage of #<set>.has
+        const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
             onDragEnter: () => undefined,
             onDragOver: (e) => {
@@ -28,11 +59,15 @@ export class Droptarget extends CompositeDisposable {
                 if (width === 0 || height === 0) {
                     return; // avoid div!0
                 }
-                const x = e.offsetX;
-                const y = e.offsetY;
-                const xp = (100 * x) / width;
-                const yp = (100 * y) / height;
-                const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
+                const rect = e.currentTarget.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
+                if (quadrant === null) {
+                    // no drop target should be displayed
+                    this.removeDropTarget();
+                    return;
+                }
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
                     if (!this.options.canDisplayOverlay) {
                         return;
@@ -46,20 +81,18 @@ export class Droptarget extends CompositeDisposable {
                     this.target.className = 'drop-target-dropzone';
                     this.overlay = document.createElement('div');
                     this.overlay.className = 'drop-target-selection';
-                    this._state = Position.Center;
+                    this._state = 'center';
                     this.target.appendChild(this.overlay);
                     this.element.classList.add('drop-target');
                     this.element.append(this.target);
                 }
-                if (this.options.validOverlays === 'none') {
+                if (this.options.acceptedTargetZones.length === 0) {
                     return;
                 }
                 if (!this.target || !this.overlay) {
                     return;
                 }
-                const isSmallX = width < 100;
-                const isSmallY = height < 100;
-                this.toggleClasses(quadrant, isSmallX, isSmallY);
+                this.toggleClasses(quadrant, width, height);
                 this.setState(quadrant);
             },
             onDragLeave: () => {
@@ -79,30 +112,59 @@ export class Droptarget extends CompositeDisposable {
             },
         }));
     }
-    get state() {
-        return this._state;
-    }
-    set validOverlays(value) {
-        this.options.validOverlays = value;
-    }
-    set canDisplayOverlay(value) {
-        this.options.canDisplayOverlay = value;
-    }
     dispose() {
         this.removeDropTarget();
     }
-    toggleClasses(quadrant, isSmallX, isSmallY) {
+    toggleClasses(quadrant, width, height) {
+        var _a, _b, _c, _d;
         if (!this.overlay) {
             return;
         }
+        const isSmallX = width < 100;
+        const isSmallY = height < 100;
         const isLeft = quadrant === 'left';
         const isRight = quadrant === 'right';
         const isTop = quadrant === 'top';
         const isBottom = quadrant === 'bottom';
-        toggleClass(this.overlay, 'right', !isSmallX && isRight);
-        toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-        toggleClass(this.overlay, 'top', !isSmallY && isTop);
-        toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+        const rightClass = !isSmallX && isRight;
+        const leftClass = !isSmallX && isLeft;
+        const topClass = !isSmallY && isTop;
+        const bottomClass = !isSmallY && isBottom;
+        let size = 0.5;
+        if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
+            size = clamp(this.options.overlayModel.size.value, 0, 100) / 100;
+        }
+        if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+            if (rightClass || leftClass) {
+                size =
+                    clamp(0, this.options.overlayModel.size.value, width) /
+                        width;
+            }
+            if (topClass || bottomClass) {
+                size =
+                    clamp(0, this.options.overlayModel.size.value, height) /
+                        height;
+            }
+        }
+        const translate = (1 - size) / 2;
+        const scale = size;
+        let transform;
+        if (rightClass) {
+            transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+        }
+        else if (leftClass) {
+            transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+        }
+        else if (topClass) {
+            transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+        }
+        else if (bottomClass) {
+            transform = `translateY(${100 * translate}%) scaleY(${scale})`;
+        }
+        else {
+            transform = '';
+        }
+        this.overlay.style.transform = transform;
         toggleClass(this.overlay, 'small-right', isSmallX && isRight);
         toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
         toggleClass(this.overlay, 'small-top', isSmallY && isTop);
@@ -111,57 +173,77 @@ export class Droptarget extends CompositeDisposable {
     setState(quadrant) {
         switch (quadrant) {
             case 'top':
-                this._state = Position.Top;
+                this._state = 'top';
                 break;
             case 'left':
-                this._state = Position.Left;
+                this._state = 'left';
                 break;
             case 'bottom':
-                this._state = Position.Bottom;
+                this._state = 'bottom';
                 break;
             case 'right':
-                this._state = Position.Right;
+                this._state = 'right';
                 break;
-            default:
-                this._state = Position.Center;
+            case 'center':
+                this._state = 'center';
                 break;
         }
     }
-    calculateQuadrant(overlayType, xp, yp) {
-        switch (overlayType) {
-            case 'all':
-                if (xp < 20) {
-                    return 'left';
-                }
-                if (xp > 80) {
-                    return 'right';
-                }
-                if (yp < 20) {
-                    return 'top';
-                }
-                if (yp > 80) {
-                    return 'bottom';
-                }
-                break;
-            case 'vertical':
-                if (yp < 50) {
-                    return 'top';
-                }
-                return 'bottom';
-            case 'horizontal':
-                if (xp < 50) {
-                    return 'left';
-                }
-                return 'right';
+    calculateQuadrant(overlayType, x, y, width, height) {
+        var _a, _b, _c, _d, _e, _f;
+        const isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
+            ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
+        const value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+        if (isPercentage) {
+            return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
         }
-        return null;
+        return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
     }
     removeDropTarget() {
         if (this.target) {
             this._state = undefined;
             this.element.removeChild(this.target);
             this.target = undefined;
+            this.overlay = undefined;
             this.element.classList.remove('drop-target');
         }
     }
 }
+export function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
+    const xp = (100 * x) / width;
+    const yp = (100 * y) / height;
+    if (overlayType.has('left') && xp < threshold) {
+        return 'left';
+    }
+    if (overlayType.has('right') && xp > 100 - threshold) {
+        return 'right';
+    }
+    if (overlayType.has('top') && yp < threshold) {
+        return 'top';
+    }
+    if (overlayType.has('bottom') && yp > 100 - threshold) {
+        return 'bottom';
+    }
+    if (!overlayType.has('center')) {
+        return null;
+    }
+    return 'center';
+}
+export function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
+    if (overlayType.has('left') && x < threshold) {
+        return 'left';
+    }
+    if (overlayType.has('right') && x > width - threshold) {
+        return 'right';
+    }
+    if (overlayType.has('top') && y < threshold) {
+        return 'top';
+    }
+    if (overlayType.has('bottom') && y > height - threshold) {
+        return 'bottom';
+    }
+    if (!overlayType.has('center')) {
+        return null;
+    }
+    return 'center';
+}

package/dist/esm/dnd/ghost.d.ts

@@ -0,0 +1 @@
+export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;

package/dist/esm/dnd/ghost.js

@@ -0,0 +1,10 @@
+import { addClasses } from '../dom';
+export function addGhostImage(dataTransfer, ghostElement) {
+    // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
+    addClasses(ghostElement, 'dv-dragged');
+    document.body.appendChild(ghostElement);
+    dataTransfer.setDragImage(ghostElement, 0, 0);
+    setTimeout(() => {
+        ghostElement.remove();
+    }, 0);
+}

package/dist/esm/dnd/groupDragHandler.d.ts

@@ -0,0 +1,11 @@
+import { GroupPanel } from '../groupview/groupviewPanel';
+import { IDisposable } from '../lifecycle';
+import { DragHandler } from './abstractDragHandler';
+export declare class GroupDragHandler extends DragHandler {
+    private readonly accessorId;
+    private readonly group;
+    private readonly panelTransfer;
+    constructor(element: HTMLElement, accessorId: string, group: GroupPanel);
+    getData(dataTransfer: DataTransfer | null): IDisposable;
+    dispose(): void;
+}

package/dist/esm/dnd/groupDragHandler.js

@@ -0,0 +1,38 @@
+import { DragHandler } from './abstractDragHandler';
+import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer';
+import { addGhostImage } from './ghost';
+export class GroupDragHandler extends DragHandler {
+    constructor(element, accessorId, group) {
+        super(element);
+        this.accessorId = accessorId;
+        this.group = group;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+    }
+    getData(dataTransfer) {
+        this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+        const style = window.getComputedStyle(this.el);
+        const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
+        const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
+        if (dataTransfer) {
+            const ghostElement = document.createElement('div');
+            ghostElement.style.backgroundColor = bgColor;
+            ghostElement.style.color = color;
+            ghostElement.style.padding = '2px 8px';
+            ghostElement.style.height = '24px';
+            ghostElement.style.fontSize = '11px';
+            ghostElement.style.lineHeight = '20px';
+            ghostElement.style.borderRadius = '12px';
+            ghostElement.style.position = 'absolute';
+            ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+            addGhostImage(dataTransfer, ghostElement);
+        }
+        return {
+            dispose: () => {
+                this.panelTransfer.clearData(PanelTransfer.prototype);
+            },
+        };
+    }
+    dispose() {
+        //
+    }
+}

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

@@ -3,6 +3,12 @@ import { addDisposableListener } from '../../../events';
 import { createCloseButton } from '../../../svg';
 export const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
 export class DefaultTab extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    get id() {
+        return DEFAULT_TAB_IDENTIFIER;
+    }
     constructor() {
         super();
         this._isPanelVisible = false;
@@ -35,12 +41,6 @@ export class DefaultTab extends CompositeDisposable {
         }));
         this.render();
     }
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return DEFAULT_TAB_IDENTIFIER;
-    }
     update(event) {
         this.params = Object.assign(Object.assign({}, this.params), event.params);
         this.render();

package/dist/esm/dockview/components/watermark/watermark.js

@@ -4,6 +4,9 @@ import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
 import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
+    get id() {
+        return 'watermark';
+    }
     constructor() {
         super();
         this._element = document.createElement('div');
@@ -31,9 +34,6 @@ export class Watermark extends CompositeDisposable {
             }
         }));
     }
-    get id() {
-        return 'watermark';
-    }
     update(_event) {
         // noop
     }

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

@@ -1,7 +1,7 @@
 import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
-import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
+import { GroupPanelUpdateEvent } from '../groupview/types';
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;
     readonly tab?: ITabRenderer;

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -1,16 +1,16 @@
 import { DefaultTab } from './components/tab/defaultTab';
 export class DefaultGroupPanelView {
-    constructor(renderers) {
-        var _a;
-        this._content = renderers.content;
-        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-    }
     get content() {
         return this._content;
     }
     get tab() {
         return this._tab;
     }
+    constructor(renderers) {
+        var _a;
+        this._content = renderers.content;
+        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
+    }
     init(params) {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);

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

@@ -1,5 +1,6 @@
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
+import { IDockviewPanel } from './dockviewPanel';
 export interface IPanelDeserializer {
     fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
 }

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

@@ -1,6 +1,7 @@
 import { SerializedGridObject } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
+import { IDockviewPanel } from './dockviewPanel';
 import { Event } from '../events';
 import { IWatermarkRenderer } from '../groupview/types';
 import { IPanelDeserializer } from './deserializer';
@@ -9,7 +10,7 @@ import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/core/splitview';
 import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from '../groupview/groupview';
-import { GroupPanel } from '../groupview/groupviewPanel';
+import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 export interface PanelReference {
     update: (event: {
         params: {
@@ -33,16 +34,17 @@ export interface SerializedDockview {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createGroupControlElement'>;
+export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createGroupControlElement'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
-    group: GroupPanel;
+    group: GroupPanel | null;
 }
 export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
+    readonly orientation: Orientation;
     tabHeight: number | undefined;
     deserializer: IPanelDeserializer | undefined;
     updateOptions(options: DockviewComponentUpdateOptions): void;
@@ -54,7 +56,7 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     removePanel(panel: IDockviewPanel): void;
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
     createWatermarkComponent(): IWatermarkRenderer;
-    addEmptyGroup(options?: AddGroupOptions): void;
+    addGroup(options?: AddGroupOptions): IGroupviewPanel;
     closeAllGroups(): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
@@ -68,9 +70,11 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
 }
 export declare class DockviewComponent extends BaseGrid<GroupPanel> implements IDockviewComponent {
+    private readonly nextGroupId;
     private _deserializer;
     private _api;
     private _options;
+    private watermark;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<DockviewDropEvent>;
     private readonly _onDidRemovePanel;
@@ -81,6 +85,7 @@ export declare class DockviewComponent extends BaseGrid<GroupPanel> implements I
     readonly onDidLayoutFromJSON: Event<void>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
+    get orientation(): Orientation;
     get totalPanels(): number;
     get panels(): IDockviewPanel[];
     get deserializer(): IPanelDeserializer | undefined;
@@ -90,6 +95,7 @@ export declare class DockviewComponent extends BaseGrid<GroupPanel> implements I
     set tabHeight(height: number | undefined);
     get tabHeight(): number | undefined;
     constructor(element: HTMLElement, options: DockviewComponentOptions);
+    private orthogonalize;
     updateOptions(options: DockviewComponentUpdateOptions): void;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;
@@ -111,9 +117,11 @@ export declare class DockviewComponent extends BaseGrid<GroupPanel> implements I
         skipDispose: boolean;
     }): void;
     createWatermarkComponent(): IWatermarkRenderer;
-    addEmptyGroup(options: AddGroupOptions): void;
+    private updateWatermark;
+    addGroup(options?: AddGroupOptions): GroupPanel;
     removeGroup(group: GroupPanel, skipActive?: boolean): void;
-    moveGroupOrPanel(referenceGroup: GroupPanel, groupId: string, itemId: string, target: Position, index?: number): void;
+    moveGroupOrPanel(referenceGroup: GroupPanel, groupId: string, itemId: string | undefined, target: Position, index?: number): void;
+    private moveGroup;
     doSetGroupActive(group: GroupPanel | undefined, skipFocus?: boolean): void;
     createGroup(options?: GroupOptions): GroupPanel;
     private createPanel;