Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// bind the Part.layerName to control the Node's layer depending on whether it isSelected
new go.Binding("layerName", "isSelected", function(sel) {
return sel ? "Foreground" : "";
}).ofObject(),
// 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
}),
{
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) => {
return 'Connections: ' + ad.adornedPart.linksConnected.count;
}).ofObject())
) // end Vertical Panel
); // end Adornment
this.myDiagram.nodeTemplate =
$("PanelExpanderButton", "METHODS",
{ row: 14, column: 1, alignment: go.Spot.TopRight, visible: false },
new go.Binding("visible", "actions", function(arr) { return arr.length > 0; })),
// Effects
$(go.TextBlock,
{
row: 15, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
font: "italic bold 10pt sans-serif",
isMultiline: false, editable: true
},"effects"),
// methods
$(go.TextBlock, "Effects",
{ row: 16, font: "italic 10pt sans-serif" },
new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("METHODS")),
$(go.Panel, "Vertical", { name: "METHODS" },
new go.Binding("itemArray", "effects"),
{
row: 16, margin: 3, stretch: go.GraphObject.Fill,
defaultAlignment: go.Spot.Left, background: "lightyellow",
itemTemplate: methodTemplate
}
),
$("PanelExpanderButton", "METHODS",
{ row: 16, column: 1, alignment: go.Spot.TopRight, visible: false },
new go.Binding("visible", "effects", function(arr) { return arr.length > 0; })),
// Reducer
$(go.TextBlock,
{
row: 17, columnSpan: 2, margin: 3, alignment: go.Spot.LeftCenter,
font: "italic bold 10pt sans-serif",
initDiagram () {
const $ = go.GraphObject.make
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'))
)
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",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
const { containers } = this.props.docs;
contextClick: (event: go.InputEvent, obj: go.GraphObject) => {
serverMapComponent.onContextClickNode(event, obj);
}
},
new go.Binding('key', 'key'),
new go.Binding('category', 'serviceType'),
$(
go.Shape,
{
strokeWidth: 0,
figure: 'Rectangle',
fill: null,
}
),
$(
go.Panel,
go.Panel.Table,
{
cursor: 'pointer'
},
$(go.RowColumnDefinition, {column: 0, minimum: 108}),
$(
go.Shape,
{
row: 0,
column: 0,
width: 108,
height: 108,
figure: 'Circle',
position: new go.Point(-4, -4),
},
new go.Binding('fill', 'key', (key) => {
go.Picture,
{
margin: new go.Margin(5, 0, 0, 0),
width: 28,
height: 28,
source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.filter),
visible: false,
imageStretch: go.GraphObject.Uniform
},
new go.Binding('visible', 'isFiltered')
)
)
),
$(
go.Panel,
go.Panel.Auto,
{
position: new go.Point(10, 0),
width: 120,
height: 120
},
$(
go.Picture,
{
width: 20,
height: 20,
source: ServerMapTheme.general.common.funcServerMapImagePath(ServerMapTheme.general.common.icon.error),
imageStretch: go.GraphObject.Uniform
},
new go.Binding('visible', '', (data) => {
return data.isAuthorized && data.hasAlert;
})