fluid-dnd 2.1.3 → 2.2.1

package/dist/{HandlerPublisher-CVvTsXrJ.js → HandlerPublisher-CRBvk0J7.js}

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var e = (a, s, l) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[s] = l;
 var r = (a, s, l) => e(a, typeof s != "symbol" ? s + "" : s, l);
-import { a as h, t as n, G as t } from "./index-C6IKL-bo.js";
+import { a as h, t as n, G as t } from "./index-Dc95WWpv.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/{HandlerPublisher-CsD6p60X.cjs → HandlerPublisher-DGYFIYDd.cjs}

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-DE3X7xW4.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;
+"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-DxKyk1TO.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;

package/dist/core/index.d.ts

@@ -28,6 +28,17 @@ export declare const VERTICAL = "vertical";
  * @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
@@ -93,6 +104,19 @@ export interface Config<T> {
      * 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.
@@ -168,4 +192,17 @@ export type CoreConfig<T> = {
      * 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[];
 };

package/dist/core/useDraggable.js

@@ -16,7 +16,7 @@ var DraggingState;
     DraggingState[DraggingState["END_DRAGGING"] = 3] = "END_DRAGGING";
 })(DraggingState || (DraggingState = {}));
 export default function useDraggable(draggableElement, index, config, parent, handlerPublisher) {
-    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent } = config;
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
         .join(' ');
@@ -28,7 +28,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     let pagePosition = { pageX: 0, pageY: 0 };
     let delayTimeout;
     let initialTouch;
-    const [setTransform, updateTransformState] = useTransform(draggableElement);
+    const [setTransform, updateTransformState] = useTransform(draggableElement, coordinateTransform);
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };

package/dist/core/utils/SetTransform.d.ts

@@ -1,6 +1,6 @@
-import { DragMouseTouchEvent, TransformEvent } from "../../../index";
-import { Direction } from "..";
-export declare const useTransform: (draggedElement: HTMLElement) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
+import { DragMouseTouchEvent, TransformEvent } from '../../../index';
+import { CoordinateMap, Direction } from '..';
+export declare const useTransform: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
     pageX: number;
     pageY: number;
 }, direction?: Direction) => void, (event: DragMouseTouchEvent, element: HTMLElement) => void];

package/dist/core/utils/SetTransform.js

@@ -1,9 +1,9 @@
-import { draggableIsOutside, getNearestFixedParentPosition, getPropByDirection, getValueFromProperty, } from "./GetStyles";
-import { HORIZONTAL, VERTICAL } from "..";
-import { scrollByDirection } from "./scroll";
-import { HANDLER_CLASS, DRAGGING_CLASS } from "./classes";
-import { containClass } from "./dom/classList";
-export const useTransform = (draggedElement) => {
+import { draggableIsOutside, getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from './GetStyles';
+import { HORIZONTAL, VERTICAL } from '..';
+import { scrollByDirection } from './scroll';
+import { HANDLER_CLASS, DRAGGING_CLASS } from './classes';
+import { containClass } from './dom/classList';
+export const useTransform = (draggedElement, coordinateTransforms) => {
     let currentOffset = { offsetX: 0, offsetY: 0 };
     let position = { top: 0, left: 0 };
     let translate = { x: 0, y: 0 };
@@ -40,15 +40,11 @@ export const useTransform = (draggedElement) => {
             return defaultTransalation;
         };
         const updateScroll = (translateDirection) => {
-            if (element &&
-                containClass(element, DRAGGING_CLASS) &&
-                translateDirection === direction) {
+            if (element && containClass(element, DRAGGING_CLASS) && translateDirection === direction) {
                 const { before, distance, axis, getRect } = getPropByDirection(direction);
                 const distanceValue = getRect(element)[distance];
                 const parentBoundingClientRect = getRect(parent);
-                const positionInsideParent = position[before] -
-                    parentBoundingClientRect[before] +
-                    translate[axis];
+                const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
                 const parentDistance = parentBoundingClientRect[distance];
                 const totalDistance = parentDistance - distanceValue;
                 const relativePosition = positionInsideParent / totalDistance;
@@ -75,24 +71,28 @@ export const useTransform = (draggedElement) => {
         const updateTranlateByDirection = (direction) => {
             const { axis } = getPropByDirection(direction);
             translate[axis] = getTranslateWihtDirection(direction);
-            updateTranform(translate);
+            updateTranform(mapCoordinate());
         };
         updateTranlateByDirection(HORIZONTAL);
         updateTranlateByDirection(VERTICAL);
     };
+    const mapCoordinate = () => {
+        let coordinate = translate;
+        for (const transform of coordinateTransforms) {
+            coordinate = transform(coordinate, draggedElement);
+        }
+        return coordinate;
+    };
     const updateTransformState = (event, element) => {
         const [top, left, offsetX, offsetY] = getTransformState(event, element, draggedElement);
         position = {
             top,
-            left,
+            left
         };
         updatePosition(position);
         currentOffset = { offsetX, offsetY };
     };
-    return [
-        setTransform,
-        updateTransformState,
-    ];
+    return [setTransform, updateTransformState];
 };
 const getOffsetWithDraggable = (direction, element, draggable) => {
     const { borderBeforeWidth, before, getRect } = getPropByDirection(direction);
@@ -136,11 +136,11 @@ export const getTransformState = (event, element, draggable) => {
     return [
         getPositionByDistance(VERTICAL, event, element, {
             offsetX,
-            offsetY,
+            offsetY
         }),
         getPositionByDistance(HORIZONTAL, event, element, {
             offsetX,
-            offsetY,
+            offsetY
         }),
         offsetX,
         offsetY

package/dist/core/utils/config.d.ts

@@ -1,5 +1,5 @@
-import { ListCondig, MapFrom } from "..";
-import { Config, CoreConfig } from "..";
-import { DroppableConfig } from "../configHandler";
+import { ListCondig, MapFrom } from '..';
+import { Config, CoreConfig } from '..';
+import { DroppableConfig } from '../configHandler';
 export declare const getConfig: <T>(listCondig: ListCondig<T>, config?: Config<T>) => CoreConfig<T>;
 export declare const MapConfig: <T>(coreConfig: DroppableConfig<any>, mapFrom: MapFrom<T>) => CoreConfig<any>;

package/dist/core/utils/config.js

@@ -1,5 +1,5 @@
-import { VERTICAL, } from "..";
-import { DRAGGABLE_CLASS } from "./classes";
+import { VERTICAL } from '..';
+import { DRAGGABLE_CLASS } from './classes';
 export const getConfig = (listCondig, config) => {
     const onRemoveAtEvent = (index, sync) => {
         return listCondig.removeAtEvent(index, sync);
@@ -19,7 +19,7 @@ export const getConfig = (listCondig, config) => {
     return {
         direction: config?.direction ?? VERTICAL,
         handlerSelector: config?.handlerSelector ?? DRAGGABLE_CLASS,
-        draggingClass: config?.draggingClass ?? "dragging",
+        draggingClass: config?.draggingClass ?? 'dragging',
         droppableClass: config?.droppableClass ?? 'droppable-hover',
         isDraggable: config?.isDraggable ?? (() => true),
         onDragStart: config?.onDragStart ?? (() => { }),
@@ -30,12 +30,13 @@ export const getConfig = (listCondig, config) => {
         onGetLegth,
         onGetValue,
         animationDuration: config?.animationDuration ?? 200,
-        removingClass: config?.removingClass ?? "removing",
+        removingClass: config?.removingClass ?? 'removing',
         insertingFromClass: config?.insertingFromClass ?? 'from-inserting',
         delayBeforeRemove: config?.delayBeforeRemove ?? 200,
         delayBeforeInsert: config?.delayBeforeInsert ?? 200,
         mapFrom: config?.mapFrom ?? defaultMapFrom,
         delayBeforeTouchMoveEvent: config?.delayBeforeTouchMoveEvent ?? 150,
+        coordinateTransform: config?.coordinateTransform ?? [(coordinate) => coordinate]
     };
 };
 export const MapConfig = (coreConfig, mapFrom) => {