Distortion in node border on re-size

GoJS
1



Hello

i have a node which is created in table format. On re-sizing as seen in the image the node gets distorted. How can i solve this please help.

2

How is it defined? What object does the user resize?

3

The user re-sizes the border .
The defination of node is :

myDiagram.nodeTemplate =
$(go.Node, go.Panel.Spot,{resizable: true,isShadowed:false}, nodeStyle(),new go.Binding(“text”, “key”),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify,{routing:go.Link.AvoidsNodes}),
$(go.Panel, go.Panel.Auto,
$(go.Shape, “Rectangle”,
{ fill: “white” }
),
$(go.Panel, “Table”,
{ margin: 8, stretch: go.GraphObject.Fill },
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
$(go.RowColumnDefinition, { row: 1, separatorStroke: “black”, background: “white”, coversSeparators: true }),
$(go.RowColumnDefinition, { row: 2, separatorStroke: “black” }),
// the table header
$(go.TextBlock,
{ row: 0, alignment: go.Spot.Center,
font: “bold 16px sans-serif”,
editable:true},
new go.Binding(“text”, “className”)),
// the list of Panels, each showing an attribute
$(go.Panel, “Vertical”,
{ row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: variableTempl },
new go.Binding(“itemArray”, “variables”)),
$(go.Panel, “Vertical”,
{ row: 2,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: funtionTempl },
new go.Binding(“itemArray”, “functions”))))
);

4

No it doesn’t – you need to name: the border Shape and refer to it as the Node’s resizeObjectName:.

Since you hadn’t set Part.resizeObjectName, the user is resizing the whole Node, which can have odd behavior when forcing the size of a Spot Panel.