GoJs实现泳道图的效果体验与方法

在上一篇分享了DHTMLX Diagram如何实现泳道图的8个方法后，本篇分享GoJs是如何实现相同方法的原理，具体方法见源码！

泳道图是流程图中举足轻重的功能，今天我们以上图为例。

在这个设计中，每个泳道由一个Group实现，所有的泳道都在一个 “Pool “Group里面。每个泳道组都有自己的Group.layout，在这种情况下，它是一个LayeredDigraphLayout。每个池组都有自己的自定义GridLayout，将其所有的泳道安排在一个垂直堆叠中。这个自定义的布局确保了所有游泳池的球道都有相同的长度。如果你不希望每个泳道/组有自己的布局，你可以使用将泳道组的Group.layout设置为null，将游泳池组的Group.layout设置为SwimLaneLayout的一个实例，如Swim Lane Layout所示。

当拖动节点时，注意节点被限制在泳道内。这是由一个自定义的Part.dragComputation函数实现的，这里命名为stayInGroup。在拖动简单的节点时按住Shift键可以将选择移动到另一个泳道。泳道组不能在池组之间移动。

一个组（即泳道）是可移动的，但不能复制，复制需要去源码端新增一个数据节点。当用户向上或向下移动泳道时，泳道会自动重新排序。你可以通过将Group.movable设置为false来防止泳道被移动并因此重新排序。

每个组都是可折叠的。该泳道之前的宽度被保存在savedBreadth属性中，在扩展时被恢复。

当一个组/泳道被选中时，它的自定义Part.resizeAdornmentTemplate在组的底部给它一个广泛的调整手柄，在组的右侧也有一个广泛的调整手柄。这允许用户调整所选泳道的 “宽度”，以及所有泳道的 “长度”。然而，自定义调整工具可以防止泳道太窄而无法容纳代表子图的Group.placeholder，也可以防止泳道太短而无法容纳泳道的任何内容。每个Group/lane也有一个GraphObject.minSize，以防止它太窄，即使根本就没有成员Parts。

以上泳道实现的数据节点如下：

myDiagram.model = new go.GraphLinksModel(        [ // node data          { key: "Pool1", text: "Pool", isGroup: true, category: "Pool" },          { key: "Pool2", text: "Pool2", isGroup: true, category: "Pool" },          { key: "Lane1", text: "Lane1", isGroup: true, group: "Pool1", color: "lightblue" },          { key: "Lane2", text: "Lane2", isGroup: true, group: "Pool1", color: "lightgreen" },          { key: "Lane3", text: "Lane3", isGroup: true, group: "Pool1", color: "lightyellow" },          { key: "Lane4", text: "Lane4", isGroup: true, group: "Pool1", color: "orange" },          { key: "oneA", group: "Lane1" },          { key: "oneB", group: "Lane1" },          { key: "oneC", group: "Lane1" },          { key: "oneD", group: "Lane1" },          { key: "twoA", group: "Lane2" },          { key: "twoB", group: "Lane2" },          { key: "twoC", group: "Lane2" },          { key: "twoD", group: "Lane2" },          { key: "twoE", group: "Lane2" },          { key: "twoF", group: "Lane2" },          { key: "twoG", group: "Lane2" },          { key: "fourA", group: "Lane4" },          { key: "fourB", group: "Lane4" },          { key: "fourC", group: "Lane4" },          { key: "fourD", group: "Lane4" },          { key: "Lane5", text: "Lane5", isGroup: true, group: "Pool2", color: "lightyellow" },          { key: "Lane6", text: "Lane6", isGroup: true, group: "Pool2", color: "lightgreen" },          { key: "fiveA", group: "Lane5" },          { key: "sixA", group: "Lane6" }        ],        [ // link data          { from: "oneA", to: "oneB" },          { from: "oneA", to: "oneC" },          { from: "oneB", to: "oneD" },          { from: "oneC", to: "oneD" },          { from: "twoA", to: "twoB" },          { from: "twoA", to: "twoC" },          { from: "twoA", to: "twoF" },          { from: "twoB", to: "twoD" },          { from: "twoC", to: "twoD" },          { from: "twoD", to: "twoG" },          { from: "twoE", to: "twoG" },          { from: "twoF", to: "twoG" },          { from: "fourA", to: "fourB" },          { from: "fourB", to: "fourC" },          { from: "fourC", to: "fourD" }        ]);

GoJs开发流程图实现节点功能等都是依托于类似于上述的数据节点，GoJs是一个流程图开发库，通过对数据节点的排列展示、编辑、保存等在Web应用中实现Viso的相关功能。

本案例的源码您可以参考：GitHub 

GoJs是一个收费库，在每年网周年庆期间有优惠，有需要的企业一定不要错过！

标签：

来源：慧都