From fba87c93c4f680f37fee8d902c82340a4905a363 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 4 Aug 2021 12:12:53 -0700 Subject: [PATCH] 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 --- core/renderers/geras/highlighter.js | 185 ++++++++++++++-------------- tests/deps.js | 4 +- 2 files changed, 95 insertions(+), 94 deletions(-) diff --git a/core/renderers/geras/highlighter.js b/core/renderers/geras/highlighter.js index 74a6bb43d..f04339d29 100644 --- a/core/renderers/geras/highlighter.js +++ b/core/renderers/geras/highlighter.js @@ -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; diff --git a/tests/deps.js b/tests/deps.js index bbf289725..14ae08221 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -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', [], []);