diff --git a/src/visualProgrammingUI/VisProgStores.tsx b/src/visualProgrammingUI/VisProgStores.tsx index 594d188..b4e0d16 100644 --- a/src/visualProgrammingUI/VisProgStores.tsx +++ b/src/visualProgrammingUI/VisProgStores.tsx @@ -38,7 +38,7 @@ const initialEdges = [ ]; // this is our useStore hook that we can use in our components to get parts of the store and call actions -const useStore = create((set, get) => ({ +const useFlowStore = create((set, get) => ({ nodes: initialNodes, edges: initialEdges, edgeReconnectSuccessful: true, @@ -52,6 +52,7 @@ const useStore = create((set, get) => ({ edges: applyEdgeChanges(changes, get().edges) }); }, + // handles connection of newly created edges onConnect: (connection) => { set({ edges: addEdge(connection, get().edges) @@ -87,6 +88,7 @@ const useStore = create((set, get) => ({ setEdges: (edges) => { set({ edges }); }, -})); +}), +); -export default useStore; \ No newline at end of file +export default useFlowStore; \ No newline at end of file diff --git a/src/visualProgrammingUI/VisProgUI.tsx b/src/visualProgrammingUI/VisProgUI.tsx index afcea42..8c449c5 100644 --- a/src/visualProgrammingUI/VisProgUI.tsx +++ b/src/visualProgrammingUI/VisProgUI.tsx @@ -19,7 +19,7 @@ import { import { Sidebar } from './components/DragDropSidebar.tsx'; -import useStore from "./VisProgStores.tsx"; +import useFlowStore from "./VisProgStores.tsx"; import {useShallow} from "zustand/react/shallow"; import type {FlowState} from "./VisProgTypes.tsx"; @@ -33,10 +33,6 @@ const nodeTypes = { norm: NormNode }; - - - - const defaultEdgeOptions = { type: 'default', markerEnd: { @@ -60,13 +56,10 @@ const selector = (state: FlowState) => ({ const VisProgUI = ()=> { - const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useStore( + const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useFlowStore( useShallow(selector), ); - // handles connection of newly created edges - - return (