blockly/core/renderers/geras/highlighter.ts

/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import * as goog from '../../../closure/goog/goog.js';
goog.declareModuleId('Blockly.geras.Highlighter');

import * as svgPaths from '../../utils/svg_paths.js';
import type {ConstantProvider} from '../common/constants.js';
import type {BottomRow} from '../measurables/bottom_row.js';
import type {Row} from '../measurables/row.js';
import {SpacerRow} from '../measurables/spacer_row.js';
import type {TopRow} from '../measurables/top_row.js';
import {Types} from '../measurables/types.js';

import type {HighlightConstantProvider, InsideCorner, JaggedTeeth, Notch, OutsideCorner, PuzzleTab, StartHat} from './highlight_constants.js';
import type {RenderInfo} from './info.js';
import type {InlineInput} from './measurables/inline_input.js';


/**
 * An object that adds highlights to a block based on the given rendering
 * information.
 *
 * Highlighting is interesting because the highlights do not fully enclose the
 * block.  Instead, they are positioned based on a light source in the top left.
 * This means that rendering highlights requires exact information about the
 * position of each part of the block.  The resulting paths are not continuous
 * or closed paths.  The highlights for tabs and notches are loosely based on
 * tab and notch shapes, but are not exactly the same.
 */
export class Highlighter {
  info_: RenderInfo;
  steps_ = '';
  inlineSteps_ = '';
  RTL_: boolean;
  constants_: ConstantProvider;
  highlightConstants_: HighlightConstantProvider;
  private readonly highlightOffset_: number;
  outsideCornerPaths_: OutsideCorner;
  insideCornerPaths_: InsideCorner;
  puzzleTabPaths_: PuzzleTab;
  notchPaths_: Notch;
  startPaths_: StartHat;
  jaggedTeethPaths_: JaggedTeeth;

  /**
   * @param info An object containing all information needed to render this
   *     block.
   */
  constructor(info: RenderInfo) {
    this.info_ = info;

    this.RTL_ = this.info_.RTL;

    const renderer = (info.getRenderer());

    /** The renderer's constant provider. */
    this.constants_ = renderer.getConstants();

    this.highlightConstants_ = renderer.getHighlightConstants();
    /** The offset between the block's main path and highlight path. */
    this.highlightOffset_ = this.highlightConstants_.OFFSET;

    this.outsideCornerPaths_ = this.highlightConstants_.OUTSIDE_CORNER;
    this.insideCornerPaths_ = this.highlightConstants_.INSIDE_CORNER;
    this.puzzleTabPaths_ = this.highlightConstants_.PUZZLE_TAB;
    this.notchPaths_ = this.highlightConstants_.NOTCH;
    this.startPaths_ = this.highlightConstants_.START_HAT;
    this.jaggedTeethPaths_ = this.highlightConstants_.JAGGED_TEETH;
  }

  /**
   * Get the steps for the highlight path.
   *
   * @returns The steps for the highlight path.
   */
  getPath(): string {
    return this.steps_ + '\n' + this.inlineSteps_;
  }

  /**
   * Add a highlight to the top corner of a block.
   *
   * @param row The top row of the block.
   */
  drawTopCorner(row: TopRow) {
    this.steps_ += svgPaths.moveBy(row.xPos, this.info_.startY);
    for (let i = 0, elem; elem = row.elements[i]; i++) {
      if (Types.isLeftSquareCorner(elem)) {
        this.steps_ += this.highlightConstants_.START_POINT;
      } else if (Types.isLeftRoundedCorner(elem)) {
        this.steps_ += this.outsideCornerPaths_.topLeft(this.RTL_);
      } else if (Types.isPreviousConnection(elem)) {
        this.steps_ += this.notchPaths_.pathLeft;
      } else if (Types.isHat(elem)) {
        this.steps_ += this.startPaths_.path(this.RTL_);
      } else if (Types.isSpacer(elem) && elem.width !== 0) {
        // The end point of the spacer needs to be offset by the highlight
        // amount. So instead of using the spacer's width for a relative
        // horizontal, use its width and position for an absolute horizontal
        // move.
        this.steps_ += svgPaths.lineOnAxis(
            'H', elem.xPos + elem.width - this.highlightOffset_);
      }
    }

    const right = row.xPos + row.width - this.highlightOffset_;
    this.steps_ += svgPaths.lineOnAxis('H', right);
  }

  /**
   * Add a highlight on a jagged edge for a collapsed block.
   *
   * @param row  The row to highlight.
   */
  drawJaggedEdge_(row: Row) {
    if (this.info_.RTL) {
      const remainder =
          row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;
      this.steps_ +=
          this.jaggedTeethPaths_.pathLeft + svgPaths.lineOnAxis('v', remainder);
    }
  }

  /**
   * Add a highlight on a value input.
   *
   * @param row The row the input belongs to.
   */
  drawValueInput(row: Row) {
    const input = row.getLastInput() as InlineInput;
    if (this.RTL_) {
      const belowTabHeight = row.height - input.connectionHeight;

      this.steps_ +=
          svgPaths.moveTo(
              input.xPos + input.width - this.highlightOffset_, row.yPos) +
          this.puzzleTabPaths_.pathDown(this.RTL_) +
          svgPaths.lineOnAxis('v', belowTabHeight);
    } else {
      this.steps_ += svgPaths.moveTo(input.xPos + input.width, row.yPos) +
          this.puzzleTabPaths_.pathDown(this.RTL_);
    }
  }

  /**
   * Add a highlight on a statement input.
   *
   * @param row The row to highlight.
   */
  drawStatementInput(row: Row) {
    const input = row.getLastInput();
    if (!input) return;
    if (this.RTL_) {
      const innerHeight = row.height - 2 * this.insideCornerPaths_.height;
      this.steps_ += svgPaths.moveTo(input.xPos, row.yPos) +
          this.insideCornerPaths_.pathTop(this.RTL_) +
          svgPaths.lineOnAxis('v', innerHeight) +
          this.insideCornerPaths_.pathBottom(this.RTL_) +
          svgPaths.lineTo(
              row.width - input.xPos - this.insideCornerPaths_.width, 0);
    } else {
      this.steps_ += svgPaths.moveTo(input.xPos, row.yPos + row.height) +
          this.insideCornerPaths_.pathBottom(this.RTL_) +
          svgPaths.lineTo(
              row.width - input.xPos - this.insideCornerPaths_.width, 0);
    }
  }

  /**
   * Add a highlight on the right side of a row.
   *
   * @param row The row to highlight.
   */
  drawRightSideRow(row: Row) {
    const rightEdge = row.xPos + row.width - this.highlightOffset_;
    if (row instanceof SpacerRow && row.followsStatement) {
      this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
    }
    if (this.RTL_) {
      this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
      if (row.height > this.highlightOffset_) {
        this.steps_ += svgPaths.lineOnAxis(
            'V', row.yPos + row.height - this.highlightOffset_);
      }
    }
  }

  /**
   * Add a highlight to the bottom row.
   *
   * @param row The row to highlight.
   */
  drawBottomRow(row: BottomRow) {
    // Highlight the vertical edge of the bottom row on the input side.
    // Highlighting is always from the top left, both in LTR and RTL.
    if (this.RTL_) {
      this.steps_ +=
          svgPaths.lineOnAxis('V', row.baseline - this.highlightOffset_);
    } else {
      const cornerElem = this.info_.bottomRow.elements[0];
      if (Types.isLeftSquareCorner(cornerElem)) {
        this.steps_ += svgPaths.moveTo(
            row.xPos + this.highlightOffset_,
            row.baseline - this.highlightOffset_);
      } else if (Types.isLeftRoundedCorner(cornerElem)) {
        this.steps_ += svgPaths.moveTo(row.xPos, row.baseline);
        this.steps_ += this.outsideCornerPaths_.bottomLeft();
      }
    }
  }

  /**
   * Draw the highlight on the left side of the block.
   */
  drawLeft() {
    const outputConnection = this.info_.outputConnection;
    if (outputConnection) {
      const tabBottom =
          outputConnection.connectionOffsetY + outputConnection.height;
      // Draw a line up to the bottom of the tab.
      if (this.RTL_) {
        this.steps_ += svgPaths.moveTo(this.info_.startX, tabBottom);
      } else {
        const left = this.info_.startX + this.highlightOffset_;
        const bottom = this.info_.bottomRow.baseline - this.highlightOffset_;
        this.steps_ += svgPaths.moveTo(left, bottom);
        this.steps_ += svgPaths.lineOnAxis('V', tabBottom);
      }
      this.steps_ += this.puzzleTabPaths_.pathUp(this.RTL_);
    }

    if (!this.RTL_) {
      const topRow = this.info_.topRow;
      if (Types.isLeftRoundedCorner(topRow.elements[0])) {
        this.steps_ +=
            svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height);
      } else {
        this.steps_ +=
            svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_);
      }
    }
  }

  /**
   * Add a highlight to an inline input.
   *
   * @param input The input to highlight.
   */
  drawInlineInput(input: InlineInput) {
    const offset = this.highlightOffset_;

    // Relative to the block's left.
    const connectionRight = input.xPos + input.connectionWidth;
    const yPos = input.centerline - input.height / 2;
    const bottomHighlightWidth = input.width - input.connectionWidth;
    const startY = yPos + offset;

    if (this.RTL_) {
      const aboveTabHeight = input.connectionOffsetY - offset;
      const belowTabHeight = input.height -
          (input.connectionOffsetY + input.connectionHeight) + offset;

      const startX = connectionRight - offset;

      this.inlineSteps_ +=
          svgPaths.moveTo(startX, startY) +           // Right edge above tab.
          svgPaths.lineOnAxis('v', aboveTabHeight) +  // Back of tab.
          this.puzzleTabPaths_.pathDown(this.RTL_) +  // Right edge below tab.
          svgPaths.lineOnAxis('v', belowTabHeight) +  // Bottom.
          svgPaths.lineOnAxis('h', bottomHighlightWidth);
    } else {
      this.inlineSteps_ +=  // Go to top right corner.
          svgPaths.moveTo(
              input.xPos + input.width + offset,
              startY) +  // Highlight right edge, bottom.
          svgPaths.lineOnAxis('v', input.height) +
          svgPaths.lineOnAxis(
              'h', -bottomHighlightWidth) +  // Go to top of tab.
          svgPaths.moveTo(
              connectionRight,
              yPos + input.connectionOffsetY) +  // Short highlight glint at
          // bottom of tab.
          this.puzzleTabPaths_.pathDown(this.RTL_);
    }
  }
}