From 99cdaaf073c62568edc1978b3d9a702224760c88 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 4 Oct 2024 10:59:56 -0300
Subject: [PATCH] feature: Add cursor highlight feature in canvas page (#4007)

* added a color change in cursor to help user find the cursor in the canvas page

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
---
 .../components/PageComponent/index.tsx        | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 91a4941a5..43f3167ec 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -115,6 +115,72 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
   const [isAddingNote, setIsAddingNote] = useState(false);
+  const [isHighlightingCursor, setIsHighlightingCursor] = useState(false);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        setIsHighlightingCursor(true);
+        setTimeout(() => setIsHighlightingCursor(false), 1000);
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isHighlightingCursor) {
+      const cursor = document.body.style.cursor;
+      document.body.style.cursor = "none";
+      const highlightDiv = document.createElement("div");
+      highlightDiv.style.position = "fixed";
+      highlightDiv.style.width = "40px";
+      highlightDiv.style.height = "40px";
+      highlightDiv.style.borderRadius = "50%";
+      highlightDiv.style.background =
+        "radial-gradient(circle, rgba(135,206,250,0.7) 0%, rgba(135,206,250,0) 70%)";
+      highlightDiv.style.pointerEvents = "none";
+      highlightDiv.style.zIndex = "9999";
+      highlightDiv.style.filter = "blur(5px)";
+      document.body.appendChild(highlightDiv);
+
+      let scale = 1;
+      let increasing = true;
+
+      const blink = () => {
+        if (increasing) {
+          scale += 0.03;
+          if (scale >= 1.3) increasing = false;
+        } else {
+          scale -= 0.03;
+          if (scale <= 0.7) increasing = true;
+        }
+        highlightDiv.style.transform = `scale(${scale})`;
+      };
+
+      const blinkInterval = setInterval(blink, 50);
+
+      const moveHighlight = (e: MouseEvent) => {
+        highlightDiv.style.left = `${e.clientX - 20}px`;
+        highlightDiv.style.top = `${e.clientY - 20}px`;
+      };
+
+      //@ts-ignore
+      document.addEventListener("mousemove", moveHighlight);
+
+      return () => {
+        document.body.style.cursor = cursor;
+        document.body.removeChild(highlightDiv);
+        //@ts-ignore
+        document.removeEventListener("mousemove", moveHighlight);
+        clearInterval(blinkInterval);
+      };
+    }
+  }, [isHighlightingCursor]);
 
   const zoomLevel = reactFlowInstance?.getZoom();
   const shadowBoxWidth = NOTE_NODE_MIN_WIDTH * (zoomLevel || 1);