blockly/core/renderers/zelos/drawer.ts

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

/**
 * @fileoverview Zelos renderer.
 */

/**
 * Zelos renderer.
 * @class
 */
import * as goog from '../../../closure/goog/goog.js';
goog.declareModuleId('Blockly.zelos.Drawer');

import type {BlockSvg} from '../../block_svg.js';
import * as svgPaths from '../../utils/svg_paths.js';
import type {BaseShape, DynamicShape, Notch} from '../common/constants.js';
import * as debug from '../common/debug.js';
import {Drawer as BaseDrawer} from '../common/drawer.js';
import type {InlineInput} from '../measurables/inline_input.js';
import type {Row} from '../measurables/row.js';
import type {SpacerRow} from '../measurables/spacer_row.js';
import {Types} from '../measurables/types.js';

import type {InsideCorners} from './constants.js';
import type {RenderInfo} from './info.js';
import type {StatementInput} from './measurables/inputs.js';
import type {PathObject} from './path_object.js';


/**
 * An object that draws a block based on the given rendering information.
 * @alias Blockly.zelos.Drawer
 */
export class Drawer extends BaseDrawer {
  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
  override info_!: RenderInfo;

  /**
   * @param block The block to render.
   * @param info An object containing all information needed to render this
   *     block.
   * @internal
   */
  constructor(block: BlockSvg, info: RenderInfo) {
    // AnyDuringMigration because:  Argument of type
    // 'import("/google/src/cloud/adodson/blockly-ts/../../renderers/zelos/info").RenderInfo'
    // is not assignable to parameter of type
    // 'import("/google/src/cloud/adodson/bloc...
    super(block, info as AnyDuringMigration);
  }

  override draw() {
    const pathObject = this.block_.pathObject as PathObject;
    pathObject.beginDrawing();
    this.hideHiddenIcons_();
    this.drawOutline_();
    this.drawInternals_();

    pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);
    if (this.info_.RTL) {
      pathObject.flipRTL();
    }
    if (debug.isDebuggerEnabled()) {
      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
    }
    this.recordSizeOnBlock_();
    if (this.info_.outputConnection) {
      // Store the output connection shape type for parent blocks to use during
      // rendering.
      // AnyDuringMigration because:  Type 'number' is not assignable to type
      // 'null'.
      pathObject.outputShapeType =
          this.info_.outputConnection.shape.type as AnyDuringMigration;
    }
    pathObject.endDrawing();
  }

  override drawOutline_() {
    if (this.info_.outputConnection &&
        this.info_.outputConnection.isDynamicShape &&
        !this.info_.hasStatementInput &&
        !this.info_.bottomRow.hasNextConnection) {
      this.drawFlatTop_();
      this.drawRightDynamicConnection_();
      this.drawFlatBottom_();
      this.drawLeftDynamicConnection_();
    } else {
      super.drawOutline_();
    }
  }

  override drawLeft_() {
    if (this.info_.outputConnection &&
        this.info_.outputConnection.isDynamicShape) {
      this.drawLeftDynamicConnection_();
    } else {
      super.drawLeft_();
    }
  }

  /**
   * Add steps for the right side of a row that does not have value or
   * statement input connections.
   * @param row The row to draw the side of.
   */
  protected override drawRightSideRow_(row: Row) {
    if (row.height <= 0) {
      return;
    }
    if (Types.isSpacer(row)) {
      const spacerRow = row as SpacerRow;
      if (spacerRow.precedesStatement || spacerRow.followsStatement) {
        const cornerHeight =
            (this.constants_.INSIDE_CORNERS as InsideCorners).rightHeight;
        const remainingHeight =
            spacerRow.height - (spacerRow.precedesStatement ? cornerHeight : 0);
        this.outlinePath_ +=
            (spacerRow.followsStatement ?
                 (this.constants_.INSIDE_CORNERS as InsideCorners)
                     .pathBottomRight :
                 '') +
            (remainingHeight > 0 ?
                 svgPaths.lineOnAxis('V', spacerRow.yPos + remainingHeight) :
                 '') +
            (spacerRow.precedesStatement ?
                 (this.constants_.INSIDE_CORNERS as InsideCorners)
                     .pathTopRight :
                 '');
        return;
      }
    }
    this.outlinePath_ += svgPaths.lineOnAxis('V', row.yPos + row.height);
  }

  /**
   * Add steps to draw the right side of an output with a dynamic connection.
   */
  protected drawRightDynamicConnection_() {
    this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
                             .pathRightDown(this.info_.outputConnection.height);
  }

  /**
   * Add steps to draw the left side of an output with a dynamic connection.
   */
  protected drawLeftDynamicConnection_() {
    this.positionOutputConnection_();

    this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
                             .pathUp(this.info_.outputConnection.height);

    // Close off the path.  This draws a vertical line up to the start of the
    // block's path, which may be either a rounded or a sharp corner.
    this.outlinePath_ += 'z';
  }

  /** Add steps to draw a flat top row. */
  protected drawFlatTop_() {
    const topRow = this.info_.topRow;
    this.positionPreviousConnection_();

    this.outlinePath_ += svgPaths.moveBy(topRow.xPos, this.info_.startY);

    this.outlinePath_ += svgPaths.lineOnAxis('h', topRow.width);
  }

  /** Add steps to draw a flat bottom row. */
  protected drawFlatBottom_() {
    const bottomRow = this.info_.bottomRow;
    this.positionNextConnection_();

    this.outlinePath_ += svgPaths.lineOnAxis('V', bottomRow.baseline);

    this.outlinePath_ += svgPaths.lineOnAxis('h', -bottomRow.width);
  }

  override drawInlineInput_(input: InlineInput) {
    this.positionInlineInputConnection_(input);

    const inputName = input.input.name;
    if (input.connectedBlock || this.info_.isInsertionMarker) {
      return;
    }

    const width = input.width - input.connectionWidth * 2;
    const height = input.height;
    const yPos = input.centerline - height / 2;

    const connectionRight = input.xPos + input.connectionWidth;

    const outlinePath = svgPaths.moveTo(connectionRight, yPos) +
        svgPaths.lineOnAxis('h', width) +
        (input.shape as DynamicShape).pathRightDown(input.height) +
        svgPaths.lineOnAxis('h', -width) +
        (input.shape as DynamicShape).pathUp(input.height) + 'z';
    const pathObject = this.block_.pathObject as PathObject;
    pathObject.setOutlinePath(inputName, outlinePath);
  }

  override drawStatementInput_(row: Row) {
    const input = row.getLastInput() as StatementInput;
    // Where to start drawing the notch, which is on the right side in LTR.
    const x = input.xPos + input.notchOffset + (input.shape as BaseShape).width;

    const innerTopLeftCorner = (input.shape as Notch).pathRight +
        svgPaths.lineOnAxis(
            'h', -(input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
        this.constants_.INSIDE_CORNERS.pathTop;

    const innerHeight = row.height - 2 * this.constants_.INSIDE_CORNERS.height;

    const innerBottomLeftCorner = this.constants_.INSIDE_CORNERS.pathBottom +
        svgPaths.lineOnAxis(
            'h', input.notchOffset - this.constants_.INSIDE_CORNERS.width) +
        (input.connectedBottomNextConnection ? '' :
                                               (input.shape as Notch).pathLeft);

    this.outlinePath_ += svgPaths.lineOnAxis('H', x) + innerTopLeftCorner +
        svgPaths.lineOnAxis('v', innerHeight) + innerBottomLeftCorner +
        svgPaths.lineOnAxis('H', row.xPos + row.width);

    this.positionStatementInputConnection_(row);
  }
}