DiagramComponent::getDiagramContent() wrongly clips content if I scroll above (or to left of) page break.

Question

Hello Syncfusion team,I'm using the latest available version of the diagram component ("@syncfusion/ej2-angular-diagrams": "^19.4.43") in my app.Since I use SVG nodes in my app, I have to use the 
getDiagramContent() method and send the output to a backend server that prints it using the HtmlToPdfConverter.I'm noticing a regression in the getDiagramContent() method

in the latest version.If I scroll above (or to the left of) a diagram's page break, then the 
getDiagramContent() method  wrongly clips the content.  However, if I scroll below (or to right of) the page break, then the method works properly. Please see attached gif for details. I've also attached the diagram json.My diagram page settings are as follows: Thanks,-MithunAttachment: getdiagramcontentissue_a7f88936.zip

Arunkumar Manoharan · Accepted Answer

Hi Mithun,The scroller hOffset and vOffset will return the negative values of
horizontal and vertical offset respectively. So, you should add hOffset/vOffset
with the viewportWidth in the settings WebKitViewPort width and height should
be set as 0. We have created a sample in which we have shown how to get
scroller hOffset,vOffset and viewPortWidth. You need to pass HTML content and
the width in the server side to convert HTML content to PDFCode snippet:

getContent()
  {
          let oldwidth =
  this.diagram.scroller.vPortWidth;
          let width =
  this.diagram.scroller.vPortWidth;
          if (this.diagram.scroller.vOffset
  > this.diagram.scroller.hOffset) {            
              width = width +
  this.diagram.scroller.vOffset;
          } else {
              width = width + this.diagram.scroller.hOffset;
          }
          let content =
  this.diagram.getDiagramContent();
          let updatedwidth =  this.diagram.scroller.vPortWidth;
      }

Sample Link: https://stackblitz.com/edit/angular-zfkdz6-fbyfnw?file=app.component.tsRegards,Arun Kumar.Attachment: getcontetnServerSide_392f9250.zip

Arunkumar Manoharan · Answer

Hi Mithun,On further of shared JSON data we have created a sample by loading the JSON and exported as image, but we couldn’t be able to replicate the issue in our end. We request you to replicate the issue in the shared sample so that we can be able to serve you better.Sample Link: https://stackblitz.com/edit/angular-zfkdz6-zmwtyp?file=app.component.tsRegards,Arun Kumar.

Mithun · Answer

Hi Arun,Your example does not use the 
getDiagramContent() method.Hence you're not encountering the issue.As I had previously mentioned, 
since my app uses SVG nodes, I have to use the 
getDiagramContent() method and send the output to a backend server that prints it using the HtmlToPdfConverter.

Thanks,-Mithun

Shyam G · Answer

Hi Mithun,Sorry for the inconvenience.We will validate your issue and update you with more details on 31st january, 2022.Regards,Shya

Arunkumar Manoharan · Answer

Hi Mithun,We have checked your issue by loading your JSON in our sample and
exported it to PDF using Webkit converter and we could not be able to replicate
an issue at our end. Could you please share us more details such as modifying the
below sample. We have provided a video in which we have shown how to run our
sample and tried to replicate your issue.Regards,Arun Kumar.Attachment: Sample_getdiagram_f275d86e.zip

Mithun · Answer

Hi Arun,I'll try to update the sample.In the meanwhile, you can try out this scenario from my app (test version, where the output of getDiagramContent() is being shown in the browser console). Thanks,-Mithun

Mithun · Answer

Hi Arun,I've managed to reproduce the error.I've forked your original stackblitz project twice as follows: The first one uses older v19.4.40 and does NOT have the error (LINK).The second one uses latest v19.4.48 and displays the error (LINK).Basically, I'm taking the HTML output of getDiagramContent() method and generating a HTML file from it.As seen in this attached video, I'm comparing them side by side.In the first stackblitz (which uses ﻿﻿
older v19.4.40

), call to getDiagramContent() would shift the layout to 0,0 (which was a bug).In the second stackblitz (which uses latest v19.4.48), 
call to getDiagramContent()

will not shift the layout. Consequently, the HTML content includes additional area (apart from the diagram page) in the content. The other issue is that the getDiagramBounds() method returns the same Rect dimensions in both examples (I'm outputting this to the browser console in both stackblitz projects). While the Rect dimensions are correct for the older version, it is wrong for the newer version.Please see attached video.Thanks,-MithunAttachment: video1329082616_79ce08ee.zip

Arunkumar Manoharan · Answer

Hi Mithun,

In the first stackblitz (which uses
       ﻿﻿ older v19.4.40 ), call to getDiagramContent() would shift
       the layout to 0,0 (which was a bug).
   In the second stackblitz (which uses
       latest v19.4.48), call to getDiagramContent() will not shift the layout.
       Consequently, the HTML content includes additional area (apart from the
       diagram page) in the content.

When we load your
  JSON, the page starts from negative x axis -240. In our previous
  version(19.4.40), when we export the diagram, we consider from x axis 0 and
  ignored the negative axis. In the latest version(19.4.48), when we export the
  diagram, we have considered the negative axis and it starts from -240. So
  only the spaces appear at the left in the latest version.

The other issue is
  that the getDiagramBounds() method returns the same Rect dimensions in both
  examples (I'm outputting this to the browser console in both stackblitz
  projects). While the Rect dimensions are correct for the older version, it is
  wrong for the newer version.

The
  getDiagramBounds method will return the diagram content bounds. When we load
  your JSON, the diagram content bounds starts from x and y axis 0, so the Rect
  returns correct value in both older and newer versions.

Regards,Arun Kumar.

Mithun · Answer

Hi Arun,Then, in the new version, how can I figure out the correct values required to initialize the WebKitConverterSetting's viewport 
(needed to print the diagram)?Previously, I was using the Rect output of getDiagramContent() method and using it to initialize WebKitConverterSettings.in the newer version, while the 
Rect output of getDiagramContent()

has the correct width & height, the origin is no longer (0,0). This is causing the generated diagram to get clipped. How can I programmatically get the values of the negative axes (if any)?I'll be happy to a video/conf call to go over the details (this issue is somewhat critical for us).Thanks,-Mithun

Mithun · Answer

Hi Arun, Thanks for the suggestion & sample. I'll try it out and revert back later today.Thanks,-Mithun

Shyam G · Answer

Hi Mithun,We will wait to hear from you.Regards,Shyam G

Mithun · Answer

@Shyam: Yes, from my initial tests, this suggested workaround (using scroller offsets) seems to work. I haven't extensively tested it, but we can safely mark this issue as resolved.

@Arun: Thanks again for all the help on this! Highly appreciated.

I'll test this in my pre-production environment over the coming days. Will open a separate forum thread should I encounter any edge cases.

Thanks,

-Mithun

Shyam G · Answer

Hi Mithun,Thanks for your update.Regards,Shyam G