147 lines
3.7 KiB
TypeScript
147 lines
3.7 KiB
TypeScript
import {
|
|
Background,
|
|
Controls,
|
|
Panel,
|
|
ReactFlow,
|
|
ReactFlowProvider,
|
|
MarkerType,
|
|
} from '@xyflow/react';
|
|
import '@xyflow/react/dist/style.css';
|
|
import {useShallow} from 'zustand/react/shallow';
|
|
|
|
import {
|
|
StartNodeComponent,
|
|
EndNodeComponent,
|
|
PhaseNodeComponent,
|
|
NormNodeComponent
|
|
} from './visualProgrammingUI/components/NodeDefinitions.tsx';
|
|
import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
|
|
import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
|
|
import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
|
|
import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
|
|
import styles from './VisProg.module.css'
|
|
|
|
// --| config starting params for flow |--
|
|
|
|
/**
|
|
* contains the types of all nodes that are available in the editor
|
|
*/
|
|
const NODE_TYPES = {
|
|
start: StartNodeComponent,
|
|
end: EndNodeComponent,
|
|
phase: PhaseNodeComponent,
|
|
norm: NormNodeComponent
|
|
};
|
|
|
|
/**
|
|
* defines how the default edge looks inside the editor
|
|
*/
|
|
const DEFAULT_EDGE_OPTIONS = {
|
|
type: 'default',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: '#505050',
|
|
},
|
|
};
|
|
|
|
|
|
/**
|
|
* defines what functions in the FlowState store map to which names,
|
|
* @param state
|
|
*/
|
|
const selector = (state: FlowState) => ({
|
|
nodes: state.nodes,
|
|
edges: state.edges,
|
|
onNodesChange: state.onNodesChange,
|
|
onEdgesChange: state.onEdgesChange,
|
|
onConnect: state.onConnect,
|
|
onReconnectStart: state.onReconnectStart,
|
|
onReconnectEnd: state.onReconnectEnd,
|
|
onReconnect: state.onReconnect
|
|
});
|
|
|
|
// --| define ReactFlow editor |--
|
|
|
|
/**
|
|
* Defines the ReactFlow visual programming editor component
|
|
* any implementations of editor logic should be encapsulated where possible
|
|
* so the Component definition stays as readable as possible
|
|
* @constructor
|
|
*/
|
|
const VisProgUI = () => {
|
|
const {
|
|
nodes, edges,
|
|
onNodesChange,
|
|
onEdgesChange,
|
|
onConnect,
|
|
onReconnect,
|
|
onReconnectStart,
|
|
onReconnectEnd
|
|
} = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
|
|
|
|
return (
|
|
<div className={styles.outerEditorContainer}>
|
|
<div className={styles.innerEditorContainer}>
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
|
|
nodeTypes={NODE_TYPES}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onReconnect={onReconnect}
|
|
onReconnectStart={onReconnectStart}
|
|
onReconnectEnd={onReconnectEnd}
|
|
onConnect={onConnect}
|
|
snapToGrid
|
|
fitView
|
|
proOptions={{hideAttribution: true}}
|
|
>
|
|
<Panel position="top-center" className={styles.dndPanel}>
|
|
<DndToolbar/> {/* contains the drag and drop panel for nodes */}
|
|
</Panel>
|
|
<Controls/>
|
|
<Background/>
|
|
</ReactFlow>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
/**
|
|
* Places the VisProgUI component inside a ReactFlowProvider
|
|
*
|
|
* Wrapping the editor component inside a ReactFlowProvider
|
|
* allows us to access and interact with the components inside the editor, outside the editor definition,
|
|
* thus facilitating the addition of node specific functions inside their node definitions
|
|
*/
|
|
function VisualProgrammingUI() {
|
|
return (
|
|
<ReactFlowProvider>
|
|
<VisProgUI/>
|
|
</ReactFlowProvider>
|
|
);
|
|
}
|
|
|
|
// currently outputs the prepared program to the console
|
|
function runProgram() {
|
|
const program = graphReducer();
|
|
console.log(program);
|
|
}
|
|
|
|
/**
|
|
* houses the entire page, so also UI elements
|
|
* that are not a part of the Visual Programming UI
|
|
* @constructor
|
|
*/
|
|
function VisProgPage() {
|
|
return (
|
|
<>
|
|
<VisualProgrammingUI/>
|
|
<button onClick={runProgram}>run program</button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default VisProgPage |