Enable annotations to be moved using arrow keys

Technical Support
1

PDF.js Express Version

Detailed description of issue
Currently if we click on an annotation we can move it around using mouse press . We need the same behaviour with up/ down/ left / right keyboard arrow keys. Is there any way in pdfjs express we can make that happen?

Expected behaviour
After clicking on an annotation, the user should be able to move it around using the keyboard arrow keys.

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}

2

Hey there,

Yeah this is pretty easy to do. You just need to listen for keyboard events and change the X/Y value of the selected annotation on key press.

  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;
        }
    }
  })

You can adjust this function to your liking, but this should be enough to get you started!

Thanks,
Logan

3

Sorry to revive this thread but on the same subject, is there any reason to why this might not work for the line annotation?