diff --git a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx index b4e0d16..0474f07 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx @@ -1,40 +1,40 @@ -import { create } from 'zustand'; +import {create} from 'zustand'; import { - applyNodeChanges, - applyEdgeChanges, - addEdge, - reconnectEdge, type Edge, type Connection + applyNodeChanges, + applyEdgeChanges, + addEdge, + reconnectEdge, type Edge, type Connection } from '@xyflow/react'; -import { type FlowState } from './VisProgTypes.tsx'; +import {type FlowState} from './VisProgTypes.tsx'; const initialNodes = [ - { - id: 'start', - type: 'start', - position: {x: 0, y: 0}, - data: {label: 'start'} - }, - { - id: 'genericPhase', - type: 'phase', - position: {x: 0, y: 150}, - data: {label: 'Generic Phase', number: 1}, - }, - { - id: 'end', - type: 'end', - position: {x: 0, y: 300}, - data: {label: 'End'} - } + { + id: 'start', + type: 'start', + position: {x: 0, y: 0}, + data: {label: 'start'} + }, + { + id: 'genericPhase', + type: 'phase', + position: {x: 0, y: 150}, + data: {label: 'Generic Phase', number: 1}, + }, + { + id: 'end', + type: 'end', + position: {x: 0, y: 300}, + data: {label: 'End'} + } ]; const initialEdges = [ - { - id: 'start-end', - source: 'start', - target: 'end' - } + { + id: 'start-end', + source: 'start', + target: 'end' + } ]; // this is our useStore hook that we can use in our components to get parts of the store and call actions @@ -43,52 +43,52 @@ const useFlowStore = create((set, get) => ({ edges: initialEdges, edgeReconnectSuccessful: true, onNodesChange: (changes) => { - set({ - nodes: applyNodeChanges(changes, get().nodes) - }); + set({ + nodes: applyNodeChanges(changes, get().nodes) + }); }, onEdgesChange: (changes) => { - set({ - edges: applyEdgeChanges(changes, get().edges) - }); + set({ + edges: applyEdgeChanges(changes, get().edges) + }); }, // handles connection of newly created edges onConnect: (connection) => { - set({ - edges: addEdge(connection, get().edges) - }); + set({ + edges: addEdge(connection, get().edges) + }); }, // handles attempted reconnections of a previously disconnected edge onReconnect: (oldEdge: Edge, newConnection: Connection) => { - get().edgeReconnectSuccessful = true; - set({ - edges: reconnectEdge(oldEdge, newConnection, get().edges) - }); + get().edgeReconnectSuccessful = true; + set({ + edges: reconnectEdge(oldEdge, newConnection, get().edges) + }); }, // Handles initiation of reconnection of edges that are manually disconnected from a node onReconnectStart: () => { - set({ - edgeReconnectSuccessful: false - }); + set({ + edgeReconnectSuccessful: false + }); }, // Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred onReconnectEnd: (_: unknown, edge: { id: string; }) => { - if (!get().edgeReconnectSuccessful) { - set({ - edges: get().edges.filter((e) => e.id !== edge.id), - }); - } + if (!get().edgeReconnectSuccessful) { set({ - edgeReconnectSuccessful: true + edges: get().edges.filter((e) => e.id !== edge.id), }); + } + set({ + edgeReconnectSuccessful: true + }); }, setNodes: (nodes) => { - set({ nodes }); + set({nodes}); }, setEdges: (edges) => { - set({ edges }); + set({edges}); }, -}), + }), ); export default useFlowStore; \ No newline at end of file