Section:

Custom Selection Models in WebViewer

Along with custom annotations, 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 class that the annotation class can provide for initialization and rendering.

1const { Core } = instance;
2const { Annotations } = Core;
3
4class CustomRectangleSelectionModel extends Annotations.SelectionModel {
5  constructor(annotation, canModify) {
6    super(annotation, canModify);
7    if (canModify) {
8      const controlHandles = this.getControlHandles();
9      // pass the vertex index to each control handle
10      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 16));
11      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 16));
12      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 16));
13      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 64));
14      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 2, 64));
15      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 64));
16      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 1, 32));
17      controlHandles.push(new Annotations.BoxControlHandle(10, 10, 4, 32));
18    }
19  }
20}

Related Links

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

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.

JavaScript

1class MyRectangleAnnotation extends Annotations.RectangleAnnotation {
2  constructor(initializer) {
3    super(initializer);
4    this.selectionModel = CustomRectangleSelectionModel;
5  }
6}

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

JavaScript

1Annotations.RectangleAnnotation.prototype.selectionModel = CustomRectangleSelectionModel;

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 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.

1const { Core } = instance;
2const { Annotations, Math } = Core;
3
4class TriangleSelectionModel extends Annotations.SelectionModel {
5  ...
6  testSelection(annotation, x, y, pageMatrix) {
7    const cursor = new Math.Rect(x, y, x, y);
8    const rect = annotation.getRect();
9    return cursor.intersects(rect);
10  }
11}

Related Links

Defining how it renders

Similar to how annotations render with a draw function, selection models render with drawSelectionOutline.

JavaScript

1class CustomRectangleSelectionModel extends Annotations.SelectionModel {
2  ...
3  // Changes how we draw the selection outline
4  drawSelectionOutline(ctx, annotation, zoom) {
5    ctx.lineWidth = 2;
6
7    // Changes the selection outline color if the user doesn't have permission to modify this annotation
8    if (this.canModify()) {
9      // Change the selection outline color if the annotation is less than a certain size
10      if (annotation.Width < 500) {
11        ctx.strokeStyle = Annotations.SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
12      } else {
13        ctx.strokeStyle = Annotations.SelectionModel.defaultSelectionOutlineColor.toString();
14      }
15    } else {
16      ctx.strokeStyle = Annotations.SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
17    }
18
19    ctx.beginPath();
20    ctx.moveTo(annotation.X, annotation.Y);
21    ctx.lineTo(annotation.X + annotation.Width, annotation.Y);
22    ctx.lineTo(annotation.X + annotation.Width, annotation.Y + annotation.Height);
23    ctx.lineTo(annotation.X, annotation.Y + annotation.Height);
24    ctx.closePath();
25    ctx.stroke();
26
27    // Adjust for zoom
28    if (typeof zoom !== 'undefined') {
29      ctx.lineWidth = Annotations.SelectionModel.selectionOutlineThickness / zoom;
30    } else {
31      ctx.lineWidth = Annotations.SelectionModel.selectionOutlineThickness;
32    }
33
34    // draw a dashed line around the triangle
35    const dashUnit = Annotations.SelectionModel.selectionOutlineDashSize / zoom;
36    const sequence = [dashUnit, dashUnit];
37    ctx.setLineDash(sequence);
38    ctx.strokeStyle = 'rgb(0, 0, 255)';
39    ctx.stroke();
40  }
41}

Related Links

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 API.

JavaScript (v8.0+)

1const { Annotations } = instance.Core;
2const { SelectionModel, BoxSelectionModel } = Annotations;
3
4SelectionModel.setCustomHandlers(BoxSelectionModel, {
5  // Draws a diagonal dashed along across the middle of the selected annotation
6  drawSelectionOutline(ctx, annotation, zoom, pageMatrix, { selectionModel, originalDrawSelectionOutline }) {
7    if (!(annotation instanceof Annotations.RectangleAnnotation)) {
8      originalDrawSelectionOutline(ctx, annotation, zoom, pageMatrix);
9      return;
10    }
11    if (typeof zoom !== 'undefined') {
12      ctx.lineWidth = SelectionModel.selectionOutlineThickness / zoom;
13    } else {
14      ctx.lineWidth = SelectionModel.selectionOutlineThickness;
15    }
16    if (selectionModel.canModify()) {
17      ctx.strokeStyle = SelectionModel.defaultSelectionOutlineColor.toString();
18    } else {
19      ctx.strokeStyle = SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
20    }
21    ctx.beginPath();
22    ctx.moveTo(annotation.X, annotation.Y);
23    ctx.lineTo(annotation.X + annotation.Width, annotation.Y + annotation.Height);
24    ctx.closePath();
25    ctx.stroke();
26    const dashUnit = SelectionModel.selectionOutlineDashSize / zoom;
27    const sequence = [dashUnit, dashUnit];
28    ctx.setLineDash(sequence);
29    ctx.strokeStyle = 'rgb(255, 255, 255)';
30    ctx.stroke();
31  },
32  // Get the dimension that is extended by 8 both horizontally and vertically
33  getDimensions(annotation, { selectionModel, originalGetDimensions }) {
34    if (!(annotation instanceof Annotations.RectangleAnnotation)) {
35      return originalGetDimensions(annotation);
36    }
37    const x = annotation.X - 4;
38    const y = annotation.Y - 4;
39    const width = annotation.Width + 2 * 4;
40    const height = annotation.Height + 2 * 4;
41    return new Annotations.Rect(x, y, x + width, y + height);
42  },
43  testSelection(annotation, x, y, pageMatrix, zoom, rotation, { selectionModel, originalTestSelection }) {
44    if (annotation instanceof Annotations.RectangleAnnotation) {
45      return originalTestSelection(annotation, x, y, pageMatrix, zoom, rotation);;
46    }
47    return Annotations.SelectionAlgorithm.boundingRectTest(annotation, x, y, zoom);
48  }
49});

Related Links

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 and see how much further you can customize with WebViewer!

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales