The question of panel.Table

GoJS
1

error1.PNG868×554 14.7 KB

my codes:

 myDiagram.nodeTemplateMap.add("flowChart",
	      g_(go.Node, "Auto",
	        { selectable: true },
	        new go.Binding("location","loc",go.Point.parse).makeTwoWay(go.Point.stringify), 
	      g_(go.Shape, "Rectangle",
	          { fill: null, stroke: "rgba(0,0,0,1)",strokeWidth: 3, },
	        new go.Binding("stroke","color").makeTwoWay(),
			new go.Binding("strokeWidth","thickness").makeTwoWay()),
	        g_(go.Panel, "Table",
	          g_(go.RowColumnDefinition, { column: 0, separatorStroke: "black", separatorStrokeWidth: 3}),
	          g_(go.RowColumnDefinition, { column: 1, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { column: 2, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { column: 3, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 0, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 1, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 2, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 3, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 4, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.RowColumnDefinition, { row: 5, separatorStroke: "black", separatorStrokeWidth: 3 }),
	          g_(go.TextBlock, "",
	            { row: 0,columnSpan: 2,
	              wrap: go.TextBlock.None, margin: 5, width: 200,
	              isMultiline: false, textAlign: 'center',
	              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
	            new go.Binding("text", "player1").makeTwoWay()),
	          g_(go.TextBlock, "",
	            { row: 1,columnSpan: 2,
	              wrap: go.TextBlock.None, margin: 5, width: 200,
	              isMultiline: false, textAlign: 'center',
	              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
	            new go.Binding("text", "player2").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { row: 2,columnSpan: 2,
  		          wrap: go.TextBlock.None, margin: 5, width: 200,
  		          isMultiline: false, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player3").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { row: 3,
  		          wrap: go.TextBlock.None, margin: 5, width: 100,
  		          isMultiline: false, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player4").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { row: 4,
  		          wrap: go.TextBlock.None, margin: 5, width: 100,
  		          isMultiline: false, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player5").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { row: 5,
  		          wrap: go.TextBlock.None, margin: 5, width: 100,
  		          isMultiline: false, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player6").makeTwoWay()),
	          g_(go.TextBlock, "",
	            { column: 2, row: 0,columnSpan: 2,
	              wrap: go.TextBlock.None, margin: 2, width: 200,
	              isMultiline: false, editable: true, textAlign: 'center',
	              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
	            new go.Binding("text", "score1").makeTwoWay()),
	          g_(go.TextBlock, "",
	            { column: 2, row: 1,columnSpan: 2,
	              wrap: go.TextBlock.None, margin: 2, width: 200,
	              isMultiline: false, editable: true, textAlign: 'center',
	              font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
	            new go.Binding("text", "score2").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 2, row: 2,columnSpan: 2,
  		          wrap: go.TextBlock.None, margin: 2, width: 200,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score3").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 1, row: 3,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score4").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 1, row: 4,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score5").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 1, row: 5,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score6").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 2, row: 3,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player7").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 2, row: 4,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player8").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 2, row: 5,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "player9").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 3, row: 3,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score7").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 3, row: 4,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score8").makeTwoWay()),
	          g_(go.TextBlock, "",
  		        { column: 3, row: 5,
  		          wrap: go.TextBlock.None, margin: 2, width: 100,
  		          isMultiline: false, editable: true, textAlign: 'center',
  		          font: '10pt  Segoe UI,sans-serif', stroke: 'black' },
  		        new go.Binding("text", "score9").makeTwoWay())
	        )
	      ));
2

Have you tried using the RowColumnDefinition.background and RowColumnDefinition.coversSeparators properties?

By the way, on an unrelated issue, did you know that you can make your templates simpler by having common properties in the return value of a function which you call as an argument to each GraphObject that you are initializing? For examples, seach for “nodeStyle” or “textStyle” in the samples.

I noticed that most of the properties you are setting on each TextBlock are all the same, so I thought it would be better if you set those properties in only one place in your code.

3

Thanks,I will using the “textStyle” to simplify my codes.

Using the RowColumnDefinition.background and RowColumnDefinition.coversSeparators properties.
The result:

But the black line of the blue frame should be kept. What should I do about it?

4

Actually, it would be simpler to just split it up into separate “Table” Panels. The overall “Table” Panel would hold in the fourth row two nested “Table” Panels each holding three rows of two columns.