fluid-dnd 2.0.0 → 2.0.2

package/dist/core/utils/translate/GetTranslateBeforeDropping.js

@@ -0,0 +1,129 @@
+import { HORIZONTAL, VERTICAL } from "../..";
+import { getPropByDirection, getValueFromProperty, } from "../GetStyles";
+import { gapAndDisplayInformation, getBeforeStyles } from "../ParseStyles";
+const getContentPosition = (direction, droppable) => {
+    const { borderBeforeWidth, paddingBefore, axis, getRect } = getPropByDirection(direction);
+    const borderBeforeWidthDroppable = getValueFromProperty(droppable, borderBeforeWidth);
+    const paddingBeforeDroppable = getValueFromProperty(droppable, paddingBefore);
+    const axisValue = getRect(droppable)[axis];
+    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
+    ];
+};
+export default function getTranslateBeforeDropping(direction, siblings, sourceIndex, targetIndex, scroll, previousScroll, initialWindowScroll, droppable, draggable) {
+    let height = 0;
+    let width = 0;
+    const isGroupDropping = Boolean(sourceIndex < 0 && draggable);
+    if (sourceIndex === targetIndex && !isGroupDropping) {
+        return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
+    }
+    const [sourceElement, targetElement, siblingsBetween, isDraggedFoward] = getElementsRange(siblings, sourceIndex, targetIndex, draggable);
+    if (isGroupDropping) {
+        const [x, y] = getGroupTranslate(droppable, draggable);
+        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 spaceBetween = getSpaceBetween(space, beforeSpace, afterSpace, beforeMarginOutside, afterMarginOutside, gap);
+    const scrollChange = isGroupDropping
+        ? droppable[scrollElement]
+        : getScrollChange(scrollElement, droppable, previousScroll);
+    const spaceCalc = isDraggedFoward
+        ? spaceBetween - spaceBeforeDraggedElement
+        : spaceBeforeDraggedElement - spaceBetween;
+    const translate = spaceCalc - scrollChange;
+    if (direction === VERTICAL) {
+        height += translate;
+    }
+    else if (direction === HORIZONTAL) {
+        width += translate;
+    }
+    return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
+}
+const getScrollChange = (scrollElement, parentElement, previousScroll) => {
+    const scrollParent = parentElement[scrollElement];
+    const previousScrollValue = previousScroll[scrollElement];
+    return scrollParent - previousScrollValue;
+};
+const getSpaceBetween = (innerSpace, beforeMarginSpace, afterMarginSpace, beforeMarginOutside, afterMarginOutside, gap) => {
+    const beforeMarginCalc = Math.max(beforeMarginSpace, afterMarginOutside);
+    const afterMarginCalc = Math.max(afterMarginSpace, beforeMarginOutside);
+    return afterMarginCalc + innerSpace + beforeMarginCalc + gap;
+};
+const getElementsRange = (siblings, sourceIndex, targetIndex, draggable) => {
+    const isDraggedFoward = sourceIndex < targetIndex;
+    const [firstIndex, secondIndex] = [sourceIndex, targetIndex].toSorted((a, b) => a - b);
+    const sourceElement = siblings[sourceIndex] ?? draggable;
+    const targetElement = siblings[targetIndex];
+    let siblingsBetween = isDraggedFoward
+        ? siblings.slice(firstIndex + 1, secondIndex + 1)
+        : siblings.slice(firstIndex, secondIndex);
+    if (firstIndex < 0 && draggable) {
+        siblingsBetween = siblings.slice(firstIndex + 1, secondIndex);
+    }
+    return [
+        sourceElement,
+        targetElement,
+        siblingsBetween,
+        isDraggedFoward,
+    ];
+};
+const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, hasGaps) => {
+    if (siblings.length == 0) {
+        return [0, 0, 0];
+    }
+    const beforeSpace = getValueFromProperty(siblings[0], beforeMargin);
+    let afterSpace = 0;
+    let space = -beforeSpace;
+    for (const [index, sibling] of siblings.entries()) {
+        const siblingSpace = sibling.getBoundingClientRect()[distance];
+        const siblingBeforeMargin = getValueFromProperty(sibling, beforeMargin);
+        if (hasGaps) {
+            afterSpace += siblingBeforeMargin;
+        }
+        if (hasGaps && index > 0) {
+            afterSpace += gap;
+        }
+        else {
+            afterSpace = Math.max(afterSpace, siblingBeforeMargin);
+        }
+        space += afterSpace + siblingSpace;
+        afterSpace = getValueFromProperty(sibling, afterMargin);
+    }
+    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 scrollChange = isGroupDropping
+        ? 0
+        : initialScrollProp - 2 * actualWindowScroll + initialWindowScroll[scroll];
+    translate[distance] += scrollChange;
+    return translate;
+};
+const getBeforeAfterMarginBaseOnDraggedDirection = (beforeMarginProp, afterMarginProp, draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping) => {
+    const previousElementByDirection = isDraggedFoward
+        ? draggedElement.previousElementSibling
+        : previousElement;
+    return getBeforeAfterMargin(beforeMarginProp, afterMarginProp, previousElementByDirection, draggedElement, hasGaps, isGroupDropping);
+};
+const getBeforeAfterMargin = (beforeMarginProp, afterMarginProp, previousElement, nextElement, hasGaps, isGroupDropping) => {
+    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];
+};

package/dist/core/utils/translate/GetTranslationByDraggingAndEvent.d.ts

@@ -1,6 +1,5 @@
-import { Direction } from '../..';
-import { DragAndDropEvent } from '..';
-
+import { Direction } from "../..";
+import { DragAndDropEvent } from "..";
 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

@@ -0,0 +1,48 @@
+import { HORIZONTAL } from "../..";
+import { DRAG_EVENT } from "..";
+import { draggableIsOutside, getPropByDirection, getValueFromProperty, } from "../GetStyles";
+import { gapAndDisplayInformation } from "../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);
+    if (intersection && event == DRAG_EVENT) {
+        height = 0;
+        width = 0;
+    }
+    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];
+    if (hasGaps) {
+        return getTranslation(space, before, after, gap, 0, direction);
+    }
+    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, afterMargin);
+    return getTranslation(space, beforeScace, afterSpace, 0, rest, direction);
+};
+const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, afterMargin) => {
+    const afterSpace = Math.max(nextBeforeMargin, currentAfterMargin);
+    let beforeScace = currentBeforeMargin;
+    let rest = nextBeforeMargin;
+    if (previousElement) {
+        const previousAfterMargin = getValueFromProperty(previousElement, afterMargin);
+        beforeScace = Math.max(previousAfterMargin, currentBeforeMargin);
+        rest = Math.max(rest, previousAfterMargin);
+    }
+    return [afterSpace, beforeScace, rest];
+};
+const getTranslation = (size, before, after, gap, rest, direction) => {
+    return getDistancesByDirection(direction, size + before + after + gap - rest);
+};
+const getDistancesByDirection = (direction, value) => {
+    if (direction == HORIZONTAL) {
+        return { width: value, height: 0 };
+    }
+    else {
+        return { width: 0, height: value };
+    }
+};