@rpg-engine/long-bow 0.8.230 → 0.8.231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.230",
+  "version": "0.8.231",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Cards/ItemTooltip.tsx

@@ -20,38 +20,49 @@ export const ItemTooltip: React.FC<IItemTooltipProps> = ({
   equipmentSet,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const rafId = useRef<number | null>(null);
 
   useEffect(() => {
     const { current } = ref;
 
     if (current) {
       const handleMouseMove = (event: MouseEvent) => {
+        if (rafId.current !== null) return;
+
         const { clientX, clientY } = event;
 
-        // Adjust the position of the tooltip based on the mouse position
-        const rect = current.getBoundingClientRect();
+        rafId.current = requestAnimationFrame(() => {
+          rafId.current = null;
+
+          // Adjust the position of the tooltip based on the mouse position
+          const rect = current.getBoundingClientRect();
 
-        const tooltipWidth = rect.width;
-        const tooltipHeight = rect.height;
-        const isOffScreenRight =
-          clientX + tooltipWidth + offset > window.innerWidth;
-        const isOffScreenBottom =
-          clientY + tooltipHeight + offset > window.innerHeight;
-        const x = isOffScreenRight
-          ? clientX - tooltipWidth - offset
-          : clientX + offset;
-        const y = isOffScreenBottom
-          ? clientY - tooltipHeight - offset
-          : clientY + offset;
+          const tooltipWidth = rect.width;
+          const tooltipHeight = rect.height;
+          const isOffScreenRight =
+            clientX + tooltipWidth + offset > window.innerWidth;
+          const isOffScreenBottom =
+            clientY + tooltipHeight + offset > window.innerHeight;
+          const x = isOffScreenRight
+            ? clientX - tooltipWidth - offset
+            : clientX + offset;
+          const y = isOffScreenBottom
+            ? clientY - tooltipHeight - offset
+            : clientY + offset;
 
-        current.style.transform = `translate(${x}px, ${y}px)`;
-        current.style.opacity = '1';
+          current.style.transform = `translate(${x}px, ${y}px)`;
+          current.style.opacity = '1';
+        });
       };
 
       window.addEventListener('mousemove', handleMouseMove);
 
       return () => {
         window.removeEventListener('mousemove', handleMouseMove);
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
       };
     }
 

package/src/components/shared/SimpleTooltip.tsx

@@ -28,6 +28,7 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
   const tooltipRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout>();
+  const rafId = useRef<number | null>(null);
 
   const calculatePosition = () => {
     if (!triggerRef.current || !tooltipRef.current) return;
@@ -87,26 +88,34 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
 
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
-      if (visible && tooltipRef.current && triggerRef.current) {
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-
-        const isOutsideTooltip =
-          event.clientX < tooltipRect.left ||
-          event.clientX > tooltipRect.right ||
-          event.clientY < tooltipRect.top ||
-          event.clientY > tooltipRect.bottom;
-
-        const isOutsideTrigger =
-          event.clientX < triggerRect.left ||
-          event.clientX > triggerRect.right ||
-          event.clientY < triggerRect.top ||
-          event.clientY > triggerRect.bottom;
-
-        if (isOutsideTooltip && isOutsideTrigger) {
-          hideTooltip();
+      if (rafId.current !== null) return;
+
+      const { clientX, clientY } = event;
+
+      rafId.current = requestAnimationFrame(() => {
+        rafId.current = null;
+
+        if (visible && tooltipRef.current && triggerRef.current) {
+          const tooltipRect = tooltipRef.current.getBoundingClientRect();
+          const triggerRect = triggerRef.current.getBoundingClientRect();
+
+          const isOutsideTooltip =
+            clientX < tooltipRect.left ||
+            clientX > tooltipRect.right ||
+            clientY < tooltipRect.top ||
+            clientY > tooltipRect.bottom;
+
+          const isOutsideTrigger =
+            clientX < triggerRect.left ||
+            clientX > triggerRect.right ||
+            clientY < triggerRect.top ||
+            clientY > triggerRect.bottom;
+
+          if (isOutsideTooltip && isOutsideTrigger) {
+            hideTooltip();
+          }
         }
-      }
+      });
     };
 
     const handleScroll = () => {
@@ -129,6 +138,10 @@ export const SimpleTooltip: React.FC<TooltipProps> = ({
       document.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleResize);
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
       clearTimeout(timeoutRef.current);
     };
   }, [visible]);