How to create custom SelectionModel similar to the default 8 control handles

Technical Support
4

Hi there,

Sorry for the delay again. Very busy this time of month!

Here is some code that creates a custom selection model with only one control point on the bottom right. Admittedly, our APIs for this kind of thing aren’t the best so this code is a bit gross, but we will be working on improving these APIs in the future.

  const { Annotations, annotManager } = instance;

  const CustomFreeTextControlHandle = function (annotation) {
    this.annotation = annotation;
  };

  CustomFreeTextControlHandle.prototype = new Annotations.ControlHandle();

  CustomFreeTextControlHandle.prototype.getDimensions = function (annotation, _, zoom) {
    let x = annotation.X + annotation.Width;
    let y = annotation.Y + annotation.Height;

    // Use the default width and height
    const width = Annotations.ControlHandle.handleWidth / zoom;
    const height = Annotations.ControlHandle.handleHeight / zoom;
    // adjust for the control handle's own width and height
    x -= width * 0.5;
    y -= height * 0.5;
    return new Annotations.Rect(x, y, x + width, y + height);
  };

  CustomFreeTextControlHandle.prototype.move = function (annotation, deltaX, deltaY, fromPoint, toPoint) {
    annotation.Width += deltaX
    annotation.Height += deltaY

    const x1 = annotation.X;
    const x2 = annotation.X + annotation.Width

    const y1 = annotation.Y;
    const y2 = annotation.Y + annotation.Height;

    const rect = new Annotations.Rect(x1, y1, x2, y2);
    annotation.setRect(rect)
    return true;
  };

  const CustomFreeTextSelectionModel = function (annotation, canModify) {
    Annotations.SelectionModel.call(this, annotation, canModify);
    if (canModify) {
      const controlHandles = this.getControlHandles();
      controlHandles.push(new CustomFreeTextControlHandle(annotation));
    }
  };
  CustomFreeTextSelectionModel.prototype = new Annotations.SelectionModel();

  Annotations.FreeTextAnnotation.prototype.selectionModel = CustomFreeTextSelectionModel;

  annotManager.on('annotationChanged', (annots, action)  => {
    if (action === 'add') {
      const freeText = annots.filter(annot => annot instanceof Annotations.FreeTextAnnotation && annot.getIntent() !== Annotations.FreeTextAnnotation.Intent['FreeTextCallout'])
      for (const annot of freeText) {
        annot.selectionModel = CustomFreeTextSelectionModel
      }
    }
  })

Let me know if you have any questions.

Thanks!
Logan