请教一下关于节点添加的问题；

[Theseven87]

我参照自由布局的demo开发，其中在写use-add-node.tsx时，我只要写上了
const nodePanelService = useService(WorkflowNodePanelService);
就会报错

不知道时什么原因。
然后我就自己开发了一个节点菜单的组件，我想要点击某个节点时将他添加到画布中，但是我不知道应该怎么样把这个节点添加到画布中。
比如说addNode()
希望您有空的话告诉我一下
谢谢

[dragooncjw]

想要先确认几个问题：

1. 你这边使用的 @Flowgram,ai 的版本，0.1.9 到 0.1.10 中间有一个问题可能会导致这个问题
2. useAddNode 调用的工具栏，是否被包裹在了自由布局的 Provider 内部？
   类似：

<FreeLayoutEditorProvider {...editorProps}>
     {/* tools 需要被包裹在 Provider 内部，才可以正常使用 useService 消费获取 */}
    <DemoTools />
</FreeLayoutEditorProvider>

[louisyoungx]

方便贴一下你的 package.json 和 editorProps 吗

[Theseven87]

工具栏是包裹在FreeLayoutEditorProvider 内的。

 <FreeLayoutEditorProvider {...editorProps}>
      <div id="flow-container" className='flow-container' >
        <div className='flow-layout' onClick={(e) => { e.stopPropagation();  testFlowStore.setIsShowMenu(false)}}>
          <EditorRenderer className='flow-editor' />
        </div>
        <Tools />
      </div>
  </FreeLayoutEditorProvider>

const addNodeCard = observer(() => {
  const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService);
....

只要包含这一行就会报错，不光是在添加节点的这个地方。use-editor-props如果使用了WorkflowNodePanelService也会报错。

  "dependencies": {
    "@ant-design/icons": "^5.6.1",
    "@flowgram.ai/free-layout-editor": "^0.1.13",
    "@flowgram.ai/free-node-panel-plugin": "^0.1.13",
    "@flowgram.ai/free-snap-plugin": "^0.1.13",
    "@flowgram.ai/minimap-plugin": "^0.1.13",
    "@tailwindcss/vite": "^4.0.0",
    "@types/lodash": "^4.17.16",
    "antd": "^5.24.3",
    "axios": "^1.8.3",
    "lodash": "^4.17.21",
    "mobx": "^6.13.6",
    "mobx-react-lite": "^4.1.0",
    "react": "18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.22.3",
    "tailwindcss": "^4.0.0"
  },

所以我想的是我是否可以通过ctx或者playground或者其他的什么类执行addNode把节点添加到画布中，这样用起来更自由一些
AI告诉我

clientContext.document.addNode({
      id:'aaa',
      type: "custom",
      meta: {
        position: {
          x: 600,
          y:400,
        },
      },
      data: {
        title: item.instruction_name,
        content: item.instruction_name,
      },
    });

但是画布中没有新的节点

[xiamidaxia]

嗯，如果是自由布局，可以用 （文档确实还不够完善，我们后续会逐步补充）

clientContext.document.createWorkflowNode({
     id:'aaa',
      type: "custom",
      meta: {
        position: {
          x: 600,
          y:400,
        },
      },
      data: {
        title: item.instruction_name,
        content: item.instruction_name,
      },
})

自由布局 createWorkflowNode 封装了下 addNode（这个不处理 position）

而 WorkflowNodePanelService，是一个插件，看下你有没有装这个插件，不然调用不到：

        createFreeNodePanelPlugin({
          renderer: NodePanel,
        }),

[Theseven87]

试了一下
clientContext.document.createWorkflowNode没有问题。
非常感谢回复，期待你们的文档能尽快完善
最好是能给一些基础方法的说明
比如 节点的新增、修改、删除；连线的新增、修改、删除；

[xiamidaxia]

感谢建议，issue 我先留着，后续我们补充好文档再关闭 ～～

[xiamidaxia]

文档已补充， cc @Theseven87