Hi again.
after creating a CustomSubGraphExpanderButton which is transparent and covers most of a group, the contextMenu is reachable only on the part the button is not covering.
the strange thing is, after I right click once on the reachable area, it starts working everywhere, up to the point I click on the diagram, then it stops again.?
any ideas?
Do you need to use a SubGraphExpanderButton in this case? If you want the whole group to be clickable to expand/collapse, you could just modify the group’s click function to work like the SubGraphExpanderButton’s click.
A more detailed description of how you want it to work would help us.
no need for the button ,
is there a code example for how to make the group clickable?
Here you go:
Notice that the main shape for the group has a fill of “transparent” so that it is clickable.
this is the template I have:
$(go.Group, "Vertical",
new go.Binding("visible"),
new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
isSubGraphExpanded: false,
selectionAdorned: false,
layout: $(go.GridLayout),
subGraphExpandedChanged: function(group) {
myDiagram.startTransaction("graph");
if (group.isSubGraphExpanded !== false ) {
// expand
if(group.data.siteId !== null && group.data.siteId !== undefined){
that.getDevicesForSite(group.data);
}
for (let i = 0; i < myDiagram.model.nodeDataArray.length; i++ ) {
let nodeData = myDiagram.model.findNodeDataForKey(myDiagram.model.nodeDataArray[i].key);
myDiagram.model.setDataProperty(nodeData, "visible", false);
}
myDiagram.model.setDataProperty(group.data, "isVisited", 'purple');
that.createCrumb(group.data.displayName, group.data.key, group.data.nodeLevel);
let it = group.memberParts;
while (it.next()) {
let node = it.value;
let nodeData = myDiagram.model.findNodeDataForKey(node.data.key);
myDiagram.model.setDataProperty(nodeData, "visible", true);
}
let groupData = myDiagram.model.findNodeDataForKey(group.data.key);
myDiagram.model.setDataProperty(groupData, "groupVisible", false);
myDiagram.model.setDataProperty(groupData, "visible", true);
if (groupData.group !== undefined) {
let parentGroup = groupData.group;
while(parentGroup !== undefined && parentGroup !== 0) {
let nodeData = myDiagram.model.findNodeDataForKey(parentGroup);
myDiagram.model.setDataProperty(nodeData, "visible", true);
parentGroup = nodeData.group;
}
}
}
myDiagram.commitTransaction("graph");
} // subGraphExpanderClicked
},
$(go.Panel, "Auto",
$(go.Panel, "Vertical",
$(go.Panel, "Auto", new go.Binding("height", 'height'),
$(go.Shape, "RoundedRectangle", { stroke: "#acacac", fill: 'white', width: 160, strokeWidth: 2 }, new go.Binding('stroke', 'isVisited')),
new go.Binding("visible", "groupVisible"),
this.groupInnerTemplate(),
$(go.Picture, { alignment: go.Spot.Top, margin: new go.Margin(10,0,0,0) }, new go.Binding("source", 'icon'), new go.Binding("scale", 'imgSize')),
$("CustomSubGraphExpanderButton", { width: 160, height: 130, name: 'groupTemplateButton' },
{
'_buttonFillNormal': 'transparent',
'_buttonFillOver': 'transparent',
'_buttonStrokeNormal': 'transparent',
'_buttonStrokeOver': 'transparent',
'ButtonBorder.fill': 'transparent',
'ButtonBorder.stroke': 'transparent',
alignment: go.Spot.Top, margin: new go.Margin(10,0,0,0)
})
)
))
);
when I add the code for click from your code it does not work: I guess since the group icon and text cover the entire group?
That doesn’t look like a full group template, so it’s hard to tell what the problem might be. Also, could you please format it inside triple backquotes and properly indent it?
I;ve loaded the entire template, this is the inner template:
$(go.Panel, "Auto", { alignment: go.Spot.Bottom, width: 160},
$(go.Panel, "Vertical", {width: 160},
$(go.TextBlock, { width: 150, textAlign: 'center', font: "bold 14pt rubikregular", stroke: '#666' }, new go.Binding("text", "displayName")),
$(go.Panel, 'Auto', {width: 160, margin: new go.Margin(15,0,0,0)},
$(go.Shape, "Rectangle", { width: 160, stroke: "#acacac", fill: 'white' }),
$(go.Panel, "Table", { stretch: go.GraphObject.Fill, margin: new go.Margin(3,0,0,0) },
$(go.Panel, "Auto", { width: 51, height: 30, row: 0, column: 0, stretch: go.GraphObject.Fill, margin: new go.Margin(0,0,0,3) },
$(go.Shape, "Rectangle", { stroke: "#acacac" },
new go.Binding("fill", "regularPriorityCounter", function (val) {
if (val === 0) return "transparent"; else return "#e8dc22";
})),
$(go.TextBlock, { margin: 3, font: "regular 16pt rubiklight" }, new go.Binding("text", "regularPriorityCounter", (val) => { return val === 0 ? "" : val }))
),
$(go.Panel, "Auto", { width: 51,row: 0, column: 1, stretch: go.GraphObject.Fill},
$(go.Shape, "Rectangle", { stroke: "#acacac" },
new go.Binding("fill", "highPriorityCounter", function (val) {
if (val === 0) return "transparent"; else return "#fbae2d";
})),
$(go.TextBlock, { margin: 3, font: "regular 16pt rubiklight" }, new go.Binding("text", "highPriorityCounter", (val) => {return val === 0 ? "" : val}))
),
$(go.Panel, "Auto", { width: 51,row: 0, column: 2, stretch: go.GraphObject.Fill, margin: new go.Margin(0,3,0,0) },
$(go.Shape, "Rectangle", { stroke: "#acacac" },
new go.Binding("fill", "urgencyPriorityCounter", function (val) {
if (val === 0) return "transparent"; else return "#bf272d";
})),
$(go.TextBlock, { margin: 3, font: "regular 16pt rubiklight", stroke: "#ffffff" }, new go.Binding("text", "urgencyPriorityCounter", (val) => { return val === 0 ? "" : val}))
)
)
)
)
)
Much better :). You seem to have some unnecessary panels in your template. Panels should typically have more than 1 element. You should be able to add the click function at the top level:
$(go.Group, "Auto",
new go.Binding("visible", "groupVisible"),
new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("height"),
{
isSubGraphExpanded: false,
selectionAdorned: false,
layout: $(go.GridLayout),
click: function(e, obj) { ... }
subGraphExpandedChanged: function(group) { ... }
},
$(go.Shape, "RoundedRectangle",
{ stroke: "#acacac", fill: 'white', width: 160, strokeWidth: 2 },
new go.Binding('stroke', 'isVisited')
),
this.groupInnerTemplate(),
$(go.Picture,
{ alignment: go.Spot.Top, margin: new go.Margin(10,0,0,0) },
new go.Binding("source", 'icon'),
new go.Binding("scale", 'imgSize')
)
)
Notice I’ve also removed what appear to be some unneeded panels to simplify the template.
working perfectly
thanks again for the great support