Gojs Subnode Arrangement Direction

@389689 wrote:

image.png1544x467 63.4 KB

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();
        }
    });
};

Posts: 1

Participants: 1

Read full topic