Fixed issue with tapping to place components

IllogicalTree · Jan 14, 2022 · bccec28 · bccec28
1 parent 1ae9fdf
commit bccec28
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/site/shared/components/DragDroppable/Draggable.tsx b/src/site/shared/components/DragDroppable/Draggable.tsx
@@ -60,11 +60,6 @@ export const Draggable = ({ children, data, dragDir, onDragChange, ...other }: P
         (ev) => onDragEnd(V(ev.clientX, ev.clientY)),
         [isDragging, ...data]
     );
-    useDocEvent(
-        "touchend",
-        (ev) => onDragEnd(V(ev.changedTouches[0].clientX, ev.changedTouches[0].clientY)),
-        [isDragging, ...data]
-    );
 
     return (
         <button
@@ -95,6 +90,10 @@ export const Draggable = ({ children, data, dragDir, onDragChange, ...other }: P
                         setState({ startTapTime: undefined, startX: 0, startY: 0, touchDown: false });
                     }
                 }
+            }}
+            onTouchEnd={(ev) => {
+                onDragEnd(V(ev.changedTouches[0].clientX, ev.changedTouches[0].clientY));
+                if (other.onTouchEnd) other.onTouchEnd(ev);
             }}>
             {children}
         </button>

diff --git a/src/site/shared/containers/ItemNav/index.tsx b/src/site/shared/containers/ItemNav/index.tsx
@@ -70,11 +70,16 @@ export const ItemNav = <D,>({ info, config, additionalData, onDelete, onStart, o
         setCurItemImg("");
         onFinish && onFinish(cancelled);
     }
-    // Drop the current item on click
+    // Drop the current item on click (or on touch end)
     useDocEvent("click", (ev) => {
         DragDropHandlers.drop(V(ev.x, ev.y), curItemID, numClicks, additionalData);
         reset();
     }, [curItemID, numClicks, setState, additionalData]);
+    useDocEvent("touchend", (ev) => {
+        const {clientX: x, clientY: y} = ev.changedTouches.item(0);
+        DragDropHandlers.drop(V(x,y), curItemID, numClicks, additionalData);
+        reset();
+    }, [curItemID, numClicks, setState, additionalData]);
 
     // Reset `numClicks` and `curItemID` when something is dropped
     useEffect(() => {
@@ -244,6 +249,10 @@ export const ItemNav = <D,>({ info, config, additionalData, onDelete, onStart, o
                                                 setCurItemImg(`/${config.imgRoot}/${section.id}/${item.icon}`);
                                                 onStart && onStart();
                                             }
+                                        }}
+                                        onTouchEnd={(ev) => {
+                                            // Prevents the `touchend` listener of placing the component to fire
+                                            ev.stopPropagation();
                                         }}>
                                         <img src={`/${config.imgRoot}/${section.id}/${item.icon}`} alt={item.label} />
                                     </Draggable>