dockview-core 1.8.4 → 1.8.5

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

@@ -1,54 +1,54 @@
-import { Event } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-import { Direction } from '../gridview/baseComponentGridview';
-export declare function directionToPosition(direction: Direction): Position;
-export declare function positionToDirection(position: Position): Direction;
-export interface DroptargetEvent {
-    readonly position: Position;
-    readonly nativeEvent: DragEvent;
-}
-export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
-export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
-export declare class Droptarget extends CompositeDisposable {
-    private readonly element;
-    private readonly options;
-    private targetElement;
-    private overlayElement;
-    private _state;
-    private _acceptedTargetZonesSet;
-    private readonly _onDrop;
-    readonly onDrop: Event<DroptargetEvent>;
-    private static USED_EVENT_ID;
-    get state(): Position | undefined;
-    constructor(element: HTMLElement, options: {
-        canDisplayOverlay: CanDisplayOverlay;
-        acceptedTargetZones: Position[];
-        overlayModel?: {
-            size?: {
-                value: number;
-                type: 'pixels' | 'percentage';
-            };
-            activationSize?: {
-                value: number;
-                type: 'pixels' | 'percentage';
-            };
-        };
-    });
-    setTargetZones(acceptedTargetZones: Position[]): void;
-    dispose(): void;
-    /**
-     * Add a property to the event object for other potential listeners to check
-     */
-    private markAsUsed;
-    /**
-     * Check is the event has already been used by another instance od DropTarget
-     */
-    private isAlreadyUsed;
-    private toggleClasses;
-    private setState;
-    private calculateQuadrant;
-    private removeDropTarget;
-}
-export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
-export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
+import { Event } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+import { Direction } from '../gridview/baseComponentGridview';
+export declare function directionToPosition(direction: Direction): Position;
+export declare function positionToDirection(position: Position): Direction;
+export interface DroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: DragEvent;
+}
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
+export declare class Droptarget extends CompositeDisposable {
+    private readonly element;
+    private readonly options;
+    private targetElement;
+    private overlayElement;
+    private _state;
+    private _acceptedTargetZonesSet;
+    private readonly _onDrop;
+    readonly onDrop: Event<DroptargetEvent>;
+    private static USED_EVENT_ID;
+    get state(): Position | undefined;
+    constructor(element: HTMLElement, options: {
+        canDisplayOverlay: CanDisplayOverlay;
+        acceptedTargetZones: Position[];
+        overlayModel?: {
+            size?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+            activationSize?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+        };
+    });
+    setTargetZones(acceptedTargetZones: Position[]): void;
+    dispose(): void;
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    private markAsUsed;
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    private isAlreadyUsed;
+    private toggleClasses;
+    private setState;
+    private calculateQuadrant;
+    private removeDropTarget;
+}
+export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
+export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
 //# sourceMappingURL=droptarget.d.ts.map

package/dist/esm/dnd/droptarget.js

@@ -1,275 +1,275 @@
-import { toggleClass } from '../dom';
-import { Emitter } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-import { DragAndDropObserver } from './dnd';
-import { clamp } from '../math';
-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
-        this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
-        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-            onDragEnter: () => undefined,
-            onDragOver: (e) => {
-                if (this._acceptedTargetZonesSet.size === 0) {
-                    this.removeDropTarget();
-                    return;
-                }
-                const width = this.element.clientWidth;
-                const height = this.element.clientHeight;
-                if (width === 0 || height === 0) {
-                    return; // avoid div!0
-                }
-                const rect = e.currentTarget.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
-                /**
-                 * If the event has already been used by another DropTarget instance
-                 * then don't show a second drop target, only one target should be
-                 * active at any one time
-                 */
-                if (this.isAlreadyUsed(e) || quadrant === null) {
-                    // no drop target should be displayed
-                    this.removeDropTarget();
-                    return;
-                }
-                if (typeof this.options.canDisplayOverlay === 'boolean') {
-                    if (!this.options.canDisplayOverlay) {
-                        this.removeDropTarget();
-                        return;
-                    }
-                }
-                else if (!this.options.canDisplayOverlay(e, quadrant)) {
-                    this.removeDropTarget();
-                    return;
-                }
-                this.markAsUsed(e);
-                if (!this.targetElement) {
-                    this.targetElement = document.createElement('div');
-                    this.targetElement.className = 'drop-target-dropzone';
-                    this.overlayElement = document.createElement('div');
-                    this.overlayElement.className = 'drop-target-selection';
-                    this._state = 'center';
-                    this.targetElement.appendChild(this.overlayElement);
-                    this.element.classList.add('drop-target');
-                    this.element.append(this.targetElement);
-                }
-                this.toggleClasses(quadrant, width, height);
-                this.setState(quadrant);
-            },
-            onDragLeave: () => {
-                this.removeDropTarget();
-            },
-            onDragEnd: () => {
-                this.removeDropTarget();
-            },
-            onDrop: (e) => {
-                e.preventDefault();
-                const state = this._state;
-                this.removeDropTarget();
-                if (state) {
-                    // only stop the propagation of the event if we are dealing with it
-                    // which is only when the target has state
-                    e.stopPropagation();
-                    this._onDrop.fire({ position: state, nativeEvent: e });
-                }
-            },
-        }));
-    }
-    setTargetZones(acceptedTargetZones) {
-        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
-    }
-    dispose() {
-        this.removeDropTarget();
-        super.dispose();
-    }
-    /**
-     * Add a property to the event object for other potential listeners to check
-     */
-    markAsUsed(event) {
-        event[Droptarget.USED_EVENT_ID] = true;
-    }
-    /**
-     * Check is the event has already been used by another instance od DropTarget
-     */
-    isAlreadyUsed(event) {
-        const value = event[Droptarget.USED_EVENT_ID];
-        return typeof value === 'boolean' && value;
-    }
-    toggleClasses(quadrant, width, height) {
-        var _a, _b, _c, _d;
-        if (!this.overlayElement) {
-            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';
-        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.overlayElement.style.transform = transform;
-        toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
-        toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
-        toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
-        toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
-    }
-    setState(quadrant) {
-        switch (quadrant) {
-            case 'top':
-                this._state = 'top';
-                break;
-            case 'left':
-                this._state = 'left';
-                break;
-            case 'bottom':
-                this._state = 'bottom';
-                break;
-            case 'right':
-                this._state = 'right';
-                break;
-            case 'center':
-                this._state = 'center';
-                break;
-        }
-    }
-    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 calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
-    }
-    removeDropTarget() {
-        if (this.targetElement) {
-            this._state = undefined;
-            this.element.removeChild(this.targetElement);
-            this.targetElement = undefined;
-            this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
-        }
-    }
-}
-Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
-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';
-}
+import { toggleClass } from '../dom';
+import { Emitter } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+import { DragAndDropObserver } from './dnd';
+import { clamp } from '../math';
+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
+        this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+        this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
+            onDragEnter: () => undefined,
+            onDragOver: (e) => {
+                if (this._acceptedTargetZonesSet.size === 0) {
+                    this.removeDropTarget();
+                    return;
+                }
+                const width = this.element.clientWidth;
+                const height = this.element.clientHeight;
+                if (width === 0 || height === 0) {
+                    return; // avoid div!0
+                }
+                const rect = e.currentTarget.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
+                /**
+                 * If the event has already been used by another DropTarget instance
+                 * then don't show a second drop target, only one target should be
+                 * active at any one time
+                 */
+                if (this.isAlreadyUsed(e) || quadrant === null) {
+                    // no drop target should be displayed
+                    this.removeDropTarget();
+                    return;
+                }
+                if (typeof this.options.canDisplayOverlay === 'boolean') {
+                    if (!this.options.canDisplayOverlay) {
+                        this.removeDropTarget();
+                        return;
+                    }
+                }
+                else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
+                    return;
+                }
+                this.markAsUsed(e);
+                if (!this.targetElement) {
+                    this.targetElement = document.createElement('div');
+                    this.targetElement.className = 'drop-target-dropzone';
+                    this.overlayElement = document.createElement('div');
+                    this.overlayElement.className = 'drop-target-selection';
+                    this._state = 'center';
+                    this.targetElement.appendChild(this.overlayElement);
+                    this.element.classList.add('drop-target');
+                    this.element.append(this.targetElement);
+                }
+                this.toggleClasses(quadrant, width, height);
+                this.setState(quadrant);
+            },
+            onDragLeave: () => {
+                this.removeDropTarget();
+            },
+            onDragEnd: () => {
+                this.removeDropTarget();
+            },
+            onDrop: (e) => {
+                e.preventDefault();
+                const state = this._state;
+                this.removeDropTarget();
+                if (state) {
+                    // only stop the propagation of the event if we are dealing with it
+                    // which is only when the target has state
+                    e.stopPropagation();
+                    this._onDrop.fire({ position: state, nativeEvent: e });
+                }
+            },
+        }));
+    }
+    setTargetZones(acceptedTargetZones) {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    }
+    dispose() {
+        this.removeDropTarget();
+        super.dispose();
+    }
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    markAsUsed(event) {
+        event[Droptarget.USED_EVENT_ID] = true;
+    }
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    isAlreadyUsed(event) {
+        const value = event[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
+    }
+    toggleClasses(quadrant, width, height) {
+        var _a, _b, _c, _d;
+        if (!this.overlayElement) {
+            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';
+        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.overlayElement.style.transform = transform;
+        toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
+        toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
+        toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
+        toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);
+    }
+    setState(quadrant) {
+        switch (quadrant) {
+            case 'top':
+                this._state = 'top';
+                break;
+            case 'left':
+                this._state = 'left';
+                break;
+            case 'bottom':
+                this._state = 'bottom';
+                break;
+            case 'right':
+                this._state = 'right';
+                break;
+            case 'center':
+                this._state = 'center';
+                break;
+        }
+    }
+    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 calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+    }
+    removeDropTarget() {
+        if (this.targetElement) {
+            this._state = undefined;
+            this.element.removeChild(this.targetElement);
+            this.targetElement = undefined;
+            this.overlayElement = undefined;
+            this.element.classList.remove('drop-target');
+        }
+    }
+}
+Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
+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';
+}
 //# sourceMappingURL=droptarget.js.map