* Added NodeToolbar * Added comments & fixed default behaviour in svelte * Added e2e-tests for NodeToolbar component & added data-id to react NodeToolbar * refactor(svelte/NodeToolbar): cleanup * refactor(node-toolbar): add system utils --------- Co-authored-by: moklick <info@moritzklack.com>
20 lines
599 B
TypeScript
20 lines
599 B
TypeScript
import { memo, FC } from 'react';
|
|
import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react';
|
|
|
|
const CustomNode: FC<NodeProps> = ({ id, data }) => {
|
|
return (
|
|
<>
|
|
<NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition} align={data.toolbarAlign}>
|
|
<button>delete</button>
|
|
<button>copy</button>
|
|
<button>expand</button>
|
|
</NodeToolbar>
|
|
<div>{data.label}</div>
|
|
<Handle type="target" position={Position.Left} />
|
|
<Handle type="source" position={Position.Right} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(CustomNode);
|