How to use the gojs.Margin 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.
guillaumejacquart / react-traefik / src / components / GoFlow.js View on Github 
isMultiline: false,
minSize: new go.Size(10, 16)
},
new go.Binding("text", "name").makeTwoWay()),
$(go.TextBlock, "Desc: ", textStyle(), {
row: 1,
column: 0
}),
$(go.TextBlock, textStyle(), {
row: 1,
column: 1,
columnSpan: 4,
editable: true,
isMultiline: false,
minSize: new go.Size(10, 14),
margin: new go.Margin(0, 0, 0, 3)
},
new go.Binding("text", "desc").makeTwoWay())
) // end Table Panel
) // end Horizontal Panel
); // end Node
var model = $(go.TreeModel);
var data =[];
var backends = {};
for (var p in props.data.providers) {
for (var b in props.data.providers[p].backends) {
var urls = '';
for (var s in props.data.providers[p].backends[b].servers) {
var url = props.data.providers[p].backends[b].servers[s].url;
var weight = props.data.providers[p].backends[b].servers[s].weight;// define the node's outer shape
$(go.Shape, "Rectangle", {
name: "SHAPE",
fill: "#00FF00",
stroke: null,
// set the port properties:
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer"
}),
$(go.Panel, "Horizontal",
$(go.Picture, {
name: "Picture",
desiredSize: new go.Size(39, 50),
margin: new go.Margin(6, 8, 6, 10),
},
new go.Binding("source", "key", findHeadShot)),
// define the panel where the text will appear
$(go.Panel, "Table", {
maxSize: new go.Size(150, 999),
margin: new go.Margin(6, 10, 0, 3),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, {
column: 2,
width: 4
}),
$(go.TextBlock, textStyle(), // the name
{
row: 0,
column: 0,portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer"
}),
$(go.Panel, "Horizontal",
$(go.Picture, {
name: "Picture",
desiredSize: new go.Size(39, 50),
margin: new go.Margin(6, 8, 6, 10),
},
new go.Binding("source", "key", findHeadShot)),
// define the panel where the text will appear
$(go.Panel, "Table", {
maxSize: new go.Size(150, 999),
margin: new go.Margin(6, 10, 0, 3),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, {
column: 2,
width: 4
}),
$(go.TextBlock, textStyle(), // the name
{
row: 0,
column: 0,
columnSpan: 5,
font: "12pt Segoe UI,sans-serif",
editable: true,
isMultiline: false,
minSize: new go.Size(10, 16)
},layout: $(go.ForceDirectedLayout),
'undoManager.isEnabled': true
})
// the template for each attribute in a node's array of item data
const itemTempl =
$(go.Panel, 'Horizontal',
$(go.Shape,
{ desiredSize: new go.Size(10, 10),
margin: new go.Margin(0, 5, 0, 0) },
new go.Binding('figure', 'figure'),
new go.Binding('fill', 'color')),
$(go.TextBlock,
{ stroke: '#333333',
font: 'bold 14px sans-serif',
margin: new go.Margin(0, 10, 0, 0) },
new go.Binding('text', 'name')),
$(go.TextBlock,
{ stroke: '#333333',
font: 'bold 14px sans-serif' },
new go.Binding('text', 'desc'))
)
// define the Node template, representing an entity
this.diagram.nodeTemplate =
$(go.Node, 'Auto', // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,this.diagram =
$(go.Diagram, 'erDiagramDiv', // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
'undoManager.isEnabled': true
})
// the template for each attribute in a node's array of item data
const itemTempl =
$(go.Panel, 'Horizontal',
$(go.Shape,
{ desiredSize: new go.Size(10, 10),
margin: new go.Margin(0, 5, 0, 0) },
new go.Binding('figure', 'figure'),
new go.Binding('fill', 'color')),
$(go.TextBlock,
{ stroke: '#333333',
font: 'bold 14px sans-serif',
margin: new go.Margin(0, 10, 0, 0) },
new go.Binding('text', 'name')),
$(go.TextBlock,
{ stroke: '#333333',
font: 'bold 14px sans-serif' },
new go.Binding('text', 'desc'))
)
// define the Node template, representing an entity
this.diagram.nodeTemplate =
$(go.Node, 'Auto', // the whole node panelconst type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
return ServerMapTheme.general.node[type].stroke;
}),
new go.Binding('strokeWidth', 'key', (key) => {
const type = serverMapComponent.isBaseApplication(key) ? 'main' : 'normal';
return ServerMapTheme.general.node[type].strokeWidth;
})
),
$(
go.TextBlock,
{
textAlign: 'center',
height: 20,
row: 1,
column: 0,
margin: new go.Margin(5, 10, 0, 10)
},
new go.Binding('font', 'key', (key: string) => {
const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
return ServerMapTheme.general.common.font[type];
}),
new go.Binding('stroke', '', () => {
return ServerMapTheme.general.node.normal.text.stroke;
}),
new go.Binding('text', '', (data) => {
return '[' + data.topCountNodes[0].applicationName.split(' ')[1] + ']' + data.serviceType.replace(/(.*)\_.*/ig, '$1');
})
)
),
$(
go.Panel,
go.Panel.Auto,new go.Binding('font', 'key', (key: string) => {
const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
return ServerMapTheme.general.common.font[type];
}),
new go.Binding('stroke', '', () => {
return ServerMapTheme.general.node.normal.text.stroke;
}),
new go.Binding('text', 'applicationName')
),
$(
go.Panel, 'Auto',
{ row: 0, column: 0, alignment: go.Spot.BottomCenter },
$(
go.TextBlock,
{
margin: new go.Margin(0, 0, 10, 0),
},
new go.Binding('visible', 'instanceCount', (v) => {
return v > 1 ? true : false;
}),
new go.Binding('font', '', () => {
return ServerMapTheme.general.common.font.normal;
}),
new go.Binding('stroke', '', () => {
return ServerMapTheme.general.instance.text.stroke;
}),
new go.Binding('text', 'instanceCount')
)
),
$(
go.Panel, 'Auto',
{ row: 0, column: 0, alignment: go.Spot.TopCenter },},
new go.Binding('visible', '', (data) => {
return data.isAuthorized && data.isWas;
}),
new go.Binding('parameter1', '', (data) => {
return calcuCircleData(CIRCLE_TYPE.RED, data.histogram, 50, 50, 50);
})
),
$(
go.TextBlock,
{
textAlign: 'center',
height: 20,
row: 1,
column: 0,
margin: new go.Margin(5, 10, 0, 10)
},
new go.Binding('font', 'key', (key: string) => {
const type = serverMapComponent.isBaseApplication(key) ? 'big' : 'normal';
return ServerMapTheme.general.common.font[type];
}),
new go.Binding('stroke', '', () => {
return ServerMapTheme.general.node.normal.text.stroke;
}),
new go.Binding('text', 'applicationName')
),
$(
go.Panel, 'Auto',
{ row: 0, column: 0, alignment: go.Spot.BottomCenter },
$(
go.TextBlock,
{gojs
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
