TreeLayout not considering node's location

@rameshtm wrote:

Hi All,

I use GOJS ER Diagram sample with Layout as TreeLayout. I have set node's location data and IsInitial as false and isOngoing as false and diagram is not positioning based on node's location set. Here my code:

var $ = go.GraphObject.make; // for conciseness in defining templates

        dgmEntityRelationship =
          $(go.Diagram, "dgmEntityRelationship",  // must name or refer to the DIV HTML element
            {
                initialContentAlignment: go.Spot.Top,
                allowDelete: false,
                allowCopy: false,
                layout: $(go.TreeLayout,  // use a TreeLayout to position all of the nodes
                  {
                      isInitial: false,
                      isOngoing: false,
                      treeStyle: go.TreeLayout.StyleRootOnly,
                      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, 0.999, 20, 0),
                      alternateChildPortSpot: go.Spot.Left
                  }),
                "undoManager.isEnabled": true,
                click: function(e, obj)
                {
                    var node = dgmEntityRelationship.selection.first();

                    if (node == null)
                    {
                        jQuery("#btnShowAddElementModal").attr("disabled", "disabled");
                    }
                }
            });

        // define several shared Brushes
        var bluegrad = $(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
        var greengrad = $(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" });
        var redgrad = $(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" });
        var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
        var lightgrad = $(go.Brush, "Linear", { 1: "#e1fdfb", 0: "#cfebfe" });

        // the template for each attribute in a node's array of item data
        var itemTempl =
          $(go.Panel, "Horizontal",
            $(go.Shape,
              { desiredSize: new go.Size(10, 10) },
              new go.Binding("figure", "figure"),
              new go.Binding("fill", "color")),


            $(go.Panel, "Table",
              {
                  margin: 2
              },
            $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
            $(go.RowColumnDefinition, { column: 0, width: 150 }),
            $(go.RowColumnDefinition, { column: 1, width: 100 }),
            $(go.TextBlock,
              {
                  row: 0,
                  column: 0, alignment: go.Spot.Left,
                  margin: new go.Margin(0, 4, 0, 2),  // leave room for Button
                  stroke: "#333333",
                  font: "bold 14px Roboto"
              },
              new go.Binding("text", "name")),
               {
                   toolTip:  // define a tooltip for each node that displays the color as text
                     $(go.Adornment, "Auto",
                       $(go.Shape, { fill: "#FFFFCC" }),
                       $(go.TextBlock, { margin: 4 },
                         new go.Binding("text", "name"))
                     )  // end of Adornment
               },
            $(go.TextBlock,
              {
                  row: 0,
                  column: 1,
                  alignment: go.Spot.Left,
                  margin: new go.Margin(0, 4, 0, 2),  // leave room for Button
                  stroke: "#333333",
                  font: "bold 14px Roboto"
              },
              new go.Binding("text", "dataType")))
          );

        // define the Node template, representing an entity
        dgmEntityRelationship.nodeTemplate =
          $(go.Node, "Auto",  // the whole node panel
            {
                selectionAdorned: false,
                resizable: true,
                layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                fromSpot: go.Spot.AllSides,
                toSpot: go.Spot.AllSides,
                isShadowed: true,
                shadowColor: "#d7d7d7",
            },
            {
                click: function (e, obj) {
                    var node = dgmEntityRelationship.selection.first();

                    if (node != null) {

                        if (node.data.key == "Root") {
                            jQuery("#btnDeleteElement").attr("disabled", "disabled");
                        }
                        else {
                            jQuery("#btnDeleteElement").removeAttr("disabled");
                        }

                        jQuery("#btnShowAddElementModal").removeAttr("disabled");
                    }
                }
            },
            new go.Binding("location", "loc").makeTwoWay(),
            // define the node's outer shape, which will surround the Table
            $(go.Shape, "RoundedRectangle",
              {
                  fill: lightgrad, stroke: "#2196f3", strokeWidth: 1,

              }),
            $(go.Panel, "Table",
              {
                  margin: 8, stretch: go.GraphObject.Fill
              },
              $(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
              // the table header
              $(go.TextBlock,
                {
                    row: 0, alignment: go.Spot.Center,
                    margin: new go.Margin(0, 14, 0, 2),  // leave room for Button
                    font: "bold 16px Roboto"
                },
                new go.Binding("text", "key")),
              // the collapse/expand button
              $("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
                { row: 0, alignment: go.Spot.TopRight }),
              // the list of Panels, each showing an attribute
              $(go.Panel, "Vertical",
                {
                    name: "LIST",
                    row: 1,
                    padding: 3,
                    alignment: go.Spot.TopLeft,
                    defaultAlignment: go.Spot.Left,
                    stretch: go.GraphObject.Horizontal,
                    itemTemplate: itemTempl
                },
                new go.Binding("itemArray", "items"))
            )  // end Table Panel
          );  // end Node

        // define the Link template, representing a relationship
        dgmEntityRelationship.linkTemplate =
          $(go.Link,  // the whole link panel
            {
                selectionAdorned: true,
                layerName: "Foreground",
                reshapable: true,
                routing: go.Link.AvoidsNodes,
                corner: 5,
                curve: go.Link.JumpOver
            },
            $(go.Shape,  // the link shape
              { stroke: "#333333", strokeWidth: 1.5}),
            $(go.TextBlock,  // the "from" label
              {
                  textAlign: "center",
                  font: "14px Roboto",
                  stroke: "#1967B3",
                  segmentIndex: 0,
                  segmentOffset: new go.Point(NaN, NaN),
                  segmentOrientation: go.Link.None
              },
              new go.Binding("text", "text")),
            $(go.TextBlock,  // the "to" label
              {
                  textAlign: "center",
                  font: "bold 14px Roboto",
                  stroke: "#1967B3",
                  segmentIndex: -1,
                  segmentOffset: new go.Point(NaN, NaN),
                  segmentOrientation: go.Link.None
              },
              new go.Binding("text", "toText"))
          );

        loadDiagramData();
    }

Please help me to find the issue. Thank you for your help!!!

Posts: 1

Participants: 1

Read full topic