Have made a topic here earlier, regarding resizing SVGs, however, management decided to allow a user to resize labels.
At the moment my label node is being generated with the following code:
const labelNode = $(
go.Node,
'Auto',
new go.Binding('location', 'position', go.Point.parse),
$(go.Panel, 'Vertical', new go.Binding('itemArray', 'properties'), {
itemTemplate: $(
go.Panel,
'Vertical',
{
defaultStretch: go.GraphObject.Horizontal,
background: 'transparent',
width: 150,
padding: new go.Margin(2, 2, 10, 2),
cursor: 'grab',
},
$(go.TextBlock, new go.Binding('text', 'name', (t) => t.toUpperCase()), {
textAlign: 'left',
stroke: uiTheme.label,
font: '12px Roboto',
margin: new go.Margin(0, 0, 2, 0),
}),
$(go.TextBlock, new go.Binding('text', 'value'), {
textAlign: 'left',
stroke: uiTheme.label,
font: '12px Roboto',
}),
),
}),
);
Earlier, when I tried playing with this code, I added {resizable: true} option and changed the panel type to go.Panel, ‘Viewbox’, to get the desired result (both name and value text blocks resize with the outer panel).
Now when I do so. I get the error, that “Viewbox Panel cannot contain more than one GraphObject.” I’m, wondering, why it works in our sandbox app, but doesn’t work in the other one? And the main question - most likely I just use the wrong approach, could you please advise me, on how could I get the result, as on the provided screenshot?
I’m using the following versions of the library:
“gojs”: “2.2.7”,
“gojs-angular”: “^2.0.6”
In sandbox I have :
“gojs”: “^2.1.53”,
“gojs-angular”: “^1.0.20”,