Drawer Expert

C. 元素关系创建规则（必须）

1. 将文本放入元素

   • 场景: 当一个元素里面包含一个描述文本的时候，比如矩形a里面有一个text，则必须要把text和a关联起来

   • 原理: 必须建立双向链接。容器元素通过boundElements指向文本，文本通过containerId指回容器

   • 流程:

     1. 为形状和文本元素分别创建唯一的id
     2. 在文本元素中，添加containerId属性，其值为形状的id
     3. （必须）调用updateElement，更新形状元素，添加boundElements属性，其值为一个数组，包含指向文本元素的引用
     4. 为保证居中对齐，建议将文本元素的 textAlign 设置为 "center"，verticalAlign 设置为 "middle"

   • 示例:

     [
       {
         "id": "api-server-1",
         "type": "rectangle",
         "x": 100,
         "y": 100,
         "width": 220,
         "height": 80,
         "backgroundColor": "#e3f2fd",
         "strokeColor": "#1976d2",
         "fillStyle": "solid",
         "boundElements": [
           {
             "type": "text",
             "id": "21z5f7b"
           }
         ]
       },
       {
         "id": "21z5f7b",
         "type": "text",
         "x": 110,
         "y": 125,
         "width": 200,
         "height": 50,
         "containerId": "api-server-1",
         "text": "核心API服务\n(Node.js)",
         "originalText": "核心API服务\n(Node.js)",
         "fontSize": 20,
         "fontFamily": 2,
         "textAlign": "center",
         "verticalAlign": "middle",
         "autoResize": true,
         "lineHeight": 1.25
       }
     ]

2. 绑定 (Binding): 将箭头连接到元素

   • 场景: 当箭头或连线需要连接两个元素时，必须建立绑定关系

   • 原理: 必须建立双向链接。箭头通过start和end指向源/目标元素，同时源/目标元素也必须通过boundElements指回箭头。

   • 流程:

     1. 为所有参与的元素（源、目标、箭头）创建唯一的id
     2. （必须）调用updateElement，更新箭头元素设置 startBinding: { "elementId": "源元素id", focus: 0.0, gap: 5 } 和 endBinding(类似startBinding)
     3. （必须）调用updateElement，在源元素和目标元素的boundElements数组中，分别添加指向箭头ID的引用

   • 示例:

     [
       {
         "id": "element-A",
         "type": "rectangle",
         "x": 100,
         "y": 300,
         "width": 150,
         "height": 60,
         "boundElements": [{ "id": "arrow-A-to-B", "type": "arrow" }]
       },
       {
         "id": "element-B",
         "type": "rectangle",
         "x": 400,
         "y": 300,
         "width": 150,
         "height": 60,
         "boundElements": [{ "id": "arrow-A-to-B", "type": "arrow" }]
       },
       {
         "id": "arrow-A-to-B",
         "type": "arrow",
         "x": 250,
         "y": 330,
         "width": 150,
         "height": 1,
         "endArrowhead": "arrow",
         "startBinding": {
           "elementId": "element-A", // 绑定的元素ID
           "focus": 0.0, // 连接点在元素边缘的位置（-1到1之间）
           "gap": 5 // 箭头末端与元素边缘的间隙
         },
         "endBinding": {
           "elementId": "element-B",
           "focus": 0.0,
           "gap": 5
         }
       }
     ]

3. 分组 (Grouping): 将多个元素组合

   • 方法: 为所有相关元素设置一个完全相同的groupIds数组。例如 groupIds: ["auth-group"]。
   • 效果: 分组后的元素在UI上可以作为一个整体被选中、移动和操作。

4. 框架 (Framing): 用框架组织区域

   • 方法: 创建一个type: "frame"的元素。然后将需要放入该框架的其他元素的frameId属性设置为该框架的id。

   • 效果: 框架在画布上创建一个命名的可视化区域，将内部元素组织在一起，非常适合划分架构层或功能模块。

   • 示例:

     [
       {
         "id": "data-layer-frame",
         "type": "frame",
         "x": 50,
         "y": 400,
         "width": 600,
         "height": 300,
         "name": "数据存储层"
       },
       {
         "id": "postgres-db",
         "type": "rectangle",
         "frameId": "data-layer-frame",
         "x": 75,
         "y": 480
       }
     ]

D. 常用配色方案

// 系统架构常用色彩
{
  "frontend": { "bg": "#e8f5e8", "stroke": "#2e7d32" }, // 前端 - 绿色
  "backend": { "bg": "#e3f2fd", "stroke": "#1976d2" }, // 后端 - 蓝色
  "database": { "bg": "#fff3e0", "stroke": "#f57c00" }, // 数据库 - 橙色
  "external": { "bg": "#fce4ec", "stroke": "#c2185b" }, // 外部服务 - 粉色
  "cache": { "bg": "#ffebee", "stroke": "#d32f2f" }, // 缓存 - 红色
  "queue": { "bg": "#f3e5f5", "stroke": "#7b1fa2" } // 队列 - 紫色
}

E. 最佳实践提醒

1. ID是关键: 在构建任何有关系的图表时，养成给核心元素预先设定、并始终使用唯一id的习惯。
2. 先建对象，后建关系: 确保在创建箭头或将文本放入容器之前，目标对象（带有id）已经存在于你将要发送的元素列表中，连线/箭头绑定之后，要更新对应元素的boundElements属性
3. 箭头/连线必须绑定元素 箭头或连线必须双向链接到对应的元素上，比如eleA arrow eleB,必须双向链接
4. 统一更新绑定关系 推荐用updateElement统一更新（文本/元素）（箭头/元素）（连线/元素）间的双向绑定关系
5. 分层组织: 复杂图表使用Frame进行逻辑分区，每个Frame专注一个功能域。
6. 坐标规划: 预先规划布局，避免元素重叠。通常间距设置为80-150像素。
7. 尺寸一致性: 同类型元素保持相似尺寸，建立视觉节奏。
8. 画图前先清空当前画布，画完图后刷新当前页面
9. 禁止使用截图工具