fluid-dnd 2.3.0 → 2.5.0

package/dist/core/{utils/tempChildren.js → tempChildren.js}

@@ -1,26 +1,19 @@
-import { HORIZONTAL, VERTICAL } from "..";
-import { getPropByDirection } from "./GetStyles";
-import { getGapPixels } from "./ParseStyles";
-import { setSizeStyles, setTranistion } from "./SetStyles";
-import { observeMutation } from "./observer";
-import getTranslationByDragging from "./translate/GetTranslationByDraggingAndEvent";
-import { scrollPercent } from "./scroll";
-import { TEMP_CHILD_CLASS } from ".";
-import { addClass, getClassesSelector } from "./dom/classList";
-import { IsHTMLElement } from "./touchDevice";
-const START_DRAG_EVENT = "startDrag";
-const timingFunction = "cubic-bezier(0.2, 0, 0, 1)";
+import { HORIZONTAL, VERTICAL } from '.';
+import { getDistanceValue, getPropByDirection, getRect, getScrollElementValue, isSameNode } from './utils/GetStyles';
+import { getGapPixels } from './utils/ParseStyles';
+import { setSizeStyles, setTranistion } from './utils/SetStyles';
+import { observeMutation } from './utils/observer';
+import getTranslationByDragging from './events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { NONE_TRANSLATE, TEMP_CHILD_CLASS } from './utils';
+import { addClass, getClassesSelector } from './utils/dom/classList';
+const START_DRAG_EVENT = 'startDrag';
+const timingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
 const DELAY_TIME = 50;
-export const isTempElement = (element) => {
-    if (!IsHTMLElement(element)) {
-        return false;
-    }
-    return element.classList.contains(TEMP_CHILD_CLASS);
-};
+const TRANSITION_PROPERTY = 'width, min-width, height';
 const getDistance = (droppable, draggedElement, direction) => {
     let distances = getTranslationByDragging(draggedElement, START_DRAG_EVENT, direction, droppable);
     const gap = getGapPixels(droppable, direction);
-    const { distance } = getPropByDirection(direction);
+    const [, distance] = getDistanceValue(direction, distances);
     distances[distance] -= gap;
     const [large, largeDistance] = getlarge(direction, draggedElement);
     distances[largeDistance] = large;
@@ -28,54 +21,57 @@ const getDistance = (droppable, draggedElement, direction) => {
 };
 const getlarge = (direction, draggedElement) => {
     const largeDirection = direction == HORIZONTAL ? VERTICAL : HORIZONTAL;
-    const { distance, getRect } = getPropByDirection(largeDirection);
-    return [
-        getRect(draggedElement)[distance],
-        distance,
-    ];
+    const distanceValue = getDistanceValue(largeDirection, getRect(draggedElement));
+    return distanceValue;
 };
-const setSizes = (element, height, width) => {
-    setSizeStyles(element, height, width);
-    element.style.minWidth = `${width}px`;
+const setSizes = (element, translate = NONE_TRANSLATE) => {
+    setSizeStyles(element, translate);
+    element.style.minWidth = `${translate.width}px`;
 };
 const updateChildAfterCreated = (child, droppable, distances) => {
     return (observer) => {
         if (!droppable.contains(child)) {
             return;
         }
-        setSizes(child, distances.height, distances.width);
+        setSizes(child, distances);
         observer.disconnect();
     };
 };
-const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
+const overflowScroll = (droppable, direction) => {
+    const { scrollDistance, clientDistance } = getPropByDirection(direction);
+    return droppable[scrollDistance] - droppable[clientDistance];
+};
+const scrollPercent = (direction, droppable, droppableScroll) => {
+    const [scrollElementValue] = getScrollElementValue(direction, droppableScroll);
+    return scrollElementValue / overflowScroll(droppable, direction);
+};
+const fixScrollInitialChange = (droppable, config, scroll, ifStartDragging) => {
     if (!ifStartDragging) {
         return;
     }
-    const { droppable, config, scroll } = droppableConfig;
     const { direction } = config;
-    const scrollCompleted = scrollPercent(config.direction, droppable, scroll) > 0.99;
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    const scrollCompleted = scrollPercent(direction, droppable, scroll) > 0.99;
+    const [, scrollElement] = getScrollElementValue(direction, droppable);
     if (scrollCompleted) {
-        droppable[scrollElement] =
-            droppable[scrollDistance] - droppable[clientDistance];
+        droppable[scrollElement] = overflowScroll(droppable, direction);
     }
 };
 const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
     if (!droppableConfig) {
         return;
     }
-    const { droppable, config } = droppableConfig;
+    const { droppable, config, scroll } = droppableConfig;
     const { direction, animationDuration } = config;
-    fixScrollInitialChange(droppableConfig, ifStartDragging);
+    fixScrollInitialChange(droppable, config, scroll, ifStartDragging);
     if (droppable.querySelector(`.${TEMP_CHILD_CLASS}`) || !draggedElement) {
         return;
     }
-    var tempChildTag = draggedElement.tagName == "LI" ? "DIV" : draggedElement.tagName;
+    var tempChildTag = draggedElement.tagName == 'LI' ? 'DIV' : draggedElement.tagName;
     var child = document.createElement(tempChildTag);
     addClass(child, TEMP_CHILD_CLASS);
-    setSizes(child, 0, 0);
+    setSizes(child);
     const distances = getDistance(droppable, draggedElement, direction);
-    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, "width, min-width, height");
+    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, TRANSITION_PROPERTY);
     return [child, distances, droppable];
 };
 export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -84,12 +80,12 @@ export const addTempChild = (draggedElement, parent, ifStartDragging, droppableC
         return;
     }
     const [child, distances, droppable] = result;
-    if (parent.isSameNode(droppable)) {
-        setSizes(child, distances.height, distances.width);
+    if (isSameNode(parent, droppable)) {
+        setSizes(child, distances);
     }
     observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
         childList: true,
-        subtree: true,
+        subtree: true
     });
     droppable.appendChild(child);
 };
@@ -104,9 +100,9 @@ export const addTempChildOnInsert = (draggedElement, ifStartDragging, droppableC
 };
 const setSizeAfterAppendChild = (child, size) => {
     return requestAnimationFrame(() => {
-        setSizes(child, size.height, size.width);
+        setSizes(child, size);
         requestAnimationFrame(() => {
-            setTranistion(child, 0, timingFunction, "width, min-width, height");
+            setTranistion(child, 0, timingFunction, TRANSITION_PROPERTY);
         });
     });
 };
@@ -117,11 +113,12 @@ export const removeTempChildrens = (droppable, parent, droppableGroupClass, anim
     var children = document.querySelectorAll(`${getClassesSelector(droppableGroupClass)} > .${TEMP_CHILD_CLASS}`);
     children.forEach((tempChild) => {
         const childParent = tempChild.parentElement;
-        if ((childParent?.isSameNode(parent) || !draggedElementIsOutside && childParent?.isSameNode(droppable))) {
+        if (isSameNode(parent, childParent) ||
+            (!draggedElementIsOutside && isSameNode(droppable, childParent))) {
             return;
         }
         const tempChildElement = tempChild;
-        setSizes(tempChildElement, 0, 0);
+        setSizes(tempChildElement);
         setTimeout(() => {
             tempChild.parentNode?.removeChild(tempChild);
         }, animationDuration + DELAY_TIME);
@@ -132,7 +129,7 @@ export const removeTempChild = (parent, animationDuration, isAnimated = false) =
     lastChildren.forEach((lastChild) => {
         const tempChildElement = lastChild;
         if (isAnimated) {
-            setSizes(tempChildElement, 0, 0);
+            setSizes(tempChildElement);
             setTimeout(() => {
                 if (parent.contains(tempChildElement)) {
                     parent.removeChild(tempChildElement);

package/dist/core/useDraggable.js

@@ -1,22 +1,18 @@
 import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion } from './utils/SetStyles';
-import { useTransform } from './utils/SetTransform';
-import useEmitEvents from './utils/events/emitEvents';
+import { usePositioning } from './positioning/usePositioning';
+import { DraggingState } from '.';
 import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from './utils';
-import ConfigHandler from './configHandler';
-import { IsHTMLElement, isTouchEvent } from './utils/touchDevice';
-import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './utils/tempChildren';
-import { DroppableConfigurator } from './utils/droppableConfigurator';
-import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass } from './utils/dom/classList';
+import ConfigHandler from './config/configHandler';
+import { IsHTMLElement, isTouchEvent } from './utils/typesCheckers';
+import { addTempChild, removeTempChildrens } from './tempChildren';
+import { DroppableConfigurator } from './config/droppableConfigurator';
+import { addClass, containClass, getClassesList, getClassesSelector, toggleClass } from './utils/dom/classList';
 import { DRAGGABLE_CLASS, DRAGGING_CLASS, DROPPABLE_CLASS, HANDLER_CLASS } from './utils/classes';
-var DraggingState;
-(function (DraggingState) {
-    DraggingState[DraggingState["NOT_DRAGGING"] = 0] = "NOT_DRAGGING";
-    DraggingState[DraggingState["START_DRAGGING"] = 1] = "START_DRAGGING";
-    DraggingState[DraggingState["DRAGING"] = 2] = "DRAGING";
-    DraggingState[DraggingState["END_DRAGGING"] = 3] = "END_DRAGGING";
-})(DraggingState || (DraggingState = {}));
+import useDragAndDropEvents from './events/dragAndDrop/dragAndDrop';
+import { getRect, isSameNode } from './utils/GetStyles';
+const ON_MOUSEDOWN = 'onmousedown';
 export default function useDraggable(draggableElement, index, config, parent, handlerPublisher) {
-    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, draggingClass, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
         .join(' ');
@@ -28,11 +24,11 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     let pagePosition = { pageX: 0, pageY: 0 };
     let delayTimeout;
     let initialTouch;
-    const [setTransform, updateTransformState] = useTransform(draggableElement, coordinateTransform);
+    const [setTransform, updateTransformState] = usePositioning(draggableElement, coordinateTransform);
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };
-    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass] = useDragAndDropEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
     const setDraggable = () => {
         addClass(draggableElement, DRAGGABLE_CLASS);
     };
@@ -61,7 +57,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         if (handler &&
             handlerParent &&
             containClass(handlerParent, DROPPABLE_CLASS) &&
-            !handlerParent.isSameNode(parent)) {
+            !isSameNode(parent, handlerParent)) {
             return null;
         }
         return handler;
@@ -69,22 +65,22 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const setSlotRefElementParams = (element) => {
         const handlerElement = (getHandler(element) ?? element);
         if (handlerElement && isDraggable(element)) {
-            assignDraggingEvent(handlerElement, 'onmousedown', onmousedown('mousemove', 'mouseup'));
+            assignDraggingEvent(handlerElement, ON_MOUSEDOWN, onmousedown('mousemove', 'mouseup'));
             assignDraggingEvent(handlerElement, 'ontouchstart', onmousedown('touchmove', 'touchend'), (event) => {
+                const touch = event.touches[0];
                 initialTouch = {
-                    x: event.touches[0].clientX,
-                    y: event.touches[0].clientY
+                    x: touch.clientX,
+                    y: touch.clientY
                 };
             });
             disableMousedownEventFromImages(handlerElement);
         }
-        if (!element?.isSameNode(handlerElement)) {
-            assignDraggingEvent(element, 'onmousedown', mousedownOnDraggablefunction);
+        if (!isSameNode(element, handlerElement)) {
+            assignDraggingEvent(element, ON_MOUSEDOWN, mousedownOnDraggablefunction);
         }
         addClass(parent, DROPPABLE_CLASS);
     };
     const disableMousedownEventFromImages = (handlerElement) => {
-        // Avoid dragging inner images
         const images = handlerElement.querySelectorAll('img');
         Array.from(images).forEach((image) => {
             image.onmousedown = () => false;
@@ -99,13 +95,20 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         }
         const { droppable, config } = droppableConfigurator.current;
         setTransform(draggableElement, droppable, pagePosition, config.direction);
-        emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, DRAG_EVENT, droppableConfigurator.current);
+    };
+    const removeTranslates = (droppable) => {
+        const drgagables = droppable.querySelectorAll(`.${DRAGGABLE_CLASS}`);
+        for (const draggable of drgagables) {
+            moveTranslate(draggable);
+        }
     };
     const changeDroppable = (newdDroppableConfig, oldDroppableConfig) => {
         if (oldDroppableConfig &&
             draggingState == DraggingState.DRAGING &&
-            !newdDroppableConfig?.droppable.isSameNode(oldDroppableConfig.droppable)) {
-            emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, oldDroppableConfig);
+            !isSameNode(newdDroppableConfig?.droppable, oldDroppableConfig.droppable)) {
+            emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig);
+            removeTranslates(oldDroppableConfig.droppable);
         }
     };
     const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
@@ -117,7 +120,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
             ? Array.from(document.querySelectorAll(getClassesSelector(droppableGroupClass)))
             : [parent];
         for (const droppable of droppables) {
-            droppable.classList.toggle(droppableClass, !isOutside && droppable.isSameNode(droppableConfigurator.current.droppable));
+            droppable.classList.toggle(droppableClass, !isOutside && isSameNode(droppable, droppableConfigurator.current.droppable));
         }
     };
     const onMove = (event, isTouchEvent = false) => {
@@ -145,8 +148,9 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     };
     const cursorWasNotMoved = (event) => {
         if (isTouchEvent(event) && initialTouch && draggingState == DraggingState.START_DRAGGING) {
-            const movedX = Math.abs(event.touches[0].clientX - initialTouch.x);
-            const movedY = Math.abs(event.touches[0].clientY - initialTouch.y);
+            const touch = event.touches[0];
+            const movedX = Math.abs(touch.clientX - initialTouch.x);
+            const movedY = Math.abs(touch.clientY - initialTouch.y);
             if (Math.abs(movedX) > 5 && Math.abs(movedY) > 5) {
                 clearTimeout(delayTimeout);
                 return false;
@@ -180,7 +184,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         const { clientX, clientY } = event;
         const elementBelow = document.elementFromPoint(clientX, clientY);
         const draggableAncestor = elementBelow?.closest(`.${DRAGGABLE_CLASS}`);
-        return draggableAncestor && element.isSameNode(draggableAncestor);
+        return draggableAncestor && isSameNode(element, draggableAncestor);
     };
     const getDragStartEventData = (element) => {
         const value = config.onGetValue(index);
@@ -229,7 +233,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const disableDragging = (moveEvent, event) => {
         toggleDroppableClass(true);
         const convertedEvent = convetEventToDragMouseTouchEvent(event);
-        onDropDraggingEvent(droppableConfigurator.isOutside(convertedEvent, false));
+        onDropDraggingEvent(droppableConfigurator.isOutside(convertedEvent));
         clearTimeout(delayTimeout);
         document.removeEventListener(moveEvent, handleMove);
         droppableConfigurator.updateConfig(convertedEvent);
@@ -256,7 +260,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const startDragging = (event) => {
         addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
         updateDraggingStateBeforeDragging();
-        emitEventToSiblings(draggableElement, START_DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, START_DRAG_EVENT, droppableConfigurator.current);
         setDraggingStyles(draggableElement);
         updateTransformState(event, draggableElement);
     };
@@ -282,15 +286,15 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         draggingState = DraggingState.END_DRAGGING;
         removeDraggingStyles(draggableElement);
         if (draggableElement.classList.contains(DRAGGING_CLASS)) {
-            emitEventToSiblings(draggableElement, START_DROP_EVENT, windowScroll, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, index);
+            emitDroppingEvent(draggableElement, START_DROP_EVENT, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, windowScroll, index);
         }
     };
     const removeDraggingStyles = (element) => {
         setTranistion(element, animationDuration, draggableTargetTimingFunction);
-        moveTranslate(element, 0, 0);
+        moveTranslate(element);
     };
     const setDraggingStyles = (element) => {
-        const { height, width } = element.getBoundingClientRect();
+        const { height, width } = getRect(element);
         setCustomFixedSize(element, {
             fixedHeight: `${height}px`,
             fixedWidth: `${width}px`
@@ -299,32 +303,21 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         toggleClass(element, draggingClass, true);
         element.style.transition = '';
     };
-    const removeAfterRemovingClass = (targetIndex, config) => {
-        removeClass(draggableElement, removingClass);
-        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.initial);
-        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
-            removeDraggingStyles(sibling);
-            emitFinishRemoveEventToSiblings(draggableElement);
-        });
-        onRemoveAtEvent(index, true);
-    };
     const removeAtFromElement = (targetIndex) => {
-        if (!droppableConfigurator.initial) {
-            return;
-        }
-        const config = droppableConfigurator.initial;
-        if (targetIndex == index) {
-            addClass(draggableElement, removingClass);
-            setTimeout(() => {
-                removeAfterRemovingClass(targetIndex, config);
-            }, delayBeforeRemove);
-        }
+        import('./events/remove').then((module) => {
+            const [removeAt] = module.default(config, parent, handlerPublisher, endDraggingState);
+            if (!droppableConfigurator.initial) {
+                return;
+            }
+            removeAt(index, targetIndex, draggableElement, draggingState, droppableConfigurator.initial);
+        });
     };
     const insertAtFromElement = (targetIndex, value) => {
         if (targetIndex === index ||
             (targetIndex === config.onGetLegth() && index === targetIndex - 1)) {
-            emitInsertEventToSiblings(targetIndex, draggableElement, parent, value, () => {
-                addTempChildOnInsert(draggableElement, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.initial);
+            import('./events/insert').then((module) => {
+                const [emitInsertEventToSiblings] = module.default(config, parent, handlerPublisher, endDraggingState);
+                emitInsertEventToSiblings(targetIndex, draggableElement, parent, value, droppableConfigurator.initial);
             });
         }
     };

package/dist/core/useDroppable.d.ts

@@ -1,3 +1,3 @@
-import { CoreConfig } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { CoreConfig } from '.';
+import HandlerPublisher from './HandlerPublisher';
 export default function useDroppable<T>(coreConfig: CoreConfig<T>, handlerPublisher: HandlerPublisher, droppable?: HTMLElement, indexAttr?: string): readonly [((targetIndex: number) => void)[], ((targetIndex: number, value: T) => void)[]];

package/dist/core/useDroppable.js

@@ -1,8 +1,8 @@
-import { parseIntEmpty } from "./utils/GetStyles";
-import { addMultipleClasses, getClassesList } from "./utils/dom/classList";
-import useDraggable from "./useDraggable";
-import { AddCssStylesToElement } from "./utils/SetStyles";
-import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRAB_CLASS, GRABBING_CLASS, HANDLER_CLASS } from "./utils/classes";
+import { parseIntEmpty } from './utils/GetStyles';
+import { addMultipleClasses, getClassesList } from './utils/dom/classList';
+import useDraggable from './useDraggable';
+import { AddCssStylesToElement } from './utils/SetStyles';
+import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRAB_CLASS, GRABBING_CLASS, HANDLER_CLASS } from './utils/classes';
 const setDroppableGroupClass = (droppableGroupClass, droppable) => {
     if (droppableGroupClass) {
         addMultipleClasses(droppable, droppableGroupClass);
@@ -13,13 +13,13 @@ const createDraggableCssStyles = () => {
         `.${DRAGGABLE_CLASS}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,
         `.${HANDLER_CLASS}{pointer-events:auto!important;}`,
         `.${GRAB_CLASS}{cursor:grab;}`,
-        ".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",
+        '.temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}',
         `.droppable{box-sizing:border-box!important;}`,
         `.${DRAGGING_CLASS}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,
         `.${DRAGGING_HANDLER_CLASS}{pointer-events:none!important;}`,
         `.${DROPPING_CLASS}{pointer-events:none!important;}`,
         `.${GRABBING_CLASS}{cursor:grabbing;}`,
-        `.disable-transition{transition:none!important;}`,
+        `.disable-transition{transition:none!important;}`
     ]);
 };
 export default function useDroppable(coreConfig, handlerPublisher, droppable, indexAttr = 'index') {
@@ -28,14 +28,11 @@ export default function useDroppable(coreConfig, handlerPublisher, droppable, in
     let insertAtFromElementList = [];
     const { droppableGroup } = coreConfig;
     if (!droppable) {
-        return [
-            removeAtFromElementList,
-            insertAtFromElementList
-        ];
+        return [removeAtFromElementList, insertAtFromElementList];
     }
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
-        .join(" ");
+        .join(' ');
     createDraggableCssStyles();
     setDroppableGroupClass(droppableGroupClass, droppable);
     for (const child of droppable.children) {
@@ -48,8 +45,5 @@ export default function useDroppable(coreConfig, handlerPublisher, droppable, in
             insertAtFromElementList.push(insertAtFromElement);
         }
     }
-    return [
-        removeAtFromElementList,
-        insertAtFromElementList
-    ];
+    return [removeAtFromElementList, insertAtFromElementList];
 }

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

@@ -1,5 +1,5 @@
 import { Direction } from '..';
-import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from '../../../index';
+import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before, Translate, Coordinate, ElementPosition, ElementScroll, WindowScroll } from '../../../index';
 export declare const getWindowScroll: () => {
     scrollX: number;
     scrollY: number;
@@ -17,12 +17,33 @@ export declare const getScrollElement: (element: HTMLElement) => {
     scrollLeft: number;
     scrollTop: number;
 };
+export declare const getRect: (element: Element) => DOMRect;
+export declare const getDistanceValue: (direction: Direction, translation: Translate) => readonly [number, "width" | "height"];
+export declare const getAxisValue: (direction: Direction, coordinate: Coordinate) => number;
+export declare const getBorderBeforeWidthValue: (direction: Direction, element: Element) => number;
+export declare const getBeforeMarginValue: (direction: Direction, element: Element | null) => number;
+export declare const getBeforeMargin: (direction: Direction, element: Element | null) => number;
+export declare const getAfterMargin: (direction: Direction, element: Element | null) => number;
+export declare const getBefore: (direction: Direction, elementPosition: ElementPosition) => number;
+export declare const getScrollElementValue: (direction: Direction, element: ElementScroll) => readonly [number, "scrollLeft" | "scrollTop"];
+export declare const getScrollValue: (direction: Direction, elementScroll: WindowScroll) => number;
+export declare const getInnerDistance: (direction: Direction, innerElement: {
+    innerWidth: number;
+    innerHeight: number;
+}) => number;
+export declare const getPageValue: (direction: Direction, event: {
+    pageX: number;
+    pageY: number;
+}) => number;
+export declare const getOffsetValue: (direction: Direction, event: {
+    offsetX: number;
+    offsetY: number;
+}) => number;
 export declare const getPropByDirection: (direction: Direction) => {
     readonly beforeMargin: "marginTop" | "marginLeft";
     readonly afterMargin: "marginBottom" | "marginRight";
     readonly borderBeforeWidth: "borderTopWidth" | "borderLeftWidth";
     readonly before: "left" | "top";
-    readonly after: "right" | "down";
     readonly gap: "columnGap" | "rowGap";
     readonly distance: "width" | "height";
     readonly axis: "x" | "y";
@@ -31,7 +52,6 @@ export declare const getPropByDirection: (direction: Direction) => {
     readonly scrollElement: "scrollLeft" | "scrollTop";
     readonly page: "pageX" | "pageY";
     readonly inner: "innerWidth" | "innerHeight";
-    readonly offsetElement: "offsetLeft" | "offsetTop";
     readonly scrollDistance: "scrollWidth" | "scrollHeight";
     readonly clientDistance: "clientWidth" | "clientHeight";
     readonly paddingBefore: "paddingLeft" | "paddingTop";
@@ -42,3 +62,4 @@ export declare const getGroupDroppables: (currentDroppable: HTMLElement, droppab
 export declare const getParentDraggableChildren: (parent: HTMLElement) => Element[];
 export declare const getSiblingsByParent: (current: HTMLElement, parent: HTMLElement) => readonly [Element[], number, HTMLElement];
 export declare const getNearestFixedParentPosition: (element: Element, direction: Direction) => number;
+export declare const isSameNode: (element1: Element | null | undefined, element2: Element | null) => boolean | undefined;

package/dist/core/utils/GetStyles.js

@@ -84,9 +84,57 @@ export const getScrollElement = (element) => {
     const { scrollLeft, scrollTop } = element;
     return { scrollLeft, scrollTop };
 };
-const getRect = (element) => {
+export const getRect = (element) => {
     return element.getBoundingClientRect();
 };
+export const getDistanceValue = (direction, translation) => {
+    const { distance } = getPropByDirection(direction);
+    return [translation[distance], distance];
+};
+export const getAxisValue = (direction, coordinate) => {
+    const { axis } = getPropByDirection(direction);
+    return coordinate[axis];
+};
+export const getBorderBeforeWidthValue = (direction, element) => {
+    const { borderBeforeWidth } = getPropByDirection(direction);
+    return getValueFromProperty(element, borderBeforeWidth);
+};
+export const getBeforeMarginValue = (direction, element) => {
+    const { beforeMargin } = getPropByDirection(direction);
+    return getValueFromProperty(element, beforeMargin);
+};
+export const getBeforeMargin = (direction, element) => {
+    const { beforeMargin } = getPropByDirection(direction);
+    return getValueFromProperty(element, beforeMargin);
+};
+export const getAfterMargin = (direction, element) => {
+    const { afterMargin } = getPropByDirection(direction);
+    return getValueFromProperty(element, afterMargin);
+};
+export const getBefore = (direction, elementPosition) => {
+    const { before } = getPropByDirection(direction);
+    return elementPosition[before];
+};
+export const getScrollElementValue = (direction, element) => {
+    const { scrollElement } = getPropByDirection(direction);
+    return [element[scrollElement], scrollElement];
+};
+export const getScrollValue = (direction, elementScroll) => {
+    const { scroll } = getPropByDirection(direction);
+    return elementScroll[scroll];
+};
+export const getInnerDistance = (direction, innerElement) => {
+    const { inner } = getPropByDirection(direction);
+    return innerElement[inner];
+};
+export const getPageValue = (direction, event) => {
+    const { page } = getPropByDirection(direction);
+    return event[page];
+};
+export const getOffsetValue = (direction, event) => {
+    const { offset } = getPropByDirection(direction);
+    return event[offset];
+};
 export const getPropByDirection = (direction) => {
     const ifHorizontal = direction == HORIZONTAL;
     return {
@@ -94,7 +142,6 @@ export const getPropByDirection = (direction) => {
         afterMargin: ifHorizontal ? 'marginRight' : 'marginBottom',
         borderBeforeWidth: ifHorizontal ? 'borderLeftWidth' : 'borderTopWidth',
         before: ifHorizontal ? 'left' : 'top',
-        after: ifHorizontal ? 'right' : 'down',
         gap: ifHorizontal ? 'columnGap' : 'rowGap',
         distance: ifHorizontal ? 'width' : 'height',
         axis: ifHorizontal ? 'x' : 'y',
@@ -103,7 +150,6 @@ export const getPropByDirection = (direction) => {
         scrollElement: ifHorizontal ? 'scrollLeft' : 'scrollTop',
         page: ifHorizontal ? 'pageX' : 'pageY',
         inner: ifHorizontal ? 'innerWidth' : 'innerHeight',
-        offsetElement: ifHorizontal ? 'offsetLeft' : 'offsetTop',
         scrollDistance: ifHorizontal ? 'scrollWidth' : 'scrollHeight',
         clientDistance: ifHorizontal ? 'clientWidth' : 'clientHeight',
         paddingBefore: ifHorizontal ? 'paddingLeft' : 'paddingTop',
@@ -142,9 +188,11 @@ const getNearestFixedParent = (element) => {
     return null; // No fixed parent found
 };
 export const getNearestFixedParentPosition = (element, direction) => {
-    const { before, borderBeforeWidth } = getPropByDirection(direction);
     const fixedParent = getNearestFixedParent(element);
     return fixedParent
-        ? getRect(fixedParent)[before] + getValueFromProperty(fixedParent, borderBeforeWidth)
+        ? getBefore(direction, getRect(fixedParent)) + getBorderBeforeWidthValue(direction, fixedParent)
         : 0;
 };
+export const isSameNode = (element1, element2) => {
+    return element1?.isSameNode(element2);
+};

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

@@ -1,7 +1,8 @@
-import { GapStyle } from "../../../index";
-import { Direction } from "..";
+import { GapStyle } from '../../../index';
+import { Direction } from '..';
 export declare const getNumberFromPixels: (pixels: string | undefined) => number;
 export declare const computeGapPixels: (element: Element, gapType: GapStyle) => number;
 export declare const gapAndDisplayInformation: (element: Element | null, gapStyle: GapStyle) => [number, boolean];
 export declare const getBeforeStyles: (element: HTMLElement) => [number, number];
+export declare const getGapInfo: (element: HTMLElement | null, direction: Direction) => [number, boolean];
 export declare const getGapPixels: (element: HTMLElement, direction: Direction) => number;