jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Remove cursor highlighting feature (#4508)

Browse source 
The cursor highlighting feature was removed from the PageComponent in order to simplify the code and improve performance.
This commit is contained in:
anovazzi1 2024-11-12 09:12:07 -03:00 • committed by GitHub
commit eb5cb2e923
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 0 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -120,75 +120,9 @@ 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);
const addComponent = useAddComponent();
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);
const shadowBoxHeight = NOTE_NODE_MIN_HEIGHT * (zoomLevel || 1);