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.

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.

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));
    }
  }
}

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.

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

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

Annotations.RectangleAnnotation.prototype.selectionModel = CustomRectangleSelectionModel;

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.

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);
  }
}

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

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();
  }
}

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.

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);
  }
});

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

Read the full tutorial on how to create a custom triangle annotation and see how much further you can customize with WebViewer!