catchup-library-web 1.21.1 → 1.21.2

package/dist/index.js

@@ -5747,16 +5747,22 @@ var MatchingActivityMaterialContent = ({
   const [selectedValue, setSelectedValue] = (0, import_react21.useState)(null);
   const [draggedValue, setDraggedValue] = (0, import_react21.useState)(null);
   const [dropTargetKey, setDropTargetKey] = (0, import_react21.useState)(null);
-  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react21.useState)(
+    null
+  );
   const [isShuffled, setIsShuffled] = (0, import_react21.useState)(false);
   const [shuffledMaterialList, setShuffledMaterialList] = (0, import_react21.useState)([]);
   const dragElementRef = (0, import_react21.useRef)(null);
-  const [mousePosition, setMousePosition] = (0, import_react21.useState)({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({ x: 0, y: 0 });
+  const [mousePosition, setMousePosition] = (0, import_react21.useState)({
+    x: 0,
+    y: 0
+  });
+  const [touchPosition, setTouchPosition] = (0, import_react21.useState)({
+    x: 0,
+    y: 0
+  });
   const itemsRef = (0, import_react21.useRef)(null);
-  const scrollIntervalRef = (0, import_react21.useRef)(null);
-  const SCROLL_THRESHOLD = 100;
-  const SCROLL_SPEED = 10;
+  const dropZoneRefs = (0, import_react21.useRef)({});
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5778,44 +5784,21 @@ var MatchingActivityMaterialContent = ({
   }, [materialMap, isShuffled]);
   (0, import_react21.useEffect)(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap = materialMap;
+    answer.data.find(
+      (answerData) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   (0, import_react21.useEffect)(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-  (0, import_react21.useEffect)(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -6044,6 +6027,7 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),

package/dist/index.mjs

@@ -5531,16 +5531,22 @@ var MatchingActivityMaterialContent = ({
   const [selectedValue, setSelectedValue] = useState20(null);
   const [draggedValue, setDraggedValue] = useState20(null);
   const [dropTargetKey, setDropTargetKey] = useState20(null);
-  const [draggedElement, setDraggedElement] = useState20(null);
+  const [draggedElement, setDraggedElement] = useState20(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState20(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState20([]);
   const dragElementRef = useRef6(null);
-  const [mousePosition, setMousePosition] = useState20({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = useState20({ x: 0, y: 0 });
+  const [mousePosition, setMousePosition] = useState20({
+    x: 0,
+    y: 0
+  });
+  const [touchPosition, setTouchPosition] = useState20({
+    x: 0,
+    y: 0
+  });
   const itemsRef = useRef6(null);
-  const scrollIntervalRef = useRef6(null);
-  const SCROLL_THRESHOLD = 100;
-  const SCROLL_SPEED = 10;
+  const dropZoneRefs = useRef6({});
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5562,44 +5568,21 @@ var MatchingActivityMaterialContent = ({
   }, [materialMap, isShuffled]);
   useEffect11(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap = materialMap;
+    answer.data.find(
+      (answerData) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   useEffect11(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-  useEffect11(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      } else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16);
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"
@@ -5828,6 +5811,7 @@ var MatchingActivityMaterialContent = ({
         /* @__PURE__ */ jsx32("div", { className: "flex-1", children: /* @__PURE__ */ jsx32(
           "div",
           {
+            ref: (el) => dropZoneRefs.current[answerMapKey] = el,
             "data-matching-drop-zone": answerMapKey,
             onMouseEnter: () => draggedValue && setDropTargetKey(answerMapKey),
             onMouseLeave: () => setDropTargetKey(null),

package/package.json

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

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
 import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
+import { IMatchingActivityMaterialProps } from "../../../properties/ActivityProperties";
 import DividerLine from "../../dividers/DividerLine";
 
 const MatchingActivityMaterialContent = ({
@@ -13,25 +14,29 @@ const MatchingActivityMaterialContent = ({
   onChange,
   isPreview,
   showCorrectAnswer,
-}) => {
-  const [selectedValue, setSelectedValue] = useState(null);
-  const [draggedValue, setDraggedValue] = useState(null);
-  const [dropTargetKey, setDropTargetKey] = useState(null);
-  const [draggedElement, setDraggedElement] = useState(null);
+}: IMatchingActivityMaterialProps) => {
+  const [selectedValue, setSelectedValue] = useState<string | null>(null);
+  const [draggedValue, setDraggedValue] = useState<string | null>(null);
+  const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
+  const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState([]);
-  const dragElementRef = useRef(null);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
-  const itemsRef = useRef(null);
-  const scrollIntervalRef = useRef(null);
-
-  // Auto-scroll configuration
-  const SCROLL_THRESHOLD = 100; // Distance from edge to trigger scroll
-  const SCROLL_SPEED = 10; // Pixels to scroll per interval
+  const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
+  const dragElementRef = useRef<HTMLDivElement>(null);
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const [touchPosition, setTouchPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const itemsRef = useRef<HTMLDivElement>(null);
+  const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
 
   useEffect(() => {
-    const shuffleArray = (array) => {
+    const shuffleArray = (array: any) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
         for (let i = copyArray.length - 1; i > 0; i--) {
@@ -43,7 +48,7 @@ const MatchingActivityMaterialContent = ({
       }
       return array;
     };
-    const materialList = [];
+    const materialList: any = [];
     Object.keys(materialMap).forEach((materialKey) => {
       materialList.push(materialMap[materialKey]);
     });
@@ -52,84 +57,45 @@ const MatchingActivityMaterialContent = ({
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
-    answer.data.find((answerData) => answerData.type === "MATCHING").answerMap =
-      materialMap;
+    answer.data.find(
+      (answerData: any) => answerData.type === "MATCHING"
+    ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
-  // Auto-scroll effect for mouse drag
-  useEffect(() => {
-    if (!draggedValue || mousePosition.y === 0) return;
-
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-
-      // Check if near top edge
-      if (mousePosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      }
-      // Check if near bottom edge
-      else if (mousePosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
-      }
-    };
-
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16); // ~60fps
-
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, mousePosition.y]);
-
-  // Auto-scroll effect for touch drag
+  // Auto-scroll to center the drop zone when hovering
   useEffect(() => {
-    if (!draggedValue || touchPosition.y === 0) return;
-
-    const handleAutoScroll = () => {
-      const viewportHeight = window.innerHeight;
-      const scrollY = window.scrollY;
-
-      // Check if near top edge
-      if (touchPosition.y < SCROLL_THRESHOLD + scrollY) {
-        window.scrollBy(0, -SCROLL_SPEED);
-      }
-      // Check if near bottom edge
-      else if (touchPosition.y > viewportHeight + scrollY - SCROLL_THRESHOLD) {
-        window.scrollBy(0, SCROLL_SPEED);
+    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
+      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      if (dropZoneElement) {
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
       }
-    };
-
-    scrollIntervalRef.current = setInterval(handleAutoScroll, 16); // ~60fps
-
-    return () => {
-      if (scrollIntervalRef.current) {
-        clearInterval(scrollIntervalRef.current);
-      }
-    };
-  }, [draggedValue, touchPosition.y]);
+    }
+  }, [dropTargetKey]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
-      (answerData) => answerData.type === "MATCHING"
+      (answerData: any) => answerData.type === "MATCHING"
     );
     return answer.data[foundIndex].answerMap;
   };
 
-  const retrieveFilteredMaterialList = (answerMap) => {
-    const selectedValueList = [];
+  const retrieveFilteredMaterialList = (answerMap: any) => {
+    const selectedValueList: any = [];
     Object.keys(answerMap).forEach((key) => {
       selectedValueList.push(answerMap[key]);
     });
 
     return shuffledMaterialList.filter(
       (material) =>
-        selectedValueList.findIndex((value) => material === value) === -1
+        selectedValueList.findIndex((value: string) => material === value) ===
+        -1
     );
   };
 
-  const checkAnswerState = (correctAnswer, learnerAnswer) => {
+  const checkAnswerState = (correctAnswer: string, learnerAnswer: string) => {
     if (!isPreview) return null;
     if (!learnerAnswer) return "EMPTY";
     if (correctAnswer === learnerAnswer) {
@@ -139,7 +105,10 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Mouse drag handlers
-  const handleMouseDown = (e, materialValue) => {
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    materialValue: string
+  ): void => {
     if (!checkCanAnswerQuestion()) return;
     e.preventDefault();
     setDraggedValue(materialValue);
@@ -147,7 +116,7 @@ const MatchingActivityMaterialContent = ({
     setMousePosition({ x: e.clientX, y: e.clientY });
   };
 
-  const handleMouseMove = (e) => {
+  const handleMouseMove = (e: React.MouseEvent): void => {
     if (!draggedValue) return;
 
     setMousePosition({ x: e.clientX, y: e.clientY });
@@ -164,7 +133,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleMouseUp = () => {
+  const handleMouseUp = (): void => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -174,7 +143,11 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Touch drag handlers
-  const handleTouchStart = (e, materialValue, element) => {
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    materialValue: string,
+    element: HTMLElement
+  ): void => {
     if (!checkCanAnswerQuestion()) return;
     const touch = e.touches[0];
     setDraggedValue(materialValue);
@@ -183,7 +156,7 @@ const MatchingActivityMaterialContent = ({
     setSelectedValue(null);
   };
 
-  const handleTouchMove = (e) => {
+  const handleTouchMove = (e: React.TouchEvent): void => {
     if (!draggedValue) return;
 
     const touch = e.touches[0];
@@ -204,7 +177,7 @@ const MatchingActivityMaterialContent = ({
     }
   };
 
-  const handleTouchEnd = () => {
+  const handleTouchEnd = (): void => {
     if (dropTargetKey !== null && draggedValue !== null) {
       onChange(answer, dropTargetKey, draggedValue);
     }
@@ -215,13 +188,13 @@ const MatchingActivityMaterialContent = ({
   };
 
   // Click/tap to select (for easier mobile interaction)
-  const handleSelectItem = (materialValue) => {
+  const handleSelectItem = (materialValue: string): void => {
     if (!checkCanAnswerQuestion()) return;
     setSelectedValue(materialValue);
     setDraggedValue(null);
   };
 
-  const handleDropZoneClick = (answerMapKey) => {
+  const handleDropZoneClick = (answerMapKey: string): void => {
     if (selectedValue !== null) {
       onChange(answer, answerMapKey, selectedValue);
       setSelectedValue(null);
@@ -457,6 +430,7 @@ const MatchingActivityMaterialContent = ({
             <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
             <div className="flex-1">
               <div
+                ref={(el) => (dropZoneRefs.current[answerMapKey] = el)}
                 data-matching-drop-zone={answerMapKey}
                 onMouseEnter={() =>
                   draggedValue && setDropTargetKey(answerMapKey)