catchup-library-web 1.21.8 → 1.21.10

package/dist/index.js

@@ -5391,10 +5391,27 @@ var GroupingActivityMaterialContent = ({
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
       if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
+        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 easeInOutQuad = (t) => {
+          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        };
+        const animation = (currentTime) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          window.scrollTo(
+            0,
+            startPosition + distance * easeInOutQuad(progress)
+          );
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+        requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);
@@ -5776,8 +5793,6 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = (0, import_react21.useRef)(null);
   const dropZoneRefs = (0, import_react21.useRef)({});
-  const scrollAnimationRef = (0, import_react21.useRef)(null);
-  const lastScrollTimeRef = (0, import_react21.useRef)(0);
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5804,45 +5819,38 @@ var MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   (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 () => {
-      if (scrollAnimationRef.current) {
-        cancelAnimationFrame(scrollAnimationRef.current);
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
+    const rect = dropZoneElement.getBoundingClientRect();
+    const elementTop = rect.top + window.scrollY;
+    const elementHeight = rect.height;
+    const viewportHeight = window.innerHeight;
+    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
+    const startScroll = window.scrollY;
+    const distance = targetScroll - startScroll;
+    console.log("Scrolling to element:", dropTargetKey);
+    console.log("Current scroll:", startScroll);
+    console.log("Target scroll:", targetScroll);
+    console.log("Distance:", distance);
+    if (Math.abs(distance) < 10) return;
+    const duration = 800;
+    let startTime = null;
+    const easeInOutQuad = (t) => {
+      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    };
+    const animate = (currentTime) => {
+      if (startTime === null) startTime = currentTime;
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeInOutQuad(progress);
+      window.scrollTo(0, startScroll + distance * easedProgress);
+      if (progress < 1) {
+        requestAnimationFrame(animate);
       }
     };
-  }, []);
+    requestAnimationFrame(animate);
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"

package/dist/index.mjs

@@ -5175,10 +5175,27 @@ var GroupingActivityMaterialContent = ({
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
       if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
+        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 easeInOutQuad = (t) => {
+          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        };
+        const animation = (currentTime) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+          window.scrollTo(
+            0,
+            startPosition + distance * easeInOutQuad(progress)
+          );
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+        requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);
@@ -5560,8 +5577,6 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
-  const scrollAnimationRef = useRef6(null);
-  const lastScrollTimeRef = useRef6(0);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5588,45 +5603,38 @@ var MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   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 () => {
-      if (scrollAnimationRef.current) {
-        cancelAnimationFrame(scrollAnimationRef.current);
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
+    const rect = dropZoneElement.getBoundingClientRect();
+    const elementTop = rect.top + window.scrollY;
+    const elementHeight = rect.height;
+    const viewportHeight = window.innerHeight;
+    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
+    const startScroll = window.scrollY;
+    const distance = targetScroll - startScroll;
+    console.log("Scrolling to element:", dropTargetKey);
+    console.log("Current scroll:", startScroll);
+    console.log("Target scroll:", targetScroll);
+    console.log("Distance:", distance);
+    if (Math.abs(distance) < 10) return;
+    const duration = 800;
+    let startTime = null;
+    const easeInOutQuad = (t) => {
+      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    };
+    const animate = (currentTime) => {
+      if (startTime === null) startTime = currentTime;
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeInOutQuad(progress);
+      window.scrollTo(0, startScroll + distance * easedProgress);
+      if (progress < 1) {
+        requestAnimationFrame(animate);
       }
     };
-  }, []);
+    requestAnimationFrame(animate);
+  }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"

package/package.json

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

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

@@ -64,15 +64,41 @@ const GroupingActivityMaterialContent = ({
     ).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",
-        });
+        const targetPosition =
+          dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
+        const startPosition = window.pageYOffset;
+        const distance =
+          targetPosition -
+          startPosition -
+          window.innerHeight / 2 +
+          dropZoneElement.offsetHeight / 2;
+        const duration = 800; // Adjust this value (in milliseconds) to control speed
+        let start: number | null = null;
+
+        const easeInOutQuad = (t: number) => {
+          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        };
+
+        const animation = (currentTime: number) => {
+          if (start === null) start = currentTime;
+          const timeElapsed = currentTime - start;
+          const progress = Math.min(timeElapsed / duration, 1);
+
+          window.scrollTo(
+            0,
+            startPosition + distance * easeInOutQuad(progress)
+          );
+
+          if (timeElapsed < duration) {
+            requestAnimationFrame(animation);
+          }
+        };
+
+        requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);

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

@@ -34,8 +34,6 @@ const MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef<HTMLDivElement>(null);
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
-  const scrollAnimationRef = useRef<number | null>(null);
-  const lastScrollTimeRef = useRef<number>(0);
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -64,66 +62,54 @@ const MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
-  // Replace the useEffect with this version
   useEffect(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      const currentTime = Date.now();
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
 
-      // Throttle: only scroll every 300ms to slow it down
-      if (currentTime - lastScrollTimeRef.current < 300) {
-        return;
-      }
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
 
-      lastScrollTimeRef.current = currentTime;
+    // Get the element's position relative to the viewport
+    const rect = dropZoneElement.getBoundingClientRect();
+    const elementTop = rect.top + window.scrollY;
+    const elementHeight = rect.height;
+    const viewportHeight = window.innerHeight;
 
-      if (dropZoneElement) {
-        // Cancel any existing animation
-        if (scrollAnimationRef.current) {
-          cancelAnimationFrame(scrollAnimationRef.current);
-        }
+    // Calculate target scroll position (center the element in viewport)
+    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
+    const startScroll = window.scrollY;
+    const distance = targetScroll - startScroll;
 
-        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]);
+    console.log("Scrolling to element:", dropTargetKey);
+    console.log("Current scroll:", startScroll);
+    console.log("Target scroll:", targetScroll);
+    console.log("Distance:", distance);
 
-  // Add cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (scrollAnimationRef.current) {
-        cancelAnimationFrame(scrollAnimationRef.current);
+    // Don't animate if already roughly in position
+    if (Math.abs(distance) < 10) return;
+
+    const duration = 800;
+    let startTime: number | null = null;
+
+    const easeInOutQuad = (t: number): number => {
+      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    };
+
+    const animate = (currentTime: number) => {
+      if (startTime === null) startTime = currentTime;
+
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeInOutQuad(progress);
+
+      window.scrollTo(0, startScroll + distance * easedProgress);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
       }
     };
-  }, []);
+
+    requestAnimationFrame(animate);
+  }, [dropTargetKey]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(