Questions on using 'group' functionality

GoJS
#1

I’m adding group functionality to a go.js diagram, and I wanted to know if I can use the existing group functionality to do what I require:

  • in each individual node i have this binding like this on a go.Picture go.Binding("source", "icon", (icon) => ${icon}.svg) i’d like to display all of these pictures in my group node. is there a way i can do this?
  • Rather than an expand/subexpand to view nodes, I’d like to be able to view the group members as a separate canvas, as the subgroup can get really large. Is there an approach I could take that would allow this?
#2

What code are you writing? ${icon}.svg?

How many or how big is “really large”?

A Part, such as a Node, cannot contain HTML, so it cannot contain a completely separate Diagram. I suppose you could have an HTML Div Element hosting a separate Diagram in front of the main Diagram. But if you claim it could be very large, I don’t see how that would help, performance-wise.

#3

In each individual node I have something like

go.Picture, { width, height, … }, new go.Binding(‘source’, ‘icon’, (icon: string) => ${icon}.svg)

And I want my group node to display all of these icons, so I need to somehow access all the node data from the group children within the group node.

The approach of expanding the group to a separate diagram here is specifically directed at ease of use rather than performance. It’s just visually too cluttered if everything is within the same diagram (ungrouping would already allow for everything to be displayed)

#4

Sorry, I guess I’m not being clear in my question. What does ${icon}.svg mean? Is all of this inside a template literal? But the rest of it looks like regular JavaScript, so I don’t know what you are trying to do there.

So your group’s member nodes each have one icon string associated with it? And you want to collect them all and use them in the group without using them in each node?

It would help if you have a sketch or a screenshot showing what you want, with labeling or description of what are the nodes and what is in the visual tree of the group.

#5

Sorry, I guess I’m not being clear in my question. What does ${icon}.svg mean? Is all of this inside a template literal? But the rest of it looks like regular JavaScript, so I don’t know what you are trying to do there.

the ui data on each node has an ‘icon’ property which is just a filepath to an svg image. i’m just using this property to set the source on a picture on each node.

So your group’s member nodes each have one icon string associated with it? And you want to collect them all and use them in the group without using them in each node?

yes

It would help if you have a sketch or a screenshot showing what you want, with labeling or description of what are the nodes and what is in the visual tree of the group.

here’s a drawing of what i’m trying to do.

image
image800×600 18.8 KB

the group here is supposed to be a portion of the diagram which resembles a singly linked list, with the head and tail (if present) being nodes outside the group itself.

#6

Group.memberParts provides the collection of member Parts, including member Nodes, so that is how you can get access to all of the images – i.e. the Pictures within those Nodes.