Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Using HTML icons in js diagram (Read 696 times)
Anna Malashkina
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 26
Joined: Sep 22nd, 2019
Using HTML icons in js diagram
Jun 4th, 2020 at 1:59pm
Print Post  
Is it possible to use HTML icons somehow in js diagram text\diagram nodes?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2279
Joined: Oct 19th, 2005
Re: Using HTML icons in js diagram
Reply #1 - Jun 5th, 2020 at 7:12am
Print Post  
Hi Anna,

If you mean icon fonts like Font Awsome, usually it should be enough to set node's or cell's font to the respective font and specify icon as Unicode number in text value -

Code
Select All
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet"
		  href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
</head>

e.node.setFont(new Font("Font Awesome 5 Free", 6));
e.node.setText("\uF200");
 



Free icons from Font Awsome specifically are rendered only in 600-900 range of font weight though, which you can't specify via our public APIs. If that's what you are using, you'll have to override our drawing code, e.g. something like this -

Code
Select All
var original = MindFusion.Drawing.Text.prototype.draw;
MindFusion.Drawing.Text.prototype.draw = function (context, drawShadow)
{
	if (this.isIcon)
	{
		context.font = '600 4px "Font Awesome 5 Free"';
		context.fillStyle = "black";
		context.fillText(this.text, this.x + 5, this.y + 10);
	}
	else
	{
		original.apply(this, [context, drawShadow]);
	}
};

e.node.text.isIcon = true;
 



You could as well create an Icon class with a single draw function as above, and add its instances to nodes similar to extra images and text from this topic - https://mindfusion.eu/Forum/YaBB.pl?num=1488530760

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


I Love MindFusion!

Posts: 4
Joined: Jun 5th, 2020
Re: Using HTML icons in js diagram
Reply #2 - Jun 5th, 2020 at 12:39pm
Print Post  
Hi Slavcho, could you suggest a solution based on a class name? I'm designer of the font with icons inside. The approach is very like FontAwesome. I'm afraid, the permanent part is class name only. The unicode beyond of an icon symbol is very likely will be changed from time to time.

Typically, to insert an icon, developers use the following:

Code (HTML)
Select All
<span class="icon flag"></span> 



I guarantee that "flag" will be unchanged but would avoid the constrain like keep the unicode "\uF770" for the flag icon forever.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2279
Joined: Oct 19th, 2005
Re: Using HTML icons in js diagram
Reply #3 - Jun 5th, 2020 at 1:25pm
Print Post  
Hi Anatoly,

Are these icons rendered through SVG? You might try displaying them using diagram's standalone SvgNode objects, or by adding to other nodes MindFusion.Drawing.Image objects whose source is set to the SVG. That's assuming you still have a way to get the source SVG from class name.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Anatoly Lubomirov
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jun 5th, 2020
Re: Using HTML icons in js diagram
Reply #4 - Jun 9th, 2020 at 3:47pm
Print Post  
Thank you, we found internal solution for this given feature - place font-based icon onto canvas.

Let me make the discussion more general to cover possible feature requests in the future. Rendering of graphs onto canvas makes the resulting picture quite static. I know, that you suggest elementary interactive components in your library, such as 'click' into some active zone, "hover" by mouse cursor, probably more. But what do you think if we need to connect some rendered element with element visible in DOM. This element can hold texts/hyperlinks/etc. regulated by classic DOM approach with CSS, handlers, events, etc. Have you ever thought about to get developers ability to _insert_ such DOM element on the top canvas with "z-index: +1" ?

I'm asking because canvases give rendering speed and control by in-house solutions, while classic DOM handles a variety of common capabilities, e.g. ability to CTRL+C figures or message on diagram block.
  
Back to top
 
IP Logged
 
Anatoly Lubomirov
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jun 5th, 2020
Re: Using HTML icons in js diagram
Reply #5 - Jun 9th, 2020 at 3:49pm
Print Post  
I'm sure, I 'm not the first one who asks for such crazy mix of technologies)
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2279
Joined: Oct 19th, 2005
Re: Using HTML icons in js diagram
Reply #6 - Jun 10th, 2020 at 6:00am
Print Post  
We have "ControlNode" objects in desktop platforms that can host any standard or custom .NET / Java control (always on top of diagram Z order as you noted), we'll have in mind implementing the same in JavaScript version for next release.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Anatoly Lubomirov
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jun 5th, 2020
Re: Using HTML icons in js diagram
Reply #7 - Jun 11th, 2020 at 9:25am
Print Post  
Great! Thank you for considering this extension
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2279
Joined: Oct 19th, 2005
Re: Using HTML icons in js diagram
Reply #8 - Aug 18th, 2020 at 3:31pm
Print Post  
You can find a preview of ControlNode class here -
https://mindfusion.eu/_beta/jsdiag_html.zip

3rd and 4th nodes in the palette are ControlNodes with different html templates, including buttons and text inputs. ControlNode.getContent returns a div containing HTML DOM created from your template, in case you need access to child elements.

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