Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Height & Width of Canvas not preserved after serialization/deserialization into JSON (Read 1335 times)
Megan1717
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 39
Joined: Jun 20th, 2016
Height & Width of Canvas not preserved after serialization/deserialization into JSON
Jun 25th, 2021 at 2:54pm
Print Post  
Hi,

We are having an issue with the height and width of the canvas (DiagramView) being incorrect after sending the diagram.toJson() to the server to execute server side code. When we deserialize the diagram JSON the DiagramView always has the size 400 x 400. The Diagram's bounds, however, have the correct values, let's say 700 x 1100.

Why does the DiagramView have incorrect values on the server after deserializing from JSON?

This is causing us to have to resize the bounds of the canvas (which in your API can only be done client side using setBounds()) every time we reload the diagram client side using diagram.fromJson(diagramJson);

Our HTML control for the DiagramView looks like this:

Code (Java)
Select All
@Html.DiagramView(Model.CurrentContext.DiagramView, new { style = "width:100%; height:81.75vh;" })
 



In order to have the canvas fill its allotted div dynamically, we must resize it:

Code (Javascript)
Select All
		var diagram = MindFusion.Diagramming.Diagram.find("diagram");
		var newPoint = new MindFusion.Drawing.Point(0, 0);
		var newCoords = diagram.clientToDoc(newPoint);
		var diagramDivRect = document.getElementById("diagram").getBoundingClientRect();

		var panelHeadingHeight = 0; [0].getBoundingClientRect().height;
		var newPoint = new MindFusion.Drawing.Point(0, 0);
		var newCoords = diagram.clientToDoc(newPoint);
		var newDiagramWidth = parseInt(diagramDivRect.width);
		var newDiagramHeight = parseInt(diagramDivRect.height);

		var currentWidth = diagram.bounds.width;
		var currentHeight = diagram.bounds.height;

		if (currentWidth > newDiagramWidth) {
			newDiagramWidth = currentWidth;
		}

		if (currentHeight > newDiagramHeight) {
			newDiagramHeight = currentHeight;
		}

		var newBounds = new MindFusion.Drawing.Rect(newCoords.x, newCoords.y, newDiagramWidth, newDiagramHeight - parseInt(panelHeadingHeight));
		diagram.setBounds(newBounds);
diagram.setAutoResize(MindFusion.Diagramming.AutoResize.RightAndDown);
		diagram.setAutoScroll(true);
 



To send the diagram to the server in an AJAX call we are using:
Code (Javascript)
Select All
	var diagram = MindFusion.Diagramming.Diagram.find("diagram");
var diagramJson = diagram.toJson();
 



On the server, we deserialize the diagram JSON:

Code (Java)
Select All
DiagramView view = DiagramView.FromJson(diagramJson);

//And reserialize like this:
return Json(new { diagramToJson = DiagramView.ToJson(view) });
 



And if we examine that "view" object, the height and width will be 400 x 400, not 700 x 1100. However, if we look at the view's Diagram, the bounds will be 700 x 1100.

Now we reload the diagram client-side:

Code (Javascript)
Select All
diagram.fromJson(diagramJson);
 



The height and width of the canvas will be incorrect and we have to resize the diagram again using JavaScript so that it fills its div.

The only workaround I've found so far is to set the height and width of the DiagramView on the server, but this shows as "obsolete" in the API.

view.Width = 1100; //obsolete
view.Height = 700; //obsolete

How can we preserve the canvas dimensions between client-side and server and vice versa?

Thanks.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Height & Width of Canvas not preserved after serialization/deserialization into JSON
Reply #1 - Jun 28th, 2021 at 8:12am
Print Post  
Hi,

The DiagramView size is independent from diagram's logical size set via Bounds. The DiagramView is rendered as a div with enabled overflow to allow scrolling a much larger diagram. So the 400x400 sizes you are seeing are the defaults for DiagramView, while diagram's Bounds combined with Zoom and MeasureUnit values is set as size of child <canvas> element of the view's <div>.

If VirtualScroll is enabled (default in recent versions) the canvas element's size is actually as large as the view and the control doesn't rely on browser's overflow for scrolling, but implements it with some internal transformations. So in that case you won't be able to infer the full scrollable size in pixels from dom elements' sizes alone; you could instead determine it by converting diagram.Bounds to pixels using the docToClient method.

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