Section:

Custom selection model

The annotation selection handles and outlines are drawn with HTML Canvas APIs and by customizing the ControlHandle and SelectionModel classes, and utilizing Canvas APIs, it is possible to create a custom selection model.

Creating the custom selection handles

The selection handles are rendered in the ControlHandle class, and by overriding some of the static properties and the draw method, you can create custom handles. The static properties can be used to change the width, height, and color of the handle. The draw function will give total control draw the selection handles as you like.

1WebViewer(
2  // ...
3).then(function(instance) {
4  const { Annotations } = instance.Core;
5  const { SelectionModel, Color, ControlHandle } = Annotations;
6
7  ControlHandle.outlineColor = new Color(255, 99, 71);
8  ControlHandle.color = new Color(255, 99, 71);
9  // Defines the width of all control handles. Default is 10.
10  ControlHandle.handleWidth = 15;
11  // Defines the height of all control handles. Default is 10.
12  ControlHandle.handleHeight = 15;
13
14  ControlHandle.prototype.draw = function(ctx, annotation, selectionBox, zoom) {
15    if (typeof zoom === 'undefined') {
16      zoom = 1;
17    }
18
19    ctx.strokeStyle = ControlHandle.outlineColor.toString();
20    ctx.fillStyle = ControlHandle.color.toString();
21    ctx.shadowColor = ControlHandle.shadowColor.toString();
22    ctx.shadowBlur = ControlHandle.shadowBlur;
23    ctx.shadowOffsetY  = ControlHandle.shadowOffsetY;
24    ctx.lineWidth = ControlHandle.selectionPointOutlineThickness / zoom;
25
26    const dim = this.getDimensions(annotation, selectionBox, zoom);
27    const x = dim.x1;
28    const y = dim.y1;
29    const width = dim.getWidth();
30    const height = dim.getHeight();
31
32    ctx.beginPath();
33    ctx.rect(x + 10 / 2, y + 10 / 2, 10, 10);
34    ctx.stroke();
35    ctx.fill();
36  };
37});

Related Links

Apryse Docs Image
Apryse Docs Image

Figure 1. On the left side is the default selection handles and on the right side are custom selection hendles.

Creating the custom selection outlines

The selection outlines can be customized with the SelectionModel class. For changing width, height, and color, use static properties as shown in the code sample. The drawSelectionOutline can be overridden to access the canvas context and draw the outlines differently.

1WebViewer(
2  // ...
3).then(function(instance) {
4  const { Annotations } = instance.Core;
5  const { SelectionModel, Color } = Annotations;
6
7  SelectionModel.selectionOutlineThickness = 5;
8  // Defines a padding for selection accuracy. Default is 2.
9  // Increase this value to make selection more forgiving.
10  SelectionModel.selectionOutlineThickness = 5;
11  // Defines the default color for the annotation selection outline.
12  SelectionModel.defaultSelectionOutlineColor = new Color(23, 23, 23);
13  // Defines the default color for the annotation selection outline when the user is not permitted to make modifications.
14  SelectionModel.defaultNoPermissionSelectionOutlineColor = new Color(23, 23, 23);
15  // Defines the dash size for the selection outline. Default is 4;
16  SelectionModel.selectionOutlineDashSize = 8;
17
18  SelectionModel.prototype.drawSelectionOutline = function(ctx, annotation, zoom, pageMatrix) {
19    if (typeof zoom !== 'undefined') {
20      ctx.lineWidth = SelectionModel.selectionOutlineThickness / zoom;
21    } else {
22      ctx.lineWidth = SelectionModel.selectionOutlineThickness;
23    }
24
25    // changes the selection outline color if the user doesn't have permission to modify this annotation
26    if (this.canModify()) {
27      ctx.strokeStyle = SelectionModel.defaultSelectionOutlineColor.toString();
28    } else {
29      ctx.strokeStyle = SelectionModel.defaultNoPermissionSelectionOutlineColor.toString();
30    }
31
32    // modify this part
33    ctx.beginPath();
34    ctx.moveTo(annotation.X, annotation.Y);
35    ctx.lineTo(annotation.X + annotation.Width, annotation.Y + annotation.Height);
36    ctx.closePath();
37    ctx.stroke();
38
39    const dashUnit = SelectionModel.selectionOutlineDashSize / zoom;
40    const sequence = [dashUnit, dashUnit];
41    ctx.setLineDash(sequence);
42    ctx.strokeStyle = 'rgb(255, 255, 255)';
43    ctx.stroke();
44  };
45
46});

Related Links

Apryse Docs Image
Apryse Docs Image

Figure 2. On the left side is the default selection outlines and on the right side are custom selection outlines.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales