125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import {
|
|
Handle,
|
|
type NodeProps,
|
|
Position,
|
|
type Node,
|
|
} from '@xyflow/react';
|
|
import { Toolbar } from '../components/NodeComponents';
|
|
import styles from '../../VisProg.module.css';
|
|
import { TextField } from '../../../../components/TextField';
|
|
import useFlowStore from '../VisProgStores';
|
|
|
|
/**
|
|
* The default data dot a phase node
|
|
* @param label: the label of this phase
|
|
* @param droppable: whether this node is droppable from the drop bar (initialized as true)
|
|
* @param desciption: description of the goal
|
|
* @param hasReduce: whether this node has reducing functionality (true by default)
|
|
*/
|
|
export type GoalNodeData = {
|
|
label: string;
|
|
description: string;
|
|
droppable: boolean;
|
|
achieved: boolean;
|
|
hasReduce: boolean;
|
|
};
|
|
|
|
export type GoalNode = Node<GoalNodeData>
|
|
|
|
|
|
/**
|
|
* Defines how a Goal node should be rendered
|
|
* @param props NodeProps, like id, label, children
|
|
* @returns React.JSX.Element
|
|
*/
|
|
export default function GoalNode({id, data}: NodeProps<GoalNode>) {
|
|
const {updateNodeData} = useFlowStore();
|
|
|
|
const text_input_id = `goal_${id}_text_input`;
|
|
const checkbox_id = `goal_${id}_checkbox`;
|
|
|
|
const setDescription = (value: string) => {
|
|
updateNodeData(id, {...data, description: value});
|
|
}
|
|
|
|
const setAchieved = (value: boolean) => {
|
|
updateNodeData(id, {...data, achieved: value});
|
|
}
|
|
|
|
return <>
|
|
<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>
|
|
<TextField
|
|
id={text_input_id}
|
|
value={data.description}
|
|
setValue={(val) => setDescription(val)}
|
|
placeholder={"To ..."}
|
|
/>
|
|
</div>
|
|
<div className={"flex-row gap-md align-center"}>
|
|
<label htmlFor={checkbox_id}>Achieved:</label>
|
|
<input
|
|
id={checkbox_id}
|
|
type={"checkbox"}
|
|
checked={data.achieved || false}
|
|
onChange={(e) => setAchieved(e.target.checked)}
|
|
/>
|
|
</div>
|
|
<Handle type="source" position={Position.Right} id="GoalSource"/>
|
|
</div>
|
|
</>;
|
|
}
|
|
|
|
|
|
/**
|
|
* Reduces each Goal, including its children down into its relevant data.
|
|
* @param node The Node Properties of this node.
|
|
* @param _nodes all the nodes in the graph
|
|
*/
|
|
export function GoalReduce(node: Node, _nodes: Node[]) {
|
|
const data = node.data as GoalNodeData;
|
|
return {
|
|
id: node.id,
|
|
label: data.label,
|
|
description: data.description,
|
|
achieved: data.achieved,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This function is called whenever a connection is made with this node type as the target
|
|
* @param _thisNode the node of this node type which function is called
|
|
* @param _sourceNodeId the source of the received connection
|
|
*/
|
|
export function GoalConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
|
// no additional connection logic exists yet
|
|
}
|
|
|
|
/**
|
|
* This function is called whenever a connection is made with this node type as the source
|
|
* @param _thisNode the node of this node type which function is called
|
|
* @param _targetNodeId the target of the created connection
|
|
*/
|
|
export function GoalConnectionSource(_thisNode: Node, _targetNodeId: string) {
|
|
// no additional connection logic exists yet
|
|
}
|
|
|
|
/**
|
|
* This function is called whenever a connection is disconnected with this node type as the target
|
|
* @param _thisNode the node of this node type which function is called
|
|
* @param _sourceNodeId the source of the disconnected connection
|
|
*/
|
|
export function GoalDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
|
|
// no additional connection logic exists yet
|
|
}
|
|
|
|
/**
|
|
* This function is called whenever a connection is disconnected with this node type as the source
|
|
* @param _thisNode the node of this node type which function is called
|
|
* @param _targetNodeId the target of the diconnected connection
|
|
*/
|
|
export function GoalDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
|
|
// no additional connection logic exists yet
|
|
} |