mouse-selection/dist/index.d.ts

A mouse frame selection plugin using JavaScript

declare type DOMType = HTMLElement | HTMLDocument | null;
interface SelectionRects {
    selectionPageRect?: CustomRect;
    selectionDOMRect?: CustomRect;
}
declare type RefitedMouseEvent = MouseEvent & SelectionRects;
interface MouseSelectionOptions {
    className?: string;
    scale?: number;
    zIndex?: number;
    onMousemove?: (event: RefitedMouseEvent) => void;
    onMousedown?: (event: MouseEvent) => void;
    onMouseup?: (event: MouseEvent) => void;
    disabled?: () => boolean;
    stopPropagation?: boolean;
    stopSelector?: string;
    notSetWrapPosition?: boolean;
}
interface CustomRect {
    left: number;
    top: number;
    width: number;
    height: number;
    right: number;
    bottom: number;
}
interface PositionSizeMap {
    left: number;
    top: number;
    width: number;
    height: number;
}
declare class MouseSelection {
    rectangleElement: HTMLElement;
    targetDom: DOMType;
    domRect: CustomRect | DOMRect;
    selectionPagePositionRect: CustomRect;
    selectionDOMPositionRect: CustomRect;
    config?: MouseSelectionOptions;
    private startX;
    private startY;
    private scale;
    private moving;
    private readonly RectangleElementClassName;
    private wrapDOM;
    constructor(domOrConfig?: DOMType | MouseSelectionOptions, config?: MouseSelectionOptions);
    /**
     * @description 获取框选元素以作用DOM为准的偏移和尺寸信息
     * @param left 距离页面左侧距离
     * @param top 距离页面顶部距离
     * @param width 宽度
     * @param height 高度
     */
    getSelectionPagePosition(x: number, y: number): CustomRect;
    /**
     * @description 获取矩形框选元素以传入的DOM为准的偏移和尺寸信息
     * @param selectionPagePositionRect getSelectionPagePosition返回的值
     */
    getSelectionDOMPosition(selectionPagePositionRect: CustomRect): CustomRect;
    /**
     * @description 工具方法，传入一个包含left/top/width/height字段的对象，返回这个参数描述的矩形是否与框选矩形相交
     * @param positionSizeMap {left,top,width,height} 要判断的
     */
    isInTheSelection({ left, top, width, height }: PositionSizeMap): boolean;
    /**
     * @description 注销方法
     */
    destroy(): void;
    /**
     * @description 如果未明确设置notSetWrapPosition为true，则给作用容器加position: relative属性
     */
    private _setWrapDomPositionStyle;
    /**
     * @description 在document.body中创建矩形框选元素
     *              不管事件绑定到哪个DOM，矩形框选元素都添加到document.body
     * @returns 矩形框选元素
     */
    private _createRectangleElement;
    /**
     * @description 设置鼠标按下时起始坐标
     * @param x
     * @param y
     */
    private _setStartPosition;
    /**
     * @description 绑定mousedown事件
     * @param dom 要绑定事件的dom
     */
    private _addMousedownListener;
    /**
     * @description 解绑mousedown事件
     * @param dom 要解绑事件的dom
     */
    private _removeMousedownListener;
    /**
     * @description 获取DOM的Rect信息，如果是document，只返回6个值
     * @param dom 要获取Rect信息的dom
     */
    private _getDOMRect;
    /**
     * @description mousedown事件回调
     * @param event 鼠标事件对象
     */
    private _selectStart;
    /**
     * @description mousemove事件回调
     * @param event 鼠标事件对象
     */
    private _selecting;
    /**
     * @description mouseup事件回调
     * @param event 鼠标事件对象
     */
    private _selectEnd;
    /**
     * @description 设置矩形框选元素样式
     * @param props CSS属性名
     * @param value CSS属性值
     */
    private _setRectangleElementStyle;
    /**
     * @description 更新矩形框选元素样式
     * @param currentX 当前鼠标event.pageX值
     * @param currentY 当前鼠标event.pageY值
     */
    private _updateRectangleElementStyle;
}
export default MouseSelection;