70 lines
1.4 KiB
TypeScript
70 lines
1.4 KiB
TypeScript
import create from "zustand";
|
|
import {
|
|
Connection,
|
|
Edge,
|
|
EdgeChange,
|
|
Node,
|
|
NodeChange,
|
|
addEdge,
|
|
OnNodesChange,
|
|
OnEdgesChange,
|
|
OnConnect,
|
|
applyNodeChanges,
|
|
applyEdgeChanges,
|
|
XYPosition,
|
|
} from "react-flow-renderer";
|
|
import { nanoid } from "nanoid";
|
|
|
|
import initialNodes from "./nodes";
|
|
import initialEdges from "./edges";
|
|
|
|
type FlowEditorStore = {
|
|
nodes: Node[];
|
|
edges: Edge[];
|
|
panelClosed: boolean;
|
|
onNodesChange: OnNodesChange;
|
|
onEdgesChange: OnEdgesChange;
|
|
onConnect: OnConnect;
|
|
addNode: (type: string, position: XYPosition) => void;
|
|
togglePanelState: () => void;
|
|
};
|
|
|
|
const useStore = create<FlowEditorStore>((set, get) => ({
|
|
nodes: initialNodes,
|
|
edges: initialEdges,
|
|
panelClosed: false,
|
|
onNodesChange: (changes: NodeChange[]) => {
|
|
set({
|
|
nodes: applyNodeChanges(changes, get().nodes),
|
|
});
|
|
},
|
|
onEdgesChange: (changes: EdgeChange[]) => {
|
|
set({
|
|
edges: applyEdgeChanges(changes, get().edges),
|
|
});
|
|
},
|
|
onConnect: (connection: Connection) => {
|
|
set({
|
|
edges: addEdge(connection, get().edges),
|
|
});
|
|
},
|
|
addNode: (type: string, position: XYPosition) => {
|
|
const newNode: Node = {
|
|
id: `node_${nanoid()}`,
|
|
type: type,
|
|
position: position,
|
|
data: { label: `${type} node` },
|
|
};
|
|
set({
|
|
nodes: get().nodes.concat(newNode),
|
|
});
|
|
},
|
|
togglePanelState: () => {
|
|
set({
|
|
panelClosed: !get().panelClosed,
|
|
});
|
|
},
|
|
}));
|
|
|
|
export default useStore;
|