@@ -53,10 +63,7 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
OpenAI+
*/}
- {button &&
- button
- }
-
+ {button && button}
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index c3d3aed07..d59078836 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -28,10 +28,7 @@ export default function Header() {
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 94d3b0f59..290a46cb4 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -6,7 +6,7 @@ export default function ToggleShadComponent({
enabled,
setEnabled,
disabled,
- size
+ size,
}: ToggleComponentType) {
useEffect(() => {
if (disabled) {
@@ -14,7 +14,7 @@ export default function ToggleShadComponent({
}
}, [disabled, setEnabled]);
let scaleX, scaleY;
- switch(size){
+ switch (size) {
case "small":
scaleX = 0.6;
scaleY = 0.6;
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 285da5277..838df3f15 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -126,4 +126,3 @@ export const EXPORT_CODE_DIALOG =
*/
export const INPUT_STYLE =
" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
-
diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 5e874c702..61d769aa1 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -14,17 +14,17 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
<>
-
-
-
-
-
+
+
+
+
+
{children}
-
-
-
-
-
+
+
+
+
+
diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx
index 573a260e0..eed8eb870 100644
--- a/src/frontend/src/contexts/undoRedoContext.tsx
+++ b/src/frontend/src/contexts/undoRedoContext.tsx
@@ -1,4 +1,10 @@
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react";
import { Edge, Node, useReactFlow } from "reactflow";
import { cloneDeep } from "lodash";
import { TabsContext } from "./tabsContext";
@@ -10,22 +16,22 @@ type undoRedoContextType = {
};
type UseUndoRedoOptions = {
- maxHistorySize: number;
- enableShortcuts: boolean;
- };
-
- type UseUndoRedo = (options?: UseUndoRedoOptions) => {
- undo: () => void;
- redo: () => void;
- takeSnapshot: () => void;
- canUndo: boolean;
- canRedo: boolean;
- };
-
- type HistoryItem = {
- nodes: Node[];
- edges: Edge[];
- };
+ maxHistorySize: number;
+ enableShortcuts: boolean;
+};
+
+type UseUndoRedo = (options?: UseUndoRedoOptions) => {
+ undo: () => void;
+ redo: () => void;
+ takeSnapshot: () => void;
+ canUndo: boolean;
+ canRedo: boolean;
+};
+
+type HistoryItem = {
+ nodes: Node[];
+ edges: Edge[];
+};
const initialValue = {
undo: () => {},
@@ -34,152 +40,144 @@ const initialValue = {
};
const defaultOptions: UseUndoRedoOptions = {
- maxHistorySize: 100,
- enableShortcuts: true,
- };
+ maxHistorySize: 100,
+ enableShortcuts: true,
+};
export const undoRedoContext = createContext
(initialValue);
export function UndoRedoProvider({ children }) {
- const { tabId, flows } = useContext(TabsContext);
+ const { tabId, flows } = useContext(TabsContext);
- const [past, setPast] = useState(flows.map(() => []));
- const [future, setFuture] = useState(flows.map(() => []));
- const [tabIndex, setTabIndex] = useState(flows.findIndex((f) => f.id === tabId));
-
- useEffect(() => {
- // whenever the flows variable changes, we need to add one array to the past and future states
- setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
- setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
- setTabIndex(flows.findIndex((f) => f.id === tabId));
+ const [past, setPast] = useState(flows.map(() => []));
+ const [future, setFuture] = useState(flows.map(() => []));
+ const [tabIndex, setTabIndex] = useState(
+ flows.findIndex((f) => f.id === tabId)
+ );
- }, [flows, tabId]);
-
- const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
-
- const takeSnapshot = useCallback(() => {
- // push the current graph to the past state
- console.log(past);
- console.log(tabIndex);
+ useEffect(() => {
+ // whenever the flows variable changes, we need to add one array to the past and future states
+ setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
+ setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
+ setTabIndex(flows.findIndex((f) => f.id === tabId));
+ }, [flows, tabId]);
+
+ const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
+
+ const takeSnapshot = useCallback(() => {
+ // push the current graph to the past state
+ console.log(past);
+ console.log(tabIndex);
+ setPast((old) => {
+ let newPast = cloneDeep(old);
+ newPast[tabIndex] = old[tabIndex].slice(
+ old[tabIndex].length - defaultOptions.maxHistorySize + 1,
+ old[tabIndex].length
+ );
+ newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+ return newPast;
+ });
+
+ // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
+ setFuture((old) => {
+ let newFuture = cloneDeep(old);
+ newFuture[tabIndex] = [];
+ return newFuture;
+ });
+ }, [getNodes, getEdges, past, future, flows, tabId, setPast, setFuture]);
+
+ const undo = useCallback(() => {
+ // get the last state that we want to go back to
+ const pastState = past[tabIndex][past[tabIndex].length - 1];
+
+ if (pastState) {
+ // first we remove the state from the history
setPast((old) => {
let newPast = cloneDeep(old);
- newPast[tabIndex] = old[tabIndex].slice(
- old[tabIndex].length - defaultOptions.maxHistorySize + 1,
- old[tabIndex].length
- );
+ newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+ return newPast;
+ });
+ // we store the current graph for the redo operation
+ setFuture((old) => {
+ let newFuture = cloneDeep(old);
+ newFuture[tabIndex] = old[tabIndex];
+ newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+ return newFuture;
+ });
+ // now we can set the graph to the past state
+ setNodes(pastState.nodes);
+ setEdges(pastState.edges);
+ }
+ }, [
+ setNodes,
+ setEdges,
+ getNodes,
+ getEdges,
+ future,
+ past,
+ setFuture,
+ setPast,
+ tabIndex,
+ ]);
+
+ const redo = useCallback(() => {
+ const futureState = future[tabIndex][future[tabIndex].length - 1];
+
+ if (futureState) {
+ setFuture((old) => {
+ let newFuture = cloneDeep(old);
+ newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+ return newFuture;
+ });
+ setPast((old) => {
+ let newPast = cloneDeep(old);
+ newPast[tabIndex] = old[tabIndex];
newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
return newPast;
});
-
- // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
- setFuture((old) => {
- let newFuture = cloneDeep(old);
- newFuture[tabIndex] = [];
- return newFuture;
- });
- }, [
- getNodes,
- getEdges,
- past,
- future,
- flows,
- tabId,
- setPast,
- setFuture,
- ]);
-
- const undo = useCallback(() => {
- // get the last state that we want to go back to
- const pastState = past[tabIndex][past[tabIndex].length - 1];
-
- if (pastState) {
- // first we remove the state from the history
- setPast((old) => {
- let newPast = cloneDeep(old);
- newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
- return newPast;
- });
- // we store the current graph for the redo operation
- setFuture((old) => {
- let newFuture = cloneDeep(old);
- newFuture[tabIndex] = old[tabIndex];
- newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
- return newFuture;
- });
- // now we can set the graph to the past state
- setNodes(pastState.nodes);
- setEdges(pastState.edges);
+ setNodes(futureState.nodes);
+ setEdges(futureState.edges);
+ }
+ }, [
+ future,
+ past,
+ setFuture,
+ setPast,
+ setNodes,
+ setEdges,
+ getNodes,
+ getEdges,
+ future,
+ tabIndex,
+ ]);
+
+ useEffect(() => {
+ // this effect is used to attach the global event handlers
+ if (!defaultOptions.enableShortcuts) {
+ return;
+ }
+
+ const keyDownHandler = (event: KeyboardEvent) => {
+ if (
+ event.key === "z" &&
+ (event.ctrlKey || event.metaKey) &&
+ event.shiftKey
+ ) {
+ redo();
+ } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
+ event.preventDefault(); // prevent the default action
+ redo();
+ } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+ undo();
}
- }, [
- setNodes,
- setEdges,
- getNodes,
- getEdges,
- future,
- past,
- setFuture,
- setPast,
- tabIndex,
- ]);
-
- const redo = useCallback(() => {
- const futureState = future[tabIndex][future[tabIndex].length - 1];
-
- if (futureState) {
- setFuture((old) => {
- let newFuture = cloneDeep(old);
- newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
- return newFuture;
- });
- setPast((old) => {
- let newPast = cloneDeep(old);
- newPast[tabIndex] = old[tabIndex];
- newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
- return newPast;
- });
- setNodes(futureState.nodes);
- setEdges(futureState.edges);
- }
- }, [
- future,
- past,
- setFuture,
- setPast,
- setNodes,
- setEdges,
- getNodes,
- getEdges,
- future,
- tabIndex,
- ]);
-
- useEffect(() => {
- // this effect is used to attach the global event handlers
- if (!defaultOptions.enableShortcuts) {
- return;
- }
-
- const keyDownHandler = (event: KeyboardEvent) => {
- if (
- event.key === "z" &&
- (event.ctrlKey || event.metaKey) &&
- event.shiftKey
- ) {
- redo();
- } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
- event.preventDefault(); // prevent the default action
- redo();
- } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
- undo();
- }
- };
-
- document.addEventListener("keydown", keyDownHandler);
-
- return () => {
- document.removeEventListener("keydown", keyDownHandler);
- };
- }, [undo, redo]);
+ };
+
+ document.addEventListener("keydown", keyDownHandler);
+
+ return () => {
+ document.removeEventListener("keydown", keyDownHandler);
+ };
+ }, [undo, redo]);
return (
{
* @returns {Promise} The saved flow data.
* @throws Will throw an error if saving fails.
*/
-export async function saveFlowToDatabase(newFlow: FlowType): Promise {
+export async function saveFlowToDatabase(newFlow: {
+ name: string;
+ id: string;
+ data: ReactFlowJsonObject;
+ description: string;
+ style?: FlowStyleType;
+}): Promise {
try {
const response = await axios.post("/api/v1/flows/", {
name: newFlow.name,
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index cfb9d06f8..6d4cee220 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -52,7 +52,6 @@ export default function FlowSettingsModal() {
Settings
-
{SETTINGS_DIALOG_SUBTITLE}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index d1fe7a76a..c9c50bb27 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,18 +1,18 @@
-import { Route, Routes } from "react-router-dom"
+import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/MainPage";
import FlowPage from "./pages/FlowPage";
import CommunityPage from "./pages/CommunityPage";
const Router = () => {
- return(
-
- }/>
- }/>
-
- }/>
-
-
- )
- }
-
- export default Router;
\ No newline at end of file
+ return (
+
+ } />
+ } />
+
+ } />
+
+
+ );
+};
+
+export default Router;