Resizing pictures inside nodes

GoJS
1 
            $(go.Picture,
		{ maxSize: new go.Size($scope.objectWidth, $scope.objectHeight)},
		new go.Binding("source", "img")),

	$(go.TextBlock,
	// the default alignment is go.Spot.Center
	new go.Binding("text", "text"))

My problem is I am setting the Node width and height later based on the aspect ratio of page. I am not sure how to make the size of image inside that node to be same as of the node.

If I give specific values like { maxSize: new go.Size(50, 50)}, then it works fine but that is not my case.
I want maxSize OR width or height to be dynamic.
I can change size of node dynamically but not size of image.

2

What is your whole node template? Is your Picture’s size really supposed to be the same as that for the whole Node, or is it just to have the same aspect ratio?

3

@walter I have aspect ratio for template and nodes inside the template are responsive as per aspect ratio.
I want to add responsive images inside nodes which should get same size as node on change of aspect ratio.

Pasted image1102×798 2.73 KB

4

So have you set the Part.resizeObjectName to refer to the Panel which contains the light gray Shape and the Picture?

And when you programmatically resize the nodes to get their aspect ratio to match the viewport, you actually set the Part.resizeObject’s desiredSize?

5

Every time the aspect ratio changes I am removing all nodes and then Adding new nodes with new size
Below is the code I am using to add new nodes after removing existing nodes using :

for (var i = 0; i < numOfNode; i++) {
$scope.myDiagram.model.removeNodeData(nodeDataArray[0]);
}

//To add nodes
for (var i = 1; i <= $scope.totalNumberOfNodes; i++) {
nodeDataArray.push({
key: i,
text: i.toString(),
img : ‘IMG_4938.JPG’,
//fill: go.Brush.randomColor(),
size: new go.Size($scope.objectWidth, $scope.objectHeight)
});
}

// create a Model that does not know about link or group relationships

$scope.myDiagram.model = new go.Model(nodeDataArray);
6

more code for reference

$scope.myDiagram.nodeTemplate =
				$(go.Node, "Spot",
					// make sure the Node.location is different from the Node.position
					{
						//stretch: go.GraphObject.Horizontal,
						locationSpot: go.Spot.TopLeft,
						resizable: true,
						name: 'shape',
						locationObjectName: 'shape',
						resizeObjectName: 'shape', // user can resize the Shape
						selectionAdorned: false, // no selection handle when selected
						selectionChanged: $scope.onSelectionChanged
					},

					new go.Binding("text", "text"),  // for sorting

					$(go.Shape, {alignment: go.Spot.TopLeft, geometry: CutMarkGeometry}),
					$(go.Shape, {alignment: go.Spot.TopRight, geometry: CutMarkGeometry}),
					$(go.Shape, {alignment: go.Spot.BottomRight, geometry: CutMarkGeometry}),
					$(go.Shape, {alignment: go.Spot.BottomLeft, geometry: CutMarkGeometry}),

					$(go.Panel,
						{isPanelMain: true},

						$(go.Shape, "Rectangle",
							{

								name: "Icon",
								fill: "lightgray",
								stroke: "black"
								//desiredSize: new go.Size(100, 100)

							},

							new go.Binding("fill", "fill"),
							new go.Binding("desiredSize", "size"))

					),
					
					$(go.Picture,
						 { maxSize: new go.Size(50, 50),},
						new go.Binding("source", "img")),

						$(go.TextBlock,
							// the default alignment is go.Spot.Center
							new go.Binding("text", "text"))

				);
7

Removing all of the nodes and then adding new ones seems really wasteful and unnatural to me.

You don’t have to use data binding if you don’t want to. But I really think you should just modify the sizes of the desired elements. Remember to make all of the changes within a single transaction. That will also cause the Diagram.layout to be run again, in case you are depending on that.

8

Thanks for your suggestion @walter but I dont know how to resize nodes and pictures as the gojs documentation dont have examples. Its hard for me to understand how it works.

9

You give the name: "shape" to the whole Node, but I don’t think that’s what you want to do – you probably want to change the size of the Panel. GoJS Tools -- Northwoods Software (This is to see the effects of resizing an element in different kind of panels, not that you need to allow the user to do resizing.)

If you want the Picture to be surrounded by the Shape’s border, you should change the panel to be an “Auto” Panel and put the Picture inside that Panel. GoJS Panels -- Northwoods Software