84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import {
|
|
NodeToolbar} from '@xyflow/react';
|
|
import '@xyflow/react/dist/style.css';
|
|
import styles from '../../VisProg.module.css';
|
|
import useFlowStore from "../VisProgStores.tsx";
|
|
|
|
//Toolbar definitions
|
|
type ToolbarProps = {
|
|
nodeId: string;
|
|
allowDelete: boolean;
|
|
};
|
|
|
|
/**
|
|
* Node Toolbar definition:
|
|
* handles: node deleting functionality
|
|
* can be added to any custom node component as a React component
|
|
*
|
|
* @param {string} nodeId
|
|
* @param {boolean} allowDelete
|
|
* @returns {React.JSX.Element}
|
|
* @constructor
|
|
*/
|
|
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
|
|
const {deleteNode} = useFlowStore();
|
|
|
|
const deleteParentNode = ()=> {
|
|
deleteNode(nodeId);
|
|
}
|
|
return (
|
|
<NodeToolbar>
|
|
<button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
|
|
</NodeToolbar>);
|
|
}
|
|
|
|
// Renaming component
|
|
/**
|
|
* Adds a component that can be used to edit a node's label entry inside its Data
|
|
* can be added to any custom node that has a label inside its Data
|
|
*
|
|
* @param {string} nodeLabel
|
|
* @param {string} nodeId
|
|
* @returns {React.JSX.Element}
|
|
* @constructor
|
|
*/
|
|
export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
|
|
const {updateNodeData} = useFlowStore();
|
|
|
|
const updateData = (event: React.FocusEvent<HTMLInputElement>) => {
|
|
const input = event.target.value;
|
|
updateNodeData(nodeId, {label: input});
|
|
event.currentTarget.setAttribute("readOnly", "true");
|
|
window.getSelection()?.empty();
|
|
event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
|
|
};
|
|
|
|
const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
|
|
|
|
const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
|
|
if(event.currentTarget.hasAttribute("readOnly")) {
|
|
event.currentTarget.removeAttribute("readOnly"); // enable editing
|
|
event.currentTarget.select(); // select the text input
|
|
window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
|
|
event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.NodeTextBar }>
|
|
<label>name: </label>
|
|
<input
|
|
className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
|
|
type={"text"}
|
|
defaultValue={nodeLabel}
|
|
onKeyDown={updateOnEnter}
|
|
onBlur={updateData}
|
|
onClick={enableEditing}
|
|
maxLength={25}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|