38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { NodeToolbar } from '@xyflow/react';
|
|
import '@xyflow/react/dist/style.css';
|
|
import useFlowStore from "../VisProgStores.tsx";
|
|
|
|
/**
|
|
* Props for the Toolbar component.
|
|
*
|
|
* @property nodeId - The ID of the node this toolbar is attached to.
|
|
* @property allowDelete - If `true`, the delete button is enabled; otherwise disabled.
|
|
*/
|
|
type ToolbarProps = {
|
|
nodeId: string;
|
|
allowDelete: boolean;
|
|
};
|
|
|
|
/**
|
|
* Node Toolbar definition:
|
|
* Handles: node deleting functionality
|
|
* Can be integrated to any custom node component as a React component
|
|
*
|
|
* @param {string} nodeId - The ID of the node for which the toolbar is rendered.
|
|
* @param {boolean} allowDelete - Enables or disables the delete functionality.
|
|
* @returns {React.JSX.Element} A JSX element representing the toolbar.
|
|
* @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>);
|
|
}
|
|
|