pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: improved code style and naming

Browse Source 
BREAKING: renamed useStore to useFlowStore

ref: N25B-114
This commit is contained in:
JGerla
2025-10-08 15:47:59 +02:00
parent 1a5b1e7617
commit 47266c4ef0
2 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/visualProgrammingUI/VisProgStores.tsx
View File

@@ -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 // this is our useStore hook that we can use in our components to get parts of the store and call actions
const useStore = create<FlowState>((set, get) => ({ const useFlowStore = create<FlowState>((set, get) => ({
nodes: initialNodes, nodes: initialNodes,
edges: initialEdges, edges: initialEdges,
edgeReconnectSuccessful: true, edgeReconnectSuccessful: true,
@@ -52,6 +52,7 @@ const useStore = create<FlowState>((set, get) => ({
edges: applyEdgeChanges(changes, get().edges) edges: applyEdgeChanges(changes, get().edges)
}); });
}, },
// handles connection of newly created edges
onConnect: (connection) => { onConnect: (connection) => {
set({ set({
edges: addEdge(connection, get().edges) edges: addEdge(connection, get().edges)
@@ -87,6 +88,7 @@ const useStore = create<FlowState>((set, get) => ({
setEdges: (edges) => { setEdges: (edges) => {
set({ edges }); set({ edges });
}, },
})); }),
);
export default useStore; export default useFlowStore;

11
src/visualProgrammingUI/VisProgUI.tsx
View File

@@ -19,7 +19,7 @@ import {
import { Sidebar } from './components/DragDropSidebar.tsx'; import { Sidebar } from './components/DragDropSidebar.tsx';
import useStore from "./VisProgStores.tsx"; import useFlowStore from "./VisProgStores.tsx";
import {useShallow} from "zustand/react/shallow"; import {useShallow} from "zustand/react/shallow";
import type {FlowState} from "./VisProgTypes.tsx"; import type {FlowState} from "./VisProgTypes.tsx";
@@ -33,10 +33,6 @@ const nodeTypes = {
norm: NormNode norm: NormNode
}; };
const defaultEdgeOptions = { const defaultEdgeOptions = {
type: 'default', type: 'default',
markerEnd: { markerEnd: {
@@ -60,13 +56,10 @@ const selector = (state: FlowState) => ({
const VisProgUI = ()=> { const VisProgUI = ()=> {
const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useStore( const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useFlowStore(
useShallow(selector), useShallow(selector),
); );
// handles connection of newly created edges
return ( return (
<div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}> <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
<div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}> <div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>