How to use gojs - 10 common examples
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.
vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github 
default: return "";
}
}
function convertToArrow(r) {
switch (r) {
case "generalization": return "Triangle";
case "aggregation": return "StretchedDiamond";
default: return "";
}
}
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal },
new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
$(go.Shape),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("fromArrow", "relationship", convertFromArrow)),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("toArrow", "relationship", convertToArrow))
);
// console.log('doc engine response', this.props.docs);
// setup a few example class nodes and relationships
var nodedata: any = [
{
key: 1,
name: this.props.docs.rootModel.modelName,
libraries: [],
components: []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;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
});case "generalization": return "";
default: return "";
}
}
function convertToArrow(r) {
switch (r) {
case "generalization": return "Triangle";
case "aggregation": return "StretchedDiamond";
default: return "";
}
}
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal },
new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
$(go.Shape),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("fromArrow", "relationship", convertFromArrow)),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("toArrow", "relationship", convertToArrow))
);
// console.log('doc engine response', this.props.docs);
// setup a few example class nodes and relationships
var nodedata: any = [
{
key: 1,
name: this.props.docs.rootModel.modelName,
libraries: [],switch (r) {
case "generalization": return "";
default: return "";
}
}
function convertToArrow(r) {
switch (r) {
case "generalization": return "Triangle";
case "aggregation": return "StretchedDiamond";
default: return "";
}
}
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal },
new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
$(go.Shape),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("fromArrow", "relationship", convertFromArrow)),
$(go.Shape, { scale: 1.3, fill: "white" },
new go.Binding("toArrow", "relationship", convertToArrow))
);
// console.log('doc engine response', this.props.docs);
// setup a few example class nodes and relationships
var nodedata: any = [
{
key: 1,
name: this.props.docs.rootModel.modelName,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;ngAfterViewInit(): void {
this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
{
initialContentAlignment: go.Spot.Center,
padding: 10,
isReadOnly: false,
'animationManager.isEnabled': false, // disable Animation
'allowVerticalScroll': false, // no vertical scroll for diagram
'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
});
this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
let commonToolTip = this.$(go.Adornment, 'Auto',
{
isShadowed: true
},
this.$(go.Shape, { fill: '#FFFFCC' }),
this.$(go.Panel, 'Vertical',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 =ngAfterViewInit(): void {
this.myDiagram = this.$(go.Diagram, this.div.nativeElement,
{
initialContentAlignment: go.Spot.Center,
padding: 10,
isReadOnly: false,
'animationManager.isEnabled': false, // disable Animation
'allowVerticalScroll': false, // no vertical scroll for diagram
'toolManager.mouseWheelBehavior': go.ToolManager.WheelNone // do not zoom diagram on wheel scroll
});
this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'red' }), this.myDiagram.findLayer('Grid'));
this.myDiagram.addLayerBefore(this.$(go.Layer, { name: 'green' }), this.myDiagram.findLayer('Grid'));
let commonToolTip = this.$(go.Adornment, 'Auto',
{
isShadowed: true
},
this.$(go.Shape, { fill: '#FFFFCC' }),
this.$(go.Panel, 'Vertical',
{
margin: 3
},
this.$(go.TextBlock, // bound to node data
{
margin: 4, font: 'bold 12pt sans-serif'
},
new go.Binding('text')),
this.$(go.TextBlock, // bound to Adornment because of call to Binding.ofObject
new go.Binding('text', '',
(ad) => {gojs
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
