Hi, I have my diagram in the container as below where the div is sized on page load:
<div id="diagramContainer" style="font-family: arial; font-size: 12px; width=100%; overflow:scroll;" >
<canvas id="diagram" >
</canvas>
</div>
<script>
document.getElementById("diagramContainer").style.height = (document.body.clientHeight - 80) + 'px';
document.getElementById("diagramContainer").style.width = (document.body.clientWidth - 20) + 'px';
</script>
I have removed all of my other code so after page load I do:
diagram = Diagram.create($("#diagram")[0]);
And I get a diagram of some default size:
diagram.getBounds()
c.Rect {x: 0, y: 0, width: 210, height: 297, transform: MindFusion.Drawing.Matrix…}
But after '$(document).ready(function () ' is finished, I end up with a massive diagram canvas much larger than the sizr above (no arrange or auto-resize etc).
If I try to diagram.setBounds() it becomes even more massive.
After some investigation it looks like the behaviour is caused by screen resolution. if I do diagram.setBounds(new Rect(0,0,100,100)) then my canvas gets set to 377x377 and doing diagram.getBounds still returns 100x100.
Basically I want to size my canvas to be the same as it's containing div - what would be the best way here?