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:
@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:
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:
var diagram = MindFusion.Diagramming.Diagram.find("diagram");
var diagramJson = diagram.toJson();
On the server, we deserialize the diagram JSON:
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:
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.