双击编辑节点文本

演示当用户双击时的节点文本行内编辑，并提供开关以启用或禁用编辑功能。

双击编辑节点文本

功能概述

此示例演示如何在用户双击节点时实现节点文本的行内编辑。自定义的可编辑节点组件处理编辑状态并更新图表数据。

核心特性实现

自定义可编辑节点组件

创建 MyEditableNode 组件，在显示模式和编辑模式之间切换：

<RGSlotOnNode>
    {({ node, checked, dragging }: RGNodeSlotProps) => (
        <MyEditableNode
            node={node}
            enableEditingMode={isEditingEnabled}
            onNodeTextChange={onNodeTextChange}
        />
    )}
</RGSlotOnNode>

切换编辑模式

提供开关以启用或禁用节点文本编辑：

<SimpleUIBoolean
    currentValue={isEditingEnabled}
    onChange={toggleEditingMode}
    label="Enabled Node Text Editing"
/>

节点文本更新处理

实现处理程序以更新图表中的节点文本：

const onNodeTextChange = (node: RGNode, newNodeText: string) => {
    graphInstance.updateNode(node.id, { text: newNodeText });
};

固定布局

使用固定布局以保持节点位置：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'
    }
};

初始节点数据

使用各种节点样式和形状初始化图表：

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'Border color', borderColor: '#666666' },
        { id: 'a1', text: 'No border', borderWidth: -1, color: '#ff8c00' },
        { id: 'a2', text: 'Plain', borderWidth: 3, borderColor: '#ff8c00' },
        { id: 'd', text: 'Node Size', width: 150, height: 150 },
        { id: 'g', text: 'Css Flash', className: 'my-node-flash-style' }
    ],
    lines: [
        { id: 'l1', from: 'a', to: 'b' },
        { id: 'l2', from: 'a', to: 'a1' }
    ]
};

编辑模式状态管理

使用 React 状态跟踪是否启用编辑：

const [isEditingEnabled, setIsEditingEnabled] = useState(true);

const toggleEditingMode = (newValue: boolean) => {
    setIsEditingEnabled(newValue);
};

创意使用场景

• 思维导图工具：让用户直接在图表中编辑节点标签
• 组织架构图编辑器：内联更新员工姓名或职位
• 流程图：修改步骤名称而无需打开对话框
• 概念图：快速修改想法和连接
• 数据输入表单：将视觉布局与文本编辑结合