/** * @license * Copyright 2019 Google LLC * SPDX-License-Identifier: Apache-2.0 */ /** * @fileoverview Methods for adding highlights on block, for rendering in * compatibility mode. * @author fenichel@google.com (Rachel Fenichel) */ 'use strict'; goog.provide('Blockly.geras.Highlighter'); goog.require('Blockly.blockRendering.Types'); goog.require('Blockly.utils.svgPaths'); goog.requireType('Blockly.blockRendering.ConstantProvider'); goog.requireType('Blockly.geras.HighlightConstantProvider'); goog.requireType('Blockly.geras.Renderer'); goog.requireType('Blockly.geras.RenderInfo'); /** * 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. * * @param {!Blockly.geras.RenderInfo} info An object containing all * information needed to render this block. * @package * @constructor */ Blockly.geras.Highlighter = function(info) { this.info_ = info; this.steps_ = ''; this.inlineSteps_ = ''; this.RTL_ = this.info_.RTL; var renderer = /** @type {!Blockly.geras.Renderer} */ (info.getRenderer()); /** * The renderer's constant provider. * @type {!Blockly.blockRendering.ConstantProvider} */ this.constants_ = renderer.getConstants(); /** * @type {!Blockly.geras.HighlightConstantProvider} */ this.highlightConstants_ = renderer.getHighlightConstants(); /** * The offset between the block's main path and highlight path. * @type {number} * @private */ 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. * @return {string} The steps for the highlight path. * @package */ Blockly.geras.Highlighter.prototype.getPath = function() { return this.steps_ + '\n' + this.inlineSteps_; }; Blockly.geras.Highlighter.prototype.drawTopCorner = function(row) { this.steps_ += Blockly.utils.svgPaths.moveBy(row.xPos, this.info_.startY); for (var i = 0, elem; (elem = row.elements[i]); i++) { if (Blockly.blockRendering.Types.isLeftSquareCorner(elem)) { this.steps_ += this.highlightConstants_.START_POINT; } else if (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) { this.steps_ += this.outsideCornerPaths_.topLeft(this.RTL_); } else if (Blockly.blockRendering.Types.isPreviousConnection(elem)) { this.steps_ += this.notchPaths_.pathLeft; } else if (Blockly.blockRendering.Types.isHat(elem)) { this.steps_ += this.startPaths_.path(this.RTL_); } else if (Blockly.blockRendering.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_ += Blockly.utils.svgPaths.lineOnAxis('H', elem.xPos + elem.width - this.highlightOffset_); } } var right = row.xPos + row.width - this.highlightOffset_; this.steps_ += Blockly.utils.svgPaths.lineOnAxis('H', right); }; Blockly.geras.Highlighter.prototype.drawJaggedEdge_ = function(row) { if (this.info_.RTL) { var remainder = row.height - this.jaggedTeethPaths_.height - this.highlightOffset_; this.steps_ += this.jaggedTeethPaths_.pathLeft + Blockly.utils.svgPaths.lineOnAxis('v', remainder); } }; Blockly.geras.Highlighter.prototype.drawValueInput = function(row) { var input = row.getLastInput(); if (this.RTL_) { var belowTabHeight = row.height - input.connectionHeight; this.steps_ += Blockly.utils.svgPaths.moveTo( input.xPos + input.width - this.highlightOffset_, row.yPos) + this.puzzleTabPaths_.pathDown(this.RTL_) + Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight); } else { this.steps_ += Blockly.utils.svgPaths.moveTo(input.xPos + input.width, row.yPos) + this.puzzleTabPaths_.pathDown(this.RTL_); } }; Blockly.geras.Highlighter.prototype.drawStatementInput = function(row) { var input = row.getLastInput(); if (this.RTL_) { var innerHeight = row.height - (2 * this.insideCornerPaths_.height); this.steps_ += Blockly.utils.svgPaths.moveTo(input.xPos, row.yPos) + this.insideCornerPaths_.pathTop(this.RTL_) + Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) + this.insideCornerPaths_.pathBottom(this.RTL_) + Blockly.utils.svgPaths.lineTo( row.width - input.xPos - this.insideCornerPaths_.width, 0); } else { this.steps_ += Blockly.utils.svgPaths.moveTo(input.xPos, row.yPos + row.height) + this.insideCornerPaths_.pathBottom(this.RTL_) + Blockly.utils.svgPaths.lineTo( row.width - input.xPos - this.insideCornerPaths_.width, 0); } }; Blockly.geras.Highlighter.prototype.drawRightSideRow = function(row) { var rightEdge = row.xPos + row.width - this.highlightOffset_; if (row.followsStatement) { this.steps_ += Blockly.utils.svgPaths.lineOnAxis('H', rightEdge); } if (this.RTL_) { this.steps_ += Blockly.utils.svgPaths.lineOnAxis('H', rightEdge); if (row.height > this.highlightOffset_) { this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height - this.highlightOffset_); } } }; Blockly.geras.Highlighter.prototype.drawBottomRow = function(row) { // 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_ += Blockly.utils.svgPaths.lineOnAxis('V', row.baseline - this.highlightOffset_); } else { var cornerElem = this.info_.bottomRow.elements[0]; if (Blockly.blockRendering.Types.isLeftSquareCorner(cornerElem)) { this.steps_ += Blockly.utils.svgPaths.moveTo( row.xPos + this.highlightOffset_, row.baseline - this.highlightOffset_); } else if (Blockly.blockRendering.Types.isLeftRoundedCorner(cornerElem)) { this.steps_ += Blockly.utils.svgPaths.moveTo(row.xPos, row.baseline); this.steps_ += this.outsideCornerPaths_.bottomLeft(); } } }; Blockly.geras.Highlighter.prototype.drawLeft = function() { var outputConnection = this.info_.outputConnection; if (outputConnection) { var tabBottom = outputConnection.connectionOffsetY + outputConnection.height; // Draw a line up to the bottom of the tab. if (this.RTL_) { this.steps_ += Blockly.utils.svgPaths.moveTo(this.info_.startX, tabBottom); } else { var left = this.info_.startX + this.highlightOffset_; var bottom = this.info_.bottomRow.baseline - this.highlightOffset_; this.steps_ += Blockly.utils.svgPaths.moveTo(left, bottom); this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V', tabBottom); } this.steps_ += this.puzzleTabPaths_.pathUp(this.RTL_); } if (!this.RTL_) { var topRow = this.info_.topRow; if (Blockly.blockRendering.Types.isLeftRoundedCorner(topRow.elements[0])) { this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height); } else { this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_); } } }; Blockly.geras.Highlighter.prototype.drawInlineInput = function(input) { var offset = this.highlightOffset_; // Relative to the block's left. var connectionRight = input.xPos + input.connectionWidth; var yPos = input.centerline - input.height / 2; var bottomHighlightWidth = input.width - input.connectionWidth; var startY = yPos + offset; if (this.RTL_) { var aboveTabHeight = input.connectionOffsetY - offset; var belowTabHeight = input.height - (input.connectionOffsetY + input.connectionHeight) + offset; var startX = connectionRight - offset; this.inlineSteps_ += Blockly.utils.svgPaths.moveTo(startX, startY) + // Right edge above tab. Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) + // Back of tab. this.puzzleTabPaths_.pathDown(this.RTL_) + // Right edge below tab. Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight) + // Bottom. Blockly.utils.svgPaths.lineOnAxis('h', bottomHighlightWidth); } else { this.inlineSteps_ += // Go to top right corner. Blockly.utils.svgPaths.moveTo(input.xPos + input.width + offset, startY) + // Highlight right edge, bottom. Blockly.utils.svgPaths.lineOnAxis('v', input.height) + Blockly.utils.svgPaths.lineOnAxis('h', -bottomHighlightWidth) + // Go to top of tab. Blockly.utils.svgPaths.moveTo(connectionRight, yPos + input.connectionOffsetY) + // Short highlight glint at bottom of tab. this.puzzleTabPaths_.pathDown(this.RTL_); } };