Why are the nodes in the green box arranged vertically?
The code is as follows:
var gojs = go.GraphObject.make;
diagram =
gojs(go.Diagram, “workdaily-gojs”,
{
allowMove: false,
initialDocumentSpot: go.Spot.Center,
initialViewportSpot: go.Spot.Center,
layout:
gojs(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleLastParents,
angle: 90,
layerSpacing: 80,
alternateAngle: 0,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 20,
alternateNodeIndentPastParent: 1,
alternateNodeSpacing: 20,
alternateLayerSpacing: 40,
alternateLayerSpacingParentOverlap: 1,
alternatePortSpot: new go.Spot(0.001, 1, 20, 0),
alternateChildPortSpot: go.Spot.LeftCenter
})
});
diagram.nodeTemplate =
gojs(go.Node, "Auto", { contextMenu: gojs(go.Adornment) },
gojs(go.Shape, "Rectangle",
{ name: "SHAPE", fill: "white", stroke: null }),
gojs(go.Panel, "Table",
{ margin: 6, maxSize: new go.Size(200, NaN) },
gojs(go.RowColumnDefinition,
{
column: 0,
stretch: go.GraphObject.Horizontal,
alignment: go.Spot.Center
}),
gojs(go.Picture,
{
row: 0, column: 0, margin: 2, rowSpan: 3,
imageStretch: go.GraphObject.Uniform,
alignment: go.Spot.Center,
},
new go.Binding("desiredSize", "id", function () { return new go.Size(50, 50) }),
new go.Binding("source", "id", function (id) {
return openinfo.orgwebs_url + '/?userphoto=' + id;
})),
gojs(go.TextBlock,
{
row: 0, column: 1,
maxSize: new go.Size(160, NaN), margin: 2,
font: "12px 'Microsoft Yahei'",
stroke: "white",
alignment: go.Spot.Left
},
new go.Binding("text", "name")),
gojs(go.TextBlock,
{
row: 1, column: 1,
maxSize: new go.Size(160, NaN), margin: 2,
font: "12px 'Microsoft Yahei'",
stroke: "white",
alignment: go.Spot.Left
},
new go.Binding("text", "duty")),
gojs(go.TextBlock,
{
row: 2, column: 1,
maxSize: new go.Size(160, NaN), margin: 2,
font: "12px 'Microsoft Yahei'",
stroke: "white",
alignment: go.Spot.Left
},
new go.Binding("text", "task")),
gojs("TreeExpanderButton", {
row: 0, column: 2, rowSpan: 3,
width: 20,
height: 20,
alignment: go.Spot.Right,
click: function (e, obj) {
if (obj.part != null) {
expandNode(obj.part);
}
}
})
)
);
diagram.linkTemplate =
gojs(go.Link, go.Link.Orthogonal,
{ corner: 5, selectable: false },
gojs(go.Shape, { strokeWidth: 1, stroke: "#424242" }));
overview =
gojs(go.Overview, "workdaily-gojs-overview",
{ observed: diagram, contentAlignment: go.Spot.Center });
var colors = {
leader: '#AC193D',
login: '#2672EC',
subordinate: '#8C0095'
};
diagram.layout.commitNodes = function () {
go.TreeLayout.prototype.commitNodes.call(diagram.layout);
diagram.layout.network.vertexes.each(function (v) {
if (v.node) {
var color = colors[v.node.data.role];
var shape = v.node.findObject("SHAPE");
if (shape) {
shape.fill = gojs(go.Brush, "Linear", { 0: color, 1: color, start: go.Spot.Left, end: go.Spot.Right });
}
}
});
};
var cxTool = diagram.toolManager.contextMenuTool;
var cxElement = document.getElementById("workdaily-gojs-contextmenu");
cxElement.addEventListener("contextmenu", function (e) {
e.preventDefault();
return false;
}, false);
cxElement.addEventListener("blur", function (e) {
cxTool.stopTool();
if (cxTool.canStart()) {
diagram.currentTool = cxTool;
cxTool.doMouseUp();
}
}, false);
cxElement.tabIndex = "1";
cxTool.showContextMenu = function (contextmenu, obj) {
var _diagram = this.diagram;
if (_diagram === null) return;
if (contextmenu !== this.currentContextMenu) {
this.hideContextMenu();
}
var display = false;
if (obj.part.data.role == 'subordinate') {
display = true;
}
if (display) {
cxElement.style.display = "block";
cxElement.setAttribute('data-uid', obj.part.data.id);
}
var mousePt = _diagram.lastInput.viewPoint;
cxElement.style.left = mousePt.x + "px";
cxElement.style.top = mousePt.y + 40 + "px";
this.currentContextMenu = contextmenu;
// gojs-view
$('#workdaily .dv-gojs-task .workdaily-header .title').text('“' + obj.part.data.name + '”的任务')
}
cxTool.hideContextMenu = function () {
if (this.currentContextMenu === null) return;
cxElement.style.display = "none";
cxElement.setAttribute('data-uid', '');
this.currentContextMenu = null;
}
function expandNode(node) {
diagram.startTransaction("CollapseExpandTree");
if (!node.data.everExpanded) {
diagram.model.setDataProperty(node.data, "everExpanded", true);
appendNode(node);
}
if (node.isTreeExpanded) {
diagram.commandHandler.collapseTree(node);
} else {
diagram.commandHandler.expandTree(node);
}
diagram.commitTransaction("CollapseExpandTree");
};
function appendNode(node) {
showWaitOverlay('.dv-gojs');
$.ajax({
url: openinfo.root + 'workdaily/gojstreesubordinate',
data: { uid: node.data.id },
type: 'POST',
dataType: 'json',
success: function (ret) {
if (ret.code == '00000') {
var subordinate = ret.data;
for (var i = 0; i < subordinate.length; i++) {
if (subordinate[i].sub) {
diagram.nodeTemplate.isTreeLeaf = false;
}
else {
diagram.nodeTemplate.isTreeLeaf = true;
}
diagram.model.addNodeData({
key: subordinate[i].id,
parent: node.data.key,
name: subordinate[i].name,
id: subordinate[i].id,
role: 'subordinate',
duty: '职务：',
task: '任务：' + subordinate[i].task || '0'
});
if (subordinate[i].sub) {
var _node = diagram.findNodeForKey(subordinate[i].id);
diagram.commandHandler.collapseTree(_node);
}
}
}
else {
swal('错误提示', ret.msg, 'error');
}
hideWaitOverlay();
},
error: function (xhr, msg, ex) {
error(xhr, msg, ex);
hideWaitOverlay();
}
});
};