Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Node bounds are not updated on client side (Canvas mode)? (Read 4967 times)
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Node bounds are not updated on client side (Canvas mode)?
Nov 18th, 2016 at 1:00pm
Print Post  
I am creating Container node. I have client script event that on node creation, script resizes node bounds.
Specifically I am trying make container node, that will occupy whole diagram width.

But the container appears in different coordinates, somehow the just the Containers size is set, but the coordinates are incorrect. (see pic)

PS. Container rotated 270 deg. So in code I change places width and height

My code:

Code
Select All
    if (node.ShapeType == ShapeTypes.SwimLane) {
        var diagram = $find('diagramView');
        if (diagram != null) {
            // Make the swimlane occupy full width of the diagram
            node.setBounds(new MindFusion.Drawing.Rect(diagram.bounds.x, node.bounds.y, 80, diagram.bounds.width), true);
        }
    } 



« Last Edit: Nov 21st, 2016 at 7:52am by CrushJelly »  

ContainerNodw.png ( 9 KB | 148 Downloads )
ContainerNodw.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Node bounds are not updated on client side (Canvas mode)?
Reply #1 - Nov 21st, 2016 at 9:28am
Print Post  
Bounds contains coordinates for node without rotation. You can find what you should assign to it to get the wanted coordinates for specific rotation angle by rotating the wanted rect in opposite direction -

Code
Select All
var Utils = MindFusion.Diagramming.Utils;
var wantedRect = new Rect(0, 0, 400, 10);
var unrotated = Utils.rotateRect(
	wantedRect, wantedRect.center(), -270);
var node = diagram.factory.createShapeNode(unrotated);
node.setRotationAngle(270); 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: Node bounds are not updated on client side (Canvas mode)?
Reply #2 - Nov 21st, 2016 at 10:03am
Print Post  
Slavcho wrote on Nov 21st, 2016 at 9:28am:
Bounds contains coordinates for node without rotation. You can find what you should assign to it to get the wanted coordinates for specific rotation angle by rotating the wanted rect in opposite direction -

Code
Select All
var Utils = MindFusion.Diagramming.Utils;
var wantedRect = new Rect(0, 0, 400, 10);
var unrotated = Utils.rotateRect(
	wantedRect, wantedRect.center(), -270);
var node = diagram.factory.createShapeNode(unrotated);
node.setRotationAngle(270); 



Regards,
Slavcho
Mindfusion



Well it's not the rotation problem, its x, y problem, the container already rotated, it is just too far from the right side it appears way too deep in the left side.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Node bounds are not updated on client side (Canvas mode)?
Reply #3 - Nov 21st, 2016 at 11:03am
Print Post  
Rotation is done around node's center, so (diagram.bounds.x, node.bounds.y) won't be the position you want after rotation. You will need to calculate the rect with opposite rotation to find correct position too.
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: Node bounds are not updated on client side (Canvas mode)?
Reply #4 - Nov 28th, 2016 at 10:38am
Print Post  
Slavcho wrote on Nov 21st, 2016 at 11:03am:
Rotation is done around node's center, so (diagram.bounds.x, node.bounds.y) won't be the position you want after rotation. You will need to calculate the rect with opposite rotation to find correct position too.


Ok, but why container Y coordinate is not setting properly?
When I drop the container node in console I can see that the Y cord. is set properly, but the container node appears lower (see pic.)

I want that the container node appeared where I dropped it (followed mouse Y cord).

Including my code:

Code (Javascript)
Select All
function onNodeCreated(sender, args) {
            // It is considered that the container is rotated 270 deg.
            node.setBounds(new MindFusion.Drawing.Rect((diagram.bounds.width / 2) - (node.bounds.height / 2),
                                    node.bounds.y /* setting Y cord */, node.bounds.height, diagram.bounds.width - 3), true);
}
 



  

containerNode.png ( 17 KB | 145 Downloads )
containerNode.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Node bounds are not updated on client side (Canvas mode)?
Reply #5 - Nov 28th, 2016 at 12:50pm
Print Post  
Because rotation at 90 or 270 degrees transposes x and y, and for such wide node it brings it very far from where you'd like it. You are way too fixed on the 270-degree rotation case where the rectangle is still aligned to the coordinate system's axes. Even then what you get after rotating node.Bounds around its center will have X and Y values transposed, if the center is at 0,0, and then with some offset when it's not in the general case. Here's some code that should give you a better idea -

Code
Select All
for (int i = 0; i < 4; i++)
{
	var coordinates = new RectangleF(20 + i * 40, 20, 30, 10);
	var node = diagram.Factory.CreateShapeNode(coordinates);
	node.RotationAngle = 0 + i * 30;
	node.Text = node.RotationAngle.ToString();
	node.TextFormat.LineAlignment = StringAlignment.Far;
	node.RotateText = true;

	var rotatedCoordinates = node.GetRotatedBounds();
	rotatedCoordinates.Inflate(1, 1);
	var rotatedFrame = diagram.Factory.CreateShapeNode(rotatedCoordinates);
	rotatedFrame.Brush = rotatedFrame.ShadowBrush = new SolidBrush(Color.Transparent);
	rotatedFrame.Pen = new Pen(Color.Black) { DashStyle = DashStyle.Dot };

	var pinCoordinates = new RectangleF(node.GetCenter(), new SizeF(0, 0));
	pinCoordinates.Inflate(0.5f, 1);
	var pin = diagram.Factory.CreateShapeNode(pinCoordinates);
	pin.Pen = new Pen(Color.Red);
	pin.Shape = ArrowHeads.Arrow;
	pin.RotationAngle = 150;
} 




So all these nodes are on same Y position, but rotation brings their apparent positions to different Y values. You better think of Bounds as a structure specifying a pin position + width and height, where the rectangle's center is the pin position. RotationAngle rotates around that pin, i.e. around Bounds center. In order to align vertically the rightmost node from the image to the leftmost one, you'd have to translate the rotated frame and rotate back to find the actual position for its pin (and also width + height). So you can combine the code for finding that from my older post with your onNodeCreated handler, and it will place the resized container at expected apparent Y -

Code
Select All
function onNodeCreated(sender, args)
{
	var diagram = sender;
	var node = args.getNode();

	if (node.getRotationAngle() == 270)
	{
		var wantedRect = new Rect(
			diagram.bounds.x, node.bounds.y, diagram.bounds.width, node.bounds.height);
		var unrotated = Utils.rotateRect(wantedRect, wantedRect.center(), -270);
		node.setBounds(unrotated);
	}
} 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint