Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Rotating arrows shapes containing text (Read 5529 times)
jf2020
Junior Member
**
Offline


I love FlowChart!

Posts: 63
Joined: Feb 23rd, 2006
Rotating arrows shapes containing text
Apr 2nd, 2012 at 8:05pm
Print Post  
Hi Stoyo,

On our diagrams, users can add free shapes and text. Up to now we were not rotating the text when the shape was rotated. They asked us to implement text rotation when the shape is rotated, so I just set the RotateText property of the shapeNode to true. I was happy as it was a simple change, but actually they now complain that the text can be upside down! The issue is that they use arrow shape and that to have the arrow point to the left they were used to rotate it of 180 degrees. But when you do that the text is also rotated 180 degrees and is upside down!

I looked on how this is working in PowerPoint and the text is also rotated when you rotate the arrow, but the main difference is that you can change the direction where the arrow is pointing by selecting it and dragging the right handle more to the left than the left bound of the arrow shape. Not easy to explain but very intuitive.

So my obvious question is how can I do the same with FlowChart?? The only way I can think of is to change the shape definition when the node is modified and when I detect that the right handle is moved to the left, but that doesn't seem very easy. We are also using the predefined shapes (arrow1, arrow2, ...) so how to compute the symetric shape?

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Rotating arrows shapes containing text
Reply #1 - Apr 3rd, 2012 at 1:53pm
Print Post  
Hi,

You could draw rotated text at the angle you want it with some custom drawing as shown here:

http://mindfusion.eu/Forum/YaBB.pl?num=1250843665/1#1
http://mindfusion.eu/Forum/YaBB.pl?num=1282037908/1#1

We'll try to add some option to keep the text rotation angle in the 0-180 range for next release.

Stoyan
  
Back to top
 
IP Logged
 
jf2020
Junior Member
**
Offline


I love FlowChart!

Posts: 63
Joined: Feb 23rd, 2006
Re: Rotating arrows shapes containing text
Reply #2 - Apr 5th, 2012 at 6:58am
Print Post  
Hi Stoyan,

Thanks for the answer. The custom drawing of the text is something that we had thought of, but the consensus here is that the desired behavior is that the text should rotate with the shape so and can be upside down. This for instance allows the text to point up or down when the arrow is rotated.

The desired behavior then is really about getting the arrow to be able to point to the right or to the left, so we need to be able to compute the symmetric  from the vertical axis fro shapes that are not symmetric. So what would be useful is to have a function that automatically creates the symmetric of a shape definition. The shape associated with the node would then be dynamically changed in the NodeModifying event when one of the side handles is moved by the user past the opposite edge of the shape.  It is likely that this needs to work for left/right but also top/bottom so we need symmetric from the vertical axis but also the horizontal one.

Any chance you could help me with this?

Jean-Francois
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Rotating arrows shapes containing text
Reply #3 - Apr 5th, 2012 at 11:18am
Print Post  
Check the ReverseX method below. You can create similar one for Y, and process other kinds of element classes if you need this for shapes with bezier or arc elements.

Code
Select All
var shp = ReverseX(Shapes.Arrow3, "Arrow3_rx");

diagram.Factory.CreateShapeNode(0, 0, 30, 15, Shapes.Arrow3);
diagram.Factory.CreateShapeNode(0, 30, 30, 15, shp);


Shape ReverseX(Shape original, string id)
{
	var elements = new List<ElementTemplate>();
	foreach (var element in original.Outline)
		elements.Add(ReverseX(element));
	return new Shape(elements.ToArray(), original.FillMode, id);
}

ElementTemplate ReverseX(ElementTemplate element)
{
	var line = element as LineTemplate;
	if (line != null)
	{
		return new LineTemplate(
			100 - line.Coordinates[0], line.Coordinates[1],
			100 - line.Coordinates[2], line.Coordinates[3]);
	}

	return null;
}
 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jf2020
Junior Member
**
Offline


I love FlowChart!

Posts: 63
Joined: Feb 23rd, 2006
Re: Rotating arrows shapes containing text
Reply #4 - Apr 6th, 2012 at 11:34am
Print Post  
Thank you Stoyan!

This helped me a lot.  I have it working now!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint