GoJS Printing won't display the images from makeImage

GoJS
1

So I have followed the guides for printing, a GoJS diagram by using the makeImage function. GoJS Printing -- Northwoods Software

I have set up my <html> page in the following way:

It successfully populates my Diagram in the <div> SWFPrintArea and sets the Images successfully in the myImages div.

Here is my CSS file that sets the @print media query.

The problem is that when I print the page in the browser, it either displays a blank page (if I set the <link> tag to have media="print" and if I set the media parameter of the css link to screen it will print the whole page without selectively displaying the myImages

`. Not really sure what is going on as it is happening in both Chrome and Firefox.

Here is the fragment of the JS file which makes the Images

2

So, actually, now the generateImages function is not getting values for the documentBounds of the diagram. When I make the alert() statement of the db.width() and db.height() I get both NaN, which is preventing GoJS from Drawing the Images, as it doesn’t enter the loop to copy the diagram into the myImages div.

        var imgDiv = document.getElementById('myImages');
        imgDiv.innerHTML = "";
        alert(imgDiv);
        alert(confSheetDiagramRef);
       var db = confSheetDiagramRef.documentBounds.copy();
      var boundswidth = db.width;
      var boundsheight = db.height;
         alert(boundswidth);
        alert(boundsheight);
      var imgWidth = width;
     var imgHeight = height;
     var boundsheight = db.height;
      alert(boundswidth);
        alert(boundsheight);
     var imgWidth = width;
     var imgHeight = height;
      var p = db.position.copy();

Here is the full JS file

Here is the Full GoJS file which draws the diagram

3

If the Diagram.documentBounds is not real (i.e. if it has NaN values), that indicates that the Diagram did not have a chance to do all of its standard initialization, including loading of the model, layout, and document bounds computation.

Can you reorganize your code to occur in an “InitialLayoutCompleted” DiagramEvent listener?

4

Thank you for the good suggestion, Walter. So now it successfully populates the myImages <div> by running
generateImages() on my Diagram. Selectively printing the myImages <div> with the GoJS supplied CSS in the Printing tutorial is still not working. Specifically, when I include the stylesheet with the
@print media query, it does not seem to be successfully applying display:none to the rest of the DOM as everything on the page prints when I toggle the print menu with Ctrl-P in Firefox 42.0b6 on the Beta Channel.

Any suggestions? Let me know if you need to see any other code in addition to the aforementioned gists I posted of the CSS and my HTML page.

5

Sorry my apologies. I discovered that, when trying to fix the case in which the whole page was displayed, I wrote display:none !important; which of course had the unwanted effect of rendering display:block on the div #myImages, non-functional.