From c3bfcca6e20600f07ac489b5ec7ac2c0012a96f8 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Sat, 6 Jan 2024 15:28:05 -0300 Subject: [PATCH] Removed manual saving, only autosave now --- .../src/components/chatComponent/index.tsx | 2 - .../components/PageComponent/index.tsx | 54 +++++++++++++++---- .../extraSidebarComponent/index.tsx | 34 ------------ src/frontend/src/stores/flowStore.ts | 29 ---------- src/frontend/src/stores/flowsManagerStore.ts | 1 - src/frontend/src/types/zustand/flow/index.ts | 3 -- 6 files changed, 44 insertions(+), 79 deletions(-) diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index b975e2b9f..80d6fb991 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -16,7 +16,6 @@ export default function Chat({ flow }: ChatType): JSX.Element { const [canOpen, setCanOpen] = useState(false); const isBuilt = useFlowStore((state) => state.isBuilt); const setIsBuilt = useFlowStore((state) => state.setIsBuilt); - const isPending = useFlowStore((state) => state.isPending); const currentFlowState = useFlowsManagerStore((state) => state.currentFlowState); useEffect(() => { @@ -55,7 +54,6 @@ export default function Chat({ flow }: ChatType): JSX.Element { _.cloneDeep(node.data.node?.template) ); if ( - isPending && JSON.stringify(prevNodes) !== JSON.stringify(currentNodes) ) { setIsBuilt(false); diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 97686ce9e..9f94871f6 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -13,6 +13,7 @@ import ReactFlow, { Controls, Edge, NodeDragHandler, + OnMove, OnSelectionChangeParams, SelectionDragHandler, addEdge, @@ -27,12 +28,13 @@ import useFlowStore from "../../../../stores/flowStore"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType } from "../../../../types/api"; -import { FlowType, NodeType } from "../../../../types/flow"; +import { FlowType, NodeType, targetHandleType } from "../../../../types/flow"; import { generateFlow, generateNodeFromFlow, getNodeId, isValidConnection, + scapeJSONParse, validateSelection, } from "../../../../utils/reactflowUtils"; import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils"; @@ -74,16 +76,13 @@ export default function Page({ const edges = useFlowStore((state) => state.edges); const onNodesChange = useFlowStore((state) => state.onNodesChange); const onEdgesChange = useFlowStore((state) => state.onEdgesChange); - const onConnect = useFlowStore((state) => state.onConnect); const setNodes = useFlowStore((state) => state.setNodes); const setEdges = useFlowStore((state) => state.setEdges); const deleteNode = useFlowStore((state) => state.deleteNode); const deleteEdge = useFlowStore((state) => state.deleteEdge); - const setPending = useFlowStore((state) => state.setPending); const undo = useFlowsManagerStore((state) => state.undo); const redo = useFlowsManagerStore((state) => state.redo); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); - const isPending = useFlowStore((state) => state.isPending); const paste = useFlowStore((state) => state.paste); const position = useRef({ x: 0, y: 0 }); @@ -216,10 +215,15 @@ export default function Page({ }, [takeSnapshot]); const onNodeDragStop: NodeDragHandler = useCallback(() => { - // 👇 make dragging a node undoable autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!); // 👉 you can place your event handlers here - }, [takeSnapshot]); + }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]); + + const onMoveEnd: OnMove = useCallback(() => { + // 👇 make moving the canvas undoable + autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!); + } + , [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]); const onSelectionDragStart: SelectionDragHandler = useCallback(() => { // 👇 make dragging a selection undoable @@ -235,6 +239,39 @@ export default function Page({ } }, []); + const onConnect = useCallback( + (connection: Connection) => { + const newEdges = addEdge( + { + ...connection, + data: { + targetHandle: scapeJSONParse(connection.targetHandle!), + sourceHandle: scapeJSONParse(connection.sourceHandle!), + }, + style: { stroke: "#555" }, + className: + ((scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text" + ? "stroke-foreground " + : "stroke-foreground ") + " stroke-connection", + animated: + (scapeJSONParse(connection.targetHandle!) as targetHandleType) + .type === "Text", + }, + edges + ); + setEdges(newEdges); + useFlowsManagerStore + .getState() + .autoSaveCurrentFlow( + nodes, + newEdges, + reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } + ); + }, + [nodes, edges, setEdges, reactFlowInstance, addEdge] + ); + const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); @@ -345,9 +382,6 @@ export default function Page({ setFilterEdge([]); }, []); - const onMove = useCallback(() => { - if (!isPending) setPending(true); - }, [setPending]); return (
@@ -370,7 +404,6 @@ export default function Page({
state.validApiKey); const isBuilt = useFlowStore((state) => state.isBuilt); - const isPending = useFlowStore((state) => state.isPending); const setErrorData = useAlertStore((state) => state.setErrorData); const [dataFilter, setFilterData] = useState(data); const [search, setSearch] = useState(""); @@ -302,39 +301,6 @@ export default function ExtraSidebar(): JSX.Element { )} -
- {currentFlow && currentFlow.data && ( - - - - )} -
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 8de906c90..273ee2533 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -42,13 +42,11 @@ const useFlowStore = create((set, get) => ({ set({ nodes: applyNodeChanges(changes, get().nodes), }); - if (!get().isPending) set({ isPending: true }); }, onEdgesChange: (changes: EdgeChange[]) => { set({ edges: applyEdgeChanges(changes, get().edges), }); - if (!get().isPending) set({ isPending: true }); }, setNodes: (change) => { let newChange = typeof change === "function" ? change(get().nodes) : change; @@ -96,29 +94,6 @@ const useFlowStore = create((set, get) => ({ getNode: (id: string) => { return get().nodes.find((node) => node.id === id); }, - onConnect: (connection: Connection) => { - set({ - edges: addEdge( - { - ...connection, - data: { - targetHandle: scapeJSONParse(connection.targetHandle!), - sourceHandle: scapeJSONParse(connection.sourceHandle!), - }, - style: { stroke: "#555" }, - className: - ((scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text" - ? "stroke-foreground " - : "stroke-foreground ") + " stroke-connection", - animated: - (scapeJSONParse(connection.targetHandle!) as targetHandleType) - .type === "Text", - }, - get().edges - ), - }); - }, deleteNode: (nodeId) => { get().setNodes( get().nodes.filter((node) => @@ -229,10 +204,6 @@ const useFlowStore = create((set, get) => ({ }); set({ edges: newEdges }); }, - isPending: false, - setPending: (pending: boolean) => { - set({ isPending: pending }); - }, })); export default useFlowStore; diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index 210987909..b076f75e4 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/src/frontend/src/stores/flowsManagerStore.ts @@ -130,7 +130,6 @@ const useFlowsManagerStore = create((set, get) => ({ ); //update tabs state - useFlowStore.setState({ isPending: false }); resolve(); } }) diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index e2d875f87..cacc7f909 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -18,7 +18,6 @@ export type FlowStoreType = { setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void; setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void; getNode: (id: string) => Node | undefined; - onConnect: OnConnect; deleteNode: (nodeId: string | Array) => void; deleteEdge: (edgeId: string | Array) => void; paste: ( @@ -27,6 +26,4 @@ export type FlowStoreType = { ) => void; isBuilt: boolean; setIsBuilt: (isBuilt: boolean) => void; - isPending: boolean; - setPending: (pending: boolean) => void; };