How to use the gojs.Link 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.
vip-git / react-ssr-advanced-seed / src / client / web / app / common / components / doc-gen / umldoc.tsx View on Github 
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,locationSpot: go.Spot.Center,
selectionAdorned: true,
toolTip: commonToolTip
},
this.$(go.Shape, 'Circle',
{ fill: 'white' }),
this.$(go.TextBlock,
{ font: 'bold 12pt sans-serif', margin: 5 },
new go.Binding('text'))
));
// define the Link template
this.myDiagram.linkTemplate =
this.$(go.Link,
{
routing: go.Link.Normal,
curve: go.Link.Bezier,
selectionAdorned: false,
layerName: 'Background'
},
this.$(go.Shape,
{
stroke: 'black', // default value, but is data-bound
strokeWidth: 1
},
new go.Binding('stroke', 'color'))
);
this.myDiagram.addDiagramListener('ChangedSelection', (e: any) => {
// check for selection changes.. especially when Multiselect is off
if (e.diagram.selection.count === 0) { // if in non Multiselect all selections removed
// reset all
this.selectedProperties = [];textAlign: 'center',
font: 'bold 14px sans-serif',
stroke: '#1967B3',
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding('text', 'text')),
$(go.TextBlock, // the 'to' label
{
textAlign: 'center',
font: 'bold 14px sans-serif',
stroke: '#1967B3',
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding('text', 'toText'))
)
},});
}
var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link",
$(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth
);
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "#F8F8F8", stroke: null }),
$(go.TextBlock,
{
textAlign: "center",defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding('itemArray', 'fields'))
) // end Table Panel
) // end Node
// define the Link template, representing a relationship
this.diagram.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: '#303B45', strokeWidth: 2.5 }),
$(go.TextBlock, // the 'from' label
{
textAlign: 'center',
font: 'bold 14px sans-serif',
stroke: '#1967B3',
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding('text', 'text')),
$(go.TextBlock, // the 'to' labelnode.ports.each(function(port) {
if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
}
var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link",
$(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth
);
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shapethis.$(go.Node, 'Auto',
{
locationSpot: go.Spot.Center,
selectionAdorned: true,
toolTip: commonToolTip
},
this.$(go.Shape, 'Circle',
{ fill: 'white' }),
this.$(go.TextBlock,
{ font: 'bold 12pt sans-serif', margin: 5 },
new go.Binding('text'))
));
// define the Link template
this.myDiagram.linkTemplate =
this.$(go.Link,
{
routing: go.Link.Normal,
curve: go.Link.Bezier,
selectionAdorned: false,
layerName: 'Background'
},
this.$(go.Shape,
{
stroke: 'black', // default value, but is data-bound
strokeWidth: 1
},
new go.Binding('stroke', 'color'))
);
this.myDiagram.addDiagramListener('ChangedSelection', (e: any) => {
// check for selection changes.. especially when Multiselect is off
if (e.diagram.selection.count === 0) { // if in non Multiselect all selections removednew go.Binding('routing', 'routing', (val) => {
return go.Link[val];
}),
new go.Binding('curve', 'curve', (val) => {public static makeLinkTemplate(serverMapComponent: any) {
const $ = go.GraphObject.make;
return $(
go.Link,
{
corner: 10,
cursor: 'pointer',
layerName: 'Foreground',
reshapable: false,
selectionAdorned: false,
click: (event: go.InputEvent, obj: go.GraphObject) => {
serverMapComponent.onClickLink(event, obj);
},
doubleClick: (event: go.InputEvent, obj: go.GraphObject) => {
serverMapComponent.onDoubleClickLink(event, obj);
},
contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
serverMapComponent.onContextClickLink(event, obj);
}
},gojs
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
