We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to determine the currently visible bounds of a diagram?

My diagram is currently DIV that is, for the sake of the argument, 1200px wide, and 850px high.

As the diagram is extremely wide, when exporting I am getting an image that's 26,160 pixels wide.

What I really want to do is allow the user to export just what is visible on the screen.  They can then pan and zoom to a specific region of the diagram and export just what they see.

I've been trying to do with via a combination of the diagram's current vertical and horizontal scroll offset (currently via diagram._verticalOffset()), and passing that into the bounds property of the export options, but it's not quite doing.

The question is: Is there an easy technique to just export the visible portion of a diagram?


Current export code for completeness:

var diagram = $("#alt-org").ejDiagram("instance");
var options = {
                        mode: "download",
                        region: "content",
                        //Name of the file to be downloaded
                        fileName: "org_chart",
                        pageWidth: 400,
                        pageHeight: 400,
                        bounds: {
                            x: diagram._horizontalOffset(),
                            y: diagram._verticalOffset(),
                            width: 1200,//width,
                            height: 850
                        //multiplePage: true,
                        //Margin to the exported file/data
                        margin: {
                            left: 30,
                            right: 30,
                            top: 30,
                            bottom: 30

1 Reply

SG Shyam G Syncfusion Team August 8, 2017 09:40 AM UTC

Hi Brendan, 
We considered this “Issue in exporting zoomed diagram with specified bounds” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon