(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › How-to: Set line-height style for ShapeNode text !
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How-to: Set line-height style for ShapeNode text ! (Read 2217 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 271
Location: Bangalore, India
Joined: Jan 18th, 2019
How-to: Set line-height style for ShapeNode text !
Sep 8th, 2021 at 1:38pm
Print Post  
Hi,

I've created a shape node like below. May I know how to set line-height style for the text set in that shape node, either in this code block or css?

  private createTextNode() {

    var text = "The diagram-view Angular component allows integrating the MindFusion.Diagramming API into Angular applications. It renders a Diagram instance assigned to diagram property as its model.";
    var node = new ShapeNode(this.diagram);
    node.setBounds(new Rect(1100, 100, 170, 20));
    node.setText(text);
    node.setFont(new Font("Times New Roman", 15, false, false, false));
    node.setBrush("white");
    node.setEnableStyledText(true);
    node.setTextAlignment(Alignment.Near);
    node.setShadowColor("transparent");
    node.resizeToFitText(common.Diagramming.FitSize.KeepWidth);
    node.setAllowIncomingLinks(false);
    node.setAllowOutgoingLinks(false);

    this.diagram.addItem(node);
  }

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: How-to: Set line-height style for ShapeNode text !
Reply #1 - Sep 9th, 2021 at 8:02am
Print Post  
Hi,

There's no out-of-the-box support for that, but it can be achieved by overriding the Text.drawStyledText method and increasing the line-height there.

For example:
Code (Javascript)
Select All
var originalDrawStyledText = MindFusion.Drawing.Text.prototype["drawStyledText"];
MindFusion.Drawing.Text.prototype["drawStyledText"] = function (context, sequences, layoutRect, halign, valign)
{
    this.lineHeight += 4; // adjust the line height here

    originalDrawStyledText.apply(this, [context, sequences, layoutRect, halign, valign]);
};


Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 271
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How-to: Set line-height style for ShapeNode text !
Reply #2 - Oct 19th, 2022 at 5:50am
Print Post  
Hi,

When I set a long single word (without space) whose length is more that the width of the shape node, it was not wrapping (like in Shape Node-1.png attached).

To fix that I used the below code,

node.setEnableStyledText(true);

After that the text is wrapped as shown in the attached image Shape Node-2.

But when I enter "<" symbol in between, characters after that is not shown. In the attached screen Shape Node-2, only first four characters are shown. The "<" symbol is included in the fifth position.

May I know how to solve these issues?

Regards,
Kannan
  
Shape_Node-1.png ( 32 KB | 86 Downloads )
Shape_Node-1.png
Shape_Node-2.png ( 11 KB | 81 Downloads )
Shape_Node-2.png
Shape_Node-3.png ( 5 KB | 84 Downloads )
Shape_Node-3.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3223
Joined: Oct 19th, 2005
Re: How-to: Set line-height style for ShapeNode text !
Reply #3 - Oct 19th, 2022 at 7:52am
Print Post  
Hi,

enableStyledText switches to HTML parsing. Try escaping the < sign as &lt;

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 271
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: How-to: Set line-height style for ShapeNode text !
Reply #4 - Oct 21st, 2022 at 2:08pm
Print Post  
That works Slavcho! Thanks!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

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

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge