Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Node text not shown properly when zoom factor set around 200 (Read 349 times)
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Node text not shown properly when zoom factor set around 200
Mar 23rd, 2021 at 4:31pm
Print Post  
Hi,

My application diagram is a bigger one and have lot of diagram nodes and when it is zoomed around 200, for some nodes, the text content is not shown properly and for some nodes, nothing is shown.

In the attached sample screen shot, the first and third node is fine. Second node is shown partially and the fourth is showing empty context.

I've attached a sample application to simulate this issue in this path:
https://drive.google.com/file/d/1vt_xsOUxTfo91f1pb_0c0vq3TV0Y5dUI/view?usp=shari
ng

Following is the sample code to create the nodes,

    var y1: number = 6.6; // Correct
    this.createTableNode(7950, y1, 150, 250);
    var y2: number = 6.6; // Wrong
    this.createTableNode(8125, y2, 150, 250);
    var y3: number = 7.5; // Correct
    this.createTableNode(8300, y3, 150, 250);
    var y4: number = 6.74; // Wrong
    this.createTableNode(8475, y4, 150, 250);
    var y5: number = 6; // Correct
    this.createTableNode(8650, y5, 150, 250);
    var y6: number = 6.6; // Wrong
    this.createTableNode(10025, y6, 150, 250);
    var y7: number = 6; // Correct
    this.createTableNode(10200, y7, 150, 250);

    this.diagram.setBounds(new Rect(0, 0, 10400, 300));
    this.diagram.setZoomFactor(200);

I observed the impacting factor is the y-value. May I know why it happens like this?

Regards,
Kannan
  

Node_Text_Not_Shown_Properly.png ( 54 KB | 5 Downloads )
Node_Text_Not_Shown_Properly.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #1 - Mar 24th, 2021 at 8:33am
Print Post  
Hi,

It seems like you are hitting a limit of canvas element's size. The text renders correctly if you enable VirtualScroll mode. It's enabled by default in newer versions.

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


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #2 - Mar 24th, 2021 at 10:01am
Print Post  
Hi Slavcho,

We are facing few other issues if we enable the virtual scroll. That's why we disabled that. Any other option to fix this zoom issue?

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


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #3 - Mar 24th, 2021 at 10:26am
Print Post  
There are no other options, sorry. The canvas API just starts failing in various ways on large canvases (e.g. 200% doubles the size) and we don't have other way to draw when that happens. Any issues you have with virtual scroll enabled should be solvable by adjusting your DOM handling for the new canvas + separate scrollbar divs structure.
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #4 - Mar 24th, 2021 at 11:15am
Print Post  
Hi,

We are facing issues like,

* There is two scroll bar seen in the canvas
* If we export, it is not exported completely

Attached the screen shots.

Regards,
Kannan
  

Two-Scroll-Bar.png ( 14 KB | 3 Downloads )
Two-Scroll-Bar.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #5 - Mar 24th, 2021 at 1:13pm
Print Post  
Hi,

You will need to set some size on canvas' parent div for scrollbars to show or hide correctly, e.g. try this -

canvasParent.style.width = "100vw";
canvasParent.style.height = "100vh";

For export, either keep zoom factor at 100% and virtual scroll disabled (but text will still break on twice-larger diagrams than this one), or implement some kind of pagination to export several viewports at different scroll positions.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #6 - Mar 24th, 2021 at 1:49pm
Print Post  
Hi,

Yes, I disabled virtual scroll during export and tried, the image is not properly exported.

As I mentioned earlier, in the sample, I've created nodes like this,

    var y1: number = 6.6; // Correct
    this.createTableNode(7950, y1, 150, 250);
    var y2: number = 6.6; // Wrong
    this.createTableNode(8125, y2, 150, 250);
    var y3: number = 7.5; // Correct
    this.createTableNode(8300, y3, 150, 250);
    var y4: number = 6.74; // Wrong
    this.createTableNode(8475, y4, 150, 250);
    var y5: number = 6; // Correct
    this.createTableNode(8650, y5, 150, 250);
    var y6: number = 6.6; // Wrong
    this.createTableNode(10025, y6, 150, 250);
    var y7: number = 6; // Correct
    this.createTableNode(10200, y7, 150, 250);

    this.diagram.setBounds(new Rect(0, 0, 10400, 300));
    this.diagram.setZoomFactor(200);

For some y-values, it seems working fine and for some it is not working. These y-values which I've tried is not having big differences. It range from 6 to 8. But still I wonder why this happens?

May I know how to implement pagination to export?

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


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #7 - Mar 24th, 2021 at 5:29pm
Print Post  
You forgot to remove the this.diagram.setZoomFactor(200) call, which's what making your canvas too large for browsers to handle. We'll try to add some built-in print support with pagination for next release.
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #8 - Mar 25th, 2021 at 11:30am
Print Post  
Hi,

In our application, we have a functionality for zoom so that user can zoom within 1 to 400 during runtime. So, we can't avoid zoom.

Also, I'm not sure whether this is browser issue. I tried in firefox and edge too and same issue persists.

As I already mentioned, within 6 to 8 for y, few nodes display correctly and few nodes display wrongly. That's why I'm not convinced with your reply Smiley

Also, may I know when we can expect the fix?

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


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #9 - Mar 25th, 2021 at 2:57pm
Print Post  
Hi,

Quote:
In our application, we have a functionality for zoom so that user can zoom within 1 to 400 during runtime. So, we can't avoid zoom.


Zoom won't be a problem if you use virtual scroll mode. For exporting an image / printing, you can still reset zoom to 100% to allow creating a larger image, unless your end users want the scaled image exported or printed.

Quote:
Also, I'm not sure whether this is browser issue. I tried in firefox and edge too and same issue persists. As I already mentioned, within 6 to 8 for y, few nodes display correctly and few nodes display wrongly. That's why I'm not convinced with your reply


Which only means it is an issue in all browsers. Text stopping to disappear when you enable virtual scroll in your example above should be a proof enough, but here's something to reproduce without the diagram since apparently we owe you more convincing:

Code
Select All
<html>
<canvas id="myCanvas" width="10000" height="25000" style="border:1px solid #000000;"></canvas>

<script>
var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");
ctx.scale(2, 2);
ctx.font = "15px Arial";

for (var i = 0; i < 1000; i++)
{
	for (var j = 0; j < 50; j++)
	{
		ctx.save();

		ctx.beginPath();
		ctx.rect(10 + j * 120.1, i * 50.33 - 50, 120, 50);
		ctx.clip();

		ctx.fillText("line " + String(i), 10 + j * 120.1, i * 50.33);

		ctx.restore();
	}
}
</script>
</html> 



On our end this does not render at all in firefox due to canvas size, and starts showing wrong rendering after line 162 in chromium based browsers. If you change 25000 to 30000, chromium based browsers stop rendering at all too, so virtual scroll mode is unavoidable if you need to display that large diagrams.

Quote:
Also, may I know when we can expect the fix?


You won't get any fix different than calling setVirtualScroll. If you mean paged export / printing, we'll add it for upcoming v4 release.

Regards,
Slavcho
Mindfusion
  

Untitled_004.jpg ( 48 KB | 3 Downloads )
Untitled_004.jpg
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #10 - Mar 25th, 2021 at 3:43pm
Print Post  
Hi,

During export, we need to set the zoom factor to high to export the canvas image to high resolution as suggested in this link,

https://mindfusion.eu/Forum/YaBB.pl?num=1547792559/19#19

Regards,
Kannan
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 231
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node text not shown properly when zoom factor set around 200
Reply #11 - Mar 29th, 2021 at 5:48am
Print Post  
Hi,

I enabled the virtual scroll and did not set the zoom factor.

I added the below code suggested by you to avoid the two scroll bar. Still two scroll bar is displayed.

canvasParent.style.width = "100vw";
canvasParent.style.height = "100vh";

Also, it is not exporting properly. It is exporting whatever it is shown in the canvas.

Please see the attached screen shots and the sample code file.

Regards,
Kannan
  

app_component.txt ( 5 KB | 3 Downloads )
Screen_Shot.png ( 32 KB | 3 Downloads )
Screen_Shot.png
Canvas-Export.png ( 27 KB | 3 Downloads )
Canvas-Export.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2450
Joined: Oct 19th, 2005
Re: Node text not shown properly when zoom factor set around 200
Reply #12 - Mar 29th, 2021 at 7:25am
Print Post  
Nobody said that setting parent size will hide the scrollbar divs. Rather parent size is necessary to arrange scrollbars correctly alongside the canvas, and they show correctly in the sample project we have from you once canvasParent size is set. Make sure you don't have another div in the hierarchy in main project showing more scrollbars of its own. Diagram's own scrollbars will hide automatically when Bounds is smaller than parent div.

Quote:
Also, it is not exporting properly. It is exporting whatever it is shown in the canvas.


Let's not start with circular logic now. As explained above, keep virtual scroll enabled only for your main diagram where users create / draw / edit items. VirtualScroll mode will allow you using unlimited diagram size in that case. For exporting whole diagram, keep VirtualScroll disabled and either reduce zoom level, or do pagination - i.e. export multiple images showing different parts of the diagram and arrange them in a table or grid for final printing. We'll try to implement latter as a built-in feature for next release; for time being you can implement it yourself by looping over some page size, temporarily changing diagram.bounds to the page coordinates, exporting page image and collecting all images for final view.

Regarding missing strings while the diagram still fits max canvas size, since the problem seems to come from canvas' clip function, you could try removing it from your export canvases, something like:

diagram.context.clip = function() {}

This should help if you don't draw clipped texts but wrapped ones, and don't have other graphics in the diagram that might rely on clipping. Once you reach 25K-30K size of canvas, you'd still need pagination, or browsers won't render anything but the sad-face icon.
« Last Edit: Mar 29th, 2021 at 1:45pm by Slavcho »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint