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

Merge branch 'dev' of ssh://git.science.uu.nl/ics/sp/2025/n25b/pepperplus-ui into fix/deep-clone-data

Browse Source
This commit is contained in:
JobvAlewijk
2025-12-07 17:07:00 +01:00
parent 95397ceccc 80aa1fca2b
commit ed11680771
28 changed files with 858 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/VisProgPage/VisProg.tsx
View File

@@ -7,6 +7,7 @@ import {
MarkerType,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import {useEffect} from "react";
import {useShallow} from 'zustand/react/shallow';
import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
@@ -41,7 +42,11 @@ const selector = (state: FlowState) => ({
onConnect: state.onConnect,
onReconnectStart: state.onReconnectStart,
onReconnectEnd: state.onReconnectEnd,
onReconnect: state.onReconnect
onReconnect: state.onReconnect,
undo: state.undo,
redo: state.redo,
beginBatchAction: state.beginBatchAction,
endBatchAction: state.endBatchAction
});
// --| define ReactFlow editor |--
@@ -60,9 +65,23 @@ const VisProgUI = () => {
onConnect,
onReconnect,
onReconnectStart,
onReconnectEnd
onReconnectEnd,
undo,
redo,
beginBatchAction,
endBatchAction
} = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
// adds ctrl+z and ctrl+y support to respectively undo and redo actions
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'z') undo();
if (e.ctrlKey && e.key === 'y') redo();
};
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
});
return (
<div className={`${styles.innerEditorContainer} round-lg border-lg`}>
<ReactFlow
@@ -76,6 +95,8 @@ const VisProgUI = () => {
onReconnectStart={onReconnectStart}
onReconnectEnd={onReconnectEnd}
onConnect={onConnect}
onNodeDragStart={beginBatchAction}
onNodeDragStop={endBatchAction}
snapToGrid
fitView
proOptions={{hideAttribution: true}}
@@ -83,6 +104,10 @@ const VisProgUI = () => {
<Panel position="top-center" className={styles.dndPanel}>
<DndToolbar/> {/* contains the drag and drop panel for nodes */}
</Panel>
<Panel position="bottom-center">
<button onClick={() => undo()}>undo</button>
<button onClick={() => redo()}>Redo</button>
</Panel>
<Controls/>
<Background/>
</ReactFlow>
@@ -90,8 +115,6 @@ const VisProgUI = () => {
);
};
/**
* Places the VisProgUI component inside a ReactFlowProvider
*

129
src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts Normal file
View File

@@ -0,0 +1,129 @@
import type {Edge, Node} from "@xyflow/react";
import type {StateCreator, StoreApi } from 'zustand/vanilla';
import type {FlowState} from "./VisProgTypes.tsx";
export type FlowSnapshot = {
nodes: Node[];
edges: Edge[];
}
/**
* A reduced version of the flowState type,
* This removes the functions that are provided by UndoRedo from the expected input type
*/
type BaseFlowState = Omit<FlowState, 'undo' | 'redo' | 'pushSnapshot' | 'beginBatchAction' | 'endBatchAction'>;
/**
* UndoRedo is implemented as a middleware for the FlowState store,
* this allows us to keep the undo redo logic separate from the flowState,
* and thus from the internal editor logic
*
* Allows users to undo and redo actions in the visual programming editor
*
* @param {(set: StoreApi<FlowState>["setState"], get: () => FlowState, api: StoreApi<FlowState>) => BaseFlowState} config
* @returns {StateCreator<FlowState>}
* @constructor
*/
export const UndoRedo = (
config: (
set: StoreApi<FlowState>['setState'],
get: () => FlowState,
api: StoreApi<FlowState>
) => BaseFlowState ) : StateCreator<FlowState> => (set, get, api) => {
let batchTimeout: number | null = null;
/**
* Captures the current state for
*
* @param {BaseFlowState} state - the current state of the editor
* @returns {FlowSnapshot} - returns a snapshot of the current editor state
*/
const getSnapshot = (state : BaseFlowState) : FlowSnapshot => ({
nodes: state.nodes,
edges: state.edges
});
const initialState = config(set, get, api);
return {
...initialState,
/**
* Adds a snapshot of the current state to the undo history
*/
pushSnapshot: () => {
const state = get();
// we don't add new snapshots during an ongoing batch action
if (!state.isBatchAction) {
set({
past: [...state.past, getSnapshot(state)],
future: []
});
}
},
/**
* Undoes the last action from the editor,
* The state before undoing is added to the future for potential redoing
*/
undo: () => {
const state = get();
if (!state.past.length) return;
const snapshot = state.past.pop()!; // pop last snapshot
const currentSnapshot: FlowSnapshot = getSnapshot(state);
set({
nodes: snapshot.nodes,
edges: snapshot.edges,
});
state.future.push(currentSnapshot); // push current to redo
},
/**
* redoes the last undone action,
* The state before redoing is added to the past for potential undoing
*/
redo: () => {
const state = get();
if (!state.future.length) return;
const snapshot = state.future.pop()!; // pop last redo
const currentSnapshot: FlowSnapshot = getSnapshot(state);
set({
nodes: snapshot.nodes,
edges: snapshot.edges,
});
state.past.push(currentSnapshot); // push current to undo
},
/**
* Begins a batched action
*
* An example of a batched action is dragging a node in the editor,
* where we want the entire action of moving a node to a different position
* to be covered by one undoable snapshot
*/
beginBatchAction: () => {
get().pushSnapshot();
set({ isBatchAction: true });
if (batchTimeout) clearTimeout(batchTimeout);
},
/**
* Ends a batched action,
* a very short timeout is used to prevent new snapshots from being added
* until we are certain that the batch event is finished
*/
endBatchAction: () => {
batchTimeout = window.setTimeout(() => {
set({ isBatchAction: false });
}, 10);
}
}
}

2
src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
View File

@@ -79,6 +79,7 @@ export const NodeConnects = {
export const NodeDeletes = {
start: () => false,
end: () => false,
test: () => false, // Used for coverage of universal/ undefined nodes
}
/**
@@ -91,4 +92,5 @@ export const NodesInPhase = {
start: () => false,
end: () => false,
phase: () => false,
test: () => false, // Used for coverage of universal/ undefined nodes
}

95
src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
View File

@@ -10,6 +10,7 @@ import {
} from '@xyflow/react';
import type { FlowState } from './VisProgTypes';
import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
import { UndoRedo } from "./EditorUndoRedo.ts";
/**
@@ -34,7 +35,7 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
return {...defaultData, ...newData}
}
//* Initial nodes to populate the flow at startup.
//* Initial nodes, created by using createNode. */
const initialNodes : Node[] = [
createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
@@ -42,7 +43,7 @@ const initialNodes : Node[] = [
createNode('norms-1', 'norm', {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"]}),
];
//* Initial edges to connect the startup nodes.
// * Initial edges * /
const initialEdges: Edge[] = [
{ id: 'start-phase-1', source: 'start', target: 'phase-1' },
{ id: 'phase-1-end', source: 'phase-1', target: 'end' },
@@ -50,17 +51,17 @@ const initialEdges: Edge[] = [
/**
* How we have defined the functions for our FlowState.
* We have the normal functionality of a default FlowState with some exceptions to account for extra functionality.
* The biggest changes are in onConnect and onDelete, which we have given extra functionality based on the nodes defined functions.
*
* useFlowStore contains the implementation for all editor functionality
* and stores the current state of the visual programming editor
*
* * Provides:
* - Node and edge state management
* - Node creation, deletion, and updates
* - Custom connection handling via NodeConnects
* - Edge reconnection handling
* - Undo Redo functionality through custom middleware
*/
const useFlowStore = create<FlowState>((set, get) => ({
const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
nodes: initialNodes,
edges: initialEdges,
edgeReconnectSuccessful: true,
@@ -68,8 +69,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
/**
* Handles changes to nodes triggered by ReactFlow.
*/
onNodesChange: (changes) =>
set({nodes: applyNodeChanges(changes, get().nodes)}),
onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
/**
* Handles changes to edges triggered by ReactFlow.
@@ -81,28 +81,34 @@ const useFlowStore = create<FlowState>((set, get) => ({
* Updates edges and calls the node-specific connection functions.
*/
onConnect: (connection) => {
const edges = addEdge(connection, get().edges);
const nodes = get().nodes;
// connection has: { source, sourceHandle, target, targetHandle }
// Let's find the source and target ID's.
const sourceNode = nodes.find((n) => n.id == connection.source);
const targetNode = nodes.find((n) => n.id == connection.target);
// In case the nodes weren't found, return basic functionality.
if (sourceNode == undefined || targetNode == undefined || sourceNode.type == undefined || targetNode.type == undefined) {
set({ nodes, edges });
return;
}
get().pushSnapshot();
// We should find out how their data changes by calling their respective functions.
const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
// We're going to have to update their data based on how they want to update it.
sourceConnectFunction(sourceNode, targetNode, true)
targetConnectFunction(targetNode, sourceNode, false)
set({ nodes, edges });
},
const edges = addEdge(connection, get().edges);
const nodes = get().nodes;
// connection has: { source, sourceHandle, target, targetHandle }
// Let's find the source and target ID's.
const sourceNode = nodes.find((n) => n.id == connection.source);
const targetNode = nodes.find((n) => n.id == connection.target);
// In case the nodes weren't found, return basic functionality.
if ( sourceNode == undefined
|| targetNode == undefined
|| sourceNode.type == undefined
|| targetNode.type == undefined
){
set({ nodes, edges });
return;
}
// We should find out how their data changes by calling their respective functions.
const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
// We're going to have to update their data based on how they want to update it.
sourceConnectFunction(sourceNode, targetNode, true)
targetConnectFunction(targetNode, sourceNode, false)
set({ nodes, edges });
},
/**
* Handles reconnecting an edge between nodes.
@@ -112,19 +118,32 @@ const useFlowStore = create<FlowState>((set, get) => ({
set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
},
onReconnectStart: () => set({ edgeReconnectSuccessful: false }),
onReconnectStart: () => {
get().pushSnapshot();
set({ edgeReconnectSuccessful: false })
},
/**
* handles potential dropping (deleting) of an edge
* if it is not reconnected to a node after detaching it
*
* @param _evt - the event
* @param {{id: string}} edge - the described edge
*/
onReconnectEnd: (_evt, edge) => {
if (!get().edgeReconnectSuccessful) {
set({ edges: get().edges.filter((e) => e.id !== edge.id) });
}
set({ edgeReconnectSuccessful: true });
},
/**
* Deletes a node by ID, respecting NodeDeletes rules.
* Also removes all edges connected to that node.
*/
deleteNode: (nodeId) => {
get().pushSnapshot();
// Let's find our node to check if they have a special deletion function
const ourNode = get().nodes.find((n)=>n.id==nodeId);
const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]
@@ -135,7 +154,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
nodes: get().nodes.filter((n) => n.id !== nodeId),
edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
})}
},
},
/**
* Replaces the entire nodes array in the store.
@@ -151,6 +170,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
* Updates the data of a node by merging new data with existing data.
*/
updateNodeData: (nodeId, data) => {
get().pushSnapshot();
set({
nodes: get().nodes.map((node) => {
if (node.id === nodeId) {
@@ -165,8 +185,15 @@ const useFlowStore = create<FlowState>((set, get) => ({
* Adds a new node to the flow store.
*/
addNode: (node: Node) => {
get().pushSnapshot();
set({ nodes: [...get().nodes, node] });
},
}));
// undo redo default values
past: [],
future: [],
isBatchAction: false,
}))
);
export default useFlowStore;

12
src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
View File

@@ -1,6 +1,8 @@
// VisProgTypes.ts
import type { Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node } from '@xyflow/react';
import type { NodeTypes } from './NodeRegistry';
import type {FlowSnapshot} from "./EditorUndoRedo.ts";
/**
* Type representing all registered node types.
@@ -74,4 +76,14 @@ export type FlowState = {
* @param node - the Node object to add
*/
addNode: (node: Node) => void;
// UndoRedo Types
past: FlowSnapshot[];
future: FlowSnapshot[];
pushSnapshot: () => void;
isBatchAction: boolean;
beginBatchAction: () => void;
endBatchAction: () => void;
undo: () => void;
redo: () => void;
};

8
src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
View File

@@ -68,8 +68,8 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
* @param nodeType - The type of node to create (from `NodeTypes`).
* @param position - The XY position in the flow canvas where the node will appear.
*/
function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
const { nodes, setNodes } = useFlowStore.getState();
function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
const { nodes, addNode } = useFlowStore.getState();
// Load any predefined data for this node type.
const defaultData = NodeDefaults[nodeType] ?? {}
@@ -94,7 +94,7 @@ function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
position,
data: JSON.parse(JSON.stringify(defaultData))
}
setNodes([...nodes, newNode]);
addNode(newNode);
}
/**
@@ -129,7 +129,7 @@ export function DndToolbar() {
if (isInFlow) {
const position = screenToFlowPosition(screenPosition);
addNode(nodeType, position);
addNodeToFlow(nodeType, position);
}
},
[screenToFlowPosition],

21
src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
View File

@@ -32,23 +32,22 @@ export type GoalNode = Node<GoalNodeData>
* @param props NodeProps, like id, label, children
* @returns React.JSX.Element
*/
export default function GoalNode(props: NodeProps<GoalNode>) {
const data = props.data
export default function GoalNode({id, data}: NodeProps<GoalNode>) {
const {updateNodeData} = useFlowStore();
const text_input_id = `goal_${props.id}_text_input`;
const checkbox_id = `goal_${props.id}_checkbox`;
const text_input_id = `goal_${id}_text_input`;
const checkbox_id = `goal_${id}_checkbox`;
const setDescription = (value: string) => {
updateNodeData(props.id, {...data, description: value});
updateNodeData(id, {...data, description: value});
}
const setAchieved = (value: boolean) => {
updateNodeData(props.id, {...data, achieved: value});
updateNodeData(id, {...data, achieved: value});
}
return <>
<Toolbar nodeId={props.id} allowDelete={true}/>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
<div className={"flex-row gap-md"}>
<label htmlFor={text_input_id}>Goal:</label>
@@ -64,7 +63,7 @@ export default function GoalNode(props: NodeProps<GoalNode>) {
<input
id={checkbox_id}
type={"checkbox"}
value={data.achieved ? "checked" : ""}
checked={data.achieved || false}
onChange={(e) => setAchieved(e.target.checked)}
/>
</div>
@@ -89,6 +88,12 @@ export function GoalReduce(node: Node, _nodes: Node[]) {
}
}
/**
* This function is called whenever a connection is made with this node type (Goal)
* @param _thisNode the node of this node type which function is called
* @param _otherNode the other node which was part of the connection
* @param _isThisSource whether this instance of the node was the source in the connection, true = yes.
*/
export function GoalConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
// Replace this for connection logic
}

14
src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
View File

@@ -78,16 +78,12 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
}
/**
* Reduces each Trigger, including its children down into its relevant data.
* @param node: The Node Properties of this node.
* @param _nodes: all the nodes in the graph.
* @returns A simplified object containing the node label and its list of triggers.
* Reduces each Trigger, including its children down into its core data.
* @param node - The Trigger node to reduce.
* @param _nodes - The list of all nodes in the current flow graph.
* @returns A simplified object containing the node label and its list of triggers.
*/
export function TriggerReduce(node: Node, nodes: Node[]) {
// Replace this for nodes functionality
if (nodes.length <= -1) {
console.warn("Impossible nodes length in TriggerReduce")
}
export function TriggerReduce(node: Node, _nodes: Node[]) {
const data = node.data;
switch (data.triggerType) {
case "keywords":