How to add scrollbar tree mapping to go.treelayout

i have coding like this can someone help me, i already tried scrollinggrouplayout but it conflict with my go treelayout

myDiagram.groupTemplate = $(go.Group, "Auto", 
						new go.Binding("position", "xy", go.Point.parse).makeTwoWay(go.Point.stringify), {
							deletable : false, // bisa delete kotak source/destination
						/* 	selectionObjectName: "SIZED",
							resizable: true, resizeObjectName: "SIZED",	
							 */
							layout : $(go.TreeLayout, {
								alignment : go.TreeLayout.AlignmentStart,
								angle : 0,
								compaction : go.TreeLayout.CompactionNone,
								layerSpacing : 16, // spacing masing2 node horizontal
								layerSpacingParentOverlap : 1,
								nodeIndentPastParent : 1.0,
								nodeSpacing : 0,
								setsPortSpot : false,
								setsChildPortSpot : false
							} ),
						}, {selectionObjectName: "SCROLLER",
					          resizable: true, resizeObjectName: "SCROLLER"}, $(go.Panel, "Auto",
						$(go.Shape, { fill: "transparent", stroke: "blue", strokeWidth: 2 }), // warna canvas source/dest
						 $("ScrollingTable",
						            {
						             name: "SCROLLER", 
						     /*          desiredSize: new go.Size(NaN, 60), */  // fixed width
						               /* stretch: go.GraphObject.Fill,   */      // but stretches vertically
						              defaultColumnSeparatorStroke: "gray",
						              defaultColumnSeparatorStrokeWidth: 0.5
						            },	
						            new go.Binding("TABLE.itemArray", "linkDataArray"),
						            
						   $(go.Panel, "Vertical", // posisi title source/dest
							{
							 name: "SCROLLER",
					   /*       desiredSize: new go.Size(300, 200),
					            minSize: new go.Size(150, NaN), */   
					             /* defaultStretch: go.GraphObject.Horizontal,  */
							defaultAlignment : go.Spot.Left
						},
						// margin title (Left/Right)
						/* $(go.Picture, "assets/img/file-ansi.png",{
							margin : new go.Margin(2, 5,2, 6)
						}), */
						$(go.Picture, new go.Binding("source", "key",
							function(key) {
								var iconSchema;
								if (key == -1) {
									iconSchema = iconTitle(sourceType);
								} else if (key == -2) {
									iconSchema = iconTitle(destType);
								}
								return iconSchema; // NODE NAMA
							}), {
							margin : new go.Margin(2, 5, 2, 6),
							height : 25,
							width : 20,
							column : 0,
							imageStretch : go.GraphObject.Uniform,
						}), $(go.TextBlock, {
							 name: "SCROLLER",
							column : 1,
							font : "bold 14pt sans-serif",
							margin : new go.Margin(-20, 25, 0, 25)
						}, new go.Binding("text")), $(go.Placeholder, {
							padding : 5
						}) // padding content terhadap kotak source/dest
					))));

As you must have already seen in two other posts in this forum, there is no easy solution. We can investigate potential solutions, but it may take some time.

okay thankyou for your reply , we looking forward for your investigation, if you have any sample that have 2 layout in 1 diagram, i would appreciate it :>

What would you expect to happen when the tree within a group has been scrolled up so that the root and other nodes in the tree are no longer visible, yet there are still links connecting with the root node or other out-of-group nodes? How are those links supposed to route?

Would you want them to appear to connect with nothing, even though they are still actually linked with those nodes?

thankyou for your feedback may i take a look your code ? thanks before :D


why my nodes cant be placed inside group template ? when i put fixed height

and one more again i wanna ask, is there possible make canvas go js to SVG ?

The TreeLayout is positioning the nodes in the tree. That will require a certain area.

Groups are at this moment unable to clip their member Parts.

But even if they did, you will run into problems such as shown in my previous image. How should such links be routed?

For your last question, are you asking about rendering to SVG? If so, please read GoJS Making SVG -- Northwoods Software. However please note that that will not help with either of the problems described above.

Thankyou, Can you share your code? I mean i need the code on the image that you upload earlier, i need to put the nodes inside the panel/shape

As I have said repeatedly:


pardon me, as you mention before Groups are at this moment unable to clip their member Parts.
i understand the problem, but i only need my nodes be placed inside group template like your image above, so would you mind to share your code with me ?

But some of the nodes are not within the area of the group on the right.
The “item 1007” node is partly inside and partly outside.
The “item 1009” and “item 1010” and “item 1012” nodes are totally outside. You can tell where they are because of the routes that their connected links take.

The TreeLayout has not changed – it is still positioning the nodes as one would expect, and that includes nodes that are above the group’s rectangle and nodes that are below the group’s rectangle.