svelte-dnd-action - npm Package Compare versions

Comparing version 0.6.22 to 0.6.23

package.json

@@ -43,3 +43,3 @@ {
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.6.22",
+    "version": "0.6.23",
     "repository": {
@@ -46,0 +46,0 @@ "type": "git",

src/constants.js

@@ -19,2 +19,4 @@ import {DRAGGED_ENTERED_EVENT_NAME, DRAGGED_LEFT_EVENT_NAME, DRAGGED_OVER_INDEX_EVENT_NAME} from "./helpers/dispatcher";
 export const SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
+export const SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
+
 export let ITEM_ID_KEY = "id";
@@ -21,0 +23,0 @@ let activeDndZoneCount = 0;

src/helpers/intersection.js

@@ -52,3 +52,3 @@ // This is based off https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms/57876601#57876601
  */
-function getAbsoluteRectNoTransforms(el) {
+export function getAbsoluteRectNoTransforms(el) {
     const rect = adjustedBoundingRect(el);
@@ -112,3 +112,3 @@ return {
  */
-function isPointInsideRect(point, rect) {
+export function isPointInsideRect(point, rect) {
     return point.y <= rect.bottom && point.y >= rect.top && point.x >= rect.left && point.x <= rect.right;
@@ -115,0 +115,0 @@ }

src/helpers/listUtil.js

@@ -1,4 +0,34 @@
-import {isCenterOfAInsideB, calcDistanceBetweenCenters} from "./intersection";
+import {isCenterOfAInsideB, calcDistanceBetweenCenters, getAbsoluteRectNoTransforms, isPointInsideRect, findCenterOfElement} from "./intersection";
+import {printDebug, SHADOW_ELEMENT_ATTRIBUTE_NAME} from "../constants";
 
+let dzToShadowIndexToRect;
+
 /**
+ * Resets the cache that allows for smarter "would be index" resolution. Should be called after every drag operation
+ */
+export function resetIndexesCache() {
+    printDebug(() => "resetting indexes cache");
+    dzToShadowIndexToRect = new Map();
+}
+resetIndexesCache();
+
+/**
+ * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
+ * Helpful in order to determine "would be index" more effectively
+ * @param {HTMLElement} dz
+ * @return {number} - the shadow element index
+ */
+function cacheShadowRect(dz) {
+    const shadowElIndex = Array.from(dz.children).findIndex(child => child.getAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME));
+    if (shadowElIndex >= 0) {
+        if (!dzToShadowIndexToRect.has(dz)) {
+            dzToShadowIndexToRect.set(dz, new Map());
+        }
+        dzToShadowIndexToRect.get(dz).set(shadowElIndex, getAbsoluteRectNoTransforms(dz.children[shadowElIndex]));
+        return shadowElIndex;
+    }
+    return undefined;
+}
+
+/**
  * @typedef {Object} Index
@@ -23,2 +53,4 @@ * @property {number} index - the would be index
     }
+    const shadowElIndex = cacheShadowRect(collectionBelowEl);
+
     // the search could be more efficient but keeping it simple for now
@@ -28,2 +60,8 @@ // a possible improvement: pass in the lastIndex it was found in and check there first, then expand from there
         if (isCenterOfAInsideB(floatingAboveEl, children[i])) {
+            const cachedShadowRect = dzToShadowIndexToRect.has(collectionBelowEl) && dzToShadowIndexToRect.get(collectionBelowEl).get(i);
+            if (cachedShadowRect) {
+                if (!isPointInsideRect(findCenterOfElement(floatingAboveEl), cachedShadowRect)) {
+                    return {index: shadowElIndex, isProximityBased: false};
+                }
+            }
             return {index: i, isProximityBased: false};
@@ -30,0 +68,0 @@ }

src/helpers/observer.js

@@ -1,2 +0,2 @@
-import {findWouldBeIndex} from "./listUtil";
+import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
 import {findCenterOfElement, isElementOffDocument} from "./intersection";
@@ -71,3 +71,2 @@ import {
                 lastDropZoneFound = dz;
-                lastIndexFound = index;
             } else if (index !== lastIndexFound) {
@@ -99,2 +98,3 @@ dispatchDraggedElementIsOverIndex(dz, indexObj, draggedEl);
     resetScrolling();
+    resetIndexesCache();
 }

src/helpers/styler.js

@@ -0,1 +1,3 @@
+import {SHADOW_ELEMENT_ATTRIBUTE_NAME} from "../constants";
+
 const TRANSITION_DURATION_SECONDS = 0.2;
@@ -134,7 +136,17 @@
  */
-export function styleShadowEl(shadowEl) {
+export function decorateShadowEl(shadowEl) {
     shadowEl.style.visibility = "hidden";
+    shadowEl.setAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME, "true");
 }
 
 /**
+ * undo the styles the shadow element
+ * @param {HTMLElement} shadowEl
+ */
+export function unDecorateShadowElement(shadowEl) {
+    shadowEl.style.visibility = "";
+    shadowEl.removeAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME);
+}
+
+/**
  * will mark the given dropzones as visually active
@@ -141,0 +153,0 @@ * @param {Array<HTMLElement>} dropZones

src/pointerAction.js

@@ -16,6 +16,7 @@ import {
     styleDraggable,
-    styleShadowEl,
+    decorateShadowEl,
     styleActiveDropZones,
     styleInactiveDropZones,
-    hideOriginalDragTarget
+    hideOriginalDragTarget,
+    unDecorateShadowElement
 } from "./helpers/styler";
@@ -197,3 +198,3 @@ import {
             }
-            shadowElDropZone.children[shadowElIdx].style.visibility = "";
+            unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
             cleanupPostDrop();
@@ -222,3 +223,3 @@ };
             });
-            shadowElDropZone.children[originIndex].style.visibility = "";
+            unDecorateShadowElement(shadowElDropZone.children[originIndex]);
             cleanupPostDrop();
@@ -416,3 +417,3 @@ };
                 );
-                styleShadowEl(draggableEl);
+                decorateShadowEl(draggableEl);
                 continue;
@@ -419,0 +420,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

239817

increased by2.48%

Lines of code

5658

increased by2.65%

No dependency changes