2014-09-04 3 views
1

Comme je peux faire pour GoJS tous les éléments qui se trouvent dans un groupe avant en ligne les uns des autres et non par paires comme ils apparaissent actuellement, donc je veux:GoJS position des nœuds

S -> A -> B -> E

Mais apparaissent en fait comme ceci:

S -> A

B -> E

bien ici, je mets l'exemple jsFiddle, merci ver y beaucoup pour l'aide.

// Groups consist of a title in the color given by the group node data 
    // above a translucent gray rectangle surrounding the member parts 
    myDiagram.groupTemplate = 
     $(go.Group, "Horizontal", 
     { selectionObjectName: "PANEL", // selection handle goes around shape, not label 
      ungroupable: true }, // enable Ctrl-Shift-G to ungroup a selected Group 
     $(go.TextBlock, 
      { 
      font: "13px sans-serif", 
      isMultiline: false, // don't allow newlines in text 
      editable: true // allow in-place editing by user 
      }, 
      new go.Binding("text", "text").makeTwoWay(), 
      new go.Binding("stroke", "color")), 
     $(go.Panel, "Auto", 
      { name: "PANEL" }, 
      $(go.Shape, "Process", // the rectangular shape around the members 
      { fill: "#FFF", stroke: "#333", strokeWidth: 1, width: 400 }), 
      $(go.Placeholder, { padding: 10 }) // represents where the members are 
     ), 
     { // this tooltip Adornment is shared by all groups 
      toolTip: 
      $(go.Adornment, "Auto", 
       $(go.Shape, { fill: "#FFFFCC" }), 
       $(go.TextBlock, { margin: 4 }, 
       // bind to tooltip, not to Group.data, to allow access to Group properties 
       new go.Binding("text", "", groupInfo).ofObject()) 
      ) 
     } 
    ); 

Répondre

2

Utilisez un GridLayout à l'intérieur du groupe:

myDiagram.groupTemplate = 
    $(go.Group, "Horizontal", 
    { selectionObjectName: "PANEL", // selection handle goes around shape, not label 
     ungroupable: true, 
     layout: $(go.GridLayout) 
    }, 

De plus au centre, les noeuds dans la mise en page, vous pouvez régler le locationSpot au centre:

myDiagram.nodeTemplate = 
    $(go.Node, "Auto", 
    { locationSpot: go.Spot.Center }, 

Notez que le S et E les noeuds sont grands à cause de leur définition, donc il semble qu'ils soient décentrés mais ils ne le sont pas (sélectionnez-les pour voir ce que je veux dire)

http://jsfiddle.net/rb7nyxfd/6/

Questions connexes