Table column size not evenly distributed

GoJS
1

Hello again,

I got the following Node:

image
image.png578×725 18.7 KB

What I want to achieve: Having 50% width of the table for both columns, no matter what is the content of the cells. Setting a fixed width is not an option as it is possible to resize the table.
It is very important that they are the same size because the values have to be aligned at the right side. using “textAlign”:“right” results in the following:
image

For better visualisation i filled in some random text:
image

2

Yes, sorry, but we decided back before v1.0 not to implement that feature until we got enough demand for it. Since then hardly anyone has asked for it.

Still, you can do something to get that effect:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true,
            "PartResized": function(e) {
              var table = e.subject;
              if (table.type === go.Panel.Table) {
                var newwidth = table.desiredSize.width;
                var col0 = table.getColumnDefinition(0);
                var col1 = table.getColumnDefinition(1);
                // make allowance for separators and for padding
                // NOTE: does not handle Panel.default...Separator... properties
                newwidth -= col0.separatorPadding ? (col0.separatorPadding.left + col0.separatorPadding.right) : 0;
                // separator is never drawn for column zero
                newwidth -= col1.separatorPadding ? (col1.separatorPadding.left + col1.separatorPadding.right) : 0;
                newwidth -= col1.separatorStroke ? col1.separatorStrokeWidth : 0;
                newwidth = Math.max(0, newwidth);  // prevent negative width
                col0.width = newwidth/2;
                col1.width = newwidth/2;
              }
            }
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { resizable: true, resizeObjectName: "TABLE" },
        $(go.Shape,
          { fill: "white", portId: "" }),
        $(go.Panel, "Table",
          {
            name: "TABLE",
            itemTemplate:
              $(go.Panel, "TableRow",
                $(go.TextBlock, new go.Binding("text", "a"), { column: 0 }),
                $(go.TextBlock, new go.Binding("text", "b"), { column: 1 })
              )
          },
          $(go.RowColumnDefinition, { column: 0, width: 50 }),
          $(go.RowColumnDefinition, { column: 1, width: 50 }),
          new go.Binding("itemArray", "rows")
        )
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      {
        text: "Alpha",
        rows:
        [
          { a: "one", b: "1" },
          { a: "two", b: "2" },
          { a: "three", b: "3" }
        ]
      }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
3

Thank you very much, that did the trick. However, a new problem emerged.
By using “partResized” the widths are calculated after resizing has ended(and not during the actual resizing), which leads to something like this:

Before resizing:
image
While resizing:
image
After resizing:
image

As you can see, the columns only change their width after the resize finished. I did not find any functions like “partResizing”. Does something like this exist?

4

Instead of that DiagramEvent at the end of the resizing operation, customize the resizing by overriding ResizingTool.resize to do what you want.

5

Thank you, I was able to extend “resize” in the following way and achieved the desired functionality:

image
image.png946×441 26.8 KB

However, there is one other little problem:
Im am iterating through the whole selection, but I actually only need the element which is resized(not the whole selection)

6

Do not use the Diagram.selection, because the ResizingTool does not operate on the selection.

Use the ResizingTool.adornedObject.

7

Thank you, I used the following code to solve the problem:

image
image.png1043×382 24.5 KB

For anyone reading: “partWidth” means how big the right column is. you could replace it by “0.5” to make 50:50 distribution of width.

It is also important to note that you will have to call this recalculation everytime you change the “partWidth” and while resizing (otherwise it will only resize AFTER resize has ended).
You can achive this by overriding “diagram.toolManager.resizingTool.resize())” as Walter suggested.

So, problem solved!