Migrate core/renderers/geras/highlighter.js to goog.module syntax (#5304)

* Migrate core/renderers/geras/highlighter.js to ES6 const/let

* Migrate core/renderers/geras/highlighter.js to goog.module

* Migrate core/renderers/geras/highlighter.js to named requires

* clang-format core/renderers/geras/highlighter.js
This commit is contained in:
Aaron Dodson
2021-08-04 12:12:53 -07:00
committed by GitHub
parent eea23e24f6
commit fba87c93c4
2 changed files with 95 additions and 94 deletions

View File

@@ -11,15 +11,19 @@
*/
'use strict';
goog.provide('Blockly.geras.Highlighter');
goog.module('Blockly.geras.Highlighter');
goog.module.declareLegacyNamespace();
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');
/* eslint-disable-next-line no-unused-vars */
const ConstantProvider = goog.requireType('Blockly.blockRendering.ConstantProvider');
/* eslint-disable-next-line no-unused-vars */
const HighlightConstantProvider = goog.requireType('Blockly.geras.HighlightConstantProvider');
/* eslint-disable-next-line no-unused-vars */
const Renderer = goog.requireType('Blockly.geras.Renderer');
/* eslint-disable-next-line no-unused-vars */
const RenderInfo = goog.requireType('Blockly.geras.RenderInfo');
const Types = goog.require('Blockly.blockRendering.Types');
const svgPaths = goog.require('Blockly.utils.svgPaths');
/**
@@ -33,28 +37,28 @@ goog.requireType('Blockly.geras.RenderInfo');
* 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
* @param {!RenderInfo} info An object containing all
* information needed to render this block.
* @package
* @constructor
*/
Blockly.geras.Highlighter = function(info) {
const Highlighter = function(info) {
this.info_ = info;
this.steps_ = '';
this.inlineSteps_ = '';
this.RTL_ = this.info_.RTL;
var renderer = /** @type {!Blockly.geras.Renderer} */ (info.getRenderer());
const renderer = /** @type {!Renderer} */ (info.getRenderer());
/**
* The renderer's constant provider.
* @type {!Blockly.blockRendering.ConstantProvider}
* @type {!ConstantProvider}
*/
this.constants_ = renderer.getConstants();
/**
* @type {!Blockly.geras.HighlightConstantProvider}
* @type {!HighlightConstantProvider}
*/
this.highlightConstants_ = renderer.getHighlightConstants();
/**
@@ -69,8 +73,7 @@ Blockly.geras.Highlighter = function(info) {
this.puzzleTabPaths_ = this.highlightConstants_.PUZZLE_TAB;
this.notchPaths_ = this.highlightConstants_.NOTCH;
this.startPaths_ = this.highlightConstants_.START_HAT;
this.jaggedTeethPaths_ =
this.highlightConstants_.JAGGED_TEETH;
this.jaggedTeethPaths_ = this.highlightConstants_.JAGGED_TEETH;
};
/**
@@ -78,177 +81,175 @@ Blockly.geras.Highlighter = function(info) {
* @return {string} The steps for the highlight path.
* @package
*/
Blockly.geras.Highlighter.prototype.getPath = function() {
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)) {
Highlighter.prototype.drawTopCorner = function(row) {
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 (Blockly.blockRendering.Types.isLeftRoundedCorner(elem)) {
} else if (Types.isLeftRoundedCorner(elem)) {
this.steps_ += this.outsideCornerPaths_.topLeft(this.RTL_);
} else if (Blockly.blockRendering.Types.isPreviousConnection(elem)) {
} else if (Types.isPreviousConnection(elem)) {
this.steps_ += this.notchPaths_.pathLeft;
} else if (Blockly.blockRendering.Types.isHat(elem)) {
} else if (Types.isHat(elem)) {
this.steps_ += this.startPaths_.path(this.RTL_);
} else if (Blockly.blockRendering.Types.isSpacer(elem) && elem.width != 0) {
} 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_ += Blockly.utils.svgPaths.lineOnAxis('H',
elem.xPos + elem.width - this.highlightOffset_);
this.steps_ += 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);
const right = row.xPos + row.width - this.highlightOffset_;
this.steps_ += svgPaths.lineOnAxis('H', right);
};
Blockly.geras.Highlighter.prototype.drawJaggedEdge_ = function(row) {
Highlighter.prototype.drawJaggedEdge_ = function(row) {
if (this.info_.RTL) {
var remainder =
const remainder =
row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;
this.steps_ += this.jaggedTeethPaths_.pathLeft +
Blockly.utils.svgPaths.lineOnAxis('v', remainder);
this.steps_ +=
this.jaggedTeethPaths_.pathLeft + svgPaths.lineOnAxis('v', remainder);
}
};
Blockly.geras.Highlighter.prototype.drawValueInput = function(row) {
var input = row.getLastInput();
Highlighter.prototype.drawValueInput = function(row) {
const input = row.getLastInput();
if (this.RTL_) {
var belowTabHeight = row.height - input.connectionHeight;
const belowTabHeight = row.height - input.connectionHeight;
this.steps_ +=
Blockly.utils.svgPaths.moveTo(
svgPaths.moveTo(
input.xPos + input.width - this.highlightOffset_, row.yPos) +
this.puzzleTabPaths_.pathDown(this.RTL_) +
Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight);
svgPaths.lineOnAxis('v', belowTabHeight);
} else {
this.steps_ +=
Blockly.utils.svgPaths.moveTo(input.xPos + input.width, row.yPos) +
this.steps_ += svgPaths.moveTo(input.xPos + input.width, row.yPos) +
this.puzzleTabPaths_.pathDown(this.RTL_);
}
};
Blockly.geras.Highlighter.prototype.drawStatementInput = function(row) {
var input = row.getLastInput();
Highlighter.prototype.drawStatementInput = function(row) {
const input = row.getLastInput();
if (this.RTL_) {
var innerHeight = row.height - (2 * this.insideCornerPaths_.height);
this.steps_ +=
Blockly.utils.svgPaths.moveTo(input.xPos, row.yPos) +
const innerHeight = row.height - (2 * this.insideCornerPaths_.height);
this.steps_ += svgPaths.moveTo(input.xPos, row.yPos) +
this.insideCornerPaths_.pathTop(this.RTL_) +
Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
svgPaths.lineOnAxis('v', innerHeight) +
this.insideCornerPaths_.pathBottom(this.RTL_) +
Blockly.utils.svgPaths.lineTo(
svgPaths.lineTo(
row.width - input.xPos - this.insideCornerPaths_.width, 0);
} else {
this.steps_ +=
Blockly.utils.svgPaths.moveTo(input.xPos, row.yPos + row.height) +
this.steps_ += svgPaths.moveTo(input.xPos, row.yPos + row.height) +
this.insideCornerPaths_.pathBottom(this.RTL_) +
Blockly.utils.svgPaths.lineTo(
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_;
Highlighter.prototype.drawRightSideRow = function(row) {
const rightEdge = row.xPos + row.width - this.highlightOffset_;
if (row.followsStatement) {
this.steps_ += Blockly.utils.svgPaths.lineOnAxis('H', rightEdge);
this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
}
if (this.RTL_) {
this.steps_ += Blockly.utils.svgPaths.lineOnAxis('H', rightEdge);
this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
if (row.height > this.highlightOffset_) {
this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V',
row.yPos + row.height - this.highlightOffset_);
this.steps_ += svgPaths.lineOnAxis(
'V', row.yPos + row.height - this.highlightOffset_);
}
}
};
Blockly.geras.Highlighter.prototype.drawBottomRow = function(row) {
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_);
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(
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 (Blockly.blockRendering.Types.isLeftRoundedCorner(cornerElem)) {
this.steps_ += Blockly.utils.svgPaths.moveTo(row.xPos, row.baseline);
} else if (Types.isLeftRoundedCorner(cornerElem)) {
this.steps_ += svgPaths.moveTo(row.xPos, row.baseline);
this.steps_ += this.outsideCornerPaths_.bottomLeft();
}
}
};
Blockly.geras.Highlighter.prototype.drawLeft = function() {
var outputConnection = this.info_.outputConnection;
Highlighter.prototype.drawLeft = function() {
const outputConnection = this.info_.outputConnection;
if (outputConnection) {
var tabBottom =
const 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);
this.steps_ += 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);
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_) {
var topRow = this.info_.topRow;
if (Blockly.blockRendering.Types.isLeftRoundedCorner(topRow.elements[0])) {
this.steps_ += Blockly.utils.svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height);
const topRow = this.info_.topRow;
if (Types.isLeftRoundedCorner(topRow.elements[0])) {
this.steps_ += svgPaths.lineOnAxis('V', this.outsideCornerPaths_.height);
} else {
this.steps_ +=
Blockly.utils.svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_);
svgPaths.lineOnAxis('V', topRow.capline + this.highlightOffset_);
}
}
};
Blockly.geras.Highlighter.prototype.drawInlineInput = function(input) {
var offset = this.highlightOffset_;
Highlighter.prototype.drawInlineInput = function(input) {
const 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;
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_) {
var aboveTabHeight = input.connectionOffsetY - offset;
var belowTabHeight = input.height -
const aboveTabHeight = input.connectionOffsetY - offset;
const belowTabHeight = input.height -
(input.connectionOffsetY + input.connectionHeight) + offset;
var startX = connectionRight - offset;
const startX = connectionRight - offset;
this.inlineSteps_ += Blockly.utils.svgPaths.moveTo(startX, startY) +
this.inlineSteps_ += svgPaths.moveTo(startX, startY) +
// Right edge above tab.
Blockly.utils.svgPaths.lineOnAxis('v', aboveTabHeight) +
svgPaths.lineOnAxis('v', aboveTabHeight) +
// Back of tab.
this.puzzleTabPaths_.pathDown(this.RTL_) +
// Right edge below tab.
Blockly.utils.svgPaths.lineOnAxis('v', belowTabHeight) +
svgPaths.lineOnAxis('v', belowTabHeight) +
// Bottom.
Blockly.utils.svgPaths.lineOnAxis('h', bottomHighlightWidth);
svgPaths.lineOnAxis('h', bottomHighlightWidth);
} else {
this.inlineSteps_ +=
// Go to top right corner.
Blockly.utils.svgPaths.moveTo(input.xPos + input.width + offset, startY) +
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) +
svgPaths.lineOnAxis('v', input.height) +
svgPaths.lineOnAxis('h', -bottomHighlightWidth) +
// Go to top of tab.
Blockly.utils.svgPaths.moveTo(connectionRight, yPos + input.connectionOffsetY) +
svgPaths.moveTo(connectionRight, yPos + input.connectionOffsetY) +
// Short highlight glint at bottom of tab.
this.puzzleTabPaths_.pathDown(this.RTL_);
}
};
exports = Highlighter;

View File

@@ -133,7 +133,7 @@ goog.addDependency('../../core/renderers/common/renderer.js', ['Blockly.blockRen
goog.addDependency('../../core/renderers/geras/constants.js', ['Blockly.geras.ConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/renderers/geras/drawer.js', ['Blockly.geras.Drawer'], ['Blockly.blockRendering.Drawer', 'Blockly.geras.Highlighter', 'Blockly.geras.RenderInfo', 'Blockly.utils.object', 'Blockly.utils.svgPaths']);
goog.addDependency('../../core/renderers/geras/highlight_constants.js', ['Blockly.geras.HighlightConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.svgPaths'], {'lang': 'es5'});
goog.addDependency('../../core/renderers/geras/highlighter.js', ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.Types', 'Blockly.utils.svgPaths']);
goog.addDependency('../../core/renderers/geras/highlighter.js', ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.Types', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/renderers/geras/info.js', ['Blockly.geras', 'Blockly.geras.RenderInfo'], ['Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Types', 'Blockly.geras.InlineInput', 'Blockly.geras.StatementInput', 'Blockly.inputTypes', 'Blockly.utils.object']);
goog.addDependency('../../core/renderers/geras/measurables/inputs.js', ['Blockly.geras.InlineInput', 'Blockly.geras.StatementInput'], ['Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.StatementInput', 'Blockly.utils.object']);
goog.addDependency('../../core/renderers/geras/path_object.js', ['Blockly.geras.PathObject'], ['Blockly.Theme', 'Blockly.blockRendering.PathObject', 'Blockly.geras.ConstantProvider', 'Blockly.utils.Svg', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.object']);
@@ -210,7 +210,7 @@ goog.addDependency('../../core/workspace_comment.js', ['Blockly.WorkspaceComment
goog.addDependency('../../core/workspace_comment_svg.js', ['Blockly.WorkspaceCommentSvg'], ['Blockly', 'Blockly.ContextMenu', 'Blockly.Css', 'Blockly.Events', 'Blockly.Events.CommentCreate', 'Blockly.Events.CommentDelete', 'Blockly.Events.CommentMove', 'Blockly.Events.Selected', 'Blockly.IBoundedElement', 'Blockly.IBubble', 'Blockly.ICopyable', 'Blockly.Touch', 'Blockly.WorkspaceComment', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/workspace_drag_surface_svg.js', ['Blockly.WorkspaceDragSurfaceSvg'], ['Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/workspace_dragger.js', ['Blockly.WorkspaceDragger'], ['Blockly.utils.Coordinate'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('../../core/workspace_svg.js', ['Blockly.WorkspaceSvg'], ['Blockly.BlockSvg', 'Blockly.ComponentManager', 'Blockly.ConnectionDB', 'Blockly.ContextMenu', 'Blockly.ContextMenuRegistry', 'Blockly.Events', 'Blockly.Events.BlockCreate', 'Blockly.Events.ThemeChange', 'Blockly.Events.ViewportChange', 'Blockly.Gesture', 'Blockly.Grid', 'Blockly.IASTNodeLocationSvg', 'Blockly.MarkerManager', 'Blockly.MetricsManager', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ThemeManager', 'Blockly.Themes.Classic', 'Blockly.TouchGesture', 'Blockly.Workspace', 'Blockly.WorkspaceAudio', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.Xml', 'Blockly.blockRendering', 'Blockly.browserEvents', 'Blockly.internalConstants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Metrics', 'Blockly.utils.Rect', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es5'});
goog.addDependency('../../core/workspace_svg.js', ['Blockly.WorkspaceSvg'], ['Blockly.BlockSvg', 'Blockly.ComponentManager', 'Blockly.ConnectionDB', 'Blockly.ContextMenu', 'Blockly.ContextMenuRegistry', 'Blockly.Events', 'Blockly.Events.BlockCreate', 'Blockly.Events.ThemeChange', 'Blockly.Events.ViewportChange', 'Blockly.Gesture', 'Blockly.Grid', 'Blockly.IASTNodeLocationSvg', 'Blockly.MarkerManager', 'Blockly.MetricsManager', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ThemeManager', 'Blockly.Themes.Classic', 'Blockly.TouchGesture', 'Blockly.Workspace', 'Blockly.WorkspaceAudio', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.Xml', 'Blockly.blockRendering', 'Blockly.browserEvents', 'Blockly.common', 'Blockly.internalConstants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Metrics', 'Blockly.utils.Rect', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es5'});
goog.addDependency('../../core/xml.js', ['Blockly.Xml'], ['Blockly.Events', 'Blockly.inputTypes', 'Blockly.utils', 'Blockly.utils.Size', 'Blockly.utils.dom', 'Blockly.utils.xml']);
goog.addDependency('../../core/zoom_controls.js', ['Blockly.ZoomControls'], ['Blockly.ComponentManager', 'Blockly.Css', 'Blockly.Events', 'Blockly.Events.Click', 'Blockly.IPositionable', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.internalConstants', 'Blockly.uiPosition', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
goog.addDependency('base.js', [], []);