拖动创建具有预设样式的节点

演示用于从工具栏拖放创建具有预定义样式和形状的新节点的界面。

拖动创建具有预设样式的节点

功能概述

此示例演示如何创建拖放界面，用户可以从工具栏拖动节点模板并将其放到画布上以创建具有预定义样式和形状的新节点。

核心特性实现

拖动创建工具栏组件

实现带有可拖动节点模板的 DragToCreateToolbar：

<RGSlotOnView>
    <DragToCreateToolbar />
</RGSlotOnView>

不同形状的节点模板

为不同的节点形状和类型提供模板：

const addNode = async (shape: RGNodeShape, type?: string) => {
    const newNode: JsonNode = {
        id: `new-node-${Math.random()}`,
        text: type === 'slot' ? 'Slot Node' : (shape === RGNodeShape.rect ? 'New Rect' : 'New Circle'),
        nodeShape: shape,
        type: type || 'default',
        x: Math.random() * 200,
        y: Math.random() * 200,
        color: '#43a2f1'
    };
    graphInstance.addNodes([newNode]);
};

基于类型的自定义节点内容

根据 type 属性渲染不同的节点内容：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        if (node.type === 'myCard') {
            return (
                <div>
                    <MyCardNodeContent name={node.text} />
                </div>
            );
        }
        return (
            <div className="rg-node-text">{node.text}</div>
        );
    }}
</RGSlotOnNode>

固定布局配置

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

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

初始节点设置

使用具有不同形状的示例节点初始化图表：

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'Border color', borderColor: '#43a2f1' },
        { id: 'a1', text: 'No border', borderWidth: -1, color: '#ff8c00' },
        { id: 'a2', text: 'Plain', borderWidth: 3, borderColor: '#ff8c00' }
    ],
    lines: [
        { from: 'a', to: 'a1' },
        { from: 'a', to: 'a2' }
    ]
};

创意使用场景

• 图表构建器：让用户快速向图表添加预样式元素
• 流程图工具：为流程提供拖放形状调色板
• UI 原型：使用预构建的组件模板创建界面线框图
• 网络设计器：放置具有适当图标和设置的网络设备
• 思维导图：为想法、任务和笔记添加不同的节点类型