catchup-library-web 1.21.3 → 1.21.5

package/dist/index.js

@@ -5776,6 +5776,7 @@ 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) {
@@ -5801,17 +5802,35 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
-  (0, import_react21.useEffect)(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
-      }
+  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);
     }
-  }, [dropTargetKey]);
+  };
+  const stopAutoScroll = () => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+  (0, import_react21.useEffect)(() => {
+    return () => {
+      stopAutoScroll();
+    };
+  }, []);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5845,6 +5864,7 @@ 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) {
@@ -5855,6 +5875,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
+    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5874,6 +5895,7 @@ 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
@@ -5887,6 +5909,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleTouchEnd = () => {
+    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }

package/dist/index.mjs

@@ -5560,6 +5560,7 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
+  const scrollIntervalRef = useRef6(null);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5585,17 +5586,35 @@ var MatchingActivityMaterialContent = ({
       (answerData) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
-  useEffect11(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
-      }
+  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);
     }
-  }, [dropTargetKey]);
+  };
+  const stopAutoScroll = () => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+  useEffect11(() => {
+    return () => {
+      stopAutoScroll();
+    };
+  }, []);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5629,6 +5648,7 @@ 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) {
@@ -5639,6 +5659,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const handleMouseUp = () => {
+    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -5658,6 +5679,7 @@ 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
@@ -5671,6 +5693,7 @@ 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.03",
+  "version": "1.21.05",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

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

@@ -34,6 +34,7 @@ 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) => {
@@ -62,18 +63,45 @@ const MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
-  // Auto-scroll to center the drop zone when hovering
-  useEffect(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        });
-      }
+  // 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);
     }
-  }, [dropTargetKey]);
+  };
+
+  const stopAutoScroll = () => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      stopAutoScroll();
+    };
+  }, []);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
@@ -121,6 +149,9 @@ 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]");
@@ -134,6 +165,7 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleMouseUp = (): void => {
+    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -162,6 +194,9 @@ 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,
@@ -178,6 +213,7 @@ const MatchingActivityMaterialContent = ({
   };
 
   const handleTouchEnd = (): void => {
+    stopAutoScroll();
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }