# How to create custom SelectionModel similar to the default 8 control handles

**URL:** <https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932>\
**Category:** Technical Support\
**Created:** [August 5, 2021, 1:59pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932 "2021-08-05T13:59:11Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 12, 2021, 7:18pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/4 "2021-08-12T19:18:31Z")

</div>

Hi there,

Sorry for the delay again. Very busy this time of month!

Here is some code that creates a custom selection model with only one control point on the bottom right. Admittedly, our APIs for this kind of thing aren’t the best so this code is a bit gross, but we will be working on improving these APIs in the future.

```javascript
  const { Annotations, annotManager } = instance;

  const CustomFreeTextControlHandle = function (annotation) {
    this.annotation = annotation;
  };

  CustomFreeTextControlHandle.prototype = new Annotations.ControlHandle();

  CustomFreeTextControlHandle.prototype.getDimensions = function (annotation, _, zoom) {
    let x = annotation.X + annotation.Width;
    let y = annotation.Y + annotation.Height;

    // Use the default width and height
    const width = Annotations.ControlHandle.handleWidth / zoom;
    const height = Annotations.ControlHandle.handleHeight / zoom;
    // adjust for the control handle's own width and height
    x -= width * 0.5;
    y -= height * 0.5;
    return new Annotations.Rect(x, y, x + width, y + height);
  };

  CustomFreeTextControlHandle.prototype.move = function (annotation, deltaX, deltaY, fromPoint, toPoint) {
    annotation.Width += deltaX
    annotation.Height += deltaY

    const x1 = annotation.X;
    const x2 = annotation.X + annotation.Width

    const y1 = annotation.Y;
    const y2 = annotation.Y + annotation.Height;

    const rect = new Annotations.Rect(x1, y1, x2, y2);
    annotation.setRect(rect)
    return true;
  };

  const CustomFreeTextSelectionModel = function (annotation, canModify) {
    Annotations.SelectionModel.call(this, annotation, canModify);
    if (canModify) {
      const controlHandles = this.getControlHandles();
      controlHandles.push(new CustomFreeTextControlHandle(annotation));
    }
  };
  CustomFreeTextSelectionModel.prototype = new Annotations.SelectionModel();

  Annotations.FreeTextAnnotation.prototype.selectionModel = CustomFreeTextSelectionModel;

  annotManager.on('annotationChanged', (annots, action) => {
    if (action === 'add') {
      const freeText = annots.filter(annot => annot instanceof Annotations.FreeTextAnnotation && annot.getIntent() !== Annotations.FreeTextAnnotation.Intent['FreeTextCallout'])
      for (const annot of freeText) {
        annot.selectionModel = CustomFreeTextSelectionModel
      }
    }
  })

```

Let me know if you have any questions.

Thanks!  
Logan

---

_[View the full topic](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932)._