Angular - Access to measurementSettings' scaleRatio programmatically

[BLANDIN Ewen]

Hi,
I want to change the scale ratio for the "Calibrate Distance" option but programmatically, as I need to calculate it from the length of the last measurement annotation (I can get it through the "annotationUnSelect" event), and an input from the user.

Currently, I store the "ejs-pdfviewer" tag in a "ng-template", and I load it from a "ng-container" juste above.

<!-- View -->

<div>

  <ng-container #outlet [ngTemplateOutlet]="content"></ng-container>

</div>

<!-- Content template -->

<ng-template #content>

  <ejs-pdfviewer #pdfViewer [resourceUrl]='resource' [documentPath]='document'

[measurementSettings]='measurementSettings' style='height:70vh;display:block'></ejs-pdfviewer>

</ng-template>

I had to do this in order to "reload" it, just to update the measurementSettings (passed in at the start), just like this :

  @ViewChild('outlet', { read: ViewContainerRef }) outletRef!: ViewContainerRef; // Represents the view

  @ViewChild('content', { read: TemplateRef }) contentRef!: TemplateRef<any>; // Represents the content template

  @ViewChild('pdfViewer') pdfViewer!: PdfViewer; // Represents the PDF Viewer

...

public measurementSettings: MeasurementSettingsModel = { ... }; // Measurement settings

...

  rerender() { // Source : https://developapa.com/angular-rerender/

    /**Clear and recreate the view from the template */

    this.outletRef.clear();

    this.outletRef.createEmbeddedView(this.contentRef);

  }

This worked well until I had to subscribe to the pdfViewer.annotationUnSelect event, because the "createEmbeddedView" seems to destroy the link between the PDF Viewer and @ViewChild.

I tried to resubscribe or get access the the new PdfViewerComponent from the EmbeddedViewRef but I couldn't.

I'm now retrying to get the measurementSettings to update without having to reload the viewer because currently it adjusts the scale ratio once before all the subscriptions stop working, but I can't find how to do so.

Here's an example of it working once before not working anymore.


If there is any solution let me know, have a great day and thanks in advance !

[BLANDIN Ewen]

Update :

Found a way through my problem (had to wait for the view to load completely before resubscribing in my case), but I'm still interested in knowing if there is a way to access that "scaleRatio" property more easily.

[Sathiyaseelan Kannigaraj]

Hi Blandin Ewen,

To obtain the bounds of the action performed, the document must be fully loaded. Therefore, please include the measurementSettings in the documentLoaded event, as this is the default behavior. Ensure that the measurementSettings are updated in the documentLoaded event and check if the issue persists.

Regards,
Sathiyaseelan K

[BLANDIN Ewen]

Hi, thanks for the response.

Unfortunately, this does not quite fit my current problem.

The measurementsSettings are already passed in the documentLoad event, but it only occurs once : when the document loads.

So currently, in order to update the measurementSettings after an input from the user, I have to reload the pdfViewer. It works, but I would like to update these settings without having to do so.

Is there maybe an event or even a property that I could use to change these measurementSettings without having to reload the pdfViewer ?

I already tried using the pdfViewer.measurementSettings property but it didn't work (it updates the property, but in order to make it work I have to reload the viewer).

Thanks in advance and have a great day.

Regards,
Blandin Ewen

[Sathiyaseelan Kannigaraj]

Hi Blandin Ewen,

You can dynamically update the measurement settings. We have prepared a simple sample using the default measurementSettings and modified them upon a button click. We verified that the settings were correctly updated. Below, we have provided the sample and demo for your reference.

Sample: https://stackblitz.com/edit/angular-jeufmb?file=src%2Fapp.component.html,src%2Fapp.component.ts

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/update-measurement-settings-1309047130.zip 

Regards,
Sathiyaseelan K

[BLANDIN Ewen]

Hi and thanks for the response !

I found another way to do it too, by using a @ViewChild to "get" the pdfViewer component, and then using its .annotation property in order to access the .updateMeasurementSettings() method.

I call in on documentLoad, like shown there :

pdf.component.html :

    <ejs-pdfviewer #pdfViewer [resourceUrl]='resource' [documentPath]='document' style='height:80vh;display:block;'

        (documentLoad)="initializeViewer()"></ejs-pdfviewer>

pdf.component.ts :

export class PdfComponent {

@ViewChild('pdfViewer') pdfViewer!: PdfViewer;

...

initializeViewer() {

this.pdfViewer.measurementSettings = { conversionUnit: 'cm', depth: 96, displayUnit: 'cm', scaleRatio: 1 };

this.pdfViewer.annotation.updateMeasurementSettings();

}

But of course, you can call it from anywhere, after the document has been loaded of course.

Thanks anyways, it's always great to know multiple ways of doing something.

Regards,
Blandin Ewen

[Sathiyaseelan Kannigaraj]

Hi Blandin Ewen,

We're pleased to hear that your issue has been resolved. Don't hesitate to reach out if you need any further assistance.

Regards,
Sathiyaseelan K