Moving annotations with arrow keys - Line and text box

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
6.3.4

Detailed description of issue
We are following the method to bind the arrow keys in this other thread Enable annotations to be moved using arrow keys . However when we draw a line and then try to move it with the arrow keys it does not work. When we put a free form text box, it only moves the box but not the content. Is there a different binding for the other annotations?

Thanks

2

Hi there,

Thank you for contacting pdf.js express forums,

I am able to move the line annotation using the code provided from the other post:
Minor change of instance.iframeWindow.window to instance.UI

  const { docViewer, annotManager, Annotations } = instance;

  const adjustSelectedAnnot = (x, y, event) => {

    const selectedAnnots = annotManager.getSelectedAnnotations();

    if (!selectedAnnots || selectedAnnots.length === 0) {
      return;
    }

    event.preventDefault()

    selectedAnnots.forEach(annot => {
      annot.X += x;
      annot.Y += y;
      annotManager.redrawAnnotation(annot);
    })

  }

  instance.iframeWindow.window.addEventListener('keydown', event => {
    switch (event.key) {
      case 'ArrowRight':
        {
          adjustSelectedAnnot(1, 0, event)
          break;
        }
      case 'ArrowLeft':
        {
          adjustSelectedAnnot(-1, 0, event)
          break;
        }
      case 'ArrowUp':
        {
          adjustSelectedAnnot(0, -1, event)
          break
        }
      case 'ArrowDown':
        {
          adjustSelectedAnnot(0, 1, event)
          break;
        }
    }
  })

This works on our demo site PDF.js Viewer Demo | PDF.js Express (note this is on 8.7). You just need to make sure the line annotation is selected when you run the code.

Best regards,
Kevin Kim