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

refactor: make sure that the droppable styles are kept, update some nodes to reflect their used functionality.

Browse Source 
ref: N25B-294
This commit is contained in:
Björn Otgaar
2025-11-18 15:36:18 +01:00
parent 3e73e78ee9
commit 0bbb6101ae
9 changed files with 61 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,7 +114,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
set({
nodes: get().nodes.map((node) => {
if (node.id === nodeId) {
node.data = { ...node.data, ...data };
node = { ...node, data: { ...node.data, ...data }};
}
return node;
}),

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

@@ -124,7 +124,7 @@ export function DndToolbar() {
}
{droppableNodes.map(({type, data}) => (
<DraggableNode
className={styles.nodeType}
className={styles[`draggable-node-${type}`]}
nodeType={type}
onDrop={handleNodeDrop}
>

121
src/pages/VisProgPage/visualProgrammingUI/components/TriggerNodeComponent.tsx
View File

@@ -1,121 +0,0 @@
import {Handle, type NodeProps, Position} from "@xyflow/react";
import useFlowStore from "../VisProgStores.tsx";
import styles from "../../VisProg.module.css";
import {RealtimeTextField, TextField} from "../../../../components/TextField.tsx";
import {Toolbar} from "./NodeComponents.tsx";
import {useState} from "react";
import duplicateIndices from "../../../../utils/duplicateIndices.ts";
import type { TriggerNode } from "../nodes/TriggerNode.tsx";
export type EmotionTriggerNodeProps = {
type: "emotion";
value: string;
}
type Keyword = { id: string, keyword: string };
export type KeywordTriggerNodeProps = {
type: "keywords";
value: Keyword[];
}
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
const [input, setInput] = useState("");
const text_input_id = "keyword_adder_input";
return <div className={"flex-row gap-md"}>
<label htmlFor={text_input_id}>New Keyword:</label>
<RealtimeTextField
id={text_input_id}
value={input}
setValue={setInput}
onCommit={() => {
if (!input) return;
addKeyword(input);
setInput("");
}}
placeholder={"..."}
className={"flex-1"}
/>
</div>;
}
function Keywords({
keywords,
setKeywords,
}: {
keywords: Keyword[];
setKeywords: (keywords: Keyword[]) => void;
}) {
type Interpolatable = string | number | boolean | bigint | null | undefined;
const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
/** Indices of duplicates in the keyword array. */
const [duplicates, setDuplicates] = useState<number[]>([]);
function replace(id: string, value: string) {
value = value.trim();
const newKeywords = value === ""
? keywords.filter((kw) => kw.id != id)
: keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
function add(value: string) {
value = value.trim();
if (value === "") return;
const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
return <>
<span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
{[...keywords].map(({id, keyword}, index) => {
return <div key={id} className={"flex-row gap-md"}>
<label htmlFor={inputElementId(id)}>Keyword:</label>
<TextField
id={inputElementId(id)}
value={keyword}
setValue={(val) => replace(id, val)}
placeholder={"..."}
className={"flex-1"}
invalid={duplicates.includes(index)}
/>
</div>;
})}
<KeywordAdder addKeyword={add} />
</>;
}
// export default function TriggerNodeComponent({
// id,
// data,
// }: NodeProps<TriggerNode>) {
// const {updateNodeData} = useFlowStore();
// const setKeywords = (keywords: Keyword[]) => {
// updateNodeData(id, {...data, value: keywords});
// }
// return <>
// <Toolbar nodeId={id} allowDelete={true}/>
// <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
// {data.type === "emotion" && (
// <div className={"flex-row gap-md"}>Emotion?</div>
// )}
// {data.type === "keywords" && (
// <Keywords
// keywords={data.value}
// setKeywords={setKeywords}
// />
// )}
// <Handle type="source" position={Position.Right} id="TriggerSource"/>
// </div>
// </>;
// }

23
src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
View File

@@ -7,6 +7,9 @@ import {
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
/**
* The typing of this node's data
*/
export type EndNodeData = {
label: string;
droppable: boolean;
@@ -15,6 +18,11 @@ export type EndNodeData = {
export type EndNode = Node<EndNodeData>
/**
* Default function to render an end node given its properties
* @param props the node's properties
* @returns React.JSX.Element
*/
export default function EndNode(props: NodeProps<Node>) {
return (
<>
@@ -23,13 +31,18 @@ export default function EndNode(props: NodeProps<Node>) {
<div className={"flex-row gap-sm"}>
End
</div>
<Handle type="target" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Right} id="source"/>
<Handle type="target" position={Position.Left} id="target"/>
</div>
</>
);
}
/**
* Functionality for reducing this node into its more compact json program
* @param node the node to reduce
* @param nodes all nodes present
* @returns Dictionary, {id: node.id}
*/
export function EndReduce(node: Node, nodes: Node[]) {
// Replace this for nodes functionality
if (nodes.length <= -1) {
@@ -40,6 +53,12 @@ export function EndReduce(node: Node, nodes: Node[]) {
}
}
/**
* Any connection functionality that should get called when a connection is made to this node
* @param thisNode the node of which the functionality gets called
* @param otherNode the other node which has connected
* @param isThisSource whether this node is the one that is the source of the connection
*/
export function EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
// Replace this for connection logic
if (thisNode == undefined && otherNode == undefined && isThisSource == false) {

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

@@ -12,10 +12,11 @@ import { TextField } from '../../../../components/TextField';
import useFlowStore from '../VisProgStores';
/**
* The default data dot a Goal node
* @param label: the label of this Goal
* 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 children: ID's of children of this node
* @param desciption: description of the goal
* @param hasReduce: whether this node has reducing functionality (true by default)
*/
export type GoalNodeData = {
label: string;

34
src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
View File

@@ -8,12 +8,14 @@ import {
} from '@xyflow/react';
import { Toolbar } from '../components/NodeComponents';
import styles from '../../VisProg.module.css';
import { TextField } from '../../../../components/TextField';
/**
* The default data dot a Norm node
* @param label: the label of this Norm
* 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 children: ID's of children of this node
* @param normList: list of strings of norms for this node
* @param hasReduce: whether this node has reducing functionality (true by default)
*/
export type NormNodeData = {
label: string;
@@ -47,7 +49,10 @@ export default function NormNode(props: NodeProps<Node>) {
<label htmlFor={label_input_id}></label>
{props.data.label as string}
</div>
{data.normList.map((norm) => (<div>{norm}</div>))}
<div>
<Norms id={props.id} list={data.normList}/>
</div>
<Handle type="target" position={Position.Right} id="phase"/>
</div>
</>
@@ -75,4 +80,25 @@ export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: bool
if (thisNode == undefined && otherNode == undefined && isThisSource == false) {
console.warn("Impossible node connection called in EndConnects")
}
}
function Norms(props: { id: string; list: string[] }) {
const { id, list } = props;
return (
<>
<span> The norms that the robot will uphold:</span>
{
list.map((norm, idx) => {
return (
<div key={`${id}_${idx}`} className={"flex-row gap-md"}>
<TextField
value={norm}
setValue={() => { return; }}
/>
</div>
);
})
}
</>
);
}

2
src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
View File

@@ -13,6 +13,7 @@ import { NodeDefaults, NodeReduces } from '../NodeRegistry';
* @param label: the label of this phase
* @param droppable: whether this node is droppable from the drop bar (initialized as true)
* @param children: ID's of children of this node
* @param hasReduce: whether this node has reducing functionality (true by default)
*/
export type PhaseNodeData = {
label: string;
@@ -43,7 +44,6 @@ export default function PhaseNode(props: NodeProps<Node>) {
<Handle type="target" position={Position.Left} id="target"/>
<Handle type="source" position={Position.Right} id="source"/>
<Handle type="source" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Top} id="norms"/>
</div>
</>
);

2
src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
View File

@@ -25,8 +25,6 @@ export default function StartNode(props: NodeProps<Node>) {
<div className={"flex-row gap-sm"}>
Start
</div>
<Handle type="target" position={Position.Left} id="target"/>
<Handle type="target" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Right} id="source"/>
</div>
</>

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

@@ -22,8 +22,8 @@ import duplicateIndices from '../../../../utils/duplicateIndices';
export type TriggerNodeData = {
label: string;
droppable: boolean;
triggerType: unknown;
triggers: [unknown];
triggerType: "keywords" | string;
triggers: Keyword[] | never;
hasReduce: boolean;
};
@@ -56,7 +56,7 @@ export default function TriggerNode(props: NodeProps<Node>) {
)}
{data.triggerType === "keywords" && (
<Keywords
keywords={[{id: "test", keyword: " test"}]}
keywords={data.triggers}
setKeywords={setKeywords}
/>
)}