catchup-library-web 1.21.13 → 1.21.15

package/dist/index.js

@@ -5388,15 +5388,48 @@ var GroupingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   (0, import_react20.useEffect)(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
+    const findScrollableParent = (element) => {
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
       }
-    }
+      return document.documentElement;
+    };
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+    const elementTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
+    const distance = targetScroll - startScroll;
+    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);
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    requestAnimationFrame(animate);
   }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
@@ -5826,11 +5859,6 @@ var MatchingActivityMaterialContent = ({
     const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
     const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
-    console.log("Scrolling to element:", dropTargetKey);
-    console.log("Scroll container:", scrollContainer);
-    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;
@@ -5844,7 +5872,6 @@ var MatchingActivityMaterialContent = ({
       const easedProgress = easeInOutQuad(progress);
       const newScrollTop = startScroll + distance * easedProgress;
       scrollContainer.scrollTop = newScrollTop;
-      console.log("Scrolling to:", newScrollTop);
       if (progress < 1) {
         requestAnimationFrame(animate);
       }

package/dist/index.mjs

@@ -5172,15 +5172,48 @@ var GroupingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
   useEffect10(() => {
-    if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
-      const dropZoneElement = dropZoneRefs.current[dropTargetKey];
-      if (dropZoneElement) {
-        dropZoneElement.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
+    const findScrollableParent = (element) => {
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
       }
-    }
+      return document.documentElement;
+    };
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+    const elementTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
+    const distance = targetScroll - startScroll;
+    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);
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    requestAnimationFrame(animate);
   }, [dropTargetKey]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
@@ -5610,11 +5643,6 @@ var MatchingActivityMaterialContent = ({
     const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
     const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
-    console.log("Scrolling to element:", dropTargetKey);
-    console.log("Scroll container:", scrollContainer);
-    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;
@@ -5628,7 +5656,6 @@ var MatchingActivityMaterialContent = ({
       const easedProgress = easeInOutQuad(progress);
       const newScrollTop = startScroll + distance * easedProgress;
       scrollContainer.scrollTop = newScrollTop;
-      console.log("Scrolling to:", newScrollTop);
       if (progress < 1) {
         requestAnimationFrame(animate);
       }

package/package.json

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

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

@@ -64,17 +64,70 @@ 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",
-        });
+    if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
+
+    const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+    if (!dropZoneElement) return;
+
+    // Find the scrollable parent container
+    const findScrollableParent = (element: HTMLElement): HTMLElement | null => {
+      let parent = element.parentElement;
+
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (
+          overflow === "auto" ||
+          overflow === "scroll" ||
+          overflowY === "auto" ||
+          overflowY === "scroll"
+        ) {
+          return parent;
+        }
+        parent = parent.parentElement;
       }
-    }
+
+      return document.documentElement;
+    };
+
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+
+    const elementTop =
+      elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
+    const distance = targetScroll - startScroll;
+    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);
+
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    requestAnimationFrame(animate);
   }, [dropTargetKey]);
 
   const retrieveAnswerMap = () => {

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

@@ -85,13 +85,12 @@ const MatchingActivityMaterialContent = ({
         parent = parent.parentElement;
       }
 
-      return document.documentElement; // Fallback to document scroll
+      return document.documentElement;
     };
 
     const scrollContainer = findScrollableParent(dropZoneElement);
     if (!scrollContainer) return;
 
-    // Get the element's position relative to the scroll container
     const containerRect = scrollContainer.getBoundingClientRect();
     const elementRect = dropZoneElement.getBoundingClientRect();
 
@@ -100,18 +99,9 @@ const MatchingActivityMaterialContent = ({
     const elementHeight = elementRect.height;
     const containerHeight = containerRect.height;
 
-    // Calculate target scroll position (center the element in the container)
     const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
     const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
-
-    console.log("Scrolling to element:", dropTargetKey);
-    console.log("Scroll container:", scrollContainer);
-    console.log("Current scroll:", startScroll);
-    console.log("Target scroll:", targetScroll);
-    console.log("Distance:", distance);
-
-    // Don't animate if already roughly in position
     if (Math.abs(distance) < 10) return;
 
     const duration = 800;
@@ -130,9 +120,6 @@ const MatchingActivityMaterialContent = ({
 
       const newScrollTop = startScroll + distance * easedProgress;
       scrollContainer.scrollTop = newScrollTop;
-
-      console.log("Scrolling to:", newScrollTop);
-
       if (progress < 1) {
         requestAnimationFrame(animate);
       }