dockview-core/dist/esm/dnd/droptarget.d.ts

Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript

import { DockviewEvent, Event } from '../events';
import { CompositeDisposable, IDisposable } from '../lifecycle';
import { DragAndDropObserver } from './dnd';
import { Direction } from '../gridview/baseComponentGridview';
export interface DroptargetEvent {
    readonly position: Position;
    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
    readonly nativeEvent: DragEvent | PointerEvent;
}
export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent {
    private readonly options;
    get nativeEvent(): DragEvent | PointerEvent;
    get position(): Position;
    constructor(options: {
        nativeEvent: DragEvent | PointerEvent;
        position: Position;
    });
}
export declare function directionToPosition(direction: Direction): Position;
export declare function positionToDirection(position: Position): Direction;
export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
export type CanDisplayOverlay = (dragEvent: DragEvent | PointerEvent, state: Position) => boolean;
export type MeasuredValue = {
    value: number;
    type: 'pixels' | 'percentage';
};
export type DroptargetOverlayModel = {
    size?: MeasuredValue;
    activationSize?: MeasuredValue;
    /**
     * Override the width threshold (in pixels) below which the overlay switches
     * to a thin-border indicator instead of a half-width highlight. Set to 0 to
     * always show the half-width overlay regardless of element size.
     */
    smallWidthBoundary?: number;
    /**
     * Override the height threshold (in pixels) below which the overlay switches
     * to a thin-border indicator instead of a half-height highlight. Set to 0 to
     * always show the half-height overlay regardless of element size.
     */
    smallHeightBoundary?: number;
};
export interface DropTargetTargetModel {
    getElements(event?: DragEvent, outline?: HTMLElement): {
        root: HTMLElement;
        overlay: HTMLElement;
        changed: boolean;
    };
    exists(): boolean;
    clear(): void;
}
export interface DroptargetOptions {
    canDisplayOverlay: CanDisplayOverlay;
    acceptedTargetZones: Position[];
    overlayModel?: DroptargetOverlayModel;
    getOverrideTarget?: () => DropTargetTargetModel | undefined;
    className?: string;
    getOverlayOutline?: () => HTMLElement | null;
}
/**
 * Backend-agnostic drop target. Both the HTML5 `Droptarget` and the pointer
 * `PointerDropTarget` implement this shape so consumers can hold one field
 * regardless of which DnD backend produced it.
 */
export interface IDropTarget extends IDisposable {
    readonly onDrop: Event<DroptargetEvent>;
    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
    readonly state: Position | undefined;
    disabled: boolean;
    setTargetZones(zones: Position[]): void;
    setOverlayModel(model: DroptargetOverlayModel): void;
}
export declare class Droptarget extends CompositeDisposable implements IDropTarget {
    private readonly element;
    private readonly options;
    private targetElement;
    private overlayElement;
    private _state;
    private _acceptedTargetZonesSet;
    private readonly _onDrop;
    readonly onDrop: Event<DroptargetEvent>;
    private readonly _onWillShowOverlay;
    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
    readonly dnd: DragAndDropObserver;
    private static USED_EVENT_ID;
    private static ACTUAL_TARGET;
    private _disabled;
    get disabled(): boolean;
    set disabled(value: boolean);
    get state(): Position | undefined;
    constructor(element: HTMLElement, options: DroptargetOptions);
    setTargetZones(acceptedTargetZones: Position[]): void;
    setOverlayModel(model: DroptargetOverlayModel): 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 of DropTarget
     */
    private isAlreadyUsed;
    private toggleClasses;
    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;