Merge pull request #13 from tmirkovic/tm/fix-ios

Try to fix iOS touch not being detected
robertrosman · Aug 21, 2024 · 06e4ae2 · 06e4ae2
2 parents a604d2a + 96296ff
commit 06e4ae2
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/composables/useDraw.ts b/src/composables/useDraw.ts
@@ -1,5 +1,5 @@
 import { snapToAngle } from '@/utils/snapToAngle'
-import { type Position, usePointer, useElementBounding, type MaybeElement } from '@vueuse/core'
+import { type Position, usePointer, useMousePressed, useElementBounding, type MaybeElement } from '@vueuse/core'
 import { computed, reactive, ref, watchEffect, type Ref } from 'vue'
 
 export interface UseDrawOptions {
@@ -24,7 +24,10 @@ export function useDraw({
   height,
   snapAngles
 }: UseDrawOptions) {
-  const { x: absoluteX, y: absoluteY, pressure } = usePointer()
+  const { x: absoluteX, y: absoluteY, pressure: pointerPressure } = usePointer()
+
+  const { pressed, sourceType } = useMousePressed()
+
   const {
     top,
     left,
@@ -73,8 +76,15 @@ export function useDraw({
       absoluteY.value === lastPos.y &&
       (left.value !== lastPos.left || top.value !== lastPos.top)
 
+    let pressure = pointerPressure.value
+
+    // For iOS not sending pressure on touch
+    if(pointerPressure.value === 0 && pressed.value && sourceType.value === 'touch') {
+      pressure = 0.5
+    }
+
     if (
-      pressure.value &&
+      pressure &&
       !isDrawing.value &&
       isInside.value &&
       isMoving.value &&
@@ -89,11 +99,11 @@ export function useDraw({
       posEnd.x = x.value
       posEnd.y = y.value
       onDrawStart?.()
-    } else if (pressure.value && isDrawing.value) {
+    } else if (pressure && isDrawing.value) {
       posEnd.x = x.value
       posEnd.y = y.value
       onDraw?.()
-    } else if (!pressure.value && isDrawing.value) {
+    } else if (!pressure && isDrawing.value) {
       isDrawing.value = false
       isDrawingSomewhere = false
       onDrawEnd?.()