Files
bytedance--flowgram.ai/apps/docs/components/free-examples/step-7/add-node.tsx
T
wehub-resource-sync 0232b4e2bb
CI / build (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 13:09:51 +08:00

44 lines
1.2 KiB
TypeScript

import {
useService,
WorkflowDocument,
WorkflowNodeEntity,
WorkflowSelectService,
} from '@flowgram.ai/free-layout-editor';
export const AddNode = () => {
const workflowDocument = useService(WorkflowDocument);
const selectService = useService(WorkflowSelectService);
return (
<div style={{ position: 'absolute', zIndex: 10, bottom: 16, left: 8, display: 'flex', gap: 8 }}>
<button
style={{
border: '1px solid #e0e0e0',
borderRadius: '50%',
cursor: 'pointer',
padding: '4px',
color: '#ffffff',
background: '#7e72e8',
width: 70,
height: 70,
fontSize: 14,
}}
onClick={() => {
const node: WorkflowNodeEntity = workflowDocument.createWorkflowNodeByType(
'custom',
undefined, // position undefined means create node in center of canvas - position undefined 可以在画布中间创建节点
{
data: {
title: 'New Node',
},
}
);
selectService.selectNode(node);
}}
>
+ Node
</button>
</div>
);
};