svelte-dnd-action 0.9.22 → 0.9.24

package/README.md

@@ -233,7 +233,7 @@ setDebugMode(true);
 ### Typescript
 
 If you are using Typescript, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
-
+#### Svelte 3 or below
 ```typescript
 declare type Item = import('svelte-dnd-action').Item;
 declare type DndEvent<ItemType = Item> = import('svelte-dnd-action').DndEvent<ItemType>;
@@ -245,6 +245,17 @@ declare namespace svelte.JSX {
 }
 
 ```
+#### Svelte 4:
+```typescript
+declare type Item = import('svelte-dnd-action').Item;
+declare type DndEvent<ItemType = Item> = import('svelte-dnd-action').DndEvent<ItemType>;
+declare namespace svelteHTML {
+   interface HTMLAttributes<T> {
+     'on:consider'?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void;
+     'on:finalize'?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void;
+   }
+ }
+```
 
 You may need to edit `tsconfig.json` to include `global.d.ts` if it doesn't already: "include": ["src/**/*", "global.d.ts"].
 Then you will be able to use the library with type safety as follows (Typescript gurus out there, improvements are welcome :smile:):

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.24",
     "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)));
 }