Diagrams如何设计路由交互

在本文中，我想向您简要介绍一下Diagrams中最复杂的部分，即路由交互及其下的算法。

但首先，让我们回顾一下有关应用程序基础知识的元模型和可视化原理。您在图中创建的每个图都由元素和关系组成。这些图表对象放置在画布中并与当前存在的网格对齐。因此，所有关系的路径都具有通过网格点的直线路径的形状。每个路线都进一步细分为各个部分，例如线段，终点和中点，如以下概述所示。

如果您听到术语“路由算法”，您可能会想到用于图形可视化的自动布局算法（例如Graphviz）。通常，这些算法以静态方式为整个图生成布局，而不考虑用户的偏好。尽管可以将它们集成到交互式图编辑器中，在其中可以通过单击按钮触发它们，但我们强烈认为它们不适合此类环境。相反，我们专注于启用与图对象的智能交互以执行单独的布局操作。如前所述，这可以通过利用网格来实现。

创建两个元素之间的关系时，将自动计算其路线。然后，用户可以间接或直接调整现有路线。间接调整发生在附着的元素之一被移动或关系的一端重新附着到另一元素时。另一方面，当路线的内部（段或中点）拖动到网格中的另一个位置时，会发生直接调整。后面的交互是我们将在这里讨论的内容。在下图中，显示了此交互的三个示例情况。在每种情况下，都会将基本路线的中点（薄）拖动到新位置，以生成调整后的路线（粗体）。

在过去的几个月中，这种交互的概念一直在发展，并且在此过程中我们经历了许多迭代。一旦努力实现在所有情况下都能产生美观的结果的直观交互，一开始看似非常简单的操作就变得非常困难。在进行初步研究时，我们分析了我们的竞争对手。他们都没有提供令人满意的解决方案，这证实了我们对该主题的复杂性的怀疑。挑战被接受了！

在纸上制作完初始图纸后，我们寻找了一种将想法放入交互式原型的方法。不幸的是，此功能对我们的领域是如此特定，以至于我们最简单的方法就是将其正确集成到应用程序中。当我们的想法遇到交互环境时，我们有机会第一次对其进行实时测试，一些假设被破坏了，我们必须通过结合我们刚刚学到的知识来开始下一次迭代。该过程包括重新设计概念，更新实现并最终再次进行测试。

我们经历了许多这样的迭代，我不得不说这是非常繁琐的工作。我们必须为单个路线安排准备概念，确保行为一致，并处理特殊情况（例如，用于覆盖附加元素的路线或包含回路的路线）。该实现的数学运算量很大，通常很难为之动容，特别是因为它经常更改。概念的可视化对我们来说是一种有用的技术。实际上，我们为此功能（路线拖动调整交互）在200多张纸上绘制了草图。https://player.vimeo.com/video/305737226?app_id=122963&wmode=opaque

经过所有这些工作和大量的alpha测试，我们得出了令人鼓舞的结果，其中包括一些我们在其他任何地方都未见过的创新概念。

例如，我们为路线零件提供了手柄，这些手柄在点和线段上具有统一的外观。为了增加交互性，这些手柄将在鼠标悬停在路径部分上时出现，并且它们会根据拖动状态更改其外观。

我们还采取步骤，通过可视化在完成交互后将被切除的零件，减少与连接的元素的交叉，折叠的线段和最终的回路，从而改善了最终路线的美观性。