Gojs node connecting to right

user_8526311 0
Viewed 67

I want to make the tree add new node always to the rightest side of the list from some reason he put it in from the left side. my Diagram init look like this. There is an option to do it WITHOUT comparer?

      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
      "undoManager.isEnabled": true,

      initialContentAlignment: go.Spot.TopCenter,
      initialAutoScale: go.Diagram.Uniform,
      hasHorizontalScrollbar: true,
      allowDelete: false,
      layout: $(go.TreeLayout, {
        angle: 90,
        nodeSpacing: 100,
      }),
      model: $(go.GraphLinksModel, {
        linkKeyProperty: "key", // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
      }),
    });

enter image description here

gojs reactjs javascript
1 Answers

I don't see why you wouldn't want to set TreeLayout.comparer.

But one simple solution is to set TreeLayout.sorting to go.TreeLayout.SortingReverse. For example:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button id="myTestButton">Test</button>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout:
        $(go.TreeLayout,
          { angle: 90, sorting: go.TreeLayout.SortingReverse })
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Top },
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 3, to: 4 },
]);

document.getElementById("myTestButton").addEventListener("click", e => {
    let node = myDiagram.selection.first();
    if (!node) node = myDiagram.nodes.first();
    if (node instanceof go.Node) {
      myDiagram.model.commit(m => {
        const d = { text: "New Node", color: go.Brush.randomColor() };
        m.addNodeData(d);
        const n = myDiagram.findNodeForData(d);
        if (n) n.location = node.location;
        m.addLinkData( { from: node.key, to: n.key });
      });
    }
  });
  </script>
</body>
</html>

Click on the "Test" button to add a tree-child node to the selected node.

user_50829780
Related