Merge pull request #10 from AlexInABox/dev

avoid overflow by hiding cursors that are ouside the users viewport!

Author: AlexInABox

contentScript.js

@@ -90,31 +90,26 @@ function animateCursor(cursor, targetX, targetY) {
     const startY = parseFloat(cursor.style.top || 0);
 
     const animate = (currentTime) => {
-        const progress = (currentTime - startTime) / animationDuration;
+        const progress = (currentTime + 1 - startTime) / animationDuration;
 
         if (progress < 1) {
             const newX = startX + (targetX - startX) * progress;
             const newY = startY + (targetY - startY) * progress;
-            cursor.style.left = newX + 'px';
-            cursor.style.top = newY + 'px';
+
+            if (isCursorInViewport(cursor, newX, newY)) {
+                cursor.style.left = newX + 'px';
+                cursor.style.top = newY + 'px';
+            }
             requestAnimationFrame(animate);
         } else {
-            cursor.style.left = targetX + 'px';
-            cursor.style.top = targetY + 'px';
+            if (isCursorInViewport(cursor, targetX, targetY)) {
+                cursor.style.left = targetX + 'px';
+                cursor.style.top = targetY + 'px';
+            }
         }
     };
 
     requestAnimationFrame(animate);
-
-    //Reset opacity
-    // Temporarily remove the class to restart the animation
-    cursor.style.animation = 'none';
-
-    // Force a reflow, so the browser picks up the change
-    cursor.offsetHeight; // This triggers a reflow
-
-    // Reapply the animation
-    cursor.style.animation = '';
 };
 
 function addClient(id, skinId) {
@@ -143,12 +138,70 @@ function removeClient(id) {
 }
 
 function updateCursor(id, x, y) {
-    //get the cursor
+    // Get the cursor element
     var cursor = document.getElementById(id);
 
-    animateCursor(cursor, x, y); // TODO: Add ability to disable animation or auto-disable if cpu usage is too high
+    animateCursor(cursor, x, y);
 }
 
+function isCursorInViewport(cursor, x, y) {
+    //tbh performancy wise this is horrible
+    // Padding to keep the cursor slightly away from the edges
+    const padding = 32;
+
+    // Get viewport dimensions and positions
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight - padding;
+    const viewportLeft = scrollLeft;
+    const viewportRight = scrollLeft + viewportWidth - padding;
+
+    // Determine if the cursor is out of bounds vertically or horizontally
+    const isInVerticalBounds = y >= viewportTop && y <= viewportBottom;
+    const isInHorizontalBounds = x >= viewportLeft && x <= viewportRight;
+
+    if (isInVerticalBounds && isInHorizontalBounds) {
+        // If the target is within both vertical and horizontal bounds, animate the cursor
+        cursor.style.animation = 'none';
+        cursor.offsetHeight; // This triggers a reflow
+        cursor.style.animation = '';
+        cursor.style.opacity = '1'; // Unhide the cursor
+        return true;
+    } else {
+        // Initialize stale positions with the current target position
+        let staleX = x;
+        let staleY = y;
+
+        // Check vertical bounds and adjust staleY if needed
+        if (y < viewportTop) {
+            staleY = viewportTop;
+        } else if (y > viewportBottom) {
+            staleY = viewportBottom;
+        }
+
+        // Check horizontal bounds and adjust staleX if needed
+        if (x < viewportLeft) {
+            staleX = viewportLeft;
+        } else if (x > viewportRight) {
+            staleX = viewportRight;
+        }
+
+        // Update cursor position and hide it
+        cursor.style.animation = 'none';
+        cursor.style.opacity = '0'; // Hide the cursor
+        cursor.style.left = `${staleX}px`;
+        cursor.style.top = `${staleY}px`;
+
+
+        return false;
+    }
+}
+
+
+
 window.addEventListener("load", () => {
     (async () => {
         try {

platform/chromium/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "CursorConnect",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "Real-time cursor interaction for a more connected browsing experience.",
   "permissions": [
     "storage",

platform/firefox/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "CursorConnect",
-    "version": "0.2.1",
+    "version": "0.2.4",
     "description": "Real-time cursor interaction for a more connected browsing experience.",
     "browser_specific_settings": {
         "gecko": {