fluid-dnd 2.3.0 → 2.5.0

package/dist/core/{utils/translate/GetTranslateBeforeDropping.js → events/dragAndDrop/getTranslateBeforeDropping.js}

@@ -1,21 +1,18 @@
-import { HORIZONTAL, VERTICAL } from "../..";
-import { getPropByDirection, getValueFromProperty, } from "../GetStyles";
-import { gapAndDisplayInformation, getBeforeStyles } from "../ParseStyles";
+import { HORIZONTAL, VERTICAL } from '../..';
+import { getAfterMargin, getAxisValue, getBeforeMargin, getBorderBeforeWidthValue, getDistanceValue, getPropByDirection, getRect, getScrollElementValue, getScrollValue, getValueFromProperty } from '../../utils/GetStyles';
+import { getBeforeStyles, getGapInfo } from '../../utils/ParseStyles';
 const getContentPosition = (direction, droppable) => {
-    const { borderBeforeWidth, paddingBefore, axis, getRect } = getPropByDirection(direction);
-    const borderBeforeWidthDroppable = getValueFromProperty(droppable, borderBeforeWidth);
+    const { paddingBefore } = getPropByDirection(direction);
+    const borderBeforeWidthDroppable = getBorderBeforeWidthValue(direction, droppable);
     const paddingBeforeDroppable = getValueFromProperty(droppable, paddingBefore);
-    const axisValue = getRect(droppable)[axis];
+    const axisValue = getAxisValue(direction, getRect(droppable));
     return borderBeforeWidthDroppable + paddingBeforeDroppable + axisValue;
 };
 const getGroupTranslate = (droppable, draggable) => {
     const [top, left] = getBeforeStyles(draggable);
     const verticalContentPosition = getContentPosition(VERTICAL, droppable);
     const horizontalContentPosition = getContentPosition(HORIZONTAL, droppable);
-    return [
-        horizontalContentPosition - left,
-        verticalContentPosition - top
-    ];
+    return [horizontalContentPosition - left, verticalContentPosition - top];
 };
 export default function getTranslateBeforeDropping(direction, siblings, sourceIndex, targetIndex, scroll, previousScroll, initialWindowScroll, droppable, draggable) {
     let height = 0;
@@ -30,14 +27,14 @@ export default function getTranslateBeforeDropping(direction, siblings, sourceIn
         height += y;
         width += x;
     }
-    const { scrollElement, beforeMargin: beforeMarginProp, afterMargin: afterMarginProp, distance: spaceProp, gap: gapStyle, } = getPropByDirection(direction);
-    const [gap, hasGaps] = gapAndDisplayInformation(droppable, gapStyle);
-    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement,] = getBeforeAfterMarginBaseOnDraggedDirection(beforeMarginProp, afterMarginProp, sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping);
-    const [beforeSpace, space, afterSpace] = spaceWithMargins(beforeMarginProp, afterMarginProp, spaceProp, siblingsBetween, gap, hasGaps);
+    const [gap, hasGaps] = getGapInfo(droppable, direction);
+    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement] = getBeforeAfterMarginBaseOnDraggedDirection(sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping, direction);
+    const [beforeSpace, space, afterSpace] = spaceWithMargins(siblingsBetween, gap, hasGaps, direction);
     const spaceBetween = getSpaceBetween(space, beforeSpace, afterSpace, beforeMarginOutside, afterMarginOutside, gap);
+    const [scrollElementValue] = getScrollElementValue(direction, droppable);
     const scrollChange = isGroupDropping
-        ? droppable[scrollElement]
-        : getScrollChange(scrollElement, droppable, previousScroll);
+        ? scrollElementValue
+        : getScrollChange(droppable, previousScroll, direction);
     const spaceCalc = isDraggedFoward
         ? spaceBetween - spaceBeforeDraggedElement
         : spaceBeforeDraggedElement - spaceBetween;
@@ -50,9 +47,9 @@ export default function getTranslateBeforeDropping(direction, siblings, sourceIn
     }
     return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
 }
-const getScrollChange = (scrollElement, parentElement, previousScroll) => {
-    const scrollParent = parentElement[scrollElement];
-    const previousScrollValue = previousScroll[scrollElement];
+const getScrollChange = (parentElement, previousScroll, direction) => {
+    const [scrollParent] = getScrollElementValue(direction, parentElement);
+    const [previousScrollValue] = getScrollElementValue(direction, previousScroll);
     return scrollParent - previousScrollValue;
 };
 const getSpaceBetween = (innerSpace, beforeMarginSpace, afterMarginSpace, beforeMarginOutside, afterMarginOutside, gap) => {
@@ -71,23 +68,18 @@ const getElementsRange = (siblings, sourceIndex, targetIndex, draggable) => {
     if (firstIndex < 0 && draggable) {
         siblingsBetween = siblings.slice(firstIndex + 1, secondIndex);
     }
-    return [
-        sourceElement,
-        targetElement,
-        siblingsBetween,
-        isDraggedFoward,
-    ];
+    return [sourceElement, targetElement, siblingsBetween, isDraggedFoward];
 };
-const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, hasGaps) => {
+const spaceWithMargins = (siblings, gap, hasGaps, direction) => {
     if (siblings.length == 0) {
         return [0, 0, 0];
     }
-    const beforeSpace = getValueFromProperty(siblings[0], beforeMargin);
+    const beforeSpace = getAfterMargin(direction, siblings[0]);
     let afterSpace = 0;
     let space = -beforeSpace;
     for (const [index, sibling] of siblings.entries()) {
-        const siblingSpace = sibling.getBoundingClientRect()[distance];
-        const siblingBeforeMargin = getValueFromProperty(sibling, beforeMargin);
+        const [siblingSpace] = getDistanceValue(direction, getRect(sibling));
+        const siblingBeforeMargin = getBeforeMargin(direction, sibling);
         if (hasGaps) {
             afterSpace += siblingBeforeMargin;
         }
@@ -98,32 +90,32 @@ const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, ha
             afterSpace = Math.max(afterSpace, siblingBeforeMargin);
         }
         space += afterSpace + siblingSpace;
-        afterSpace = getValueFromProperty(sibling, afterMargin);
+        afterSpace = getAfterMargin(direction, sibling);
     }
     return [beforeSpace, space, afterSpace];
 };
 const addScrollToTranslate = (translate, direction, initialScroll, initialWindowScroll, isGroupDropping) => {
-    const { scroll, distance } = getPropByDirection(direction);
-    const actualWindowScroll = window[scroll];
-    const initialScrollProp = initialScroll[scroll];
+    const actualWindowScroll = getScrollValue(direction, window);
+    const initialScrollProp = getScrollValue(direction, initialScroll);
     const scrollChange = isGroupDropping
         ? 0
-        : initialScrollProp - 2 * actualWindowScroll + initialWindowScroll[scroll];
+        : initialScrollProp - 2 * actualWindowScroll + getScrollValue(direction, initialWindowScroll);
+    const [, distance] = getDistanceValue(direction, translate);
     translate[distance] += scrollChange;
     return translate;
 };
-const getBeforeAfterMarginBaseOnDraggedDirection = (beforeMarginProp, afterMarginProp, draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping) => {
+const getBeforeAfterMarginBaseOnDraggedDirection = (draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping, direction) => {
     const previousElementByDirection = isDraggedFoward
         ? draggedElement.previousElementSibling
         : previousElement;
-    return getBeforeAfterMargin(beforeMarginProp, afterMarginProp, previousElementByDirection, draggedElement, hasGaps, isGroupDropping);
+    return getBeforeAfterMargin(previousElementByDirection, draggedElement, hasGaps, isGroupDropping, direction);
 };
-const getBeforeAfterMargin = (beforeMarginProp, afterMarginProp, previousElement, nextElement, hasGaps, isGroupDropping) => {
+const getBeforeAfterMargin = (previousElement, nextElement, hasGaps, isGroupDropping, direction) => {
     if (hasGaps) {
         return [0, 0, 0];
     }
-    const afterMargin = getValueFromProperty(isGroupDropping ? null : previousElement, afterMarginProp);
-    const beforeMargin = getValueFromProperty(nextElement, beforeMarginProp);
-    let spaceBeforeDraggedElement = Math.max(afterMargin, beforeMargin);
-    return [afterMargin, beforeMargin, spaceBeforeDraggedElement];
+    const afterMarginValue = getAfterMargin(direction, isGroupDropping ? null : previousElement);
+    const beforeMarginValue = getBeforeMargin(direction, nextElement);
+    let spaceBeforeDraggedElement = Math.max(afterMarginValue, beforeMarginValue);
+    return [afterMarginValue, beforeMarginValue, spaceBeforeDraggedElement];
 };

package/dist/core/{utils/translate/GetTranslationByDraggingAndEvent.d.ts → events/dragAndDrop/getTranslationByDraggingAndEvent.d.ts}

@@ -1,5 +1,5 @@
-import { Direction } from "../..";
-import { DragAndDropEvent } from "..";
+import { Direction } from '../..';
+import { DragAndDropEvent } from '../../utils';
 export default function getTranslationByDraggingAndEvent(current: HTMLElement, event: DragAndDropEvent, direction: Direction, droppable: HTMLElement, previousElement?: Element | null, nextElement?: Element | null): {
     height: number;
     width: number;

package/dist/core/{utils/translate/GetTranslationByDraggingAndEvent.js → events/dragAndDrop/getTranslationByDraggingAndEvent.js}

@@ -1,7 +1,7 @@
-import { HORIZONTAL } from "../..";
-import { DRAG_EVENT } from "..";
-import { draggableIsOutside, getPropByDirection, getValueFromProperty, } from "../GetStyles";
-import { gapAndDisplayInformation } from "../ParseStyles";
+import { HORIZONTAL } from '../..';
+import { DRAG_EVENT } from '../../utils';
+import { draggableIsOutside, getAfterMargin, getBeforeMarginValue, getDistanceValue, getRect } from '../../utils/GetStyles';
+import { getGapInfo } from '../../utils/ParseStyles';
 export default function getTranslationByDraggingAndEvent(current, event, direction, droppable, previousElement = current.previousElementSibling, nextElement = current.nextElementSibling) {
     let { height, width } = getTranslationByDragging(direction, current, previousElement, nextElement);
     const intersection = draggableIsOutside(current, droppable);
@@ -12,24 +12,23 @@ export default function getTranslationByDraggingAndEvent(current, event, directi
     return { height, width };
 }
 const getTranslationByDragging = (direction, current, previous, nextElement) => {
-    const { afterMargin, beforeMargin, distance, gap: gapStyle, getRect } = getPropByDirection(direction);
-    const after = getValueFromProperty(current, afterMargin);
-    const before = getValueFromProperty(current, beforeMargin);
-    const nextBefore = getValueFromProperty(nextElement, beforeMargin);
-    const [gap, hasGaps] = gapAndDisplayInformation(current.parentElement, gapStyle);
-    const space = getRect(current)[distance];
+    const after = getAfterMargin(direction, current);
+    const before = getBeforeMarginValue(direction, current);
+    const nextBefore = getBeforeMarginValue(direction, nextElement);
+    const [gap, hasGaps] = getGapInfo(current.parentElement, direction);
+    const [space] = getDistanceValue(direction, getRect(current));
     if (hasGaps) {
         return getTranslation(space, before, after, gap, 0, direction);
     }
-    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, afterMargin);
+    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, direction);
     return getTranslation(space, beforeScace, afterSpace, 0, rest, direction);
 };
-const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, afterMargin) => {
+const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, direction) => {
     const afterSpace = Math.max(nextBeforeMargin, currentAfterMargin);
     let beforeScace = currentBeforeMargin;
     let rest = nextBeforeMargin;
     if (previousElement) {
-        const previousAfterMargin = getValueFromProperty(previousElement, afterMargin);
+        const previousAfterMargin = getAfterMargin(direction, previousElement);
         beforeScace = Math.max(previousAfterMargin, currentBeforeMargin);
         rest = Math.max(rest, previousAfterMargin);
     }

package/dist/core/events/insert.d.ts

@@ -0,0 +1,5 @@
+import { CoreConfig } from '../index';
+import HandlerPublisher from '../HandlerPublisher';
+import { DroppableConfig } from '../config/configHandler';
+export default function useInsertEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, droppableConfigurator: DroppableConfig<T> | undefined) => void];
+export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined | null, targetIndex: number, value: T) => void;

package/dist/core/events/insert.js

@@ -0,0 +1,74 @@
+import { getParentDraggableChildren, getSiblings } from '../utils/GetStyles';
+import getTranslationByDragging from '../events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { addTempChildOnInsert, removeTempChild } from '../tempChildren';
+import { DISABLE_TRANSITION, DRAGGABLE_CLASS } from '../utils/classes';
+import { addClass, containClass, removeClass } from '../utils/dom/classList';
+import { isTempElement, observeMutation } from '../utils/observer';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+import { removeTranslateWhitoutTransition } from '../utils/SetStyles';
+export default function useInsertEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { delayBeforeInsert } = currentConfig;
+    const [removeElementDraggingStyles, _, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    // #region Insert
+    const emitInsertEventToSiblings = (targetIndex, draggedElement, droppable, value, droppableConfigurator) => {
+        const translation = getTranslationByDragging(draggedElement, 'insert', currentConfig.direction, droppable);
+        const { onInsertEvent } = currentConfig;
+        const siblings = getParentDraggableChildren(droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (!containClass(sibling, DRAGGABLE_CLASS)) {
+                continue;
+            }
+            if (index >= targetIndex) {
+                dragEventOverElement(sibling, translation);
+            }
+        }
+        addTempChildOnInsert(draggedElement, false, droppableConfigurator);
+        setTimeout(() => {
+            onInsertEvent(targetIndex, value);
+            onFinishInsertElement(targetIndex, droppable, currentConfig);
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+            removeTempChild(parent, 0, true);
+        }, delayBeforeInsert);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    return [emitInsertEventToSiblings];
+}
+const childrenMutationFilter = (mutation) => {
+    const addedNodes = mutation.addedNodes
+        .values()
+        .filter((element) => !isTempElement(element))
+        .toArray();
+    return addedNodes.length > 0;
+};
+const onFinishInsertElement = (targetIndex, droppable, config) => {
+    const { insertingFromClass, animationDuration } = config;
+    const observer = observeMutation(() => {
+        const siblings = getParentDraggableChildren(droppable);
+        const newElement = siblings[targetIndex];
+        addClass(newElement, insertingFromClass);
+        addClass(newElement, DISABLE_TRANSITION);
+        setTimeout(() => {
+            removeClass(newElement, DISABLE_TRANSITION);
+            removeClass(newElement, insertingFromClass);
+            observer.disconnect();
+        }, animationDuration);
+    }, droppable, {
+        childList: true
+    }, childrenMutationFilter);
+};
+export const insertToListEmpty = (config, droppable, targetIndex, value) => {
+    if (!droppable) {
+        return;
+    }
+    const { onInsertEvent, delayBeforeInsert } = config;
+    setTimeout(() => {
+        onInsertEvent(targetIndex, value);
+        onFinishInsertElement(targetIndex, droppable, config);
+    }, delayBeforeInsert);
+};

package/dist/core/events/remove.d.ts

@@ -0,0 +1,4 @@
+import { CoreConfig, DraggingState } from '..';
+import { DroppableConfig } from '../config/configHandler';
+import HandlerPublisher from '@/core/HandlerPublisher';
+export default function useRemoveEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(index: number, targetIndex: number, draggableElement: HTMLElement, draggingState: DraggingState, config: DroppableConfig<T>) => void];

package/dist/core/events/remove.js

@@ -0,0 +1,66 @@
+import { getSiblings } from '../utils/GetStyles';
+import { moveTranslate, removeTranslateWhitoutTransition, setTranistion } from '../utils/SetStyles';
+import { DraggingState } from '..';
+import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
+import { addTempChild, removeTempChild } from '../tempChildren';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+import { addClass, removeClass } from '../utils/dom/classList';
+import { draggableTargetTimingFunction } from '../utils';
+export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { animationDuration } = currentConfig;
+    const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    const emitRemoveEventToSiblings = (targetIndex, draggedElement, droppableConfig, onFinishRemoveEvent) => {
+        if (!droppableConfig || !droppableConfig.droppable || !droppableConfig.config) {
+            return;
+        }
+        const { droppable, config } = droppableConfig;
+        let [siblings] = getSiblings(draggedElement, droppable);
+        siblings = [draggedElement, ...siblings].toReversed();
+        const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (index >= targetIndex) {
+                moveTranslate(sibling, translation);
+                setTimeout(() => {
+                    onFinishRemoveEvent(sibling);
+                }, animationDuration);
+            }
+        }
+    };
+    const emitFinishRemoveEventToSiblings = (draggedElement) => {
+        removeTempChild(parent, animationDuration, true);
+        setTimeout(() => {
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+        }, animationDuration);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    const removeAt = (index, targetIndex, draggableElement, draggingState, config) => {
+        const { removingClass, delayBeforeRemove } = currentConfig;
+        if (targetIndex == index) {
+            addClass(draggableElement, removingClass);
+            setTimeout(() => {
+                removeAfterRemovingClass(index, targetIndex, draggableElement, draggingState, config);
+            }, delayBeforeRemove);
+        }
+    };
+    const removeAfterRemovingClass = (index, targetIndex, draggableElement, draggingState, config) => {
+        const { removingClass, onRemoveAtEvent } = currentConfig;
+        removeClass(draggableElement, removingClass);
+        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, config);
+        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
+            removeDraggingStyles(sibling);
+            emitFinishRemoveEventToSiblings(draggableElement);
+        });
+        onRemoveAtEvent(index, true);
+    };
+    const removeDraggingStyles = (element) => {
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element);
+    };
+    return [removeAt];
+}

package/dist/core/index.d.ts

@@ -206,3 +206,9 @@ export type CoreConfig<T> = {
      */
     coordinateTransform: CoordinateMap[];
 };
+export declare enum DraggingState {
+    NOT_DRAGGING = 0,
+    START_DRAGGING = 1,
+    DRAGING = 2,
+    END_DRAGGING = 3
+}

package/dist/core/index.js

@@ -1,2 +1,9 @@
 export const HORIZONTAL = 'horizontal';
 export const VERTICAL = 'vertical';
+export 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 = {}));

package/dist/core/{utils/scroll.d.ts → positioning/autoScroll.d.ts}

@@ -1,6 +1,4 @@
-import { ElementScroll } from 'index';
 import { Coordinate, Direction } from '..';
-export declare const scrollPercent: (direction: Direction, droppable: HTMLElement, droppableScroll: ElementScroll) => number;
 export declare const useScroll: (draggedElement: HTMLElement) => readonly [(direction: Direction, parent: HTMLElement, position: {
     top: number;
     left: number;

package/dist/core/{utils/scroll.js → positioning/autoScroll.js}

@@ -1,4 +1,4 @@
-import { draggableIsCompleteOutside, getPropByDirection } from './GetStyles';
+import { draggableIsCompleteOutside, getAxisValue, getBefore, getDistanceValue, getRect } from '../utils/GetStyles';
 const scrollByDirection = (element, direction, scrollAmount) => {
     if (scrollAmount == 0) {
         return;
@@ -10,19 +10,16 @@ const scrollByDirection = (element, direction, scrollAmount) => {
         element.scrollBy(scrollAmount, 0);
     }
 };
-export const scrollPercent = (direction, droppable, droppableScroll) => {
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
-    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
-};
 export const useScroll = (draggedElement) => {
     let lastScrollAmount = 0.5;
     const minScrollAmountDiff = 0.03;
     const updateScrollByPosition = (direction, parent, position, translate) => {
-        const { before, distance, axis, getRect } = getPropByDirection(direction);
-        const distanceValue = getRect(draggedElement)[distance];
+        const [distanceValue] = getDistanceValue(direction, getRect(draggedElement));
         const parentBoundingClientRect = getRect(parent);
-        const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
-        const parentDistance = parentBoundingClientRect[distance];
+        const positionInsideParent = getBefore(direction, position) -
+            getBefore(direction, parentBoundingClientRect) +
+            getAxisValue(direction, translate);
+        const [parentDistance] = getDistanceValue(direction, parentBoundingClientRect);
         const totalDistance = parentDistance - distanceValue;
         const relativePosition = positionInsideParent / totalDistance;
         const relativeDistanceValue = distanceValue / totalDistance;

package/dist/core/{utils/SetTransform.d.ts → positioning/usePositioning.d.ts}

@@ -1,6 +1,6 @@
 import { DragMouseTouchEvent, TransformEvent } from '../../../index';
 import { CoordinateMap, Direction } from '..';
-export declare const useTransform: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
+export declare const usePositioning: (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 → positioning/usePositioning.js}

@@ -1,9 +1,9 @@
-import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from './GetStyles';
+import { getAxisValue, getBefore, getBeforeMarginValue, getBorderBeforeWidthValue, getDistanceValue, getInnerDistance, getNearestFixedParentPosition, getOffsetValue, getPageValue, getPropByDirection, getRect, getScrollValue, isSameNode } from '../utils/GetStyles';
 import { HORIZONTAL, VERTICAL } from '..';
-import { useScroll } from './scroll';
-import { HANDLER_CLASS, DRAGGING_CLASS } from './classes';
-import { containClass } from './dom/classList';
-export const useTransform = (draggedElement, coordinateTransforms) => {
+import { useScroll } from './autoScroll';
+import { HANDLER_CLASS, DRAGGING_CLASS } from '../utils/classes';
+import { containClass } from '../utils/dom/classList';
+export const usePositioning = (draggedElement, coordinateTransforms) => {
     let currentOffset = { offsetX: 0, offsetY: 0 };
     let position = { top: 0, left: 0 };
     let translate = { x: 0, y: 0 };
@@ -17,19 +17,18 @@ export const useTransform = (draggedElement, coordinateTransforms) => {
     };
     const setTransform = (element, parent, pagePosition, direction) => {
         const getTranslateWihtDirection = (translateDirection) => {
-            const { beforeMargin, borderBeforeWidth, before, offset, scroll, page, inner, distance, axis, getRect } = getPropByDirection(translateDirection);
-            const pageValue = pagePosition[page];
-            const scrollValue = window[scroll];
-            const innerDistance = window[inner];
-            const distanceValue = getRect(element)[distance];
-            const border = getValueFromProperty(element, borderBeforeWidth);
-            const margin = getValueFromProperty(element, beforeMargin);
-            const elementPosittion = pageValue - currentOffset[offset];
+            const pageValue = getPageValue(translateDirection, pagePosition);
+            const scrollValue = getScrollValue(translateDirection, window);
+            const innerDistance = getInnerDistance(translateDirection, window);
+            const [distanceValue] = getDistanceValue(translateDirection, getRect(element));
+            const border = getBorderBeforeWidthValue(translateDirection, element);
+            const margin = getBeforeMarginValue(translateDirection, element);
+            const elementPosittion = pageValue - getOffsetValue(translateDirection, currentOffset);
             const beforefixecParentValue = getNearestFixedParentPosition(element, translateDirection);
             if (elementPosittion >= scrollValue - distanceValue / 2 &&
                 elementPosittion <= scrollValue + innerDistance) {
                 const newTranslate = elementPosittion -
-                    position[before] -
+                    getBefore(translateDirection, position) -
                     border -
                     margin -
                     scrollValue -
@@ -37,7 +36,7 @@ export const useTransform = (draggedElement, coordinateTransforms) => {
                 updateScroll(translateDirection);
                 return newTranslate;
             }
-            const defaultTransalation = translate[axis];
+            const defaultTransalation = getAxisValue(translateDirection, translate);
             return defaultTransalation;
         };
         const updateScroll = (translateDirection) => {
@@ -72,16 +71,15 @@ export const useTransform = (draggedElement, coordinateTransforms) => {
     return [setTransform, updateTransformState];
 };
 const getOffsetWithDraggable = (direction, element, draggable) => {
-    const { borderBeforeWidth, before, getRect } = getPropByDirection(direction);
-    return (getRect(element)[before] -
-        getRect(draggable)[before] -
-        getValueFromProperty(draggable, borderBeforeWidth));
+    return (getBefore(direction, getRect(element)) -
+        getBefore(direction, getRect(draggable)) -
+        getBorderBeforeWidthValue(direction, draggable));
 };
 const getOffset = (event, draggable) => {
     let { offsetX, offsetY, target } = event;
     let targetHandler = getHandlerElementAncestor(target, draggable);
     const targetElement = target;
-    if (targetElement && targetHandler && !targetElement.isSameNode(targetHandler)) {
+    if (targetElement && targetHandler && !isSameNode(targetElement, targetHandler)) {
         offsetX += getOffsetWithDraggable(HORIZONTAL, targetElement, targetHandler);
         offsetY += getOffsetWithDraggable(VERTICAL, targetElement, targetHandler);
     }
@@ -93,19 +91,18 @@ const getOffset = (event, draggable) => {
 };
 const getHandlerElementAncestor = (target, draggable) => {
     const targetHandler = target?.closest(`.${HANDLER_CLASS}`);
-    if (targetHandler && targetHandler.isSameNode(draggable)) {
+    if (targetHandler && isSameNode(draggable, targetHandler)) {
         return target;
     }
     return targetHandler;
 };
 const getPositionByDistance = (direction, event, element, offsetEvent) => {
-    const { offset, beforeMargin, page, borderBeforeWidth, scroll } = getPropByDirection(direction);
     const beforefixecParentValue = getNearestFixedParentPosition(element, direction);
-    return (event[page] -
-        offsetEvent[offset] -
-        getValueFromProperty(element, beforeMargin) -
-        getValueFromProperty(element, borderBeforeWidth) -
-        window[scroll] -
+    return (getPageValue(direction, event) -
+        getOffsetValue(direction, offsetEvent) -
+        getBeforeMarginValue(direction, element) -
+        getBorderBeforeWidthValue(direction, element) -
+        getScrollValue(direction, window) -
         beforefixecParentValue);
 };
 export const getTransformState = (event, element, draggable) => {

package/dist/core/{utils/tempChildren.d.ts → tempChildren.d.ts}

@@ -1,5 +1,4 @@
-import { DroppableConfig } from "../configHandler";
-export declare const isTempElement: (element: Node) => boolean;
+import { DroppableConfig } from './config/configHandler';
 export declare const addTempChild: <T>(draggedElement: HTMLElement | undefined, parent: Element, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>, addingAnimationDuration?: number) => void;
 export declare const addTempChildOnInsert: <T>(draggedElement: HTMLElement | undefined, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>) => void;
 export declare const removeTempChildrens: (droppable: HTMLElement, parent: HTMLElement, droppableGroupClass: string | null, animationDuration: number, draggedElementIsOutside?: boolean) => void;