The Image pictures not aligning

Hi Support

The Images on the node is not appearing in the top right. Below is the code and attachment. I did alignment go.Spot.TopRight. Not working.

$(go.Picture, {
name: “Picture”,
desiredSize: new go.Size(15, 15),
alignment: go.Spot.TopRight,
alignmentFocus: go.Spot.TopRight,

					}, new go.Binding("source", "isCommandAlter", findUpArrowImg), new go.Binding("visible", "isCommandRepAccess")), $(go.Picture, {
						name: "Picture",
						desiredSize: new go.Size(15, 15),
						alignment: go.Spot.TopRight,
						alignmentFocus: go.Spot.TopRight,
						
					}, new go.Binding("source", "isCommandRepAccess", findIRSImg), new go.Binding("visible", "isCommandRepAccess")),
					$("Button", {
						alignment: go.Spot.BottomRight,
						alignmentFocus: go.Spot.BottomRight,
						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 Horizontal Panel
			); // end

The GraphObject.alignment and GraphObject.alignmentFocus properties may affect the positioning of that GraphObject in its containing Panel, depending on what type of Panel it is.

So we cannot say anything useful unless we know the Panel that those Pictures are in.

It would also help if you made sure your code were properly formatted, especially regarding indentation, so that we could read it.

Hi Walter

Panel is “Horizontal” with out alignment property how to set the TopRight
Below is the code for panel
$(go.Panel, “Horizontal”,

I used margins. not working… like margin: new go.Margin(0, 0, 0, 10),

what i observe is if i put image in the bottom. the same space is leaving in the top.
that is why blank space is coming

In a “Horizontal” Panel, you cannot control the x position of any element. You can control the y position, if it’s shorter than the panel height.

Use a “Table” Panel instead, and put things into columns as needed. You might or might not need to use columnSpan, depending on what you want.

Hi walter
If i use panel table. how do i make node like above

for the picture can i use rowspan? do you have example can you point me

https://gojs.net/latest/intro/tablePanels.html

Hi Walter

  1. How wrap the text in the table i use below it is not wraping
    $(go.TextBlock, textStyle(), // the name
    {
    row: 2,
    column: 3,
    columnSpan: 2,
    font: “8pt Segoe UI,sans-serif”,
    //stroke :"#a3fff1",
    editable: false,
    isMultiline: true,
    minSize: new go.Size(10, 16)
    }, new go.Binding(“text”, “personName”).makeTwoWay()

  2. if you see the text in the second box i use row 2 column 3 still appearing in top(not on row 2) .
    In the second box case the images are not displaying.(with out images also the text should be displayed in the row 2.

https://gojs.net/latest/intro/textblocks.html#Wrapping

So you need to limit the width of the TextBlock or of the Table column that it is in.

Hi Walter

Waiting for reply for second question above

did you see the second box text is algined top. the code is below. In the second box case i am not displaying images like (up arrow and IRS).

$(go.TextBlock, textStyle(), // the name
{
row: 1,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,

Adding to that is there any way i can add borders to the table. or i can leave margins. see Attached the top and bottom images are cut it.

I didn’t see a second question. If you want us to help, you need to state what you are doing concisely but thoroughly. Otherwise we can only guess.

Borders are implemented by “Auto” Panels, where the main (probably first) element is a Shape.

“Auto” Panels also clip their contents.

I did use the auto panels. see below code.

$(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },
$(go.Panel, “Auto”,
{ row: 0, column: 0, margin: 2, columnSpan: 3,rowSpan: 3, stretch: go.GraphObject.Horizontal },
$(go.Shape, “RoundedRectangle”),
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “key”, findHeadShot))),
$(go.Panel, “Auto”,
{row: 0, column: 6,margin: 2,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandAlter”, findUpArrowImg), new go.Binding(“visible”, “isCommandRepAccess”))),

$(go.Panel, “Auto”,
{row: 0, column: 7,margin: 2,margin: 2,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandRepAccess”, findIRSImg), new go.Binding(“visible”, “isCommandRepAccess”))),

What kind of Panel is your Node, and what properties have you set on that?

I really have a hard time reading code when it isn’t formatted and indented properly.

i did not mention any panel on the node it is Auto

myDiagram.nodeTemplate = $(go.Node, “Auto”, {
height : 70
}

And what’s the main element of that “Auto” Panel?

main element meaning shape … below is the shape and then table

$(go.Shape, “Rectangle”, {
name: “SHAPE”,
fill: “white”,
stroke: null,
// set the port properties:
portId: “”,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”
}), $(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },

Could you please provide your whole Node template, formatted and indented correctly (use triple backquotes: Code Formatting), and strip out event handlers and any other code that is unrelated to your question?

Hi walter I formatted

myDiagram.nodeTemplate = $(go.Node, “Auto”, {
height : 70
}, {
// doubleClick : nodeDoubleClick
}, { // handle dragging a Node onto a Node to (maybe)
// change the reporting relationship
mouseDragEnter: function(e, node, prev) {
var diagram = node.diagram;
var selnode = diagram.selection.first();
if (!mayWorkFor(selnode, node)) return;
var shape = node.findObject(“SHAPE”);
if (shape) {
shape._prevFill = shape.fill; // remember the // original // brush
shape.fill = “darkred”;
}
},
mouseDragLeave: function(e, node, next) {
var shape = node.findObject(“SHAPE”);
if (shape && shape._prevFill) {
shape.fill = shape._prevFill; // restore the // original // brush
}
},
mouseDrop: function(e, node) {
var diagram = node.diagram;
var selnode = diagram.selection.first(); // assume // just // one // Node // in // selection
if (mayWorkFor(selnode, node)) {
// find any existing link into the selected node
var link = selnode.findTreeParentLink();
if (link !== null) { // reconnect any// existing link
link.fromNode = node;
} else { // else create a new link
diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
}
}
},
click: function(e, node) {
self.isFolderEditable(true);
var nodeTreeDataArray = [];
self.commandSearch(node.data.command);
loadTreeData(nodeTreeDataArray);
//diagram.model = nodeTreeDataArray;
//self.showOrgChartDiagram(nodeTreeDataArray, node.data.key);
myDiagram.model = new go.TreeModel(nodeTreeDataArray);
if (self.refresh()) {
myTreeDiagram.model = new go.TreeModel(nodeTreeDataArray);
}
myDiagram.nodes.each(function(n) {
if (n.data.command == self.commandSearch()) {
self.commandOperId(n.data.key);
myDiagram.centerRect(n.actualBounds);
myDiagram.scrollToRect(n.actualBounds);
myDiagram.select(n);
myDiagram.focus();
myDiagram.commandHandler.scrollToPart(n.data.part);
var shape = n.findObject(“SHAPE”);
var GO = go.GraphObject.make;
var color = “#8eedc0”; //levelColors[level];
if (shape) {
shape.fill = GO(go.Brush, “Linear”, {
0: color,
1: go.Brush.lightenBy(color, 0.05),
start: go.Spot.Left,
end: go.Spot.Right
});
}
}
})
//document.getElementById(‘myDiagramDiv’).style.height=‘860px’;
document.getElementById(‘bottom-content’).style.display = ‘none’;
}
},
// for sorting, have the Node.text be the data.name
new go.Binding(“text”, “name”),
// bind the Part.layerName to control the Node’s layer
// depending on whether it isSelected
new go.Binding(“layerName”, “isSelected”, function(sel) {
if (sel != null) {
// myInspector.inspectObject(sel);
}
return sel ? “Foreground” : “”;
}).ofObject(),
// define the node’s outer shape
$(go.Shape, “Rectangle”, {
name: “SHAPE”,
fill: “white”,
stroke: null,
// set the port properties:
portId: “”,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”
}), $(go.Panel, “Table”, { defaultAlignment: go.Spot.Bottom },
$(go.Panel, “Auto”,
{ row: 0, column: 0, margin: 2, columnSpan: 3,rowSpan: 3, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Bottom },
$(go.Shape, “RoundedRectangle”),
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “key”, findHeadShot))),
$(go.Panel, “Auto”,
{row: 0, column: 6,margin: 2,alignment: go.Spot.Bottom,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandAlter”, findUpArrowImg), new go.Binding(“visible”, “isCommandRepAccess”))),

$(go.Panel, “Auto”,
{row: 0, column: 7,margin: 2,alignment: go.Spot.Bottom,
desiredSize: new go.Size(15, 15) },
$(go.Picture, {
name: “Picture”,
}, new go.Binding(“source”, “isCommandRepAccess”, findIRSImg), new go.Binding(“visible”, “isCommandRepAccess”))),
$(“Button”, {
row: 4, column: 7,margin: 2,
alignment: go.Spot.BottomRight,
alignmentFocus: go.Spot.BottomRight,
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”,margin: 2,
desiredSize: new go.Size(15, 15),
}, new go.Binding(“source”, “key”, findPencilImg)), new go.Binding(“visible”, “key”, showContextButton)),
// define the panel where the text will appear
$(go.TextBlock, textStyle(), // the name
{
row: 1,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,
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: 2,
column: 3,
columnSpan: 2,
margin: 2,
width: 150,
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”;
}))
) // end Horizontal Panel
); // end Node

when i paste here it is not formating is there any other place i can put it

This is what I just suggested.

It’s important for you to see the structure of the visual tree that you’re defining. That’s why I also suggested that you strip out the event handlers. You might as well strip out the Bindings too, unless their target is a property that affects panel layout.

In fact, maybe you should just post (inside triple-backquotes) the elements that you are using, including the types of the Panels and the alignment/alignmentFocus/stretch/row/column. Something like:

Node "Auto"
    Shape "RoundedRectangle"
    Panel "Table"
        Picture row: 0 column: 0
        TextBlock row: 0 column: 1 stretch: Horizontal
    . . .