@ant-design/flowchart自定义节点添加可编辑属性及右侧面板配置咨询

结论 #

完全可以实现点击自定义节点后，右侧面板显示可编辑属性的功能，核心是通过组件内置的detailPanelProps自定义面板内容，并完成节点数据的双向绑定更新。

实现步骤与代码示例 #

下面直接给出修改后的完整代码，关键改动点已标注：

import { Flowchart } from '@ant-design/flowchart';
import "@ant-design/flowchart/dist/index.css";
import { Form, Input, ColorPicker, InputNumber } from 'antd';

// 自定义节点组件：确保props.data变化时重新渲染
const IndicatorNode = (props: any) => {
  const { size = { width: 120, height: 50 }, data } = props;
  const { width, height } = size;
  // 从data中解构属性，默认值兜底
  const { 
    label = '自定义节点', 
    stroke = '#84b2e8', 
    fill = '#fff', 
    fontFill = '#333', 
    fontSize = 14 
  } = data;

  return (
    <div
      className="indicator-container"
      style={{
        position: 'relative',
        display: 'block',
        background: '#fff',
        border: '1px solid #84b2e8',
        borderRadius: '2px',
        padding: '10px 12px',
        overflow: 'hidden',
        boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
        width,
        height,
        borderColor: stroke,
        backgroundColor: fill,
        color: fontFill,
        fontSize,
      }}
    >
      <div>{label}</div>
    </div>
  );
};

export const Designer = () => {
  // 用于获取Form实例，方便操作表单数据
  const [form] = Form.useForm();

  return (
    <div style={{ height: 600 }}>
      <Flowchart
        onSave={(d) => {
          console.log('保存的流程图数据:', d);
        }}
        // 节点选中时同步表单数据
        onNodeSelect={(node) => {
          if (node?.data) {
            form.setFieldsValue(node.data);
          }
        }}
        toolbarPanelProps={{
          position: { top: 0, left: 0, right: 0 },
        }}
        scaleToolbarPanelProps={{
          layout: 'horizontal',
          position: { right: 0, top: -40 },
          style: { width: 150, height: 39, left: 'auto', background: 'transparent' },
        }}
        canvasProps={{
          position: { top: 40, left: 0, right: 0, bottom: 0 },
        }}
        nodePanelProps={{
          position: { width: 160, top: 40, bottom: 0, left: 0 },
          defaultActiveKey: ['custom'],
          registerNode: {
            title: '自定义节点组',
            key: "custom-group",
            nodes: [
              {
                component: IndicatorNode,
                popover: () => <div>自定义指标节点</div>,
                name: 'custom-node-indicator',
                width: 120,
                height: 50,
                // 设置节点默认属性，对应可编辑项
                data: {
                  label: '新节点',
                  stroke: '#84b2e8',
                  fill: '#fff',
                  fontFill: '#333',
                  fontSize: 14
                }
              },
            ],
          },
        }}
        // 自定义右侧详情面板：渲染可编辑表单
        detailPanelProps={{
          position: { width: 260, top: 40, bottom: 0, right: 0 },
          title: '节点属性编辑',
          // 这里的render参数包含当前选中的节点实例和更新节点的方法
          render: ({ node, updateNode }) => {
            if (!node) return <div>请选择一个节点</div>;
            
            return (
              <Form
                form={form}
                layout="vertical"
                onValuesChange={(changedValues) => {
                  // 表单值变化时，更新节点数据
                  updateNode({
                    ...node,
                    data: { ...node.data, ...changedValues }
                  });
                }}
              >
                <Form.Item label="节点名称" name="label">
                  <Input placeholder="输入节点名称" />
                </Form.Item>
                <Form.Item label="边框颜色" name="stroke">
                  <ColorPicker showText />
                </Form.Item>
                <Form.Item label="填充颜色" name="fill">
                  <ColorPicker showText />
                </Form.Item>
                <Form.Item label="字体颜色" name="fontFill">
                  <ColorPicker showText />
                </Form.Item>
                <Form.Item label="字体大小" name="fontSize">
                  <InputNumber min={12} max={24} />
                </Form.Item>
              </Form>
            );
          }
        }}
      />
    </div>
  );
};

关键改动说明 #

• 引入Ant Design的Form、ColorPicker等组件构建编辑面板
• 新增onNodeSelect事件：选中节点时将节点数据同步到表单
• 在detailPanelProps.render中，利用updateNode方法实现表单值变化时实时更新节点数据
• 自定义节点组件严格依赖props.data渲染，确保数据变化后UI同步更新
• 在registerNode的节点配置中添加默认data，保证新节点拥有初始属性值

内容的提问来源于stack exchange，提问作者Sam