# Scale reset on zoom or pan

**URL:** <https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [January 8, 2024, 9:02am UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059 "2024-01-08T09:02:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 8, 2024, 9:02am UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/1 "2024-01-08T09:02:00Z")

</div>

**Which product are you using?**

**PDF.js Express Version**

**Detailed description of issue**

I have implemented to reset scale on pagecomplete or documentload event to 1cm = 1cm ([Customize Measurement Tools for PDF.js Express | Documentation](https://pdfjs.express/documentation/measurement/customize)). But it looks like the scale resetting on zoom or move screen with hand symbol. I don’t want to happen this on zoom or move, once set the scale that should stay until user change it again (but on first load it should reset as i did already). It shouldn’t change on zoom or move

also i set calibration box to be visible when adding line annotation, but it is showing on each page load now, this should appear only when i draw a line using scale

**Expected behaviour**  
{Provide a screenshot or description of the expected behaviour}

**Does your issue happen with every document, or just one?**  
{Answer here}

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
{Provide a relevant code snippet}

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [January 8, 2024, 6:20pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/2 "2024-01-08T18:20:33Z")

</div>

Hi there,

Thank you for contacting pdf.js express forums,

I used the following code on our demo [PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo)

```javascript
    const distanceMeasurementTool = documentViewer.getTool('AnnotationCreateDistanceMeasurement');
    distanceMeasurementTool.setStyles(() => ({
      // value of Scale is an array that is consisted of two arrays
      // the first element in each array is the scale ratio and the second element is the unit.
      // valid units are: mm, cm, m, km, mi, yd, ft, in and pt
      // the following array means that for the annotations created by the distance measurement tool, 0.25 inches on the document is equal to 1 inch in the real world
      Scale: [[1, 'cm'], [1, 'cm']],

      // value of Precision is a number that means how many decimal places the calculated value should have
      Precision: 0.001
    }));

```

The measurement tool’s scale is still the same after zooming/scrolling:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/2/214ff696cae4870da0ee081a724bfdd1915f6cd3.jpeg)

I also do not see the calibration button unless I select the line annotation.

Could you please try the latest version (8.7.4) and see if that resolves the issue?

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 9, 2024, 8:32am UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/3 "2024-01-09T08:32:44Z")

</div>

On documentLoad or pagecomplete am setting the scale 1cm=1cm. Then i have used calibration and changed scale to 5cm = 5in … this is resetting to 1cm=1cm whenever i zoom/scroll … I want it to stay 5cm = 5in until I change it again on scale

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [January 9, 2024, 5:47pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/4 "2024-01-09T17:47:37Z")

</div>

Hi there,

A workaround would be to use the tool’s event on annotationAdded  
[https://pdfjs.express/api/Core.Tools.DistanceMeasurementCreateTool.html](https://pdfjs.express/api/Core.Tools.DistanceMeasurementCreateTool.html)

```javascript
distanceMeasurementTool.addEventListener('annotationAdded',() => {
    const scale = distanceMeasurementTool.defaults.Scale;
    console.log(scale)
    distanceMeasurementTool.setStyles(() => ({
      Scale: [[1, 'cm'], [1, 'cm']], // replace with scale here
      Precision: 0.001
    }))
})

```

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 21, 2024, 8:26pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/5 "2024-01-21T20:26:36Z")

</div>

I have another issue with annotations

I made a rectangle annotation and am on the tools panel (rectangle tool selected), but when I move mouse over to the drawn rectangle annotation cursor automatically changing to handle symbol and allowing me to select the rectangle. I need to restrict it, so that if I want to select an annotation I need to choose either select or pan tool from the top section

please help

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 22, 2024, 2:28pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/6 "2024-01-22T14:28:53Z")

</div>

Please help to fix it

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [January 22, 2024, 3:27pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/7 "2024-01-22T15:27:37Z")

</div>

Hi there,

One option could be to temporarily override the selection model to be unselectable:

> **[Custom Annotations in JavaScript PDF Viewer | PDF.js Express SDK](https://pdfjs.express/documentation/annotation/custom-annotations.8#creating-a-custom-selection-model)**

Or set the annotation to read only temporarily.

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 22, 2024, 6:38pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/8 "2024-01-22T18:38:08Z")

</div>

How can I temporarily override selection model?

I think readonly is not option as I wanted to draw other annotations… currently when i move mouse to corner of an already drawn annotation its automatically change to selection. So am not able to start drawing next annoation from there

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 22, 2024, 6:52pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/9 "2024-01-22T18:52:58Z")

</div>

Is it possible to set all other annotations readonly when we try to add a new annotation and enable them only on click of selection icons

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [January 22, 2024, 7:02pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/10 "2024-01-22T19:02:48Z")

</div>

Hi there,

Thank you for your response,

That method is probably preferred here.  
You can make all the annotations ReadOnly on creation like so:

> **[Add Events to Annotations with PDF.js Express | Documentation](https://pdfjs.express/documentation/annotation/annotation-events.8)**

```javascript
const { annotationManager } = instance.Core;
    
annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    
    if (action === 'add') {
        annotations.forEach(annot => {
            annot.ReadOnly = true;
        })
    }
})

```

And when you switch to the pan tool, you can set all the annotations ReadOnly property to false:

```javascript
const {annotationManager, documentViewer, Tools } = instance.Core;
 
documentViewer.addEventListener('toolModeUpdated', (updatedTool) => {
    if (updatedTool instanceof Tools.PanTool) {
      annotationManager.getAnnotationsList().forEach(annot => {
          annot.ReadOnly = false;
      })
    }
  })

```

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)\
**Post date:** [January 23, 2024, 6:45am UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/11 "2024-01-23T06:45:58Z")

</div>

This is not resolving the issue as when we move mouse near to a drawn annotation still switching to hand . So we are not able to draw new annotation from there

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [January 23, 2024, 3:47pm UTC](https://pdfjs.community/t/scale-reset-on-zoom-or-pan/3059/12 "2024-01-23T15:47:40Z")

</div>

Hi there,

Some annotation tools have the API [enableCreationOverAnnotation](https://pdfjs.express/api/Core.Tools.StickyCreateTool.html#enableCreationOverAnnotation__anchor) that you can use for this case.

Best regards,  
Kevin Kim