uiik/types.d.ts

A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.

import { UiiTransform } from "./transform";
export declare abstract class Uii {
    #private;
    protected ele: Array<HTMLElement>;
    opts: Record<string, any>;
    protected enabled: boolean;
    protected eleString: string;
    constructor(ele: string | Element | NodeList | HTMLCollection | Array<string | Element>, opts?: Record<string, any>);
    destroy(): void;
    addPointerDown(el: Element, pointerDown: (args: Record<string, any>) => void | boolean, opts: {
        threshold?: number;
        lockPage?: boolean;
    }): void;
    registerEvent(el: Element, event: string, hook: Function, useCapture?: boolean): void;
    disable(): void;
    enable(): void;
    getOptions(): Record<string, any>;
    getOption(name: string): any;
    setOptions(options?: Record<string, any>): void;
    setOption(name: string, value: any): void;
    protected onOptionChanged(opts?: Record<string, any>): void;
}
export type ResizableOptions = {
    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
    minSize?: number | Array<number>;
    maxSize?: number | Array<number>;
    dir?: string[];
    aspectRatio?: number;
    ghost?: boolean | Function;
    ghostClass?: string;
    ox?: number | string;
    oy?: number | string;
    onPointerDown?: (event: MouseEvent) => boolean;
    onStart?: (data: {
        w: number;
        h: number;
        transform: UiiTransform;
    }, event: MouseEvent) => void;
    onResize?: (data: {
        w: number;
        h: number;
        ow: number;
        oh: number;
        target: HTMLElement | SVGGraphicsElement;
        vertex: Array<{
            x: number;
            y: number;
        }>;
        transform: UiiTransform;
    }, event: MouseEvent) => void;
    onEnd?: (data: {
        w: number;
        h: number;
        transform: UiiTransform;
    }, event: MouseEvent) => void;
    onClone?: (data: {
        clone: HTMLElement;
    }, event: MouseEvent) => void;
};
export type SplittableOptions = {
    handleSize?: number;
    minSize?: number | number[];
    oneSideMode?: "start" | "end";
    sticky?: boolean | boolean[];
    inside?: boolean;
    ghost?: boolean;
    ghostClass?: string;
    ghostTo?: string | HTMLElement;
    handle?: string;
    onStart?: (data: {
        size1: number;
        size2: number;
    }, event: MouseEvent) => void;
    onSplit?: (data: {
        size1: number;
        size2: number;
    }, event: MouseEvent) => void;
    onEnd?: (data: {
        size1: number;
        size2: number;
    }, event: MouseEvent) => void;
    onSticky?: (data: {
        size1: number;
        size2: number;
        position: "start" | "end" | "none";
    }, event: MouseEvent) => void;
    onClone?: (data: {
        clone: HTMLElement;
    }, event: MouseEvent) => void;
};
export type DraggableOptions = {
    useTransform?: boolean;
    self?: boolean;
    mouseButton?: 'all' | "left" | "right";
    containment?: boolean | HTMLElement | string;
    watch?: boolean | string;
    threshold?: number;
    handle?: string;
    filter?: string;
    droppable?: (() => NodeList | HTMLCollection | HTMLElement[]) | string | HTMLElement | HTMLElement[];
    ghost?: ((el: HTMLElement) => HTMLElement) | boolean;
    ghostClass?: string;
    ghostTo?: string | HTMLElement;
    direction?: "v" | "h";
    scroll?: boolean;
    scrollSpeed?: number;
    zIndex?: number;
    group?: string;
    classes?: string;
    snap?: string;
    snapOptions?: {
        tolerance: number;
    };
    cursor?: {
        default?: string;
        active?: string;
        over?: string;
    };
    grid?: number | number[];
    type?: string;
    onPointerDown?: (data: {
        draggable: HTMLElement | SVGGraphicsElement;
    }, event: MouseEvent) => boolean;
    onStart?: (data: {
        draggable: HTMLElement | SVGGraphicsElement;
        x: number;
        y: number;
        transform: UiiTransform;
    }, event: MouseEvent) => void;
    onDrag?: (data: {
        draggable: HTMLElement | SVGGraphicsElement;
        x: number;
        y: number;
        ox: number;
        oy: number;
        transform: UiiTransform;
    }, event: MouseEvent) => boolean | void;
    onEnd?: (data: {
        draggable: HTMLElement | SVGGraphicsElement;
        x: number;
        y: number;
        transform: UiiTransform;
    }, event: MouseEvent) => boolean | void;
    onClone?: (data: {
        clone: HTMLElement | SVGGraphicsElement;
    }, event: MouseEvent) => void;
    onSnap?: (data: {
        el: HTMLElement | SVGGraphicsElement;
        targetH: HTMLElement | SVGGraphicsElement;
        targetV: HTMLElement | SVGGraphicsElement;
        dirH: string;
        dirV: string;
    }, event: MouseEvent) => void;
};
export type DroppableOptions = {
    watch?: boolean;
    activeClass?: string;
    hoverClass?: string;
    accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
    onActive?: (data: {
        draggable: HTMLElement;
        droppables: Array<HTMLElement>;
    }) => void;
    onEnter?: (data: {
        draggable: HTMLElement;
        droppable: HTMLElement;
    }, event: MouseEvent) => void;
    onOver?: (data: {
        draggable: HTMLElement;
        droppable: HTMLElement;
    }, event: MouseEvent) => void;
    onLeave?: (data: {
        draggable: HTMLElement;
        droppable: HTMLElement;
    }, event: MouseEvent) => void;
    onDrop?: (data: {
        draggable: HTMLElement;
        droppable: HTMLElement;
    }, event: MouseEvent) => void;
    onDeactive?: (data: {
        draggable: HTMLElement;
        droppables: Array<HTMLElement>;
    }) => void;
};
export type RotatableOptions = {
    cursor?: {
        default?: string;
        active?: string;
    };
    ox?: number | string;
    oy?: number | string;
    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
    onPointerDown?: (event: MouseEvent) => boolean;
    onStart?: (data: {
        deg: number;
        cx: number;
        cy: number;
    }, event: MouseEvent) => {};
    onRotate?: (data: {
        deg: number;
        cx: number;
        cy: number;
        ox: number;
        oy: number;
        target: HTMLElement | SVGGraphicsElement;
    }, event: MouseEvent) => {};
    onEnd?: (data: {
        deg: number;
    }, event: MouseEvent) => {};
};
export type SelectableOptions = {
    class?: string;
    selectingClass?: string;
    selectedClass?: string;
    targets?: (() => NodeList | HTMLCollection | HTMLElement[]) | string;
    mode?: "overlap" | "inclusion";
    scroll?: boolean;
    scrollSpeed?: number;
    filter?: ((el: HTMLElement) => boolean) | string;
    onPointerDown?: (event: MouseEvent) => boolean;
    onStart?: (data: {
        selection: Array<HTMLElement>;
        selectable: HTMLElement;
    }, event: MouseEvent) => void;
    onSelect?: (data: {
        selection: Array<HTMLElement>;
        selectable: HTMLElement;
    }, event: MouseEvent) => void;
    onEnd?: (data: {
        selection: Array<HTMLElement>;
        selectable: HTMLElement;
    }, event: MouseEvent) => void;
};
export type SortableOptions = {
    scroll?: boolean;
    scrollSpeed?: number;
    filter?: string;
    ghostContainer?: HTMLElement;
    ghostClass?: string;
    group?: string;
    handle?: string;
    activeClass?: string;
    move?: {
        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | "copy";
        from?: ((item: HTMLElement, from: HTMLElement, to: HTMLElement) => boolean) | boolean;
    };
    spill?: "remove" | "revert";
    sort?: boolean;
    onActive?: (data: {
        item: HTMLElement;
        from: HTMLElement;
    }) => void;
    onDeactive?: (data: {
        item: HTMLElement;
        from: HTMLElement;
    }) => void;
    onStart?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        index: number;
    }, event: MouseEvent) => void;
    onEnd?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
    }, event: MouseEvent) => void;
    onChange?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
        fromIndex: number;
        toIndex: number;
    }, event: MouseEvent) => void;
    onUpdate?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
    }, event: MouseEvent) => void;
    onEnter?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
        dir: string;
    }, event: MouseEvent) => void;
    onLeave?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
    }, event: MouseEvent) => void;
    onAdd?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
        index: number;
    }, event: MouseEvent) => void;
    onRemove?: (data: {
        item: HTMLElement;
        from: HTMLElement;
        to: HTMLElement;
    }, event: MouseEvent) => void;
};
export type CollisionDetectorOptions = {
    container?: Element;
};
export type CollisionData = {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
    el?: HTMLElement;
};