Class SelectHighlight

src/editor/interactions/select-highlight.ts:21–140

};

export class SelectHighlight extends Interaction implements IInteraction {
  name = 'select-highlight';

  private highlightMasks: SVGRectElement[] = [];
  private combinedBoundsMask?: SVGRectElement;

  init(options: InteractionInitOptions) {
    super.init(options);
    const { emitter } = options;
    emitter.on('selection:change', this.handleSelectionChanged);
    emitter.on('selection:geometrychange', this.handleGeometryChanged);
    emitter.on('history:change', this.handleHistoryChanged);
    this.highlightSelection(this.interaction.getSelection());
  }

  destroy() {
    this.clearMasks();
    const { emitter } = this;
    emitter.off('selection:change', this.handleSelectionChanged);
    emitter.off('selection:geometrychange', this.handleGeometryChanged);
    emitter.off('history:change', this.handleHistoryChanged);
  }

  private handleSelectionChanged = ({ next }: SelectionChangePayload) => {
    this.highlightSelection(next);
  };

  private handleGeometryChanged = ({
    target,
  }: SelectionGeometryChangePayload) => {
    if (this.interaction.isSelected(target)) {
      this.highlightSelection(this.interaction.getSelection());
    }
  };

  private handleHistoryChanged = () => {
    this.highlightSelection(this.interaction.getSelection());
  };

  private highlightSelection(selection: Selection) {
    if (selection.length === 1 && isEditableText(selection[0])) {
      this.clearMasks();
      return;
    }

    this.drawElementMasks(selection);
    this.drawCombinedBoundsMask(selection);
  }

  private drawElementMasks(selection: Selection) {
    let index = 0;
    for (; index < selection.length; index++) {
      const { x, y, width, height } = getElementViewportBounds(
        this.editor.getDocument(),
        selection[index],
      );
      const attrs = {
        x,