Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic The overview object can't display well on Chrome (Read 5138 times)
Toyogray
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 6
Joined: May 3rd, 2017
The overview object can't display well on Chrome
Jun 9th, 2017 at 7:43am
Print Post  
I am developing my JsDiagram application with Firefox, so far, it works well.
But I found the overview object can't display well on Chrome. I tried the Flowcharter example, the appearance is not good (the text size on overview is even the same on diagram).
Current situation: please check the attachment: OnChrome.PNG
Is there any way can make the overview area like the attachment expected.PNG?
  

OnChrome.PNG ( 213 KB | 163 Downloads )
OnChrome.PNG
expected.PNG ( 19 KB | 143 Downloads )
expected.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #1 - Jun 9th, 2017 at 9:11am
Print Post  
What version of the library, Chrome and operating system are you using? It looks fine with my v3 diagram, latest Chrome Version 59.0.3071.86 (Official Build) (64-bit), Windows 7.
  

Untitled_003.png ( 213 KB | 250 Downloads )
Untitled_003.png
Back to top
 
IP Logged
 
Toyogray
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 6
Joined: May 3rd, 2017
Re: The overview object can't display well on Chrome
Reply #2 - Jun 12th, 2017 at 2:30am
Print Post  
My environment:
Chrome: Version  59.0.3071.86 (64 bit)
Operating system: Windows 7 64bit (Traditional Chinese version)
I have reset my Chrome and try to apply JsDiagram V3, the result is still bad!

After more and more try, I found the cause: It's caused by Chrome's language setting!
After making Chrome's language to "English Version", the appearance became okay just like your post.

Will you fix this issue?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #3 - Jun 12th, 2017 at 7:04am
Print Post  
Apparently DrawingContext2D.font from Canvas API does not work with fonts smaller than 4-5 pixels on Chinese Chrome - it enforces a minimum size. The control removes scale transforms and multiplies the font size instead when drawing text, because text with scale transform was rendered ugly in older versions of Chrome. We'll check if they look better now and will start rendering with scale transforms again which should fix that.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #4 - Jun 12th, 2017 at 1:51pm
Print Post  
Using scale transform and drawing text looks even worse on Chinese Chrome unfortunately. You can try it by calling this for a simple Canvas element -

context.scale(4, 4);
context.font = "4px sans-serif";
context.fillText("This is test 1",10, 10);

The Chinese version (left side of attached image) shows it several times larger than the English one, at least when we try English texts.

So we'll keep using our current method of drawing texts. Only option we can think of is to disable texts in Overview altogether - we'll try to add that for upcoming small release.

Regards,
Slavcho
  

IMG_12062017_163630_0.png ( 13 KB | 144 Downloads )
IMG_12062017_163630_0.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #5 - Jun 13th, 2017 at 9:19am
Print Post  
Try this version -
https://mindfusion.eu/JsDiagramTrial.zip

Set overview.minVisibleFontSize = 3 or 4 and it should stop rendering text.

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


I Love MindFusion!

Posts: 6
Joined: May 3rd, 2017
Re: The overview object can't display well on Chrome
Reply #6 - Jun 21st, 2017 at 2:32am
Print Post  
Hi Slavcho,

Thanks for the new version, it worked well in my project.

Just for your reference, the NodeListView has the same problem (custom nodes on NodeListView), I met it and modified my nodes' drawing function to avoid the bad effect. Hope it will be fixed.

Sincerely,

Toyogray
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #7 - Jun 21st, 2017 at 7:53am
Print Post  
Hi Toyogray,

Same minVisibleFontSize flag should work for the NodeListView too, it's defined in our base Canvas class from which all other controls derive.

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


I Love MindFusion!

Posts: 6
Joined: May 3rd, 2017
Re: The overview object can't display well on Chrome
Reply #8 - Jun 26th, 2017 at 2:10am
Print Post  
Hi Slavcho,

Before my last post, I ever tried to set minVisibleFontSize flag on NodeListView and it didn't work.

FYR & Regards,

Toyogray
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: The overview object can't display well on Chrome
Reply #9 - Jun 26th, 2017 at 12:45pm
Print Post  
Right, NodeListView overrides some paint methods and wasn't processing minVisibleFontSize there; it should work with this build -
https://mindfusion.eu/_temp/jsdiag_minfont.zip

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