Manually select individual side an annotation (Area/linear) by mouse click on that side

Technical Support
1

PDF.js Express Version
7.3.1

Detailed description of issue
I want to manually select the sides of an annotation. Here I am splitting the annotation side in half when clicked on Split button and iterate over all the sides on Next button click. This annotation popup appears when I click(select) an annotation.

So here instead of clicking on Next button to iterate over all the sides to select that req. side(for split), I should be able to manually select that side by a mouse click on that side of annotation. Is it possible to select manually ?
Ex:
Select one side of an annotation that we want to split -

image
image801×482 43.1 KB

After split -
image
image757×470 40.9 KB

Expected behaviour

Should be able to select a particular side of an annotation(AREA / LINEAR) USING MOUSE

Code snippet (Angular)

const { annotManager, Annotations } = instance;
// keep track of the currently selected segments for polygon annotations
  const polygonSelectedSegments = {};
  const getSelectedSegment = polygon => {
    return polygonSelectedSegments[polygon.Id] || 0;
  };
  const updateSelectedSegment = polygon => {
    // subtract 1 because the path length is the number of points, not segments
    const pathLength = polygon.getPath().length - 1;
    // update the selected segment, wrap back to zero
    polygonSelectedSegments[polygon.Id] = (getSelectedSegment(polygon) + 1) % pathLength;
  };

// this button "selects" the next segment of the polygon
  instance.annotationPopup.add({
    type: 'actionButton',
    label: 'Next',
    dataElement: 'polygonNextButton',
    onClick: () => {
      const annot = annotManager.getSelectedAnnotations()[0];
      updateSelectedSegment(annot);
      annotManager.redrawAnnotation(annot);
    }
  });

// this button splits the currently selected segment of the polygon
  instance.annotationPopup.add({
    type: 'actionButton',
    label: 'Split',
    dataElement: 'polygonSplitButton',
    onClick: () => {
      const annot = annotManager.getSelectedAnnotations()[0];
      const selectedSegment = getSelectedSegment(annot);
      const path = annot.getPath();
      const firstPoint = path[selectedSegment];
      const secondPoint = path[selectedSegment + 1];
      const newPoint = {
        x: (firstPoint.x + secondPoint.x) / 2,
        y: (firstPoint.y + secondPoint.y) / 2
      };

      path.splice(selectedSegment + 1, 0, newPoint);
      annotManager.redrawAnnotation(annot);
    }
  });
2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

3

Is it possible to do ?

4

Hi,

Right now we do not have any way to select a specific side of an annotation, so this would have to be a custom implementation.

If you already have code to select a side of the annotation, then you should be able to leverage that to select a side on mouse click. You can detect a mouse click on the annotation, find the coordinates of the click, and then find what side of the annotation the click is closest to.

Here’s some code to get the clicked annotation and the coordinates of the click relative to the annotation.

  docViewer.on('mouseLeftDown', (e) => {

    const [annot] = annotManager.getAnnotationsByMouseEvent(e);

    if (annot) {
      const annotX = Math.max(e.offsetX - annot.X, 0);
      const annotY = Math.max(e.offsetY - annot.Y, 0)
  
      console.log(`Annotation Coordinates: ${annotX}, ${annotY}`)
    }
  })

With these coordinates, you will have to do some math/problem solving to find which part of the annotation the click was closest to, and then use your existing code to select that part of the annotation.

Let me know if you have any more questions,

Thanks,
Logan