Project-Graph 导出功能排序逻辑优化：从连接顺序到角度判断

背景

在思维导图和数据可视化工具Project-Graph中，导出功能是一个重要特性。当前版本中，当用户选择导出纯文本内容时，系统会按照节点之间的连接顺序来遍历和导出子节点。然而，在实际使用过程中，频繁调整连接会导致边的连接顺序变得混乱，给用户带来不便。

问题分析

现有排序逻辑基于边的连接顺序，这种设计存在以下局限性：

1. 连接顺序易受干扰：用户频繁调整连接后，边的存储顺序可能与实际视觉顺序不符
2. 缺乏直观性：视觉上排列整齐的节点可能因为连接顺序问题导致导出结果不符合预期
3. 维护成本高：用户需要不断重新连线来调整导出顺序

优化方案

角度判断排序算法

新的排序逻辑采用基于角度的判断方法，核心思想是根据子节点相对于父节点的位置角度来决定遍历顺序：

1. 角度分区：将360度平面划分为四个象限

   • 第一象限：0°-90°（右上方）
   • 第二象限：90°-180°（左上方）
   • 第三象限：180°-270°（左下方）
   • 第四象限：270°-360°（右下方）

2. 排序规则：

   • 下方节点（三、四象限）：采用从左到右逆时针遍历
   • 右侧节点（一、四象限）：采用从上到下顺时针遍历
   • 上方节点（一、二象限）：采用从左到右顺时针遍历
   • 左侧节点（二、三象限）：采用从上到下逆时针遍历

3. 特殊情况处理：当节点角度落在不连续的两个象限时，保留原有的连接顺序排序

实现考量

在实际实现过程中，开发团队做了以下调整和优化：

1. 视觉一致性优先：对于右侧或下侧的节点，最终采用了按节点位置排序而非严格角度排序，以更好地匹配曲线连接的视觉效果
2. 性能优化：角度计算使用高效的数学函数，确保在大规模节点时仍能快速排序
3. 边界处理：精确处理节点位于坐标轴上的特殊情况

技术实现

核心算法伪代码：

function sortChildrenNodes(parent, children) {
    // 计算每个子节点相对于父节点的角度
    const nodesWithAngles = children.map(child => {
        const dx = child.x - parent.x;
        const dy = child.y - parent.y;
        const angle = Math.atan2(dy, dx) * 180 / Math.PI;
        return {node: child, angle: angle < 0 ? angle + 360 : angle};
    });
    
    // 根据角度区域应用不同的排序规则
    const primaryQuadrant = determinePrimaryQuadrant(nodesWithAngles);
    
    switch(primaryQuadrant) {
        case 'bottom':
            return sortLeftToRightCCW(nodesWithAngles);
        case 'right':
            return sortTopToBottomCW(nodesWithAngles);
        case 'top':
            return sortLeftToRightCW(nodesWithAngles);
        case 'left':
            return sortTopToBottomCCW(nodesWithAngles);
        default:
            return originalConnectionOrder(nodesWithAngles);
    }
}

用户体验提升

这一优化带来了显著的体验改进：

1. 更直观的导出结果：导出的文本顺序与视觉排列更加一致
2. 减少重复操作：用户无需为了导出顺序而频繁调整连接
3. 自适应布局：自动适应不同的节点布局风格（垂直、水平或其他自定义布局）

总结

Project-Graph通过将导出排序逻辑从简单的连接顺序改为基于角度的智能判断，显著提升了工具的实用性和用户体验。这一改进展示了如何通过合理的算法设计来解决实际应用中的痛点问题，同时也为类似图形工具的排序问题提供了有价值的参考方案。