catchup-library-web 1.21.5 → 1.21.7

package/dist/index.js

@@ -5776,7 +5776,8 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = (0, import_react21.useRef)(null);
   const dropZoneRefs = (0, import_react21.useRef)({});
-  const scrollIntervalRef = (0, import_react21.useRef)(null);
+  const scrollAnimationRef = (0, import_react21.useRef)(null);
+  const lastScrollTimeRef = (0, import_react21.useRef)(0);
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5802,33 +5803,44 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
-  const handleAutoScroll = (clientY) => {
-    const scrollThreshold = 100;
-    const scrollSpeed = 10;
-    const viewportHeight = window.innerHeight;
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
-    }
-    if (clientY > viewportHeight - scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, scrollSpeed);
-      }, 16);
-    } else if (clientY < scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, -scrollSpeed);
-      }, 16);
-    }
-  };
-  const stopAutoScroll = () => {
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
+  (0, import_react21.useEffect)(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
+      lastScrollTimeRef.current = currentTime;
+      if (dropZoneElement) {
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
+        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
+        const duration = 800;
+        let start = null;
+        const animation = (currentTime2) => {
+          if (start === null) start = currentTime2;
+          const timeElapsed = currentTime2 - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          const ease = (t) => 1 - Math.pow(1 - t, 3);
+          window.scrollTo(0, startPosition + distance * ease(progress));
+          if (timeElapsed < duration) {
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
+          }
+        };
+        scrollAnimationRef.current = requestAnimationFrame(animation);
+      }
     }
-  };
+  }, [dropTargetKey]);
   (0, import_react21.useEffect)(() => {
     return () => {
-      stopAutoScroll();
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
     };
   }, []);
   const retrieveAnswerMap = () => {
@@ -5864,7 +5876,6 @@ var MatchingActivityMaterialContent = ({
   const handleMouseMove = (e) => {
     if (!draggedValue) return;
     setMousePosition({ x: e.clientX, y: e.clientY });
-    handleAutoScroll(e.clientY);
     const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
     const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-matching-drop-zone]");
     if (dropZone) {
@@ -5875,7 +5886,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5895,7 +5905,6 @@ var MatchingActivityMaterialContent = ({
     if (!draggedValue) return;
     const touch = e.touches[0];
     setTouchPosition({ x: touch.clientX, y: touch.clientY });
-    handleAutoScroll(touch.clientY);
     const elementUnder = document.elementFromPoint(
       touch.clientX,
       touch.clientY
@@ -5909,7 +5918,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleTouchEnd = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }

package/dist/index.mjs

@@ -5560,7 +5560,8 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
-  const scrollIntervalRef = useRef6(null);
+  const scrollAnimationRef = useRef6(null);
+  const lastScrollTimeRef = useRef6(0);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5586,33 +5587,44 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
-  const handleAutoScroll = (clientY) => {
-    const scrollThreshold = 100;
-    const scrollSpeed = 10;
-    const viewportHeight = window.innerHeight;
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
-    }
-    if (clientY > viewportHeight - scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, scrollSpeed);
-      }, 16);
-    } else if (clientY < scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, -scrollSpeed);
-      }, 16);
-    }
-  };
-  const stopAutoScroll = () => {
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
+  useEffect11(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
+      lastScrollTimeRef.current = currentTime;
+      if (dropZoneElement) {
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
+        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
+        const duration = 800;
+        let start = null;
+        const animation = (currentTime2) => {
+          if (start === null) start = currentTime2;
+          const timeElapsed = currentTime2 - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          const ease = (t) => 1 - Math.pow(1 - t, 3);
+          window.scrollTo(0, startPosition + distance * ease(progress));
+          if (timeElapsed < duration) {
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
+          }
+        };
+        scrollAnimationRef.current = requestAnimationFrame(animation);
+      }
     }
-  };
+  }, [dropTargetKey]);
   useEffect11(() => {
     return () => {
-      stopAutoScroll();
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
     };
   }, []);
   const retrieveAnswerMap = () => {
@@ -5648,7 +5660,6 @@ var MatchingActivityMaterialContent = ({
   const handleMouseMove = (e) => {
     if (!draggedValue) return;
     setMousePosition({ x: e.clientX, y: e.clientY });
-    handleAutoScroll(e.clientY);
     const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
     const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-matching-drop-zone]");
     if (dropZone) {
@@ -5659,7 +5670,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5679,7 +5689,6 @@ var MatchingActivityMaterialContent = ({
     if (!draggedValue) return;
     const touch = e.touches[0];
     setTouchPosition({ x: touch.clientX, y: touch.clientY });
-    handleAutoScroll(touch.clientY);
     const elementUnder = document.elementFromPoint(
       touch.clientX,
       touch.clientY
@@ -5693,7 +5702,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleTouchEnd = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.21.05",
+  "version": "1.21.07",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -34,7 +34,8 @@ const MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef<HTMLDivElement>(null);
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
-  const scrollIntervalRef = useRef<number | null>(null);
+  const scrollAnimationRef = useRef<number | null>(null);
+  const lastScrollTimeRef = useRef<number>(0);
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -63,43 +64,64 @@ const MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
-  // Auto-scroll function
-  const handleAutoScroll = (clientY: number) => {
-    const scrollThreshold = 100; // Distance from edge to trigger scroll
-    const scrollSpeed = 10; // Pixels to scroll per interval
-    const viewportHeight = window.innerHeight;
+  // Replace the useEffect with this version
+  useEffect(() => {
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
 
-    // Clear existing interval
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
-    }
+      // Throttle: only scroll every 300ms to slow it down
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
 
-    // Scroll down when near bottom
-    if (clientY > viewportHeight - scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, scrollSpeed);
-      }, 16); // ~60fps
-    }
-    // Scroll up when near top
-    else if (clientY < scrollThreshold) {
-      scrollIntervalRef.current = setInterval(() => {
-        window.scrollBy(0, -scrollSpeed);
-      }, 16);
-    }
-  };
+      lastScrollTimeRef.current = currentTime;
 
-  const stopAutoScroll = () => {
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
+      if (dropZoneElement) {
+        // Cancel any existing animation
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
+
+        const targetPosition =
+          dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance =
+          targetPosition -
+          startPosition -
+          window.innerHeight / 2 +
+          dropZoneElement.offsetHeight / 2;
+        const duration = 800; // Slower duration
+        let start: number | null = null;
+
+        const animation = (currentTime: number) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+
+          // Gentler easing function
+          const ease = (t: number) => 1 - Math.pow(1 - t, 3);
+
+          window.scrollTo(0, startPosition + distance * ease(progress));
+
+          if (timeElapsed < duration) {
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
+          }
+        };
+
+        scrollAnimationRef.current = requestAnimationFrame(animation);
+      }
     }
-  };
+  }, [dropTargetKey]);
 
-  // Cleanup on unmount
+  // Add cleanup on unmount
   useEffect(() => {
     return () => {
-      stopAutoScroll();
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
     };
   }, []);
 
@@ -149,9 +171,6 @@ const MatchingActivityMaterialContent = ({
 
     setMousePosition({ x: e.clientX, y: e.clientY });
 
-    // Handle auto-scroll
-    handleAutoScroll(e.clientY);
-
     // Find the element under the mouse point
     const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
     const dropZone = elementUnder?.closest("[data-matching-drop-zone]");
@@ -165,7 +184,6 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleMouseUp = (): void => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -194,9 +212,6 @@ const MatchingActivityMaterialContent = ({
     const touch = e.touches[0];
     setTouchPosition({ x: touch.clientX, y: touch.clientY });
 
-    // Handle auto-scroll
-    handleAutoScroll(touch.clientY);
-
     // Find the element under the touch point
     const elementUnder = document.elementFromPoint(
       touch.clientX,
@@ -213,7 +228,6 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleTouchEnd = (): void => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }