Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Dynamically adjust the size of the flowchart canvas. (Read 1170 times)
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Dynamically adjust the size of the flowchart canvas.
Aug 27th, 2022 at 12:42pm
Print Post  
Hello.
Is there any way to allow the flowchart canvas to be responsive when changing the canvas size dynamically? For example, if I want to adjust my Browser's canvas, I want the flowchart's canvas to also adjust to the size of the screen. It is possible?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Dynamically adjust the size of the flowchart canvas.
Reply #1 - Aug 28th, 2022 at 10:24am
Print Post  
Hi,

Try this -

Code
Select All
var viewDiv = document.getElementById("view");
new ResizeObserver(viewResized).observe(viewDiv);

function viewResized()
{
    let xPixels = viewDiv.offsetWidth;
    let yPixels = viewDiv.offsetHeight;

    // convert size to diagram units
    var unitSize = diagramView.clientToDocOffset({ x: xPixels, y: yPixels });

    // don't make the scrollable area smaller
    var unitWidth = Math.max(diagram.bounds.width, unitSize.x);
    var unitHeight = Math.max(diagram.bounds.height, unitSize.y);

    diagram.bounds = new Rect(0, 0, unitWidth, unitHeight);
} 



https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

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


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Dynamically adjust the size of the flowchart canvas.
Reply #2 - Sep 11th, 2022 at 1:35pm
Print Post  
Hi,
I have a problem when I try to resize the flowchart canvas using
Code (Javascript)
Select All
diagram.bounds = new Rect(0, 0, unitWidth, unitHeight); 

The old canvas remains inside the Div and strange behavior happens as if two canvases exist at the same time and the nodes start blinking. How could I remove the old canvas before creating a new one?
  
Back to top
 
IP Logged
 
JaymeW
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 24
Joined: Oct 14th, 2021
Re: Dynamically adjust the size of the flowchart canvas.
Reply #3 - Sep 11th, 2022 at 3:03pm
Print Post  
Hi, nevermind, I managed to fix the problem and thanks for the help. Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint