Hi,
I have been trying to implement a similar kind of UI which mentioned here :
The difference is the GroupTemplate defined on the example need to stick to both ends of the screen while the play area needed to be on the middle. Also the right side tree need to be reversely laid out. Something very similar to this.
Can you please guide me the right approach to stick the Group template on both sides of the screen and also how to make the right side tree to look opposite of left one.
Sure, that’s easy to do once you’re familiar with GoJS.
First, you’ll want to define a Diagram.layout that always positions the left Group at the top-left corner of the viewport and the right Group at the top-right corner. It’s important to set Layout.isViewportSized to be true so that it is automatically invalidated and then re-run as the viewport changes size.
Second, you’ll want to put the elements of each node in the tree in opposite order (when using a “Horizontal” Panel, you can set Panel.isOpposite to true).
Third, you’ll want to change the Group.layout so that its TreeLayout.angle for the right Group is 180 (leftward) instead of 0 (rightward).
This is all done in GoJS Tree Mapper With Mirrored Right Side Tree.
Awesome, That’s it. Thank you so much for the code.
One small thing, what if I want the group template on both sides to stretch till vertically ?
I have tried to use
stretch: go.GraphObject.Horizontal on go.Group and go.Shape but both seems to be not working…
I have also tried :
stretch : go.GraphObject.Fill it didnt work either.
Can you help on this please.
http://gojs.net/latest/api/symbols/GraphObject.html:
The stretch property determines how a GraphObject will fill its visual space, contextually granted to it by its containing Panel. Top-level (Part) GraphObjects are not affected by this property because they are always granted infinite space.
Although there could be some Layouts that do observe the value of Node.stretch. The TableLayout extension is one such layout. But most layouts do not change the size of the Nodes.
Anyway, I’m just saying that you can implement that in the MapperLayout.doLayout method.
Yes, when I try with
leftgrp.minSize.height = r.height;
rightgrp.minSize.height = r.height;
in the doLayout section, it seems it does not work. I have also tried with
leftgrp.desiredSize.height = r.height;
rightgrp.desiredSize.height = r.height;
Any other you think will work here ? Or otherwise I need to change the layout to TableLayout ?
Read GoJS Sized Groups -- Northwoods Software. I think you want to set the height and width of the Shape.
Note that if the height of the tree is greater than the height of the Group, one cannot easily scroll and clip the member nodes and links. See other forum posts about that.