CanvasToolbar中toolbarConfig.setCustomToolbarRender自定义渲染如何使用IGraphCommandService

[wh1teYu]

描述你想申请的功能

CanvasToolbar中toolbarConfig.setCustomToolbarRender自定义渲染如何使用IGraphCommandService

描述你想要的解决方案

CanvasToolbar中toolbarConfig.setCustomToolbarRender自定义渲染如何使用IGraphCommandService

描述你所考虑的替代方案

CanvasToolbar中toolbarConfig.setCustomToolbarRender自定义渲染如何使用IGraphCommandService

你的网站或应用程序实例

No response

屏幕截图或视频

// 自定义操作栏
toolbarConfig.setCustomToolbarRender(
async (modelService, updateComponent) => {
const model = await MODELS.SELECTED_NODES.getModel(modelService)

  model.watch((nodes) => {
    let Toolbar = (props) => {
      console.log('props', props)

      const [edit, setEdit] = useState(false)
      const [form] = Form.useForm()

      const fields = [
        {
          key: 'type',
          label: '规则类别',
          value: '筛选类规则',
          disabled: true,
          style: { width: 110 },
        },
        {
          key: 'name',
          label: '规则名称',
          value: '产品推荐展示规则',
          disabled: !edit,
          style: { width: 156 },
        },
        {
          key: 'remark',
          label: '规则说明',
          value: '针对不同客群推荐展示不同产品…',
          disabled: !edit,
          style: { width: 266 },
        },
      ]

      // 保存基本信息
      const handleSubmitBaseInfo = (values) => {
        console.log('values', values)
      }

      // 保存
      const handleSubmit = () => {
        console.log('props', props)
        console.log(XFlowGraphCommands.SAVE_GRAPH_DATA, '999')
      }

      return (
        <div className={cls(styles['custom-toolbar'])}>
          <Form form={form} onFinish={handleSubmitBaseInfo}>
            {fields.map((field) => {
              return (
                <FormItem label={field.label} name={field.key}>
                  <Input
                    value={field.value}
                    defaultValue={field.value}
                    disabled={field.disabled}
                    style={field.style}
                  />
                </FormItem>
              )
            })}
            {edit ? (
              <>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
                <Button
                  className={cls(styles['ml-8'])}
                  onClick={() => {
                    setEdit(false)
                    form.resetFields()
                  }}
                >
                  取消
                </Button>
              </>
            ) : (
              <>
                <FormOutlined onClick={() => setEdit(true)} />
                <Button className={cls(styles['bakck'])}>返回</Button>
                <Button
                  type="primary"
                  className={cls(styles['submit'])}
                  onClick={handleSubmit}
                >
                  保存
                </Button>
                <Button
                  type="primary"
                  icon={<FolderOutlined />}
                  className={cls(styles['audit'])}
                >
                  保存并提交审核
                </Button>
              </>
            )}
          </Form>
        </div>
      )
    }
    updateComponent(Toolbar)
  })
  return null
}

)

这段代码，我需要在保存的时候，调用IGraphCommandService，调用画布的保存功能

[xflow-bot]

👋 @wh1teYu

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[TSjianjiao]

用useXFlowApp获取app实例，然后app.commandService.executeCommand。可以参考这个文章

[xflow-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[xflow-bot]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯

[xflow-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.