Node Content alignment RTL

GoJS
1

Hi,
I’m using GridLayout and NodeTemplae with Horizontal layout of Text and Picture.
I would like to align the node info (text + picture) to RIGHT.
I used contectAligment on the node the Layout lavel and also and also alignment: go.Spot.TopRight on the Node template.
Here is the Code :

myTree = $(go.Diagram, “myTreeDiv”,
{
allowMove: false,
allowCopy: true ,
allowDelete: false,
allowHorizontalScroll: false,
// allowDragOut: false,
contentAlignment : go.Spot.TopRight,
layout:
$(go.GridLayout,
{
wrappingColumn: 1
})
});

myTree.nodeTemplate =
$(go.Node, “Horizontal”,
{
selectionAdorned: false,
defaultStretch: go.GraphObject.Horizontal,
alignment: go.Spot.TopRight
},
$(go.TextBlock,
{
font: ‘9pt Verdana, sans-serif’,
margin : 4,
textAlign: “right”,
},
new go.Binding(“text”, “name”)),
$(go.Picture,
{
width: 20, height: 20,
imageStretch: go.GraphObject.Uniform
},
new go.Binding(“source”, “source”)
)
); // end Node

// without lines
myTree.linkTemplate = $(go.Link);
myTree.alignDocument(go.Spot.Right, go.Spot.Right);
myTree.initialContentAlignment = go.Spot.Right;

var nodeDataArray = [
    { key: 0, isTreeExpanded: false, source: "icons/campus.png", name: "1"  },
    { key: 1, isTreeExpanded: false,  source: "icons/campus.png", name: "22" },
    { key: 2, isTreeExpanded: false, source: "icons/campus.png", name: "333" },
    { key: 3, isTreeExpanded: false,  source: "icons/campus.png", name: "4444" },
    { key: 4, isTreeExpanded: false,  source: "icons/campus.png", name: "55555" }
  ];
  myTree.model = new go.TreeModel(nodeDataArray);

Yet the node data is aligned to LEFT.
Any ideas ?
By the way, if use TreeLayout, i get the same results.
Regards
Tany

2

I do not understand what you want. Do you want the positions of the nodes to be different, or do you want the contents of each node to be arranged differently? The former is controlled by a Layout; the latter is controlled by the node template – various Panel and GraphObject properties.

3

I want the node data to be aligned to right, for example :

 1 pic
22 pic
4

OK, so the diagram layout is not relevant to your question.

One possibility is to assign a TextBlock.width that is large enough for all possible strings and set TextBlock.textAlign to “right”. TextBlock | GoJS API

I assume you have set the Picture.width and Picture.height to appropriate values, so that its size does not change either.

5

I forgot to update you.
I did use Textblock.width and it worked fine, but i thought maybe there’s another way to align right without setting the textblock with.

6

OK, another possibility that I was going to suggest is to use a “Table” Panel instead of a “Horizontal” Panel. Instead of setting TextBlock.textAlign to “right”, set TextBlock.alignment to go.Spot.Right. The TextBlock would be in column 0 and the Picture would be in column 1.

I suppose you could support different size Pictures too – you’d probably want to set Picture.alignment to go.Spot.Left.

7

I made the change, still no success :

myTree.nodeTemplate =
$(go.Node, “Table”,
{
// selectionAdorned: false,
// defaultStretch: go.GraphObject.Horizontal,
// alignment: go.Spot.TopRight
},
$(go.TextBlock,
{
row : 0, column: 1,
font: ‘9pt Verdana, sans-serif’,
margin : 4,
alignment: go.Spot.Right,
},
new go.Binding(“text”, “name”)),
$(go.Picture,
{
row : 0, column: 2,
width: 20, height: 20,
imageStretch: go.GraphObject.Uniform,
//alignment: go.Spot.Left
},
new go.Binding(“source”, “source”)
)
); // end Node

8

Oh, right – I forgot that you aren’t actually trying to line up things in different rows in the same panel, but objects in different nodes. It really would help if you showed a small screenshot.

No, there’s no way to coordinate the sizing of objects that are not in the same panel, unless you use data binding on the GraphObject.width. If the objects are in different Nodes, you’ll need to bind to a Model.modelData property, using Binding.toModel. More information is at GoJS Data Binding -- Northwoods Software.

9

I see, so i should add the width attribute to TextBlock, right ?

10

If you are using GridLayout, the default GridLayout.alignment is by location. So you could just give your Picture a name and set Node.locationObjectName to that name.

11

Example of what Walter suggests: https://codepen.io/simonsarris/pen/dJydNe

12

Perfect !!!
Thanks