If i remove the “Circle” object from the template, it works fine.
Here is the Group template :
defaultGroupTemplate(that) {
var GO = that.GO;
var x =
GO(go.Group, "Auto", // Header and group members panel one below each other
{
isSubGraphExpanded: false,
ungroupable: true,
background: "white",
mouseOver: function (e, node) { node.isShadowed = true; },
mouseLeave: function (e, node) { node.isShadowed = node.isSelected; },
doubleClick: function (e, node) { that.diagram.commandHandler.expandSubGraph(node); },
toolTip: that.siteTooltip(GO)
},
new go.Binding("scale", "groupPictureScale").makeTwoWay(),
new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isSubGraphExpanded").makeTwoWay(),
new go.Binding("isShadowed", "isSelected", function (s) { return s; }).ofObject(),
GO(go.Shape, "RoundedRectangle",
{
fill: "transparent",
isPanelMain: true,
stroke: that.CONST_GROUP_BORDER_COLOR,
strokeWidth: CONST_GROUP_BORDER_WIDTH
},
new go.Binding("stroke", "statusColor"),
new go.Binding("opacity", "groupMonitoringOpacity"),
),
// Panel for holding COLLAPSED Group Header info
GO(go.Panel, "Vertical",
GO(go.Panel, "Table",
{
stretch: go.GraphObject.Horizontal,
background: "#124386",
},
// Panel for implementing our own custom SubGraph Expander Button
GO(go.Panel, "Spot",
{ column: 0, },
new go.Binding("visible", "isSubGraphExpanded", function (s) { return s; }).ofObject(),
GO(go.Shape, "Rectangle",
{
desiredSize: new go.Size(34, 34),
fill: "#124386",
//stroke: "white",
stroke: that.CONST_GROUP_BORDER_COLOR,
click: function (e, node) { that.diagram.commandHandler.collapseSubGraph(node); }
},
),
GO(go.Shape, "Rectangle",
{
desiredSize: new go.Size(10, 2),
fill: "white",
stroke: "transparent",
alignment: go.Spot.Center,
click: function (e, node) { that.diagram.commandHandler.collapseSubGraph(node); }
},
)
),
// group name in Header
GO(go.TextBlock,
{
column: 1,
font: "bold 14pt rubikregular",
editable: false,
stroke: "white",
margin: 2,
verticalAlignment: go.Spot.Center,
textAlign: "center",
stretch: go.GraphObject.Horizontal,
},
new go.Binding("text", "groupName").makeTwoWay(),
new go.Binding("editable", "isAutomaticGroup", function (val) { return !val; }),
),
new go.Binding("stroke", "statusColor")
), // Horizontal Panel
// Panel for Holding Group Info (name, icon, site) and place holder
GO(go.Panel, "Auto",
{ width: 100, height: 150 },
new go.Binding("visible", "isSubGraphExpanded", function (s) { return !s; }).ofObject(),
GO(go.Panel, "Spot",
// a Dedicated "hidden" shape (height=0) to enable connection between collapsed group links.
GO(go.Shape, "Circle",
{
height: 0,
portId: "",
stretch: go.GraphObject.Horizontal,
name: "LinkConnectorShape"
}
),
// The portId serves as the link connector
GO(go.Panel, "Vertical",
{
alignment: go.Spot.Top,
minSize: new go.Size(90, 80)
},
// Group Icon
GO(go.Picture, {
scale: 0.9,
margin: new go.Margin(20, 0, 0, 0)
},
new go.Binding("source"),
),
// operAssociation - שיוך מבצעי
GO(go.TextBlock,
{
font: that.CONST_DEFAULT_FONT,
editable: false,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
width: 90,
margin: new go.Margin(10, 0, 0, 0)
},
new go.Binding("text", "operAssociation"),
new go.Binding("visible", "operAssociation", function (s) { return (s != null && s != ''); }),
),
// group address
GO(go.TextBlock,
{
font: that.CONST_DEFAULT_FONT,
editable: false,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
width: 90
},
new go.Binding("text", "address"),//IDO changed from groupName
new go.Binding("visible", "address", function (s) { return (s != null && s != ''); }),
),
// Quality Message
GO(go.TextBlock,
{
font: that.CONST_DEFAULT_FONT,
editable: false,
},
// if mobile and has modem with rx quality - show in group
new go.Binding("visible", "siteMobilityCode", function (siteMobilityCode, obj) {
if (obj["part"].data.networkType == undefined) // show site type for site group only
return (siteMobilityCode != null && siteMobilityCode == 1);
else
return false;
}),
new go.Binding("text", "rxQUalityMsg"),
new go.Binding("stroke", "rxTextColor")
),
),
),
// if mobile and has modem with rx quality - show rxquality icon in group
GO(go.Picture, {
scale: 1.4,
alignment: go.Spot.TopRight,
},
new go.Binding("visible", "siteMobilityCode", function (siteMobilityCode, obj) {
if (obj["part"].data.networkType == undefined) // show site type for site group only
return (siteMobilityCode != null && siteMobilityCode == 1);
else
return false;
}),
new go.Binding("source", "rxQUalityIcon", function (q) {
let icon = "";
var qualityString = ['', 'week', 'poor', 'good', 'best'];
if (q > 0)
icon = 'rx_quality_' + qualityString[q] + '.svg';
return NetMapDiagramComponent.CONST_ICON_RELATIVE_PATH + icon;
})
),
// Site Status -
// (show this textbox only if site status is NOT KAYAM)
GO(go.TextBlock,
{
visible: false,
background: 'rgba(0,0,0,0.4)',
height: 25, width: 100,
textAlign: 'center',
font: "bold 13pt rubikregular",
stroke: '#fff',
verticalAlignment: go.Spot.Center
},
new go.Binding("visible", "statusCode", function (statusCode, obj) {
// if the group type if of NetworkType or User, dont show the status (visible=false)
if (obj["part"].data.networkType != undefined || statusCode == undefined)
return false;
else
// the group is of site with site status code. Show the status only of statusCode NOT KAYAM(0)
return statusCode != 0;
}
),
new go.Binding("text", "statusCode", function (statusCode, obj) {
// show the value of group type of Site only and only is statusCode exists
if (obj["part"].data.networkType == undefined && statusCode != undefined) {
var statusString = ['קיים', 'בפירוק', 'בהקמה', 'בדילוג', 'לא פעיל'];
return statusString[statusCode];
}
})
) // textblock
),
// Panel for holding Group members
GO(go.Panel, "Auto",
new go.Binding("visible", "isSubGraphExpanded", function (s) { return s; }).ofObject(),
GO(go.Placeholder, // represents area for all member parts
{ background: "transparent", margin: 10 },
) // Place holder
) // Auto
) // Auto
);
return x;
}
