> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/customize/custom-selection-models.md).

# Custom Selection Models in WebViewer

Enhance user experience with custom selection models in WebViewer. Customize selection boxes for annotations to stand out and improve interaction. Learn how to create and modify selection models effic

Along with [custom annotations](/web/annotation/customize/creating-custom-annotations.md), WebViewer also allows customizing the selection models. Selection models are the selection boxes that appear when annotations are selected. This is a good way to make your custom annotation more noticeable or with further customization. For example, if your custom annotation was a certain small size, then the selection model would highlight red until it was resized to a larger size, then it would change to green.

## Creating the custom selection model class

As with all custom things, everything begins with a custom class. In this case, we will require a custom [selection model](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#main) class that the annotation class can provide for initialization and rendering.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { Core } = instance;
const { Annotations } = Core;

class CustomRectangleSelectionModel extends Annotations.SelectionModel {
  constructor(annotation, canModify) {
    super(annotation, canModify);
    if (canModify) {
      const controlHandles = this.getControlHandles();
      // pass the vertex index to each control handle
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 32));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 32));
    }
  }
}
```

{% endcode %}

[SelectionModel.testSelection](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#testSelection) [SelectionModel.getControlHandles](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#getControlHandles) [BoxControlHandle](https://sdk.apryse.com/api/web/Core.Annotations.BoxControlHandle.html#main)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { Annotations } = instance;

class CustomRectangleSelectionModel extends Annotations.SelectionModel {
  constructor(annotation, canModify) {
    super(annotation, canModify);
    if (canModify) {
      const controlHandles = this.getControlHandles();
      // pass the vertex index to each control handle
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 16));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 64));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 32));
      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 32));
    }
  }
}
```

{% endcode %}

[SelectionModel.testSelection](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#testSelection) [SelectionModel.getControlHandles](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#getControlHandles) [BoxControlHandle](https://sdk.apryse.com/api/web/Core.Annotations.BoxControlHandle.html#main)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The horizontal and vertical offsets used to initialize **BoxControlHandle** uses specific values to help determine which point of the box it represents.Horizontal Alignment

* Left: 1
* Center: 2
* Right: 4

Vertical Alignment

* Top: 16
* Middle: 32
* Bottom: 64
  {% endhint %}

As just mentioned, the annotation class needs to provide the selection model as a class as the selection model will be initialized at a later point (when a selection is actually made). The selection model can be set on the `selectionModel` property on the annotation class. This can be done in two ways:

First, we could set it directly in the constructor if you are working with your own annotation class.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
class MyRectangleAnnotation extends Annotations.RectangleAnnotation {
  constructor(initializer) {
    super(initializer);
    this.selectionModel = CustomRectangleSelectionModel;
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

Second, you could also set it directly through the annotation class prototype.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
Annotations.RectangleAnnotation.prototype.selectionModel = CustomRectangleSelectionModel;
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Changing selection testing

A selection model's main purpose is to determine the area, body, or model in which you can select and interact with an annotation. This is determined through the [testSelection](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#testSelection) function on the selection model. This can be overriden with custom logic if you have any or if your custom annotation has an irregular shape.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
const { Core } = instance;
const { Annotations, Math } = Core;

class TriangleSelectionModel extends Annotations.SelectionModel {
  ...
  testSelection(annotation, x, y, pageMatrix) {
    const cursor = new Math.Rect(x, y, x, y);
    const rect = annotation.getRect();
    return cursor.intersects(rect);
  }
}
```

{% endcode %}

[SelectionModel.testSelection](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#testSelection) [Math.Rect](https://sdk.apryse.com/api/web/Core.Math.Rect.html) [Annotation.getRect](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#getRect) [Rect.intersects](https://sdk.apryse.com/api/web/Core.Math.Rect.html#intersects)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
const { CoreControls, Annotations } = instance;
const { Math } = CoreControls;

class TriangleSelectionModel extends Annotations.SelectionModel {
  ...
  testSelection(annotation, x, y, pageMatrix) {
    const cursor = new Math.Rect(x, y, x, y);
    const rect = annotation.getRect();
    return cursor.intersects(rect);
  }
}
```

{% endcode %}

[SelectionModel.testSelection](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#testSelection) [Math.Rect](https://sdk.apryse.com/api/web/Core.Math.Rect.html) [Annotation.getRect](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#getRect) [Rect.intersects](https://sdk.apryse.com/api/web/Core.Math.Rect.html#intersects)
{% endtab %}
{% endtabs %}

### Defining how it renders

Similar to how annotations render with a [`draw`](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#draw) function, selection models render with [`drawSelectionOutline`](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#drawSelectionOutline).

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
class CustomRectangleSelectionModel extends Annotations.SelectionModel {
  ...
  // Changes how we draw the selection outline
  drawSelectionOutline(ctx, annotation, zoom) {
    ctx.lineWidth = 2;

    // Changes the selection outline color if the user doesn't have permission to modify this annotation
    if (this.canModify()) {
      // Change the selection outline color if the annotation is less than a certain size
      if (annotation.Width < 500) {
        ctx.strokeStyle = Annotations.SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
      } else {
        ctx.strokeStyle = Annotations.SelectionModel.defaultSelectionOutlineColor.toString();
      }
    } else {
      ctx.strokeStyle = Annotations.SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
    }

    ctx.beginPath();
    ctx.moveTo(annotation.X, annotation.Y);
    ctx.lineTo(annotation.X + annotation.Width, annotation.Y);
    ctx.lineTo(annotation.X + annotation.Width, annotation.Y + annotation.Height);
    ctx.lineTo(annotation.X, annotation.Y + annotation.Height);
    ctx.closePath();
    ctx.stroke();

    // Adjust for zoom
    if (typeof zoom !== 'undefined') {
      ctx.lineWidth = Annotations.SelectionModel.selectionOutlineThickness / zoom;
    } else {
      ctx.lineWidth = Annotations.SelectionModel.selectionOutlineThickness;
    }

    // draw a dashed line around the triangle
    const dashUnit = Annotations.SelectionModel.selectionOutlineDashSize / zoom;
    const sequence = [dashUnit, dashUnit];
    ctx.setLineDash(sequence);
    ctx.strokeStyle = 'rgb(0, 0, 255)';
    ctx.stroke();
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

[SelectionModel.drawSelectionOutline](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#drawSelectionOutline) [SelectionModel.defaultNoPermissionSelectionOutlineColor](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.defaultNoPermissionSelectionOutlineColor) [SelectionModel.defaultSelectionOutlineColor](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.defaultSelectionOutlineColor) [SelectionModel.selectionOutlineThickness](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.selectionOutlineThickness) [SelectionModel.selectionOutlineDashSize](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.selectionOutlineDashSize)

## Changing existing selection testing and rendering

It is also possible to change the existing behavior of existing selection models without having to create a custom class and/or extending from them. This is done with the [`setCustomHandlers`](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.setCustomHandlers) API.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { Annotations } = instance.Core;
const { SelectionModel, BoxSelectionModel } = Annotations;

SelectionModel.setCustomHandlers(BoxSelectionModel, {
  // Draws a diagonal dashed along across the middle of the selected annotation
  drawSelectionOutline(ctx, annotation, zoom, pageMatrix, { selectionModel, originalDrawSelectionOutline }) {
    if (!(annotation instanceof Annotations.RectangleAnnotation)) {
      originalDrawSelectionOutline(ctx, annotation, zoom, pageMatrix);
      return;
    }
    if (typeof zoom !== 'undefined') {
      ctx.lineWidth = SelectionModel.selectionOutlineThickness / zoom;
    } else {
      ctx.lineWidth = SelectionModel.selectionOutlineThickness;
    }
    if (selectionModel.canModify()) {
      ctx.strokeStyle = SelectionModel.defaultSelectionOutlineColor.toString();
    } else {
      ctx.strokeStyle = SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
    }
    ctx.beginPath();
    ctx.moveTo(annotation.X, annotation.Y);
    ctx.lineTo(annotation.X + annotation.Width, annotation.Y + annotation.Height);
    ctx.closePath();
    ctx.stroke();
    const dashUnit = SelectionModel.selectionOutlineDashSize / zoom;
    const sequence = [dashUnit, dashUnit];
    ctx.setLineDash(sequence);
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.stroke();
  },
  // Get the dimension that is extended by 8 both horizontally and vertically
  getDimensions(annotation, { selectionModel, originalGetDimensions }) {
    if (!(annotation instanceof Annotations.RectangleAnnotation)) {
      return originalGetDimensions(annotation);
    }
    const x = annotation.X - 4;
    const y = annotation.Y - 4;
    const width = annotation.Width + 2 * 4;
    const height = annotation.Height + 2 * 4;
    return new Annotations.Rect(x, y, x + width, y + height);
  },
  testSelection(annotation, x, y, pageMatrix, zoom, rotation, { selectionModel, originalTestSelection }) {
    if (annotation instanceof Annotations.RectangleAnnotation) {
      return originalTestSelection(annotation, x, y, pageMatrix, zoom, rotation);;
    }
    return Annotations.SelectionAlgorithm.boundingRectTest(annotation, x, y, zoom);
  }
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

[SelectionModel.setCustomHandlers](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.setCustomHandlers) [SelectionModelCustomHandlers](https://sdk.apryse.com/api/web/Core.Annotations.SelectionModel.html#.SelectionModelCustomHandlers)

An object containing the custom handler functions that will override the existing behavior must be provided with the class being targeted.

## Next steps

Read the full tutorial on how to [create a custom triangle annotation](/web/annotation/customize/custom-annotations.md) and see how much further you can customize with WebViewer!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/customize/custom-selection-models.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.