@imperosoft/cris-webui-components 1.1.2-beta.11 → 1.1.2-beta.13

package/dist/index.mjs

@@ -100,6 +100,8 @@ function CrisButton({
   const pressedRef = useRef(false);
   const touchingRef = useRef(false);
   const touchStartedHereRef = useRef(false);
+  const touchStartYRef = useRef(0);
+  const touchMovedRef = useRef(false);
   const feedbackJoin = joinFeedback ?? join;
   const feedback = useDigital(feedbackJoin ?? 0);
   const enabledJoin = useDigital(joinEnable ?? 0);
@@ -182,30 +184,42 @@ function CrisButton({
       dSet(join, false);
     }
   };
-  const handleTouchStart = () => {
+  const SCROLL_THRESHOLD = 8;
+  const handleTouchStart = (e) => {
     log("handleTouchStart");
     touchStart();
     touchingRef.current = true;
     touchStartedHereRef.current = true;
-    handlePress();
+    touchMovedRef.current = false;
+    touchStartYRef.current = e.touches[0]?.clientY ?? 0;
+  };
+  const handleTouchMove = (e) => {
+    if (touchMovedRef.current) return;
+    const dy = Math.abs((e.touches[0]?.clientY ?? 0) - touchStartYRef.current);
+    if (dy > SCROLL_THRESHOLD) {
+      touchMovedRef.current = true;
+      log("touchMove: scroll detected, dy:", dy);
+    }
   };
   const handleTouchEnd = () => {
-    log("handleTouchEnd", { touchStartedHereRef: touchStartedHereRef.current });
+    log("handleTouchEnd", { touchStartedHere: touchStartedHereRef.current, moved: touchMovedRef.current });
     touchEnd();
     touchingRef.current = true;
-    if (touchStartedHereRef.current) {
+    if (touchStartedHereRef.current && !touchMovedRef.current) {
       touchStartedHereRef.current = false;
+      handlePress();
       handleRelease();
     } else {
-      log("SKIPPED handleRelease: touch did not start here");
+      touchStartedHereRef.current = false;
+      log("SKIPPED: touch moved or did not start here");
     }
   };
   const handleTouchCancel = () => {
-    log("handleTouchCancel");
+    log("handleTouchCancel (scroll detected)");
     touchEnd();
     touchingRef.current = true;
     touchStartedHereRef.current = false;
-    handleRelease();
+    touchMovedRef.current = false;
   };
   const handleMouseDown = () => {
     if (isTouchActive() || touchingRef.current) return;
@@ -306,7 +320,7 @@ function CrisButton({
         cursor: suppressKeyClicks ? "default" : "pointer",
         position: isFreePositioned ? void 0 : "relative",
         overflow: isFreePositioned ? void 0 : "hidden",
-        touchAction: "none",
+        touchAction: "pan-x pan-y",
         userSelect: "none",
         WebkitUserSelect: "none"
       },
@@ -314,6 +328,7 @@ function CrisButton({
       onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchCancel,
       children: [