svelte-dnd-action 0.9.22 → 0.9.23

package/dist/index.js

@@ -1062,8 +1062,9 @@
         left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
         top: (currentMouseY - draggedElRect.top) / draggedElRect.height
       };
-      draggedEl.style.height = "".concat(newRect.height, "px");
-      draggedEl.style.width = "".concat(newRect.width, "px");
+      // The lines below are commented out because of issue 454 - seems like these rect values take time to update when in grid layout, therefore this gets copied from the computed styles now
+      // draggedEl.style.height = `${newRect.height}px`;
+      // draggedEl.style.width = `${newRect.width}px`;
       draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
       draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
     }
@@ -1076,7 +1077,9 @@
   function copyStylesFromTo(copyFromEl, copyToEl) {
     var computedStyle = window.getComputedStyle(copyFromEl);
     Array.from(computedStyle).filter(function (s) {
-      return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type";
+      return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type" ||
+      // copying with and height to make up for rect update timing issues in some browsers
+      s === "width" || s === "height";
     }).forEach(function (s) {
       return copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s));
     });

package/dist/index.mjs

@@ -1056,8 +1056,9 @@ function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, curre
       left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
       top: (currentMouseY - draggedElRect.top) / draggedElRect.height
     };
-    draggedEl.style.height = "".concat(newRect.height, "px");
-    draggedEl.style.width = "".concat(newRect.width, "px");
+    // The lines below are commented out because of issue 454 - seems like these rect values take time to update when in grid layout, therefore this gets copied from the computed styles now
+    // draggedEl.style.height = `${newRect.height}px`;
+    // draggedEl.style.width = `${newRect.width}px`;
     draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
     draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
   }
@@ -1070,7 +1071,9 @@ function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, curre
 function copyStylesFromTo(copyFromEl, copyToEl) {
   var computedStyle = window.getComputedStyle(copyFromEl);
   Array.from(computedStyle).filter(function (s) {
-    return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type";
+    return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type" ||
+    // copying with and height to make up for rect update timing issues in some browsers
+    s === "width" || s === "height";
   }).forEach(function (s) {
     return copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s));
   });

package/package.json

@@ -43,7 +43,7 @@
         "dist"
     ],
     "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.9.22",
+    "version": "0.9.23",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/styler.js

@@ -77,8 +77,9 @@ export function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX
             left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
             top: (currentMouseY - draggedElRect.top) / draggedElRect.height
         };
-        draggedEl.style.height = `${newRect.height}px`;
-        draggedEl.style.width = `${newRect.width}px`;
+        // The lines below are commented out because of issue 454 - seems like these rect values take time to update when in grid layout, therefore this gets copied from the computed styles now
+        // draggedEl.style.height = `${newRect.height}px`;
+        // draggedEl.style.width = `${newRect.width}px`;
         draggedEl.style.left = `${parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange}px`;
         draggedEl.style.top = `${parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange}px`;
     }
@@ -104,7 +105,10 @@ function copyStylesFromTo(copyFromEl, copyToEl) {
                 s.startsWith("border") ||
                 s === "opacity" ||
                 s === "color" ||
-                s === "list-style-type"
+                s === "list-style-type" ||
+                // copying with and height to make up for rect update timing issues in some browsers
+                s === "width" ||
+                s === "height"
         )
         .forEach(s => copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s)));
 }