Using TableLayout to put color bars on sides

[ussenator4u]

@walter
I am trying my hand on TableLayout now.
Cann you help me in adding a color bar at extreme ends on the canvas?
I am not using the myPalette from your sample
I want to build logic to add color bar at left top right or bottom of the canvas.
I tried addding as header and sider but they start from midlle from where a node starts
scope.myDiagram.nodeTemplateMap.add("Header", // an overall table header, at the top (go.Part, “Auto”,
{
row: 0, column: 1, columnSpan: 9999,
stretch: go.GraphObject.Horizontal,
selectable: false, pickable: false
},
$(go.Picture, {
source: “colorBar.jpg”,
//angle: 90,
desiredSize: new go.Size(400, 20),
imageStretch: go.GraphObject.Fill
})

			));

		$scope.myDiagram.nodeTemplateMap.add("Sider",  // an overall table header, on the left side
			$(go.Part, "Auto",
				{
					row: 1, rowSpan: 9999, column: 0,
					stretch: go.GraphObject.Vertical,
					selectable: false, pickable: false
				},
				$(go.Picture, {
					source: "colorBar.jpg",
					angle: 90,
					desiredSize: new go.Size(400, 20),
					imageStretch: go.GraphObject.Fill
				})
			));

First thing my expected project is this

Is it possible to build this using tableLayout?
Also you can see the color bar at right hand side of the canvas
How can I make possible using this table Layout .
I am using the exact sample.
I want a separate function which When called put the color bar on either of the four sides.
I am struggling from 2 weeks on this .

[walter]

So you’re making progress.

The TableLayout extension is a simplification of “Table” Panel layout: GoJS Table Panels -- Northwoods Software. Several features are missing, such as separators.

But you should be able to just set the column property of your vertical color bar part to be 3, in order to put it on the right side of columns 1 and 2, which presumably hold your “card” parts.

You’ve only been using TableLayout for a day now. You can always look at the implementation of the layout, which is at:
http://gojs.net/latest/extensions/TableLayout.js

[ussenator4u]

@walter I believe I do not need group.
And for placing by color bar at top and bottom should I use “Headers” because when I use regular row then this happens

Code: $scope.addColorBar = function () {

                           //Copying existing nodes into temporary array
			var text = $scope.allNodes.slice(0);
			text.reverse();
			text.push({key: "Delt22a", row: 1,size: new go.Size(800, 20),img: "colorBar.jpg"});				
			$scope.myDiagram.startTransaction("change Layout");


			for (var i = 0; i < 5; i++) {
				$scope.myDiagram.model.removeNodeData($scope.allNodes[0]);
			}
			$scope.myDiagram.commitTransaction("change Layout");
			$scope.myDiagram.model.clear();
			$scope.myDiagram.model = new go.GraphLinksModel(text);
			$scope.myDiagram.requestUpdate();

Similarly should I use sliders for color bar on sides?

[walter]

It’s why you should set rowSpan and/or columnSpan when you need it.

[ussenator4u]

@walter I am still struggling
There is extra space between rows and columns that come up when I add color bar as new part

here is the code
scope.init = function () { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var = go.GraphObject.make;

		$scope.myDiagram =
			$(go.Diagram, "myDiagramDiv",
				{
					initialContentAlignment: go.Spot.Center,
					layout: $(TableLayout
						//$(go.RowColumnDefinition, {row: 1, height: 22}),  // fixed size column headers
						//$(go.RowColumnDefinition, {column: 1, width: 22}) // fixed size row headers
					),
					"SelectionMoved": function (e) {
						e.diagram.layoutDiagram(true);
					},
					"undoManager.isEnabled": true
				});
		$scope.myDiagram.allowHorizontalScroll = false;
		$scope.myDiagram.allowVerticalScroll = false;
		$scope.myDiagram.allowMove = false;
		$scope.myDiagram.allowSelect = false;
		$scope.myDiagram.allowZoom = false;

		$scope.myDiagram.padding = 0;
		$scope.myDiagram.resizingTool = true;

		$scope.myDiagram.nodeTemplate =  // for regular nodes within cells (groups); you'll want to extend this
			$(go.Node, "Auto",
				// {size:new go.Size(20, 20)},  // assume uniform Margin, all around
				new go.Binding("row"),
				new go.Binding("column", "col"),


				$(go.Shape, {fill: "white"},
					new go.Binding("fill", "color"),
					new go.Binding("desiredSize", "size")
				),


				$(go.Picture,
					// stretch the image to occupy all the space
					{imageStretch: go.GraphObject.Fill},
					new go.Binding("source", "img"),
					new go.Binding("angle", "setAngle"),
					new go.Binding("desiredSize", "size")
				),

				$(go.TextBlock,
					new go.Binding("text", "key"))
			);
		$scope.addColorBar = function () {

			$scope.myDiagram.nodeTemplateMap.add("Header",  // an overall table header, at the top
				$(go.Part, "Auto",
					{
						row: 0, column: 0,columnSpan: 9999,
						stretch: go.GraphObject.Horizontal,
						selectable: false, pickable: false,
						 padding:10
					},
					$(go.Picture, {
						source: "colorBar.jpg",
						//angle: 90,
						desiredSize: new go.Size(400, 20),
						imageStretch: go.GraphObject.Fill
					})
				));
			$scope.myDiagram.nodeTemplateMap.add("Sider",  // an overall table header, on the left side
				$(go.Part, "Auto",
					{
						row: 0, column: 0,rowSpan: 9999,
						stretch: go.GraphObject.Vertical,
						selectable: false, pickable: false,
						padding:10
					},
					$(go.Picture, {
						source: "colorBar.jpg",
						angle: 90,
						desiredSize: new go.Size(400, 20),
						imageStretch: go.GraphObject.Fill
					})
				));
			
			 $scope.allNodes.push( { key: "Sider", text: "Personnel", category: "Sider" });
			$scope.allNodes.push( { key: "Header", text: "Vacation Procedures", category: "Header" });
			 $scope.myDiagram.model = new go.GraphLinksModel($scope.allNodes);
			 $scope.myDiagram.requestUpdate();
		};
		
		$scope.allNodes = [
			
			{key: "Delta", row: 1, col: 1, size: new go.Size(100, 50), color: "orange", img: "IMG_4938.JPG"},
			{key: "Epsilon", row: 1, col: 2, color: "coral", size: new go.Size(100, 50)},
			{key: "Zeta", row: 2, col: 1, color: "tomato", size: new go.Size(100, 50)},
			{key: "Eta", row: 2, col: 2, color: "coral", size: new go.Size(100, 50)},
			{key: "Theta", row: 3, col: 1, color: "tomato", size: new go.Size(100, 50)},				
		];
		$scope.myDiagram.model = new go.GraphLinksModel($scope.allNodes);
	};
	$scope.updateDiagram = function () {
		setTimeout(function () {
			$scope.myDiagram.startTransaction("change Layout");
			$scope.myDiagram.contentAlignment = go.Spot["TopCenter"];
			$scope.myDiagram.commitTransaction("change Layout");
			$scope.myDiagram.requestUpdate();
			//$scope.myPalette.requestUpdate();
		}, 1000);
	};

ScreenShot

When there is no color bar then there is no space.
Horizontal space comes with horizontal color bar
respectively vertical.

[walter]

The horizontal color bar part is wider than needed to hold the nodes, and the vertical color bar is taller than needed to hold the nodes. By default when there is too much space, the TableLayout will give each row or column proportionally extra room. This is similar to what is done with HTML tables.

To avoid that allocation of extra space to each row or column, I suggest that you put in an extra Part that is completely transparent (but still visible) that is just big enough to fill the extra width and the extra height. In this case I would put it in column 3 and row 4.

By the way, those calls to requestUpdate() are not needed.

[ussenator4u]

@walter
It worked Thanks
Now I want to set spacing between the nodes(Horizontal and vertical)
I know we have margin.
But I want something that will set horizontal and vertical gaps separately
Other words I want horizontal and vertical margins to be separate.
Also the crop Marks as shown below

Is there anything in table layout that I can set such that the crop marks occupy no space on the canvas.
I want space between nodes only when there a margin set in between

[walter]

You could set the width or height of each column or row by setting the RowColumnDefinition.width or RowColumnDefinition.height.

You can either call TableLayout.getRowDefinition or TableLayout.getColumnDefinition, or you can add new RowColumnDefinitions to the TableLayout using GraphObject.make, as the extension sample does: Table Layout

[ussenator4u]

@walter
RowColumnDefinitions in TableLayout as in samples

It gives error that RowColumnDefinitions can only be added to panels. So I have commented out this two lines.

Other than that I am having hard time to find an example where spacing between nodes is changed dyanmically for tables.

How should I implement RowColumnDefinition.width or RowColumnDefinition.height. or spacing on a trigger?.

TableLayout.getColumnDefinition is undefined

[walter]

Are you using the latest version of GoJS? Or at least any version 1.6.*?

Another way is to add more transparent parts where you want there to be empty rows or empty columns.

TableLayout.getColumnDefinition is definitely defined in my copy of extensions/TableLayout.js. Line 128.

[ussenator4u]

@walter Oh I am sorry I didn’t knew that. I am updating it today.
I want add here that Idea of adding empty transparent row columns is creating another problem.
When I add crop marks on my nodes then they get added to the transparent nodes as well.
Screenshot for reference:

Another thing suppose I want to add color bar at the bottom of the canvas then no matter the empty column or row are transparent but they are expended out because of the interference of the width or height of the color bar

@walter

The horizontal color bar part is wider than needed to hold the nodes, and the vertical color bar is taller than needed to hold the nodes. By default when there is too much space, the TableLayout will give each row or column proportionally extra room. This is similar to what is done with HTML tables.

So do you have something for that?

[walter]

I already answered, in the next paragraph of that same post:

@walter

To avoid that allocation of extra space to each row or column, I suggest that you put in an extra Part that is completely transparent (but still visible) that is just big enough to fill the extra width and the extra height. In this case I would put it in column 3 and row 4.

Perhaps you do not need to add transparent rows or columns if you use those crop marks.

[ussenator4u]

@walter So I want to add crop marks for sure.
I may be missing something but I am trying to understand how I will add extra transparent Part then?

[walter]

I really am unable to understand your requirements – from my point of view they keep changing.

If you don’t want to use TableLayout, that’s OK – you don’t have to. You can just do your own positioning of all of the parts. Normally that functionality is bundled up in a subclass of Layout, but you don’t need to do that either.

If you implement the positioning yourself you may have more luck in getting the results that you want.