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"))
);

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

我有什么想法可以做到这一点？我是否需要更改模板或是否有一些设置来实现此目的

这是我所拥有的一个小提琴：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小提琴中查看：http://jsfiddle.net/loanburger/v61bufs0/9/

GoJS如何在调色板和图表中自上而下排列节点

1 个答案: