fluid-dnd 2.4.0 → 2.5.1

package/dist/core/useDraggable.js

@@ -1,15 +1,15 @@
 import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion } from './utils/SetStyles';
 import { usePositioning } from './positioning/usePositioning';
-import useRemoveEvents from './events/remove';
 import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from './utils';
 import ConfigHandler from './config/configHandler';
 import { IsHTMLElement, isTouchEvent } from './utils/typesCheckers';
-import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './tempChildren';
+import { addTempChild, removeTempChildrens } from './tempChildren';
 import { DroppableConfigurator } from './config/droppableConfigurator';
-import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass } from './utils/dom/classList';
+import { addClass, containClass, getClassesList, getClassesSelector, toggleClass } from './utils/dom/classList';
 import { DRAGGABLE_CLASS, DRAGGING_CLASS, DROPPABLE_CLASS, HANDLER_CLASS } from './utils/classes';
 import useDragAndDropEvents from './events/dragAndDrop/dragAndDrop';
-import useInsertEvents from './events/insert';
+import { getRect, isSameNode } from './utils/GetStyles';
+const ON_MOUSEDOWN = 'onmousedown';
 var DraggingState;
 (function (DraggingState) {
     DraggingState[DraggingState["NOT_DRAGGING"] = 0] = "NOT_DRAGGING";
@@ -18,7 +18,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, coordinateTransform } = config;
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, draggingClass, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
         .join(' ');
@@ -34,9 +34,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };
-    const [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings] = useRemoveEvents(config, parent, handlerPublisher, endDraggingState);
     const [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass] = useDragAndDropEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
-    const [emitInsertEventToSiblings] = useInsertEvents(config, parent, handlerPublisher, endDraggingState);
     const setDraggable = () => {
         addClass(draggableElement, DRAGGABLE_CLASS);
     };
@@ -65,7 +63,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;
@@ -73,22 +71,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;
@@ -103,13 +101,20 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         }
         const { droppable, config } = droppableConfigurator.current;
         setTransform(draggableElement, droppable, pagePosition, config.direction);
-        emitDraggingEvent(draggableElement, DRAG_EVENT, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, DRAG_EVENT, droppable, config);
+    };
+    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)) {
-            emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig);
+            !isSameNode(newdDroppableConfig?.droppable, oldDroppableConfig.droppable)) {
+            emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig.droppable, oldDroppableConfig.config);
+            removeTranslates(oldDroppableConfig.droppable);
         }
     };
     const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
@@ -121,7 +126,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) => {
@@ -149,8 +154,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;
@@ -184,7 +190,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);
@@ -233,7 +239,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);
@@ -258,9 +264,11 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         }
     };
     const startDragging = (event) => {
-        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
+        droppableConfigurator.current &&
+            addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
         updateDraggingStateBeforeDragging();
-        emitDraggingEvent(draggableElement, START_DRAG_EVENT, droppableConfigurator.current);
+        droppableConfigurator.current &&
+            emitDraggingEvent(draggableElement, START_DRAG_EVENT, droppableConfigurator.current.droppable, droppableConfigurator.current.config);
         setDraggingStyles(draggableElement);
         updateTransformState(event, draggableElement);
     };
@@ -291,10 +299,10 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     };
     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`
@@ -303,32 +311,20 @@ 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);
+            droppableConfigurator.initial &&
+                removeAt(index, targetIndex, draggableElement, 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);
+                droppableConfigurator.initial &&
+                    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,25 +1,23 @@
-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);
-    }
+    droppableGroupClass && addMultipleClasses(droppable, droppableGroupClass);
 };
 const createDraggableCssStyles = () => {
     AddCssStylesToElement(document.body, [
         `.${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 +26,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 +43,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,5 @@ 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;
+export declare const hasTransform: (element: HTMLElement | null) => boolean | null;

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,14 @@ 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);
+};
+export const hasTransform = (element) => {
+    return element && getComputedStyle(element).transform !== 'none';
+};

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

@@ -1,7 +1,8 @@
-import { GapStyle } from "../../../index";
-import { Direction } from "..";
-export declare const getNumberFromPixels: (pixels: string | undefined) => number;
+import { GapStyle } from '../../../index';
+import { Direction } from '..';
+export declare const getNumberFromPixels: (pixels: string) => 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;

package/dist/core/utils/ParseStyles.js

@@ -1,15 +1,15 @@
-import { getPropByDirection, parseFloatEmpty } from "./GetStyles";
+import { getPropByDirection, getRect, parseFloatEmpty } from './GetStyles';
 export const getNumberFromPixels = (pixels) => {
-    if (!pixels || pixels.length == 0) {
+    if (pixels.length == 0) {
         return 0;
     }
-    return parseFloatEmpty(pixels.replace("px", ""));
+    return parseFloatEmpty(pixels.replace('px', ''));
 };
 export const computeGapPixels = (element, gapType) => {
     const gap = getComputedStyle(element)[gapType];
-    if (gap.match("%")) {
-        const gap_percent = parseFloatEmpty(gap.replace("%", ""));
-        const { width } = element.getBoundingClientRect();
+    if (gap.match('%')) {
+        const gap_percent = parseFloatEmpty(gap.replace('%', ''));
+        const { width } = getRect(element);
         return width * (gap_percent / 100);
     }
     const gap_px = getNumberFromPixels(gap);
@@ -17,22 +17,22 @@ export const computeGapPixels = (element, gapType) => {
 };
 export const gapAndDisplayInformation = (element, gapStyle) => {
     if (!(element instanceof Element))
-        return [
-            0,
-            false,
-        ];
+        return [0, false];
     const gap = computeGapPixels(element, gapStyle);
     const display = getComputedStyle(element).display;
-    const hasGaps = gap > 0 || display === "flex";
+    const hasGaps = gap > 0 || display === 'flex';
     return [gap, hasGaps];
 };
 export const getBeforeStyles = (element) => {
     const { top, left } = getComputedStyle(element);
     return [getNumberFromPixels(top), getNumberFromPixels(left)];
 };
-export const getGapPixels = (element, direction) => {
+export const getGapInfo = (element, direction) => {
     const { gap: gapStyle } = getPropByDirection(direction);
-    const [gap, hasGaps] = gapAndDisplayInformation(element, gapStyle);
+    return gapAndDisplayInformation(element, gapStyle);
+};
+export const getGapPixels = (element, direction) => {
+    const [gap, hasGaps] = getGapInfo(element, direction);
     if (hasGaps) {
         return gap;
     }

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

@@ -1,20 +1,16 @@
-import { DragMouseTouchEvent, fixedSize } from '../../../index';
+import { DragMouseTouchEvent, fixedSize, Translate } from '../../../index';
 type onTouchEvent = 'ontouchstart' | 'ontouchmove' | 'ontouchend';
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
 type onMouseEvent = (typeof onMouseEvents)[number];
-type TouchEventType = 'touchstart' | 'touchmove' | 'touchend';
-declare const mouseEvents: readonly ["mouseup", "mousedown", "mousemove"];
-type MouseEventType = (typeof mouseEvents)[number];
 type DragEventCallback = (event: DragMouseTouchEvent) => void;
 type TouchEventCallback = (event: TouchEvent) => void;
-export declare const setSizeStyles: (element: HTMLElement | undefined | null, height: number, width: number) => void;
-export declare const fixSizeStyle: (element: HTMLElement | undefined | null) => void;
-export declare const moveTranslate: (element: Element | undefined | null, height: number, width: number) => void;
+export declare const setSizeStyles: (element: HTMLElement, translate: Translate) => void;
+export declare const moveTranslate: (element: Element | undefined | null, translation?: Translate) => void;
 export declare const assignDraggingEvent: (element: HTMLElement, onEvent: onMouseEvent | onTouchEvent, callback: DragEventCallback | null, touchCallback?: TouchEventCallback) => void;
-export declare const addDragMouseToucEventListener: (event: TouchEventType | MouseEventType, callback: DragEventCallback | null) => void;
 export declare const convetEventToDragMouseTouchEvent: (event: MouseEvent | TouchEvent) => DragMouseTouchEvent;
 export declare const setTranistion: (element: Element | undefined, duration: number, timingFunction?: string, types?: string) => void;
 export declare const setEventWithInterval: (element: Element | undefined, eventName: "onscroll", callback: () => void) => void;
 export declare const AddCssStylesToElement: (node: ParentNode, cssCodes: string[]) => void;
 export declare const setCustomFixedSize: (element: HTMLElement | undefined, fixedProps?: fixedSize) => void;
+export declare const removeTranslateWhitoutTransition: (element?: Element) => void;
 export {};

package/dist/core/utils/SetStyles.js

@@ -1,31 +1,21 @@
+import { NONE_TRANSLATE } from '.';
 import { HORIZONTAL, VERTICAL } from '..';
-import { getPropByDirection, getValueFromProperty } from './GetStyles';
+import { getBefore, getBorderBeforeWidthValue, getPageValue, getRect, getScrollValue } from './GetStyles';
 import { IsHTMLElement, IsMouseEvent, isTouchEvent } from './typesCheckers';
 const onMouseEvents = ['onmouseup', 'onmousedown', 'onmousemove'];
-const mouseEvents = ['mouseup', 'mousedown', 'mousemove'];
-export const setSizeStyles = (element, height, width) => {
-    if (!element) {
-        return;
-    }
-    element.style.height = `${height}px`;
-    element.style.width = `${width}px`;
-};
-export const fixSizeStyle = (element) => {
-    if (!element) {
-        return;
-    }
-    const { height, width } = element.getBoundingClientRect();
-    setSizeStyles(element, height, width);
+export const setSizeStyles = (element, translate) => {
+    element.style.height = `${translate.height}px`;
+    element.style.width = `${translate.width}px`;
 };
-export const moveTranslate = (element, height, width) => {
+export const moveTranslate = (element, translation = NONE_TRANSLATE) => {
     if (!element || !IsHTMLElement(element)) {
         return;
     }
-    if (width == 0 && height == 0) {
+    if (translation.width == 0 && translation.height == 0) {
         element.style.transform = '';
     }
     else {
-        element.style.transform = `translate(${width}px,${height}px)`;
+        element.style.transform = `translate(${translation.width}px,${translation.height}px)`;
     }
 };
 const assignDraggingTouchEvent = (element, onEvent, callback, touchCallback) => {
@@ -49,22 +39,7 @@ export const assignDraggingEvent = (element, onEvent, callback, touchCallback) =
         assignDraggingTouchEvent(element, onEvent, callback, touchCallback);
     }
 };
-export const addDragMouseToucEventListener = (event, callback) => {
-    if (!callback) {
-        return;
-    }
-    if (isMouseEvent(event)) {
-        document.addEventListener(event, callback);
-    }
-    else {
-        document.addEventListener(event, (event) => {
-            const dragMouseTouchEvent = convetEventToDragMouseTouchEvent(event);
-            callback(dragMouseTouchEvent);
-        });
-    }
-};
 const isOnMouseEvent = (x) => onMouseEvents.includes(x);
-const isMouseEvent = (x) => mouseEvents.includes(x);
 const getDefaultEvent = (event) => {
     const { target } = event;
     return {
@@ -123,12 +98,11 @@ const getEvent = (event) => {
     }
 };
 const getOffset = (event, window, direction, element) => {
-    const { page, scroll, before, borderBeforeWidth, getRect } = getPropByDirection(direction);
     const boundingClientRect = getRect(element);
-    return (event[page] -
-        window[scroll] -
-        boundingClientRect[before] -
-        getValueFromProperty(element, borderBeforeWidth));
+    return (getPageValue(direction, event) -
+        getScrollValue(direction, window) -
+        getBefore(direction, boundingClientRect) -
+        getBorderBeforeWidthValue(direction, element));
 };
 export const setTranistion = (element, duration, timingFunction = 'ease-out', types = 'transform') => {
     if (IsHTMLElement(element)) {
@@ -172,10 +146,7 @@ export const AddCssStylesToElement = (node, cssCodes) => {
 };
 const AddCssStyleToElement = (node, cssCode) => {
     var style = getStyles(node);
-    if (!style.sheet) {
-        return;
-    }
-    if (!containRule(style.sheet, cssCode)) {
+    if (style.sheet && !containRule(style.sheet, cssCode)) {
         style.sheet?.insertRule(cssCode, style.sheet.cssRules.length);
     }
 };
@@ -190,3 +161,9 @@ export const setCustomFixedSize = (element, fixedProps = {}) => {
 const setCustomProperty = (element, fixedProp, newFixedSize) => {
     return element && element.style.setProperty(fixedProp, newFixedSize);
 };
+export const removeTranslateWhitoutTransition = (element) => {
+    if (IsHTMLElement(element)) {
+        element.style.transition = '';
+        element.style.transform = '';
+    }
+};

package/dist/core/utils/dom/classList.d.ts

@@ -3,6 +3,6 @@ export declare const toggleClass: (element: Element, cssClass: string, force?: b
 export declare const addClass: (element: Element, cssClass: string) => void;
 export declare const removeClass: (element: Element, cssClass: string) => void;
 export declare const containstClasses: (element: HTMLElement, classes: string) => boolean;
-export declare const getClassesSelector: (classes: string | null) => string;
-export declare const addMultipleClasses: (element: HTMLElement, classes: string | null) => void;
+export declare const getClassesSelector: (classes: string) => string;
+export declare const addMultipleClasses: (element: HTMLElement, classes: string) => void;
 export declare const getClassesList: (classes: string | null | undefined) => string[];

package/dist/core/utils/dom/classList.js

@@ -14,22 +14,13 @@ export const containstClasses = (element, classes) => {
     return getClassesList(classes).every((cssClass) => containClass(element, cssClass));
 };
 export const getClassesSelector = (classes) => {
-    if (!classes) {
-        return "";
-    }
-    const classesSelector = getClassesList(classes).join(".");
+    const classesSelector = getClassesList(classes).join('.');
     return `.${classesSelector}`;
 };
 export const addMultipleClasses = (element, classes) => {
-    if (!classes) {
-        return;
-    }
     const classesList = getClassesList(classes);
     element.classList.add(...classesList);
 };
 export const getClassesList = (classes) => {
-    if (!classes) {
-        return [];
-    }
-    return classes.split(" ").filter((cssClass) => cssClass);
+    return (classes?.split(' ') ?? []).filter((cssClass) => cssClass);
 };