Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Hyperlink Text Coomponent (Read 6457 times)
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Hyperlink Text Coomponent
May 29th, 2020 at 7:32pm
Print Post  
Is it possible to add a hyperlink text to a custom nodes?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #1 - May 30th, 2020 at 8:08am
Print Post  
If you mean ones derived from CompositeNode, try adding a Text component with enableStyledText field enabled, and setting hyperlinks via the <a> tag in this form: "test <a='http://mindfusion.eu'>link</a> test". Alternatively using the button component from https://mindfusion.eu/Forum/YaBB.pl?num=1370616113 open hyperlinks from button's click handler.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: Hyperlink Text Coomponent
Reply #2 - Jun 3rd, 2020 at 3:07pm
Print Post  
Thanks.  How can I enableStyledText on a composite node?  I am trying to modify Sample Tutorial 8 (...\MindFusion.Diagramming for ASP.NET MVC\ASP.NET MVC 5\Samples\Tutorial8) downloaded from the mindfusion website.  If I google for "enableStyledText" I end up here www.mindfusion.eu/onlinehelp/flowchartnet/index.htm?What_s_New_in_this_Release.h... which looks like it's not the MVC version?

I tried adding it to my json string:
Code
Select All
{
    ""component"": ""Text"",
    ""name"": ""FullName"",
    ""gridRow"": 1,
    ""gridColumn"": 0,
    ""rowSpan"": 2,
    ""columnSpan"": 5,
    ""verticalAlignment"": ""Center"",
    [b]""enableStyledText "": true,[/b]
    ""autoProperty"": true,
    ""text"": ""full name"",
    ""pen"": ""blue"",
    ""padding"": ""1,0,1,0""
}, 



and then modifying the node:
       
Code
Select All
Diagram diagram = view.Diagram;

        var node1 = new OrgChartNode();
        node1.Bounds = new RectangleF(25, 15, 60, 25);
        node1.Title = "CEO";
        [b]node1.FullName = "test <a='http://mindfusion.eu'>link</a> test";[/b]
        node1.Details = "Our beloved leader.";
        node1.Frame = "Rectangle";
        node1.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(50, Color.ForestGreen));
        [b]diagram.EnableStyledText(true);[/b]
        diagram.ToolTip("Test");
        diagram.Nodes.Add(node1);
        nodeView.AddNode(node1); 



However this is what my node looks like (attached).
  

node.png ( 14 KB | 191 Downloads )
node.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #3 - Jun 3rd, 2020 at 4:27pm
Print Post  
There's space in the field name - "enableStyledText ", remove it and it will start parsing and arranging formatted text. Something else is amiss though, a scale flag we usually apply for styled text is not set automatically by CompositeNode, our developer will check in a bit.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #4 - Jun 3rd, 2020 at 4:46pm
Print Post  
For time being you can fix the wrong scale by setting -
node.getComponent("FullName").ignoreTransform = false;
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: Hyperlink Text Coomponent
Reply #5 - Jun 3rd, 2020 at 7:11pm
Print Post  
Is this possible with a ShapeNode or TableNode or ONLY CompositeNode?
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: Hyperlink Text Coomponent
Reply #6 - Jun 3rd, 2020 at 8:10pm
Print Post  
Where would node.getComponent("FullName").ignoreTransform = false; go in my code?

What is attached is what my node looks like now.  I'm assuming the ignoreTransform piece is supposed to fix the fact that only "l" is appearing?  I also cannot click on the text, nothing happens.
  

node_001.png ( 6 KB | 202 Downloads )
node_001.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #7 - Jun 4th, 2020 at 5:42am
Print Post  
Call setEnableStyledText method on ShapeNode or TableNode and you should be able to embed hyperlinks in same format. We've tested node.getComponent("FullName").ignoreTransform assignment after creating nodes in client-side JS. If you send nodes from server side, you might have to loop and reset this flag after loading them on client. Anyway we'll try to fix that in standard script.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #8 - Jun 4th, 2020 at 12:47pm
Print Post  
With script here it should be enough to set the enableStyledText field -
https://mindfusion.eu/_temp/mvcdiag_hlinks.zip

New assemblies fix some serialization problem with hyperlinks.
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: Hyperlink Text Coomponent
Reply #9 - Jun 4th, 2020 at 7:39pm
Print Post  
Thank you, I still haven't been able to get a click to work on the hyperlink.  I tried putting the node.getComponent("FullName").ignoreTransform in the node creation (image attached) as well as the JS function as suggested (seen below), I think I'm just trying too put it in the wrong space.

Code
Select All
function onLoaded(sender, args) {
        diagram = sender;
        args.getNode().getComponent("FullName").ignoreTransform;
        var original = OrgChartNode.prototype.updateCanvasElements;
        OrgChartNode.prototype.updateCanvasElements = function () {
            original.apply(this, []);
            var back = this.getComponent('Frame');
            back.setBrush(this.getBrush());
        }
    }
 



Please note: i replaced all the files in my project with the ones you attached.
  

GetComponent.png ( 62 KB | 180 Downloads )
GetComponent.png
node_002.png ( 6 KB | 185 Downloads )
node_002.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #10 - Jun 9th, 2020 at 7:09am
Print Post  
The control does not follow hyperlinks automatically but just raises an event, this worked in my test with modified template in tutorial3.js -

Code
Select All
diagram.addEventListener(
	Events.hyperlinkClicked, onHyperlinkClicked);

function onHyperlinkClicked(sender, args)
{
    window.open(args.getHyperlink());
} 



You shouldn't have to deal with that ignoreTransform flag anymore if using latest js build, but only set enableStyledText: true in the template. If link's text is still appearing larger than usual, try refreshing the page to update browser's cache.
  
Back to top
 
IP Logged
 
DSI
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 16
Joined: May 21st, 2020
Re: Hyperlink Text Coomponent
Reply #11 - Jun 17th, 2020 at 6:16pm
Print Post  
Thanks.

So here is what the Link text portion of my template (modified tutorial8 MVC solution) looks like:
Code
Select All
{
    ""component"": ""Text"",
    ""name"": ""FullName"",
    ""gridRow"": 1,
    ""gridColumn"": 0,
    ""rowSpan"": 2,
    ""columnSpan"": 5,
    ""verticalAlignment"": ""Center"",
    ""enableStyledText"": true,
    ""autoProperty"": true,
    ""text"": ""full name"",
    ""clickHandler"": ""onHyperlinkClicked""
},
 



Here is the JS clickHander Function:
Code
Select All
    function onHyperlinkClicked(sender, args) {
        window.open(args.getHyperlink());
    }
 



This is all part of my Index.cshtml file.  Yet I cannot click on the link.  I have to be missing something.  What do you mean by "the latest js build" and where can I get that?
  

CompositeNode_1.png ( 2 KB | 197 Downloads )
CompositeNode_1.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Hyperlink Text Coomponent
Reply #12 - Jun 18th, 2020 at 5:57am
Print Post  
I think clickHandler property is something we added for button components? Text does not support it, subscribe to Events.hyperlinkClicked instead as shown in post above.

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