javascript - GoJS 如何自上而下地排列调色板和图表中的节点

Question

我有一个调色板和图表并排使用相同的模板。

  var template = $(go.Node, "Horizontal",
  $(go.Shape,
    { width: 15, height: 15, fill: "white" },
    new go.Binding("fill", "color")),
  $(go.TextBlock,
    new go.Binding("text", "color"))
);

我想自上而下排列节点，然后一个节点到达底部，它会扭曲并在前一个“列”旁边再次自上而下

有什么想法可以实现吗？我需要更改他的模板还是有一些设置可以实现此目的

这是我的 fiddle :http://jsfiddle.net/loanburger/v61bufs0/

我的最终目标是在调色板中有一个电子邮件列表，然后将它们拖到包含列表的图表中

谢谢，

Answer 1

我已经找到了这个问题的解决方案，为了其他人的利益，我将详细回答这个问题:

为了完成我在拆分调色板和图表模板后的目标，使每个模板都有自己的模板。

在图表上我不希望节点可拖动，所以我设置了它的模板 movable: false 这样用户就不能再次拖动节点。

然后在创建图表时，您可以指定布局。因此，我使用 GridLayout 执行了以下操作:

var  myDiagram = $(go.Diagram, "myDiagramDiv", 
{
   layout: $(go.GridLayout,
   {
                cellSize: new go.Size(200, 20),
                wrappingColumn: 1
    }),     
   "undoManager.isEnabled": true 
}); 

我指定了一个列。

我还将 contentAlighment 属性设置为左上角:

myDiagram.startTransaction("");
myDiagram.contentAlignment = go.Spot.TopLeft;
myDiagram.commitTransaction("");    

因为我不希望图表节点可拖动，所以我也设置了 myDiagram.allowDragOut= false;，这样节点就不能被拖出图表。我发现如果我不这样做，即使一个节点在被选中时不可拖动，我也可以拖动选择

托盘的布局概念相同:

  var myPalette = $(go.Palette, "myPaletteDiv",
    {
        layout: $(go.GridLayout,
        {
            cellSize: new go.Size(200, 20),
            wrappingColumn: 1
        })      
    });

还有 contentAlighment 属性:

myPalette.startTransaction("");
myPalette.contentAlignment = go.Spot.TopLeft;
myPalette.commitTransaction("");

最终结果可以在这个修改后的 JS Fiddle 中查看:http://jsfiddle.net/loanburger/v61bufs0/9/