0
144
ViewsGojs node connecting to right
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
}),
});
·
Juan Pablo Isaza
1 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
Answer question