(UTC)
  MindFusion Forums › Diagramming Components › JavaScript › How to fit text in decision box
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to fit text in decision box (Read 4719 times)
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
How to fit text in decision box
Sep 9th, 2014 at 1:47pm
Print Post  
I understand that a decision is contained by it's bounding rectangle but the problem is that the decision lines always go through the text, even when using resizeToFitText.
Is there a way to make all text appear inside the decision lines?
  
Untitled_010.png ( 83 KB | 335 Downloads )
Untitled_010.png
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to fit text in decision box
Reply #1 - Sep 9th, 2014 at 5:56pm
Print Post  
At this time the JavaScript control only supports text formatting in rectangular areas, and the resize method fits text inside the node's bounding rectangle, disregarding current shape. What you could do is use some trigonometry to find bounds for the diamond shape that will fit the rectangle calculated by resizeToFit call:

Code
Select All
if (node.shape.id == "Decision")
{
	var angle = Math.PI / 4;
	var r = node.getBounds();
	var w = r.width;
	var h = r.height;
	var xw = h / 2 / Math.tan(angle / 2);
	var xh = w / 2 / Math.tan(Math.PI / 2 - angle / 2);
	r.x -= xw;
	r.width += 2 * xw;
	r.y -= xh;
	r.height += 2 * xh;
	node.setBounds(r);
}


The angle variable specifies the angle you want between the left-hand sides of the decision shape.

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


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: How to fit text in decision box
Reply #2 - Sep 10th, 2014 at 7:31am
Print Post  
Thanks, I understand what you are saying. The problem is that I don't really want to use resizeToFit at all, I'd like all my decisions to be the same size (big enough to take reasonable sized text) but the text is always re-arranged automatically to fit inside the bounding rectangle which means it runs over the decision box lines.
  
Back to top
 
IP Logged
 
Al
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Sep 3rd, 2014
Re: How to fit text in decision box
Reply #3 - Sep 10th, 2014 at 7:50am
Print Post  
I have attached a screenshot as it is difficult to explain. No matter how big I make the decision (no auto-resize) the text runs over the decision box lines.
In fact even with resize the bottom image looks the same.

Perhaps I need some control over how the text gets wrapped or maybe a margin for the text area?
  
Image1_001.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to fit text in decision box
Reply #4 - Sep 10th, 2014 at 8:03am
Print Post  
You could assign a smaller text layout area like this:

Code
Select All
var Rect = MindFusion.Drawing.Rect;
var originalRender = ShapeNode.prototype.updateCanvasElements;
ShapeNode.prototype.updateCanvasElements = function ()
{
	originalRender.apply(this);

	if (this.shape.id == "Decision")
	{
		var w = this.bounds.width;
		var h = this.bounds.height;
		var wt = w * 2 / 3;
		var ht = h * (1 - wt / w);
		var c = this.bounds.center();
		var textBounds = new Rect(c.x - wt / 2, c.y - ht / 2, wt, ht);
		this.text.setBounds(textBounds);
	}
}


The wt * ht rectangle should fit exactly inside the diamond shape if my math is correct, and you can vary the initial wt value as proportion of the decision's original width. If the decision node is small, that won't leave much space for the text, so you could add some size checks to the if condition.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge