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.

JavaScript (SDK v8.0+)

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

SelectionModel.testSelection SelectionModel.getControlHandles BoxControlHandle

JavaScript (SDK v6.0+)

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

SelectionModel.testSelection SelectionModel.getControlHandles BoxControlHandle

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

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

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

JavaScript

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

JavaScript (SDK v8.0+)

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

SelectionModel.testSelection Math.Rect Annotation.getRect Rect.intersects

JavaScript (SDK v6.0+)

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

SelectionModel.testSelection Math.Rect Annotation.getRect Rect.intersects

Defining how it renders

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

JavaScript

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

SelectionModel.drawSelectionOutline SelectionModel.defaultNoPermissionSelectionOutlineColor SelectionModel.defaultSelectionOutlineColor SelectionModel.selectionOutlineThickness SelectionModel.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 API.

JavaScript

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

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