import type { DragMouseTouchEvent } from '../../index'; export type DraggableElement = { index: number; draggableId: string; } | { index: number; }; export type ListCondig = { removeAtEvent: (index: number, sync?: boolean) => T | undefined; insertEvent: (index: number, value: T, sync?: boolean) => void; getLength: () => number; getValue: (index: number) => T; insertToListEmpty: (config: CoreConfig, index: number, value: T) => void; }; export type MapFrom = (object: T, droppable: Element) => unknown; export interface DragStartEventData { index: number; element: Element; value: T; } export interface DragEndEventData { index: number; value: T; } export interface DragOverEventData { index: number; targetIndex: number; element: Element; value: T; droppable: Element; } export declare const HORIZONTAL = "horizontal"; export declare const VERTICAL = "vertical"; /** * The direction of the list to sort. * @public */ export type Direction = typeof HORIZONTAL | typeof VERTICAL; /** * The coordinate of the translate property of the draggred element. */ export type Coordinate = { x: number; y: number; }; /** * Mapping function that transforms the coordinates of the dragged element. */ export type CoordinateMap = (coordinate: Coordinate, currentElement: HTMLElement) => Coordinate; /** * Configuration of the drag and drop. * @public */ export interface Config { /** * The direction of the list to sort. */ direction?: Direction; /** * The CSS selector of the drag handler element inside of the draggable element. */ handlerSelector?: string; /** * The CSS class that is setted when a element is dragged. */ draggingClass?: string; /** * The CSS class that is setted on a droppable element when the current element is dragged over it. */ droppableClass?: string; /** * The CSS class that is setted when a element is removed. */ removingClass?: string; /** * The CSS class that is setted when a element is start inserting. */ insertingFromClass?: string; /** * Delay time before removing an element in milisecond. */ delayBeforeRemove?: number; /** * Delay time before inserting an element in milisecond. */ delayBeforeInsert?: number; /** * A function that returns whether a given element of the list is draggable. */ isDraggable?: (element: HTMLElement) => boolean; /** * A function that determines whether dragging can start from the clicked element. * This function receives the drag event and the target element, and returns true if dragging is allowed. * @param event The drag mouse/touch event * @param element The element that was clicked * @returns true if dragging is allowed from this element, false otherwise */ canDragFromElement?: (event: DragMouseTouchEvent, element: HTMLElement) => boolean; /** * A function that returns whether a given element of the list is draggable. */ onDragStart?: (element: DragStartEventData) => void; /** * A function that returns whether a given element of the list is draggable. */ onDragEnd?: (element: DragEndEventData) => void; /** * A function that is called when the draggable element is dragged over a droppable. */ onDragOver?: (element: DragOverEventData) => void; /** * Name of the group of the share droppables. */ droppableGroup?: string; /** * The duration of the animations in milisecond. */ animationDuration?: number; /** * Map value when is passed from the current list to another. */ mapFrom?: MapFrom; /** * The delay before the touchmove event is fired. */ delayBeforeTouchMoveEvent?: number; /** * List of mapping functions that transform the coordinates of the dragged element, which are applied one after another, * where the output of one mapping function becomes the input of the next. * @example * [map1, map2, map3] * means: * let y1 = map1(y0) * let y2 = map2(y1) * let finalCoordinate = map3(y2) * The default value is [(coordinate) => coordinate] * @default [(coordinate) => coordinate] */ coordinateTransform?: CoordinateMap[]; } /** * onDrop event function. * @public */ export type OnDropEvent = (source: DraggableElement, destination: DraggableElement) => void; export type OnDragOverEvent = (source: DraggableElement) => void; export type OnRemoveAtEvent = (index: number, sync?: boolean) => T | undefined; export type OnInsertEvent = (index: number, value: T, sync?: boolean) => void; export type OnGetLength = () => number; export type OnGetValue = (index: number) => T; export type CoreConfig = { /** * The direction of the list to sort. */ direction: Direction; /** * The CSS selector of the drag handler element inside of the draggable element. */ handlerSelector: string; /** * The CSS class that is setted when a element is dragged. */ draggingClass: string; /** * The CSS class that is setted on a droppable element when the current element is dragged over it. */ droppableClass: string; /** * The CSS class that is setted when a element is removed. */ removingClass: string; /** * The CSS class that is setted when a element is start inserting. */ insertingFromClass: string; /** * Delay time before removing an element in milisecond. */ delayBeforeRemove: number; /** * Delay time before inserting an element in milisecond. */ delayBeforeInsert: number; /** * A function that returns whether a given element of the list is draggable */ isDraggable: (element: HTMLElement) => boolean; /** * A function that determines whether dragging can start from the clicked element. * This function receives the drag event and the target element, and returns true if dragging is allowed. */ canDragFromElement: (event: DragMouseTouchEvent, element: HTMLElement) => boolean; /** * A function that is called when the draggable element starts being dragged. */ onDragStart: (element: DragStartEventData) => void; /** * A function that is called when the draggable element is dropped. */ onDragEnd: (element: DragEndEventData) => void; /** * A function that is called when the draggable element is dragged over a droppable. */ onDragOver: (element: DragOverEventData) => void; /** * Name of the group of the share droppables */ droppableGroup?: string; /** * The duration of the animations in milisecond */ animationDuration: number; onRemoveAtEvent: OnRemoveAtEvent; onInsertEvent: OnInsertEvent; onGetLegth: OnGetLength; onGetValue: OnGetValue; /** * Map value when is passed from the current list to another. */ mapFrom: MapFrom; /** * The delay before the touchmove event is fired. */ delayBeforeTouchMoveEvent: number; /** * List of mapping functions that transform the coordinates of the dragged element, which are applied one after another, * where the output of one mapping function becomes the input of the next. * @example * [map1, map2, map3] * means: * let y1 = map1(y0) * let y2 = map2(y1) * let finalCoordinate = map3(y2) * The default value is [(coordinate) => coordinate] * @default [(coordinate) => coordinate] */ coordinateTransform: CoordinateMap[]; };