From 733e6945c6f2244cadeceaafb0ab62aeea7e00a6 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 28 Nov 2023 20:31:27 -0300 Subject: [PATCH] Fixed unnecessary updates --- src/frontend/src/contexts/flowsContext.tsx | 2 +- .../components/PageComponent/index.tsx | 62 ++++++------------- 2 files changed, 19 insertions(+), 45 deletions(-) diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index 0ed9cb783..f6f9660d7 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -418,7 +418,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) { const insidePosition = position.paneX ? { x: position.paneX + position.x, y: position.paneY! + position.y } - : reactFlowInstance!.project({ x: position.x, y: position.y }); + : reactFlowInstance!.screenToFlowPosition({ x: position.x, y: position.y }); selectionInstance.nodes.forEach((node: NodeType) => { // Generate a unique node ID diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 3792c85cf..0513dd66c 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -85,17 +85,11 @@ export default function Page({ const { takeSnapshot } = useContext(undoRedoContext); - const [position, setPosition] = useState({ x: 0, y: 0 }); const [lastSelection, setLastSelection] = useState(null); - - useEffect(() => { - console.log("1") - // this effect is used to attach the global event handlers - const onKeyDown = (event: KeyboardEvent) => { if (!isWrappedWithClass(event, "nocopy")) { if ( @@ -112,10 +106,9 @@ export default function Page({ lastCopiedSelection ) { event.preventDefault(); - let bounds = reactFlowWrapper.current?.getBoundingClientRect(); paste(lastCopiedSelection, { - x: position.x - bounds!.left, - y: position.y - bounds!.top, + x: position.x, + y: position.y, }); } if ( @@ -137,18 +130,26 @@ export default function Page({ } } }; + + document.addEventListener("keydown", onKeyDown); + + return () => { + document.removeEventListener("keydown", onKeyDown); + }; + }, [lastCopiedSelection, lastSelection]); + + useEffect(() => { const handleMouseMove = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; - document.addEventListener("keydown", onKeyDown); document.addEventListener("mousemove", handleMouseMove); return () => { - document.removeEventListener("keydown", onKeyDown); document.removeEventListener("mousemove", handleMouseMove); }; - }, [position, lastCopiedSelection, lastSelection]); + }, [position]); + const [selectionMenuVisible, setSelectionMenuVisible] = useState(false); const { setExtraComponent, setExtraNavigation } = useContext(locationContext); @@ -165,33 +166,21 @@ export default function Page({ //update flow when tabs change useEffect(() => { - console.log("2") setNodes(flow?.data?.nodes ?? []); setEdges(flow?.data?.edges ?? []); if (reactFlowInstance) { setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 }); } }, [flow, reactFlowInstance]); - //set extra sidebar - useEffect(() => { - console.log("3") - setExtraComponent(); - setExtraNavigation({ title: "Components" }); - }, [setExtraComponent, setExtraNavigation]); - - const [seconds, setSeconds] = useState(0); useEffect(() => { - console.log("4") const index = flows.findIndex((flowId) => flowId.id === flow.id); const interval = setInterval(() => { saveFlow( { ...flows[index]!, - data: reactFlowInstance - ? reactFlowInstance!.toObject() - : flow!.data, + data: reactFlowInstance ? reactFlowInstance!.toObject() : flow!.data, }, true ); @@ -204,8 +193,7 @@ export default function Page({ const onEdgesChangeMod = useCallback( (change: EdgeChange[]) => { - console.log("5") - updateFlow({ + updateFlow({ ...flow!, data: reactFlowInstance ? reactFlowInstance!.toObject() : flow!.data, }); @@ -226,7 +214,6 @@ export default function Page({ const onNodesChangeMod = useCallback( (change: NodeChange[]) => { - console.log("6") onNodesChange(change); //@ts-ignore setTabsState((prev: FlowsState) => { @@ -244,7 +231,6 @@ export default function Page({ const onConnect = useCallback( (params: Connection) => { - console.log("7") takeSnapshot(); setEdges((eds) => addEdge( @@ -276,26 +262,22 @@ export default function Page({ ); const onNodeDragStart: NodeDragHandler = useCallback(() => { - console.log("8") // 👇 make dragging a node undoable takeSnapshot(); // 👉 you can place your event handlers here }, [takeSnapshot]); const onSelectionDragStart: SelectionDragHandler = useCallback(() => { - console.log("9") // 👇 make dragging a selection undoable takeSnapshot(); }, [takeSnapshot]); const onEdgesDelete: OnEdgesDelete = useCallback(() => { - console.log("10") // 👇 make deleting edges undoable takeSnapshot(); }, [takeSnapshot]); const onDragOver = useCallback((event: React.DragEvent) => { - console.log("11") event.preventDefault(); if (event.dataTransfer.types.some((types) => types === "nodedata")) { event.dataTransfer.dropEffect = "move"; @@ -306,7 +288,6 @@ export default function Page({ const onDrop = useCallback( (event: React.DragEvent) => { - console.log("12") event.preventDefault(); if (event.dataTransfer.types.some((types) => types === "nodedata")) { takeSnapshot(); @@ -383,7 +364,9 @@ export default function Page({ ); useEffect(() => { - console.log("13") + setExtraComponent(); + setExtraNavigation({ title: "Components" }); + return () => { if (tabsState && tabsState[flow.id]?.isPending) { saveFlow({ @@ -396,7 +379,6 @@ export default function Page({ const onDelete = useCallback( (mynodes: Node[]) => { - console.log("14") takeSnapshot(); setEdges( edges.filter( @@ -411,13 +393,11 @@ export default function Page({ ); const onEdgeUpdateStart = useCallback(() => { - console.log("15") edgeUpdateSuccessful.current = false; }, []); const onEdgeUpdate = useCallback( (oldEdge: Edge, newConnection: Connection) => { - console.log("16") if (isValidConnection(newConnection, reactFlowInstance!)) { edgeUpdateSuccessful.current = true; setEdges((els) => updateEdge(oldEdge, newConnection, els)); @@ -427,7 +407,6 @@ export default function Page({ ); const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => { - console.log("17") if (!edgeUpdateSuccessful.current) { setEdges((eds) => eds.filter((edg) => edg.id !== edge.id)); } @@ -437,18 +416,15 @@ export default function Page({ const [selectionEnded, setSelectionEnded] = useState(true); const onSelectionEnd = useCallback(() => { - console.log("18") setSelectionEnded(true); }, []); const onSelectionStart = useCallback((event: MouseEvent) => { - console.log("19") event.preventDefault(); setSelectionEnded(false); }, []); // Workaround to show the menu only after the selection has ended. useEffect(() => { - console.log("20") if (selectionEnded && lastSelection && lastSelection.nodes.length > 1) { setSelectionMenuVisible(true); } else { @@ -458,14 +434,12 @@ export default function Page({ const onSelectionChange = useCallback( (flow: OnSelectionChangeParams): void => { - console.log("21") setLastSelection(flow); }, [] ); const onPaneClick = useCallback((flow) => { - console.log("22") setFilterEdge([]); }, []);