Setting Proper Coordinate Positions for Groups of Shapes

[Michael Jones]

Can you explain how the coordinates of X and Y are used when creating different objects that are appended to the same node group. How does one get control of where objects are rendered?

The behavior at first seems inconsistent as there is a mix of physical and logical relationships between coordinates for the group and objects (child diagram nodes). Also, depending on the order you place nodes into a group, the nodes are rendered at different locations.

Except for the very first node added to a node group, the other nodes are not rendered where one expects. I used to the following code to illustrate:

I used the following code:

Group g = new Group();
Rectangle r1 = new Rectangle(10, 20, 50, 50);
Rectangle r2 = new Rectangle(5, 10, 50, 50);
TextNode t1 = new TextNode(“My Text Box”);
PointF pf = new PointF(30, 50);
Size = new Size(200, 15);

g.AppendChild(r1);
g.AppendChild(r2);
g.AppendChild(t1);

diagram.model1.AppendChild(g)

- - -
Example:

If I create in code and place three nodes into a group (two rectangles and one text node), that are then placed on the diagram I get the following:

1. The first rectangle (x, y) coordinates are relative to the physical model. So, if x = 10 and Y = 20 the rectangle will be rendered with the upper left corner at (10, 20) on the physical model.

2. The second rectangle (x, y) coordinates are relative to the first node (or the boundary created by the first node). So, if x = 5 and Y = 10, the rectangle is rendered with the upper left corner at (15, 30) on the physical model (a positive increase down and to the right of the first rectangle; not up and to the left as I expected.)

(At this point it seems a bit odd, but understandable. The first node sets the relative boundary for all other objects.)

3. The third object (a text node) coordinates are perplexing and seems to have a negative offset relative to the first (or last) node (x, y) coordinates.

So if, x = 30 and Y = 50 then the text node is rendered with the upper left corner at (-20, -30) on the physical model. However, this is not always the case. It seems where a text node is rendered may be based an offset to the (x, y) coordinates of the pervious node added to the node collection.

At no time did I change any rotation properties (or any other properties except the x, y coordinates during object creation).

- - -

I expected that the (x, y) coordinates of an node (be it a rectangle or text node) are relative to an imaginary set of fix/static points in the container (in this case the node group). And, the container sets the physical location in the model.

I can work around the differences in the meaning of (x, y) coordinates between the first and second nodes. However, I need to be able to pin the upper left corner of the text node to a specific (x, y) coordinates relative to the group. When I set the text node’s PontF to (30, 50), I expect the upper left corner to be at (30, 50). So, if I place the group at (100, 100) the upper left corner of the text node will be at (130, 150) on the physical model.

I also expect that regardless of the order objects are placed into the group, the objects will always be rendered in the same place (although z ordered differently). Using the code example above, changing appending order results in very differnt renderings.

[Michael Jones]

Am I correct in that the text node renders center on the (x, y) PointF coordinate, not on the upper left corner?

[Meera Fathima]

Hello Michael,

Thanks for your interest in Syncfusion products.

Regarding your query, the node's position can be set using the Node.PinPoint property. If nodes are being added to a group(and/or then to the model), its pinpoint value gets transformed into parent/model coordinates and hence its value gets changed. This is happened during the call of the UpdateGroupInfo() method within the Group.AppendChild() method. And this is the reason why the pinpoint value of the child nodes gets changed while appending a group node into the diagram model.


If you want to add the text node to a desired position, you can use its pinpoint property to set its location with the desired value.

Below is the sample code snippet that adds the text node at (130,150) and the group node at (100,100)

Group g = new Group();
Rectangle r1 = new Rectangle(10, 20, 50, 50);
Rectangle r2 = new Rectangle(5, 10, 50, 50);
TextNode t1 = new TextNode("My Text Box");
t1.PinPoint = new PointF(130, 150);
PointF pf = new PointF(30, 50);
Size = new Size(200, 15);

g.AppendChild(r1);
g.AppendChild(r2);
g.AppendChild(t1);

g.PinPoint = new PointF(100, 100);
this.diagram1.Model.AppendChild(g);

Regarding your query "Am I correct in that the text node renders center on the (x, y) PointF coordinate, not on the upper left corner?"


Node.PinPoint property defines node's location in document. It does not mean that node's visual representation will start render at this point. And Node.PinPointOffset is the offset from PinPoint. Subtracting PinPointOffset from PinPoint value you will get point where node will start rendering its visual representation("render origin"). And hence if you want to render a node at a specified position you need to set its pinpoint and pinpointoffset accordingly.

Please let me know if I understand your requirement correctly. Don't hesitate to update us if you have any more queries regarding this. We will be glad to assist you.

Thanks for your support to Syncfusion products.

Best Regards,
Meera.

[Michael Jones]

Thank you for your reply. If I am not setting the pinpoint offset, then what is. What is the logic that calculates the offset, or more specifically what offer mean? Since it is a Size class, does it refer to the overall size of the group and its nodes?

[Meera Fathima]

Hi Michael,

Below is the response on your query.

If I am not setting the pinpoint offset, then what is. What is the logic that calculates the offset, or more specifically what offer mean?

As I have mentioned in the previous update Node.PinPoint property defines node's location in document. The pin point can be moved around the node and positioned at the required point, which can be set using the PinPointOffset. If you set the PinPointOffSet value to 0,0 then it means that the distance between the render origin and pinpoint is 0.

And the pinpointoffset does not refer to the overall size of the group and its nodes. It is the offset value(distance) from the pinpoint. Please refer the attached image that demonstrates the above details - http://www.syncfusion.com/Support/user/uploads/sample_1549be35.zip

Best Regards,
Meera.

Syncfusion, Inc.
http://www.syncfusion.com/