# 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:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [August 5, 2021, 1:59pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/1 "2021-08-05T13:59:12Z")

</div>

**PDF.js Express Version**  
7.3.3

**Detailed description of issue**  
I want to create a custom selection model based on the default 8 point selection model which is associated to FreeTextAnnotation. I need only 1 bottom right control handle, have seen the custom annotation sample of triangle but could do much. Please guide.

**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:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [August 5, 2021, 1:59pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/2 "2021-08-05T13:59:17Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [Creating custom annotations for your viewer - Creating a custom selection model](https://pdfjs.express/documentation/annotation/custom-annotations#creating-a-custom-selection-model)
- [Freeform rotation for annotations](https://pdfjs.express/documentation/annotation/freeform-rotation)
- [Create annotations - Examples](https://pdfjs.express/documentation/annotation/create-annotations#examples)

APIs:
- [Annotations.ControlHandle - new ControlHandle(x, y, width, height)](https://pdfjs.express/api/Annotations.ControlHandle.html#ControlHandle__anchor)
- [Annotations.SelectionModel - new SelectionModel(annotation, canModify, isSelected, docViewer)](https://pdfjs.express/api/Annotations.SelectionModel.html#SelectionModel__anchor)
- [Tools.FreeTextCreateTool](https://pdfjs.express/api/Tools.FreeTextCreateTool.html#__anchor)

Forums:
- [How to add selection point to annotations?](https://pdfjs.community/t/how-to-add-selection-point-to-annotations/285/2)
- [Customize freetext tool to change text and behavior programatically](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/1)
- [Exception occurs when double-clicking after adding FreeTextAnnotation](https://pdfjs.community/t/exception-occurs-when-double-clicking-after-adding-freetextannotation/277/5)

---

<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 10, 2021, 3:00pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/3 "2021-08-10T15:00:31Z")

</div>

Hi,

Just wanted to let you know we have not forgot about your question. I’m trying to find the best way to accomodate this use case - I will send you some code today. Selection models are pretty complex.

Thanks for your patience,  
Logan

---

<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

---

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [August 13, 2021, 1:22pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/5 "2021-08-13T13:22:14Z")

</div>

> [@Logan](#):
>
> `Annotations`

Thanks Logan, exactly what I needed.

---

<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 13, 2021, 4:35pm UTC](https://pdfjs.community/t/how-to-create-custom-selectionmodel-similar-to-the-default-8-control-handles/932/6 "2021-08-13T16:35:43Z")

</div>

Closed on August 13, 2021, 4:35pm UTC