How to use the gojs.TreeLayout function in gojs
To help you get started, we’ve selected a few gojs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
nicolaserny / react-gojs-example / src / GraphView.tsx View on Github 
init() {
const $ = go.GraphObject.make; // for conciseness in defining templates
this.myDiagram = $(
go.Diagram,
'myDiagramDiv', // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.LeftCenter,
layout: $(
go.TreeLayout,
{
angle: 0,
arrangement: go.TreeLayout.ArrangementVertical,
treeStyle: go.TreeLayout.StyleLayered
}),
isReadOnly: true
});
this.myDiagram.allowHorizontalScroll = true;
this.myDiagram.allowVerticalScroll = true;
this.myDiagram.allowZoom = false;
this.myDiagram.allowSelect = true;
this.myDiagram.autoScale = Diagram.Uniform;
this.myDiagram.contentAlignment = go.Spot.LeftCenter;
this.myDiagram.toolManager.panningTool.isEnabled = false;
this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;
// define a simple Node template
this.myDiagram.nodeTemplate =
$(init() {
const $ = go.GraphObject.make; // for conciseness in defining templates
this.myDiagram = $(
go.Diagram,
'myDiagramDiv', // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.LeftCenter,
layout: $(
go.TreeLayout,
{
angle: 0,
arrangement: go.TreeLayout.ArrangementVertical,
treeStyle: go.TreeLayout.StyleLayered
}),
isReadOnly: true
});
this.myDiagram.allowHorizontalScroll = true;
this.myDiagram.allowVerticalScroll = true;
this.myDiagram.allowZoom = false;
this.myDiagram.allowSelect = true;
this.myDiagram.autoScale = Diagram.Uniform;
this.myDiagram.contentAlignment = go.Spot.LeftCenter;
this.myDiagram.toolManager.panningTool.isEnabled = false;
this.myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;
// define a simple Node template
this.myDiagram.nodeTemplate =componentDidMount() {
var $ = go.GraphObject.make;
var myDiagram: any = {};
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true,
layout: $(go.TreeLayout,
{ // this only lays out in trees nodes connected by "generalization" links
angle: 90,
path: go.TreeLayout.PathSource, // links go from child to parent
setsPortSpot: false, // keep Spot.AllSides for link connection spot
setsChildPortSpot: false, // keep Spot.AllSides
// nodes not connected by "generalization" links are laid out horizontally
arrangement: go.TreeLayout.ArrangementHorizontal
})
});
// show visibility or access as a single character at the beginning of each property or method
function convertVisibility(v) {
switch (v) {
case "public": return "+";
case "private": return "-";
case "protected": return "#";componentDidMount() {
var $ = go.GraphObject.make;
var myDiagram: any = {};
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true,
layout: $(go.TreeLayout,
{ // this only lays out in trees nodes connected by "generalization" links
angle: 90,
path: go.TreeLayout.PathSource, // links go from child to parent
setsPortSpot: false, // keep Spot.AllSides for link connection spot
setsChildPortSpot: false, // keep Spot.AllSides
// nodes not connected by "generalization" links are laid out horizontally
arrangement: go.TreeLayout.ArrangementHorizontal
})
});
// show visibility or access as a single character at the beginning of each property or method
function convertVisibility(v) {
switch (v) {
case "public": return "+";
case "private": return "-";
case "protected": return "#";
case "package": return "~";
default: return v;
}private createDiagram(diagramId: string): Diagram {
const $ = go.GraphObject.make;
const myDiagram: Diagram = $(go.Diagram, diagramId, {
initialContentAlignment: go.Spot.LeftCenter,
layout: $(go.TreeLayout, {
angle: 0,
arrangement: go.TreeLayout.ArrangementVertical,
treeStyle: go.TreeLayout.StyleLayered
}),
isReadOnly: false,
allowHorizontalScroll: true,
allowVerticalScroll: true,
allowZoom: false,
allowSelect: true,
autoScale: Diagram.Uniform,
contentAlignment: go.Spot.LeftCenter,
TextEdited: this.onTextEdited
});
myDiagram.toolManager.panningTool.isEnabled = false;
myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;
myDiagram.nodeTemplate = $(private createDiagram(diagramId: string): Diagram {
const $ = go.GraphObject.make;
const myDiagram: Diagram = $(go.Diagram, diagramId, {
initialContentAlignment: go.Spot.LeftCenter,
layout: $(go.TreeLayout, {
angle: 0,
arrangement: go.TreeLayout.ArrangementVertical,
treeStyle: go.TreeLayout.StyleLayered
}),
isReadOnly: false,
allowHorizontalScroll: true,
allowVerticalScroll: true,
allowZoom: false,
allowSelect: true,
autoScale: Diagram.Uniform,
contentAlignment: go.Spot.LeftCenter,
TextEdited: this.onTextEdited
});
myDiagram.toolManager.panningTool.isEnabled = false;
myDiagram.toolManager.mouseWheelBehavior = ToolManager.WheelScroll;gojs
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
