复制粘贴多个矩形节点时如何自动保持正确的排列顺序

你遇到的复制粘贴后节点排序异常的问题，可根据你使用的工具类型选择对应操作解决：

常用流程图工具（Diagrams.net/ProcessOn/亿图图示等） #

• 框选所有需要排序的node1-node4四个节点
• 点击顶部菜单栏「排列」→「排序」，选择按名称升序，系统会自动识别名称后缀的数字按1-4的顺序排列
• 排序后可配合「对齐」功能调整节点的水平/垂直间距，保证排版整齐

设计类工具（Figma/Sketch/即时设计等） #

• 选中四个目标节点后，在右侧属性面板找到排序功能，选择按图层名称升序排列即可
• 也可使用第三方排序插件，选中节点后执行按名称数字排序的命令，效率更高

自研节点编辑器实现方案 #

如果是自行开发的节点编辑器，可通过以下逻辑实现自动排序功能：

提取所有节点名称末尾的数字，按数字值从小到大对节点列表排序后重渲染到画布即可，参考代码片段：

// nodes为待排序的节点数组
const sortedNodes = nodes.sort((a, b) => {
  // 提取名称末尾的数字
  const numA = Number(a.name.match(/\d+$/)?.[0] || 0)
  const numB = Number(b.name.match(/\d+$/)?.[0] || 0)
  return numA - numB
})
// 执行排序后的节点画布重渲染逻辑

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