fix issue with dragging file items

pqina · Apr 12, 2024 · 3954d61 · 3954d61
1 parent 84b6216
commit 3954d61
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 110 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ coverage/
 .idea
 .vscode/
 upload/
-test.html
+test.html
+_TODO.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.31.1
+
+-   Fix issue with dragging file items sometimes not working.
+
 ## 4.31.0
 
 -   Add support for editing mock files if `item.source` is url.

diff --git a/dist/filepond.css b/dist/filepond.css
@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.0
+ * FilePond 4.31.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -632,6 +632,8 @@
 
     will-change: transform, opacity;
 
+    touch-action: none;
+
     /* item children order */
 }
 .filepond--item > .filepond--panel {

diff --git a/dist/filepond.esm.js b/dist/filepond.esm.js
@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.0
+ * FilePond 4.31.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -6079,14 +6079,23 @@ const create$7 = ({ root, props }) => {
         const drop = e => {
             if (!e.isPrimary) return;
 
-            document.removeEventListener('pointermove', drag);
-            document.removeEventListener('pointerup', drop);
-
             props.dragOffset = {
                 x: e.pageX - origin.x,
                 y: e.pageY - origin.y,
             };
 
+            reset();
+        };
+
+        const cancel = () => {
+            reset();
+        };
+
+        const reset = () => {
+            document.removeEventListener('pointercancel', cancel);
+            document.removeEventListener('pointermove', drag);
+            document.removeEventListener('pointerup', drop);
+
             root.dispatch('DID_DROP_ITEM', { id: props.id, dragState });
 
             // start listening to clicks again
@@ -6095,6 +6104,7 @@ const create$7 = ({ root, props }) => {
             }
         };
 
+        document.addEventListener('pointercancel', cancel);
         document.addEventListener('pointermove', drag);
         document.addEventListener('pointerup', drop);
     };

diff --git a/dist/filepond.esm.min.js b/dist/filepond.esm.min.js
diff --git a/dist/filepond.js b/dist/filepond.js
@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.0
+ * FilePond 4.31.1
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -8549,7 +8549,6 @@
     var create$7 = function create(_ref) {
         var root = _ref.root,
             props = _ref.props;
-
         // select
         root.ref.handleClick = function(e) {
             return root.dispatch('DID_ACTIVATE_ITEM', { id: props.id });
@@ -8629,14 +8628,23 @@
             var drop = function drop(e) {
                 if (!e.isPrimary) return;
 
-                document.removeEventListener('pointermove', drag);
-                document.removeEventListener('pointerup', drop);
-
                 props.dragOffset = {
                     x: e.pageX - origin.x,
                     y: e.pageY - origin.y,
                 };
 
+                reset();
+            };
+
+            var cancel = function cancel() {
+                reset();
+            };
+
+            var reset = function reset() {
+                document.removeEventListener('pointercancel', cancel);
+                document.removeEventListener('pointermove', drag);
+                document.removeEventListener('pointerup', drop);
+
                 root.dispatch('DID_DROP_ITEM', { id: props.id, dragState: dragState });
 
                 // start listening to clicks again
@@ -8647,6 +8655,7 @@
                 }
             };
 
+            document.addEventListener('pointercancel', cancel);
             document.addEventListener('pointermove', drag);
             document.addEventListener('pointerup', drop);
         };
@@ -8684,12 +8693,12 @@
                 root.element.dataset.dragState = 'drop';
             },
         },
+
         function(_ref6) {
             var root = _ref6.root,
                 actions = _ref6.actions,
                 props = _ref6.props,
                 shouldOptimize = _ref6.shouldOptimize;
-
             if (root.element.dataset.dragState === 'drop') {
                 if (root.scaleX <= 1) {
                     root.element.dataset.dragState = 'idle';
@@ -8758,8 +8767,8 @@
                 'dragOrigin',
                 'dragOffset',
             ],
-            styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity', 'height'],
 
+            styles: ['translateX', 'translateY', 'scaleX', 'scaleY', 'opacity', 'height'],
             animations: {
                 scaleX: ITEM_SCALE_SPRING,
                 scaleY: ITEM_SCALE_SPRING,

diff --git a/dist/filepond.min.css b/dist/filepond.min.css
diff --git a/dist/filepond.min.js b/dist/filepond.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "filepond",
-    "version": "4.31.0",
+    "version": "4.31.1",
     "description": "FilePond, Where files go to stretch their bits.",
     "license": "MIT",
     "author": {

diff --git a/src/css/item.css b/src/css/item.css
@@ -10,6 +10,8 @@
 
     will-change: transform, opacity;
 
+    touch-action: none;
+
     /* item children order */
     & > .filepond--panel {
         z-index: -1;