Questions about groups

ThanhVu · March 1, 2013, 12:08pm

Hi, i have some questions about groups

In a diagram , how can i have different collapsed forms of some different groups i.e this group’s collapsed form is a rectangle while another group 's collapsed form is a picture.
How can i exclude a specific node in a group . For example: a group contains 4 nodes and i want to exclude a node then that group contains 3 nodes and the nodes that i excluded no longer belongs to that group

thanks

walter · March 1, 2013, 12:43pm

(1) I’m not sure how many kinds of appearances you want, either for expanded Groups or for collapsed ones.

One possibility is to have a Picture that is visible when the Group is collapsed and invisible when the Group is expanded. You could implement a Group.subGraphExpandedChanged function that makes the changes to the Group’s visual tree as you see fit.

Another possibility is to use different group templates. One template would have:

[code]myDiagram.groupTemplateMap.add("", // the default template for Groups
$(go.Group,
{ isSubGraphExpanded: true,
subGraphExpandedChanged: function(g) { g.category = “Collapsed”; },
. . . },
. . .));

myDiagram.groupTemplateMap.add(“Collapsed”,
$(go.Group,
{ isSubGraphExpanded: false,
subGraphExpandedChanged: function(g) { g.category = “”; },
. . . },
. . .));[/code]

(2) If you want to remove a Part from a Group without removing it from the Diagram, you can either set Part.containingGroup to null or to whatever Group you want to put it in, or you can call GraphLinksModel.setGroupKeyForNodeData. Remember to do either action within a transaction.

(The Group.subGraphExpandedChanged function is called within the transaction started by the CommandHandler.collapseSubGraph or expandSubGraph commands, so transactions were not needed in the answer to your first question.)

ThanhVu · March 6, 2013, 12:15pm

I meet a bug when using the group templates as you showed. The bug is like when i click the “Sub Graph Expander Button” to expend and collapse the group twice the group disappears . For example , first the group was in expanded form then i hit the button and it collapsed ( change the category to “collapsed”) and i hit the button again it returned to the expanded form (change the category to “”), Then this time i hit the button to collapse the group but i disappeared.

Besides, i have a model save to JSON updated for every change like in http://gojs.net/latest/samples/planogram.html example and i noticed that the group was still there in the NodeDataArray. Then i tried dragging a new node to the diagram from the palette and the group appeared again.

I really don’t know why. Could you help me with this?

thanks and if you need to see which part of my code just let me know

walter · March 6, 2013, 7:31pm

Posting the group templates might be useful.

ThanhVu · March 7, 2013, 10:57am

Here is the code in jsfiddle :
http://jsfiddle.net/thanhvu231/ufVUr/

walter · March 7, 2013, 7:38pm

I’m sorry, but there was so much code there I couldn’t understand what was going on.

ThanhVu · March 7, 2013, 11:54pm

My bad :) this is the version that i already get rid of all the unnecessary code. I modified the flowchart sample
http://gojs.net/latest/samples/flowchart.html and just add the ability to show the context menu when right click and group template map

Here the link: http://jsfiddle.net/thanhvu231/NsWb7/

walter · March 8, 2013, 7:58am

Changing the category of a Part such as your Group means that it reconstructs the Part using the new template. The only information that the Part has to go on is the data to which it is bound. So if you want to maintain the same position (or better, location), that information has to be saved on the data and you need a binding to that data property. If you expect the GraphObject/Part property value to change within the Diagram, as you might expect the Part.location to change when the user moves it, then you probably want a TwoWay Binding. If you want the SubGraphExpanderButton to stay in place, you’ll want to specify the Part.locationSpot and .locationObjectName to be that object.

Secondly I noticed that the “Collapsed” Group template continues to use a Placeholder. There’s nothing wrong with that, but I thought you explicitly wanted to avoid that because you wanted to employ a different representation of a collapsed group that had nothing to do with the member Parts.

ThanhVu · March 11, 2013, 8:04am

i tried making the binding but it seems to restart the collapsed form 's position to “0 0” the first time i collapse the group and the second time the position is “NaN NaN”

here is my code:

myDiagram.groupTemplateMap.add("",
$$(go.Group, go.Panel.Vertical, new go.Binding(“location”, “loc”).makeTwoWay(),
{ selectionObjectName: “PANEL”,
 locationObjectName:“PANEL”, // selection handle goes around shape, not label
ungroupable: true , isSubGraphExpanded: true ,
 subGraphExpandedChanged: function(g) { g.category = “Collapsed”; }},
 $$(“SubGraphExpanderButton”), // enable Ctrl-Shift-G to ungroup a selected Group
 …
 ));


myDiagram.groupTemplateMap.add(“Collapsed”,
$$(go.Group,go.Panel.Vertical, new go.Binding(“location”, “loc”).makeTwoWay(),
{ selectionObjectName: “PANEL”,isSubGraphExpanded: false,
 locationObjectName:“PANEL”,
subGraphExpandedChanged: function(g) { g.category = “”; },
},$$(“SubGraphExpanderButton”),

 $$(go.Shape,
{name: “shape”, fill:“white”,stroke: “white”,desiredSize: new go.Size(50, 50)}),
 $$(go.Picture,
 {row: 0, column: 0 ,source: “queue.png”}),
 $$(go.TextBlock,
{ font: “bold 12pt sans-serif”,
isMultiline: false, // don’t allow newlines in text
editable: true })
));