GoJS 如何自上而下地排列调色板和图表中的节点
GoJS how can I arrange the nodes in a palette and diagram top down
我有一个调色板和图表并排使用相同的模板。
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"))
);
我想自上而下排列节点,然后一个节点到达底部,它会扭曲并在前一个 "column"
旁边再次开始自上而下
有什么办法可以做到这一点吗?我需要更改他的模板还是有一些设置可以实现这个
这是我所拥有的fiddle:http://jsfiddle.net/loanburger/v61bufs0/
我的最终目标是在调色板中有一个电子邮件列表,然后将它们拖到图表中以获得包含列表
谢谢,
我已经找到了这个问题的解决方案,为了其他人的利益,我会详细回答这个问题:
为了实现我的目标,我将调色板和图表的模板拆分为各自的模板。
在图表上我不希望节点可拖动,所以我设置了它的模板 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/
我有一个调色板和图表并排使用相同的模板。
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"))
);
我想自上而下排列节点,然后一个节点到达底部,它会扭曲并在前一个 "column"
旁边再次开始自上而下有什么办法可以做到这一点吗?我需要更改他的模板还是有一些设置可以实现这个
这是我所拥有的fiddle:http://jsfiddle.net/loanburger/v61bufs0/
我的最终目标是在调色板中有一个电子邮件列表,然后将它们拖到图表中以获得包含列表
谢谢,
我已经找到了这个问题的解决方案,为了其他人的利益,我会详细回答这个问题:
为了实现我的目标,我将调色板和图表的模板拆分为各自的模板。
在图表上我不希望节点可拖动,所以我设置了它的模板 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/