How-to: Set line-height style for ShapeNode text ! - Diagramming Components

(UTC)

MindFusion Forums › Diagramming Components › JavaScript › How-to: Set line-height style for ShapeNode text !

(Moderator: Slavcho)

‹ Previous Topic | Next Topic ›

Pages: 1

How-to: Set line-height style for ShapeNode text ! (Read 3218 times)

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	How-to: Set line-height style for ShapeNode text ! Sep 8^th, 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


	IP Logged

Lyubo God Member Offline MindFusion team Posts: 511 Joined: Jun 17^th, 2010	Re: How-to: Set line-height style for ShapeNode text ! Reply #1 - Sep 9^th, 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) 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


	IP Logged

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	Re: How-to: Set line-height style for ShapeNode text ! Reply #2 - Oct 19^th, 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 \| 190 Downloads ) Shape_Node-2.png ( 11 KB \| 174 Downloads ) Shape_Node-3.png ( 5 KB \| 182 Downloads )
	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: How-to: Set line-height style for ShapeNode text ! Reply #3 - Oct 19^th, 2022 at 7:52am	Print Post
	Hi, enableStyledText switches to HTML parsing. Try escaping the < sign as < Regards, Slavcho Mindfusion


	IP Logged

Kannan Thirumal Senior Member Offline I Love Mind Fusion Diagram :-) Posts: 284 Location: Bangalore, India Joined: Jan 18^th, 2019	Re: How-to: Set line-height style for ShapeNode text ! Reply #4 - Oct 21^st, 2022 at 2:08pm	Print Post
	That works Slavcho! Thanks!


	IP Logged

Pages: 1

‹ Previous Topic | Next Topic ›