fix: remove complicated touch-action options, instead properly trigge…

…r drag-end on mobile
PuruVJ · Sep 20, 2023 · 9ff1d71 · 9ff1d71
1 parent 9b54e46
commit 9ff1d71
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 45 deletions.
diff --git a/docs/src/documentation/options/touchAction/+option.mdx b/docs/src/documentation/options/touchAction/+option.mdx
@@ -1,6 +1,6 @@
 ---
 title: touchAction
-type: 'Property.TouchAction | ((el: HTMLElement, setTouchAction: (action: Property.TouchAction) => void) => void)'
+type: 'string'
 defaultValue: 'none'
 ---
 
@@ -14,8 +14,3 @@ export const shortDescription =
 <p>{shortDescription}</p>
 
 By default, the "touch-action" style is set to `none` upon initalizing the draggable on an element.
-
-This option allows to change the default to some other value in a number of ways:
-1. Simply set to another value for any draggable elements that use this draggable instance.
-2. Set to different values based on amount of pixels the element was dragged.
-3. Set a callback to assign the property to a different value for a specific element based on any arbitrary logic.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -185,12 +185,9 @@ export type DragOptions = {
 	handle?: string | HTMLElement | HTMLElement[];
 
 	/**
-	 * Choose when and how to set touch action for mobile devices
+	 * Choose to set the initial touch-action of an element to a different value than 'none'
 	 */
-	touchAction?: 
-		| Property.TouchAction
-		| Partial<Record<number, Property.TouchAction>>
-		| ((el: HTMLElement, setTouchAction: (action: Property.TouchAction) => void) => void);
+	touchAction?: Property.TouchAction;
 
 	/**
 	 * Class to apply on the element on which `use:draggable` is applied.
@@ -371,36 +368,11 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 
 	listen('pointerdown', dragStart, false);
 	listen('pointerup', dragEnd, false);
+	listen('touchend', dragEnd, false);
 	listen('pointermove', drag, false);
 
-	let setTouchAction: undefined | ((threshold: number) => void) = undefined;
-
 	// On mobile, touch can become extremely janky without it
-	if (typeof touchAction === 'function') {
-		touchAction(node, (action) => setStyle(node, 'touch-action', action))
-	} else if (typeof touchAction === 'string') {
-		setStyle(node, 'touch-action', touchAction);
-	} else {
-		const thresholds = Object.keys(touchAction)
-			.map(threshold => Number(threshold))
-			.sort((x, y) => y - x);
-
-		setTouchAction = (threshold: number) => {
-			const crossedThreshold = thresholds.find(value => threshold >= value);
-
-			if (
-				typeof touchAction !== 'object' ||
-				typeof crossedThreshold !== 'number' ||
-				(typeof touchAction === 'object' && !(crossedThreshold in touchAction))
-			) return;
-
-			const touchActionValue = touchAction[crossedThreshold];
-
-			if (typeof touchActionValue !== 'string') return;
-
-			setStyle(node, 'touch-action', touchActionValue);
-		};
-	}
+	setStyle(node, 'touch-action', touchAction);
 
 	const calculateInverseScale = () => {
 		// Calculate the current scale of the node
@@ -545,13 +517,6 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 		xOffset = translateX;
 		yOffset = translateY;
 
-		if (setTouchAction) {
-			const initialVector = (initialX * initialX + initialY * initialY);
-			const finalVector = (finalX * finalX + finalY * finalY);
-
-			setTouchAction(finalVector - initialVector);
-		}
-
 		fireSvelteDragEvent();
 
 		setTranslate();