Apply 1 suggestion(s) to 1 file(s)
Co-authored-by: Twirre <s.a.meulenbelt@students.uu.nl>
This commit is contained in:
@@ -32,52 +32,3 @@ export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
|
|||||||
</NodeToolbar>);
|
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user