catchup-library-web 1.21.5 → 1.21.6

package/dist/index.js

@@ -5776,7 +5776,6 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = (0, import_react21.useRef)(null);
   const dropZoneRefs = (0, import_react21.useRef)({});
-  const scrollIntervalRef = (0, import_react21.useRef)(null);
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5802,35 +5801,29 @@ 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)(() => {
-    return () => {
-      stopAutoScroll();
-    };
-  }, []);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
+        const duration = 1e3;
+        let start = null;
+        const animation = (currentTime) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          const ease = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+          window.scrollTo(0, startPosition + distance * ease(progress));
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+        requestAnimationFrame(animation);
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5864,7 +5857,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 +5867,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5895,7 +5886,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 +5899,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleTouchEnd = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }

package/dist/index.mjs

@@ -5560,7 +5560,6 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
-  const scrollIntervalRef = useRef6(null);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5586,35 +5585,29 @@ 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(() => {
-    return () => {
-      stopAutoScroll();
-    };
-  }, []);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
+        const duration = 1e3;
+        let start = null;
+        const animation = (currentTime) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          const ease = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+          window.scrollTo(0, startPosition + distance * ease(progress));
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+        requestAnimationFrame(animation);
+      }
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5648,7 +5641,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 +5651,6 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5679,7 +5670,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 +5683,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.06",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

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

@@ -34,7 +34,6 @@ const MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef<HTMLDivElement>(null);
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
-  const scrollIntervalRef = useRef<number | null>(null);
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -63,45 +62,41 @@ 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;
-
-    // Clear existing interval
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
-    }
-
-    // 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);
-    }
-  };
-
-  const stopAutoScroll = () => {
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current);
-      scrollIntervalRef.current = null;
-    }
-  };
-
-  // Cleanup on unmount
   useEffect(() => {
-    return () => {
-      stopAutoScroll();
-    };
-  }, []);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        const targetPosition =
+          dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance =
+          targetPosition -
+          startPosition -
+          window.innerHeight / 2 +
+          dropZoneElement.offsetHeight / 2;
+        const duration = 1000;
+        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);
+
+          // Easing function for smooth animation
+          const ease = (t: number) =>
+            t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+          window.scrollTo(0, startPosition + distance * ease(progress));
+
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+
+        requestAnimationFrame(animation);
+      }
+    }
+  }, [dropTargetKey]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
@@ -149,9 +144,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 +157,6 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleMouseUp = (): void => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -194,9 +185,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 +201,6 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleTouchEnd = (): void => {
-    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }