Node not filling

GoJS
1

Hi Support

the node is truncating the image… please see below code and image

$(go.Picture, {
name : “Picture”,

desiredSize : new go.Size(15, 15),
alignment : go.Spot.TopRight,
alignmentFocus : go.Spot.TopRight,
}, new go.Binding(“source”, “key”, findIRSImg))

2

What do you expect your node to look like? Based on your template and with no knowledge of the image source, the output looks normal.

3

I expect the IRS icon to be fit in to the node like first node. I gave margins but it did not help

$(go.Picture, {
					name : "Picture",
					desiredSize : new go.Size(15, 15),
					alignment : go.Spot.TopRight,
					alignmentFocus : go.Spot.TopRight,
					margin : new go.Margin(3, 2, 0, 2),
				}, new go.Binding("source", "key", findIRSImg))
4

What is the rest of your node template?

5

i have node template like this
myDiagram.nodeTemplate = $(go.Node, “Auto”, {
width : 200,
height : 70
},

and i have a image left hand and the table like this

$(go.Shape, “Rectangle”, {
name : “SHAPE”,
fill : “white”,
stroke : null,
// set the port properties:
portId : “”,
fromLinkable : true,
toLinkable : true,
cursor : “pointer”
}), $(go.Panel, “Horizontal”, $(go.Picture, {
name : “Picture”,
desiredSize : new go.Size(39, 50),
margin : new go.Margin(5, 5, 5, 10),
}, new go.Binding(“source”, “key”, findHeadShot)),

				// define the panel where the text will appear
				$(go.Panel, "Table", {
					maxSize : new go.Size(135, 999),
					margin : new go.Margin(6, 0, 0, 2),
					defaultAlignment : go.Spot.Left
				}, $(go.RowColumnDefinition, {
					column : 2,
					width : 3
				}), $(go.TextBlock, textStyle(), // the name
				{
					row : 0,
					column : 0,
					columnSpan : 5,
					font : "8pt Segoe UI,sans-serif",
					editable : false,
					isMultiline : true,
					//stroke :"#a3fff1",
					minSize : new go.Size(10, 16)
				}, new go.Binding("text", "orgName").makeTwoWay(),
				 new go.Binding("stroke", "highlight", function(v) { return v ? "black" : "white"; })), 
				 $(go.TextBlock, textStyle(), // the name
						{
							row : 1,
							column : 0,
							columnSpan : 4,
							font : "8pt Segoe UI,sans-serif",
							//stroke :"#a3fff1",
							editable : false,
							isMultiline : true,
							minSize : new go.Size(10, 16)
						}, new go.Binding("text", "personName")
								.makeTwoWay(),
								 new go.Binding("stroke", "highlight", function(v) { return v ? "black" : "white"; })	),
				/*
				 * $(go.TextBlock, "Title: ", textStyle(), { row: 1, column:
				 * 0 }), $(go.TextBlock, textStyle(), { row: 1, column: 1,
				 * columnSpan: 4, editable: true, isMultiline: false,
				 * minSize: new go.Size(10, 14), margin: new go.Margin(0, 0,
				 * 0, 3) }, new go.Binding("text", "title").makeTwoWay()),
				 */
				/*
				 * $(go.TextBlock, textStyle(), { row: 2, column: 0 }, new
				 * go.Binding("text", "key", function(v) {return "ID: " +
				 * v;})), $(go.TextBlock, textStyle(), { name: "boss", row:
				 * 2, column: 3, }, // we include a name so we can access
				 * this TextBlock when deleting Nodes/Links new
				 * go.Binding("text", "parent", function(v) {return "Boss: " +
				 * v;})),
				 */
				 $(
						"Button", {
							row : 4,
							columnSpan : 50,
							alignment : go.Spot.TopRight,
							alignmentFocus : go.Spot.TopRight,
							name : 'TREEBUTTON',
							click : function(e, obj) { // OBJ is the Button
								myDiagram.commandHandler.showContextMenu(e.targetObject);
								e.handled = true;
							}
							//mouseClick: function(e, obj) { myDiagram.commandHandler.showContextMenu(e.targetObject);}
						},$(go.Picture, {
							name : "Picture",
							desiredSize : new go.Size(15, 15),
						}, new go.Binding("source", "key", findPencilImg)),
							new go.Binding("visible", "key", showContextButton))
							
				),// end Table Panel
				$(go.Picture, {
					name : "Picture",
					desiredSize : new go.Size(15, 15),
					alignment : go.Spot.TopRight,
					alignmentFocus : go.Spot.TopRight,
					margin : new go.Margin(3, 3, 0, 2),
				}, new go.Binding("source", "key", findIRSImg))
				) // end Horizontal Panel
				); // end Node
6

Please take some time to properly format your code if you’d like us to help.

I don’t think you want to be setting the width/height on the outermost auto panel, as its size should come from the content it is surrounding.

7

outermost layout means below ??

layout : $(go.TreeLayout, {
treeStyle : go.TreeLayout.StyleLayered,
arrangement : go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle : 90,
layerSpacing : 35,
// properties for the “last parents”:
alternateAngle : 90,
alternateLayerSpacing : 35,
alternateAlignment : go.TreeLayout.AlignmentBus,
alternateNodeSpacing : 20
}),

8 
myDiagram.nodeTemplate = $(go.Node, "Auto", { width: 200, height: 70 },

Remove width and height from your node template’s auto panel definition.