Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to dynamicaly change svg node size based on text length? (Read 326 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
How to dynamicaly change svg node size based on text length?
Apr 22nd, 2020 at 10:02am
Print Post  
Hi,

I want to create the svg node based on on the text length.
My requirement is as below :


1)if text lengh is 15 character then is should show in single line. node size is equal to one row size.

2) If text length >15

a)if text size is 30 then show it in two row each contain 15 character .node size is 2 rows size.

b) limit information to 3 rows, each row maximum of 15 chars, if text is longer cut it and add ... at the end

maximum size height of node is 3 rows hights.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2162
Joined: Oct 19th, 2005
Re: How to dynamicaly change svg node size based on text length?
Reply #1 - Apr 24th, 2020 at 6:45am
Print Post  
Hi,

You should be able to determine how much space you need for 15 characters by calling Diagram.measureString on respective substring, and resize your nodes based on the returned size.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to dynamicaly change svg node size based on text length?
Reply #2 - Apr 24th, 2020 at 1:18pm
Print Post  
Can you please help if you know below:

Actually in single node i want to fit the text such as 15 character in each line and max lines is 3.
and if text size is  >45 then i have to add ... at the end of 3rd line

example : id text is like "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

then it should fit into the node like below :
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaa...
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2162
Joined: Oct 19th, 2005
Re: How to dynamicaly change svg node size based on text length?
Reply #3 - Apr 27th, 2020 at 6:00am
Print Post  
Code here shows adding ellipsis to the first line -
https://mindfusion.eu/Forum/YaBB.pl?num=1415114615/3#3

You can modify it to add the ellipsis to third line if there are more than three, and delete any remaining lines.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to dynamicaly change svg node size based on text length?
Reply #4 - Apr 28th, 2020 at 12:33pm
Print Post  
Can please please tell me how to show and hide the selected node if node is overlapped?

I am using svg node
i am trying with with z index bt somehow its not working.

If node is selected then i wan want to show that node front.

please find the screenshot.
  

overlappnode_issue.png ( 112 KB | 13 Downloads )
overlappnode_issue.png
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: How to dynamicaly change svg node size based on text length?
Reply #5 - Apr 28th, 2020 at 12:34pm
Print Post  
please help as early as possible if any one knows it.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2162
Joined: Oct 19th, 2005
Re: How to dynamicaly change svg node size based on text length?
Reply #6 - Apr 28th, 2020 at 1:46pm
Print Post  
try this -

Code
Select All
diagram.addEventListener(Events.nodeSelected, onNodeSelected);
diagram.addEventListener(Events.nodeDeselected, onNodeDeselected);

function onNodeSelected(sender, args)
{
    args.node.setZIndex(1000);
}

function onNodeDeselected(sender, args)
{
    args.node.setZIndex(0);
} 

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