profile
viewpoint
Rachel Fenichel rachel-fenichel github.com/google/blockly github.com/LLK/scratch-blocks

google/blockly 9934

The web-based visual programming editor.

LLK/scratch-blocks 2104

Scratch Blocks is a library for building creative computing interfaces.

google/blockly-games 1102

Games for tomorrow's programmers.

LLK/scratch-vm 929

Virtual Machine used to represent, run, and maintain the state of programs for Scratch 3.0

google/blockly-android 641

Blockly for Android

google/blockly-ios 390

Blockly for iOS

google/blockly-samples 377

Plugins, codelabs, and examples related to the Blockly library.

google/blockly-devtools 56

Tools for Blockly app developers to help build custom blocks.

google/blockly-tools 15

tools for developing Blockly

push eventrachel-fenichel/blockly

Rachel Fenichel

commit sha f5caf964aad346866da8e71839fa2d0f0e4b58b9

refactor: convert renderer classes to es6 classes (#5874) * refactor: convert zelos renderer classes to es6 classes * refactor: convert zelos measurables to es6 classes * refactor: convert thrasos classes to es6 classes * refactor: convert minimalist classes to es6 classes * refactor: update geras classes to es6 classes * chore: rebuild and format * chore: fix indentation in comments

view details

push time in 4 days

delete branch rachel-fenichel/blockly

delete branch : renderer_classes

delete time in 4 days

push eventgoogle/blockly

Rachel Fenichel

commit sha f5caf964aad346866da8e71839fa2d0f0e4b58b9

refactor: convert renderer classes to es6 classes (#5874) * refactor: convert zelos renderer classes to es6 classes * refactor: convert zelos measurables to es6 classes * refactor: convert thrasos classes to es6 classes * refactor: convert minimalist classes to es6 classes * refactor: update geras classes to es6 classes * chore: rebuild and format * chore: fix indentation in comments

view details

push time in 4 days

PR merged google/blockly

refactor: convert renderer classes to es6 classes

The basics

  • [x] I branched from develop
  • [x] My pull request is against develop
  • [x] My code follows the style guide

The details

Resolves

Part of #5860 and part of #2892

Proposed Changes

Converts classes in the renderers directory to es6 classes.

Reason for Changes

Move to ES6 classes to reduce hassle when converting classes to Typescript.

Test Coverage

Normal tests, and after finishing each renderer I tested it in the advanced playground.

Documentation

I added some new documentation where required by the compiler--generally jsdoc. I didn't need to make any major structural changes.

Additional Information

+3615 -3492

0 comment

27 changed files

rachel-fenichel

pr closed time in 4 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 const {Theme} = goog.requireType('Blockly.Theme');  /**  * The geras renderer.- * @param {string} name The renderer name.- * @package- * @constructor  * @extends {BaseRenderer}- * @alias Blockly.geras.Renderer  */-const Renderer = function(name) {-  Renderer.superClass_.constructor.call(this, name);-+class Renderer extends BaseRenderer {   /**-   * The renderer's highlight constant provider.-   * @type {HighlightConstantProvider}-   * @private+   * @param {string} name The renderer name.+   * @package+   * @alias Blockly.geras.Renderer    */-  this.highlightConstants_ = null;-};-object.inherits(Renderer, BaseRenderer);+  constructor(name) {+    super(name); -/**- * Initialize the renderer.  Geras has a highlight provider in addition to- * the normal constant provider.- * @package- * @override- */-Renderer.prototype.init = function(theme, opt_rendererOverrides) {-  Renderer.superClass_.init.call(this, theme, opt_rendererOverrides);-  this.highlightConstants_ = this.makeHighlightConstants_();-  this.highlightConstants_.init();-};+    /**+     * The renderer's highlight constant provider.+     * @type {HighlightConstantProvider}+     * @private+     */+    this.highlightConstants_ = null;+  } -/**- * @override- */-Renderer.prototype.refreshDom = function(svg, theme) {-  Renderer.superClass_.refreshDom.call(this, svg, theme);-  this.getHighlightConstants().init();-};+  /**+   * Initialize the renderer.  Geras has a highlight provider in addition to+   * the normal constant provider.+   * @package+   * @override+   */+  init(theme, opt_rendererOverrides) {+    super.init(theme, opt_rendererOverrides);+    this.highlightConstants_ = this.makeHighlightConstants_();+    this.highlightConstants_.init();+  } -/**- * @override- */-Renderer.prototype.makeConstants_ = function() {-  return new ConstantProvider();-};+  /**+   * @override+   */+  refreshDom(svg, theme) {+    super.refreshDom(svg, theme);+    this.getHighlightConstants().init();+  } -/**- * Create a new instance of the renderer's render info object.- * @param {!BlockSvg} block The block to measure.- * @return {!RenderInfo} The render info object.- * @protected- * @override- */-Renderer.prototype.makeRenderInfo_ = function(block) {-  return new RenderInfo(this, block);-};+  /**+   * @override+   */+  makeConstants_() {+    return new ConstantProvider();+  } -/**- * Create a new instance of the renderer's drawer.- * @param {!BlockSvg} block The block to render.- * @param {!BaseRenderInfo} info An object containing all- *   information needed to render this block.- * @return {!Drawer} The drawer.- * @protected- * @override- */-Renderer.prototype.makeDrawer_ = function(block, info) {-  return new Drawer(-      block,-      /** @type {!RenderInfo} */ (info));-};+  /**+   * Create a new instance of the renderer's render info object.+   * @param {!BlockSvg} block The block to measure.+   * @return {!RenderInfo} The render info object.+   * @protected+   * @override+   */+  makeRenderInfo_(block) {+    return new RenderInfo(this, block);+  } -/**- * Create a new instance of a renderer path object.- * @param {!SVGElement} root The root SVG element.- * @param {!Theme.BlockStyle} style The style object to use for- *     colouring.- * @return {!PathObject} The renderer path object.- * @package- * @override- */-Renderer.prototype.makePathObject = function(root, style) {-  return new PathObject(-      root, style,-      /** @type {!ConstantProvider} */ (this.getConstants()));-};+  /**+   * Create a new instance of the renderer's drawer.+   * @param {!BlockSvg} block The block to render.+   * @param {!BaseRenderInfo} info An object containing all+   *   information needed to render this block.

Fixed.

rachel-fenichel

comment created time in 4 days

PullRequestReviewEvent

push eventrachel-fenichel/blockly

Rachel Fenichel

commit sha 0848d01d1b29530b2463e47b14fc22373210a6b0

chore: fix indentation in comments

view details

push time in 4 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 goog.module('Blockly.geras.Drawer');  const debug = goog.require('Blockly.blockRendering.debug');-const object = goog.require('Blockly.utils.object'); const svgPaths = goog.require('Blockly.utils.svgPaths'); /* eslint-disable-next-line no-unused-vars */ const {BlockSvg} = goog.requireType('Blockly.BlockSvg'); const {Drawer: BaseDrawer} = goog.require('Blockly.blockRendering.Drawer'); const {Highlighter} = goog.require('Blockly.geras.Highlighter'); /* eslint-disable-next-line no-unused-vars */+const {InlineInput} = goog.require('Blockly.geras.InlineInput');+/* eslint-disable-next-line no-unused-vars */ const {PathObject} = goog.requireType('Blockly.geras.PathObject'); /* eslint-disable-next-line no-unused-vars */ const {RenderInfo} = goog.requireType('Blockly.geras.RenderInfo');   /**  * An object that draws a block based on the given rendering information.- * @param {!BlockSvg} block The block to render.- * @param {!RenderInfo} info An object containing all- *   information needed to render this block.- * @package- * @constructor  * @extends {BaseDrawer}- * @alias Blockly.geras.Drawer- */-const Drawer = function(block, info) {-  Drawer.superClass_.constructor.call(this, block, info);-  // Unlike Thrasos, Geras has highlights and drop shadows.-  this.highlighter_ = new Highlighter(info);-};-object.inherits(Drawer, BaseDrawer);--/**- * @override  */-Drawer.prototype.draw = function() {-  this.hideHiddenIcons_();-  this.drawOutline_();-  this.drawInternals_();--  const pathObject =-      /** @type {!PathObject} */ (this.block_.pathObject);-  pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);-  pathObject.setHighlightPath(this.highlighter_.getPath());-  if (this.info_.RTL) {-    pathObject.flipRTL();+class Drawer extends BaseDrawer {+  /**+   * @param {!BlockSvg} block The block to render.+   * @param {!RenderInfo} info An object containing all+   *   information needed to render this block.+   * @package+   * @alias Blockly.geras.Drawer+   */+  constructor(block, info) {+    super(block, info);+    // Unlike Thrasos, Geras has highlights and drop shadows.+    this.highlighter_ = new Highlighter(info);   }-  if (debug.isDebuggerEnabled()) {-    this.block_.renderingDebugger.drawDebug(this.block_, this.info_);++  /**+   * @override+   */+  draw() {+    this.hideHiddenIcons_();+    this.drawOutline_();+    this.drawInternals_();++    const pathObject =+        /** @type {!PathObject} */ (this.block_.pathObject);+    pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);+    pathObject.setHighlightPath(this.highlighter_.getPath());+    if (this.info_.RTL) {+      pathObject.flipRTL();+    }+    if (debug.isDebuggerEnabled()) {+      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);+    }+    this.recordSizeOnBlock_();   }-  this.recordSizeOnBlock_();-}; -/**- * @override- */-Drawer.prototype.drawTop_ = function() {-  this.highlighter_.drawTopCorner(this.info_.topRow);-  this.highlighter_.drawRightSideRow(this.info_.topRow);+  /**+   * @override+   */+  drawTop_() {+    this.highlighter_.drawTopCorner(this.info_.topRow);+    this.highlighter_.drawRightSideRow(this.info_.topRow); -  Drawer.superClass_.drawTop_.call(this);-};+    super.drawTop_();+  } -/**- * @override- */-Drawer.prototype.drawJaggedEdge_ = function(row) {-  this.highlighter_.drawJaggedEdge_(row);+  /**+   * @override+   */+  drawJaggedEdge_(row) {+    this.highlighter_.drawJaggedEdge_(row); -  Drawer.superClass_.drawJaggedEdge_.call(this, row);-};+    super.drawJaggedEdge_(row);+  } -/**- * @override- */-Drawer.prototype.drawValueInput_ = function(row) {-  this.highlighter_.drawValueInput(row);+  /**+   * @override+   */+  drawValueInput_(row) {+    this.highlighter_.drawValueInput(row); -  Drawer.superClass_.drawValueInput_.call(this, row);-};+    super.drawValueInput_(row);+  } -/**- * @override- */-Drawer.prototype.drawStatementInput_ = function(row) {-  this.highlighter_.drawStatementInput(row);+  /**+   * @override+   */+  drawStatementInput_(row) {+    this.highlighter_.drawStatementInput(row); -  Drawer.superClass_.drawStatementInput_.call(this, row);-};+    super.drawStatementInput_(row);+  } -/**- * @override- */-Drawer.prototype.drawRightSideRow_ = function(row) {-  this.highlighter_.drawRightSideRow(row);+  /**+   * @override+   */+  drawRightSideRow_(row) {+    this.highlighter_.drawRightSideRow(row); -  this.outlinePath_ += svgPaths.lineOnAxis('H', row.xPos + row.width) +-      svgPaths.lineOnAxis('V', row.yPos + row.height);-};+    this.outlinePath_ += svgPaths.lineOnAxis('H', row.xPos + row.width) ++        svgPaths.lineOnAxis('V', row.yPos + row.height);+  } -/**- * @override- */-Drawer.prototype.drawBottom_ = function() {-  this.highlighter_.drawBottomRow(this.info_.bottomRow);+  /**+   * @override+   */+  drawBottom_() {+    this.highlighter_.drawBottomRow(this.info_.bottomRow); -  Drawer.superClass_.drawBottom_.call(this);-};+    super.drawBottom_();+  } -/**- * Add steps for the left side of the block, which may include an output- * connection- * @protected- * @override- */-Drawer.prototype.drawLeft_ = function() {-  this.highlighter_.drawLeft();+  /**+   * Add steps for the left side of the block, which may include an output+   * connection+   * @protected+   * @override+   */+  drawLeft_() {+    this.highlighter_.drawLeft(); -  Drawer.superClass_.drawLeft_.call(this);-};+    super.drawLeft_();+  } -/**- * @override- */-Drawer.prototype.drawInlineInput_ = function(input) {-  this.highlighter_.drawInlineInput(input);+  /**+   * @override+   */+  drawInlineInput_(input) {+    this.highlighter_.drawInlineInput(/** @type {!InlineInput} */ (input));

It's a more specific type (geras.InlineInput).

rachel-fenichel

comment created time in 4 days

PullRequestReviewEvent

push eventrachel-fenichel/blockly

Rachel Fenichel

commit sha 3b0e6565df95525e7161f0f415cda3ca1683dc67

chore: rebuild and format

view details

push time in 5 days

push eventrachel-fenichel/blockly

Rachel Fenichel

commit sha c1728df38c948fbbc652b10a3f853045eb6ccbdb

chore: rebuild and format

view details

push time in 5 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 const {Types} = goog.require('Blockly.blockRendering.Types');  * 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 {!RenderInfo} info An object containing all- *     information needed to render this block.- * @package- * @constructor- * @alias Blockly.geras.Highlighter  */-const Highlighter = function(info) {-  this.info_ = info;-  this.steps_ = '';-  this.inlineSteps_ = '';--  this.RTL_ = this.info_.RTL;--  const renderer = /** @type {!Renderer} */ (info.getRenderer());-+class Highlighter {   /**-   * The renderer's constant provider.-   * @type {!ConstantProvider}+   * @param {!RenderInfo} info An object containing all+   *     information needed to render this block.+   * @package+   * @alias Blockly.geras.Highlighter    */-  this.constants_ = renderer.getConstants();+  constructor(info) {+    this.info_ = info;+    this.steps_ = '';+    this.inlineSteps_ = ''; -  /**-   * @type {!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.RTL_ = this.info_.RTL; -  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;-};+    const renderer = /** @type {!Renderer} */ (info.getRenderer()); -/**- * Get the steps for the highlight path.- * @return {string} The steps for the highlight path.- * @package- */-Highlighter.prototype.getPath = function() {-  return this.steps_ + '\n' + this.inlineSteps_;-};+    /**+     * The renderer's constant provider.+     * @type {!ConstantProvider}+     */+    this.constants_ = renderer.getConstants(); -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 (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_);-    }-  }+    /**+     * @type {!HighlightConstantProvider}+     */+    this.highlightConstants_ = renderer.getHighlightConstants();+    /**+     * The offset between the block's main path and highlight path.+     * @type {number}+     * @private+     */+    this.highlightOffset_ = this.highlightConstants_.OFFSET; -  const right = row.xPos + row.width - this.highlightOffset_;-  this.steps_ += svgPaths.lineOnAxis('H', right);-};+    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;+  } -Highlighter.prototype.drawJaggedEdge_ = function(row) {-  if (this.info_.RTL) {-    const remainder =-        row.height - this.jaggedTeethPaths_.height - this.highlightOffset_;-    this.steps_ +=-        this.jaggedTeethPaths_.pathLeft + svgPaths.lineOnAxis('v', remainder);+  /**+   * Get the steps for the highlight path.+   * @return {string} The steps for the highlight path.+   * @package+   */+  getPath() {+    return this.steps_ + '\n' + this.inlineSteps_;   }-}; -Highlighter.prototype.drawValueInput = function(row) {-  const input = row.getLastInput();-  if (this.RTL_) {-    const belowTabHeight = row.height - input.connectionHeight;+  /**

I added JSDoc for this function and the following functions.

rachel-fenichel

comment created time in 5 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 goog.module('Blockly.geras.Drawer');  const debug = goog.require('Blockly.blockRendering.debug');-const object = goog.require('Blockly.utils.object'); const svgPaths = goog.require('Blockly.utils.svgPaths'); /* eslint-disable-next-line no-unused-vars */ const {BlockSvg} = goog.requireType('Blockly.BlockSvg'); const {Drawer: BaseDrawer} = goog.require('Blockly.blockRendering.Drawer'); const {Highlighter} = goog.require('Blockly.geras.Highlighter'); /* eslint-disable-next-line no-unused-vars */+const {InlineInput} = goog.require('Blockly.geras.InlineInput');+/* eslint-disable-next-line no-unused-vars */ const {PathObject} = goog.requireType('Blockly.geras.PathObject'); /* eslint-disable-next-line no-unused-vars */ const {RenderInfo} = goog.requireType('Blockly.geras.RenderInfo');   /**  * An object that draws a block based on the given rendering information.- * @param {!BlockSvg} block The block to render.- * @param {!RenderInfo} info An object containing all- *   information needed to render this block.- * @package- * @constructor  * @extends {BaseDrawer}- * @alias Blockly.geras.Drawer- */-const Drawer = function(block, info) {-  Drawer.superClass_.constructor.call(this, block, info);-  // Unlike Thrasos, Geras has highlights and drop shadows.-  this.highlighter_ = new Highlighter(info);-};-object.inherits(Drawer, BaseDrawer);--/**- * @override  */-Drawer.prototype.draw = function() {-  this.hideHiddenIcons_();-  this.drawOutline_();-  this.drawInternals_();--  const pathObject =-      /** @type {!PathObject} */ (this.block_.pathObject);-  pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);-  pathObject.setHighlightPath(this.highlighter_.getPath());-  if (this.info_.RTL) {-    pathObject.flipRTL();+class Drawer extends BaseDrawer {+  /**+   * @param {!BlockSvg} block The block to render.+   * @param {!RenderInfo} info An object containing all+   *   information needed to render this block.+   * @package+   * @alias Blockly.geras.Drawer+   */+  constructor(block, info) {+    super(block, info);+    // Unlike Thrasos, Geras has highlights and drop shadows.+    this.highlighter_ = new Highlighter(info);   }-  if (debug.isDebuggerEnabled()) {-    this.block_.renderingDebugger.drawDebug(this.block_, this.info_);++  /**+   * @override+   */+  draw() {+    this.hideHiddenIcons_();+    this.drawOutline_();+    this.drawInternals_();++    const pathObject =+        /** @type {!PathObject} */ (this.block_.pathObject);+    pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);+    pathObject.setHighlightPath(this.highlighter_.getPath());+    if (this.info_.RTL) {+      pathObject.flipRTL();+    }+    if (debug.isDebuggerEnabled()) {+      this.block_.renderingDebugger.drawDebug(this.block_, this.info_);+    }+    this.recordSizeOnBlock_();   }-  this.recordSizeOnBlock_();-}; -/**- * @override- */-Drawer.prototype.drawTop_ = function() {-  this.highlighter_.drawTopCorner(this.info_.topRow);-  this.highlighter_.drawRightSideRow(this.info_.topRow);+  /**+   * @override+   */+  drawTop_() {+    this.highlighter_.drawTopCorner(this.info_.topRow);+    this.highlighter_.drawRightSideRow(this.info_.topRow); -  Drawer.superClass_.drawTop_.call(this);-};+    super.drawTop_();+  } -/**- * @override- */-Drawer.prototype.drawJaggedEdge_ = function(row) {-  this.highlighter_.drawJaggedEdge_(row);+  /**+   * @override+   */+  drawJaggedEdge_(row) {+    this.highlighter_.drawJaggedEdge_(row); -  Drawer.superClass_.drawJaggedEdge_.call(this, row);-};+    super.drawJaggedEdge_(row);+  } -/**- * @override- */-Drawer.prototype.drawValueInput_ = function(row) {-  this.highlighter_.drawValueInput(row);+  /**+   * @override+   */+  drawValueInput_(row) {+    this.highlighter_.drawValueInput(row); -  Drawer.superClass_.drawValueInput_.call(this, row);-};+    super.drawValueInput_(row);+  } -/**- * @override- */-Drawer.prototype.drawStatementInput_ = function(row) {-  this.highlighter_.drawStatementInput(row);+  /**+   * @override+   */+  drawStatementInput_(row) {+    this.highlighter_.drawStatementInput(row); -  Drawer.superClass_.drawStatementInput_.call(this, row);-};+    super.drawStatementInput_(row);+  } -/**- * @override- */-Drawer.prototype.drawRightSideRow_ = function(row) {-  this.highlighter_.drawRightSideRow(row);+  /**+   * @override+   */+  drawRightSideRow_(row) {+    this.highlighter_.drawRightSideRow(row); -  this.outlinePath_ += svgPaths.lineOnAxis('H', row.xPos + row.width) +-      svgPaths.lineOnAxis('V', row.yPos + row.height);-};+    this.outlinePath_ += svgPaths.lineOnAxis('H', row.xPos + row.width) ++        svgPaths.lineOnAxis('V', row.yPos + row.height);+  } -/**- * @override- */-Drawer.prototype.drawBottom_ = function() {-  this.highlighter_.drawBottomRow(this.info_.bottomRow);+  /**+   * @override+   */+  drawBottom_() {+    this.highlighter_.drawBottomRow(this.info_.bottomRow); -  Drawer.superClass_.drawBottom_.call(this);-};+    super.drawBottom_();+  } -/**- * Add steps for the left side of the block, which may include an output- * connection- * @protected- * @override- */-Drawer.prototype.drawLeft_ = function() {-  this.highlighter_.drawLeft();+  /**+   * Add steps for the left side of the block, which may include an output+   * connection+   * @protected+   * @override+   */+  drawLeft_() {+    this.highlighter_.drawLeft(); -  Drawer.superClass_.drawLeft_.call(this);-};+    super.drawLeft_();+  } -/**- * @override- */-Drawer.prototype.drawInlineInput_ = function(input) {-  this.highlighter_.drawInlineInput(input);+  /**+   * @override+   */+  drawInlineInput_(input) {+    this.highlighter_.drawInlineInput(/** @type {!InlineInput} */ (input));

This cast is new. I put it in to allow me to be more specific in type annotations in the highlighter.

rachel-fenichel

comment created time in 5 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 const {Svg} = goog.require('Blockly.utils.Svg');  /**  * An object that provides constants for rendering blocks in Zelos mode.- * @constructor- * @package  * @extends {BaseConstantProvider}- * @alias Blockly.zelos.ConstantProvider  */-const ConstantProvider = function() {-  ConstantProvider.superClass_.constructor.call(this);--  this.GRID_UNIT = 4;--  /**-   * @override-   */-  this.SMALL_PADDING = this.GRID_UNIT;--  /**-   * @override-   */-  this.MEDIUM_PADDING = 2 * this.GRID_UNIT;--  /**-   * @override-   */-  this.MEDIUM_LARGE_PADDING = 3 * this.GRID_UNIT;--  /**-   * @override-   */-  this.LARGE_PADDING = 4 * this.GRID_UNIT;--  /**-   * @override-   */-  this.CORNER_RADIUS = 1 * this.GRID_UNIT;--  /**-   * @override-   */-  this.NOTCH_WIDTH = 9 * this.GRID_UNIT;--  /**-   * @override-   */-  this.NOTCH_HEIGHT = 2 * this.GRID_UNIT;--  /**-   * @override-   */-  this.NOTCH_OFFSET_LEFT = 3 * this.GRID_UNIT;--  /**-   * @override-   */-  this.STATEMENT_INPUT_NOTCH_OFFSET = this.NOTCH_OFFSET_LEFT;-+class ConstantProvider extends BaseConstantProvider {   /**-   * @override-   */-  this.MIN_BLOCK_WIDTH = 2 * this.GRID_UNIT;--  /**-   * @override-   */-  this.MIN_BLOCK_HEIGHT = 12 * this.GRID_UNIT;--  /**-   * @override-   */-  this.EMPTY_STATEMENT_INPUT_HEIGHT = 6 * this.GRID_UNIT;--  /**-   * @override-   */-  this.TAB_OFFSET_FROM_TOP = 0;--  /**-   * @override-   */-  this.TOP_ROW_MIN_HEIGHT = this.CORNER_RADIUS;--  /**-   * @override-   */-  this.TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT = this.LARGE_PADDING;--  /**-   * @override-   */-  this.BOTTOM_ROW_MIN_HEIGHT = this.CORNER_RADIUS;--  /**-   * @override-   */-  this.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT = 6 * this.GRID_UNIT;+   * @package+   * @alias Blockly.zelos.ConstantProvider+   */+  constructor() {+    super();++    this.GRID_UNIT = 4;++    /**+     * @override+     */+    this.SMALL_PADDING = this.GRID_UNIT;++    /**+     * @override+     */+    this.MEDIUM_PADDING = 2 * this.GRID_UNIT;++    /**+     * @override+     */+    this.MEDIUM_LARGE_PADDING = 3 * this.GRID_UNIT;++    /**+     * @override+     */+    this.LARGE_PADDING = 4 * this.GRID_UNIT;++    /**+     * @override+     */+    this.CORNER_RADIUS = 1 * this.GRID_UNIT;++    /**+     * @override+     */+    this.NOTCH_WIDTH = 9 * this.GRID_UNIT;++    /**+     * @override+     */+    this.NOTCH_HEIGHT = 2 * this.GRID_UNIT;++    /**+     * @override+     */+    this.NOTCH_OFFSET_LEFT = 3 * this.GRID_UNIT;++    /**+     * @override+     */+    this.STATEMENT_INPUT_NOTCH_OFFSET = this.NOTCH_OFFSET_LEFT;++    /**+     * @override+     */+    this.MIN_BLOCK_WIDTH = 2 * this.GRID_UNIT;++    /**+     * @override+     */+    this.MIN_BLOCK_HEIGHT = 12 * this.GRID_UNIT;++    /**+     * @override+     */+    this.EMPTY_STATEMENT_INPUT_HEIGHT = 6 * this.GRID_UNIT;++    /**+     * @override+     */+    this.TAB_OFFSET_FROM_TOP = 0;++    /**+     * @override+     */+    this.TOP_ROW_MIN_HEIGHT = this.CORNER_RADIUS;++    /**+     * @override+     */+    this.TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT = this.LARGE_PADDING;++    /**+     * @override+     */+    this.BOTTOM_ROW_MIN_HEIGHT = this.CORNER_RADIUS;++    /**+     * @override+     */+    this.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT = 6 * this.GRID_UNIT;++    /**+     * @override+     */+    this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT;++    /**+     * Minimum statement input spacer width.+     * @type {number}+     */+    this.STATEMENT_INPUT_SPACER_MIN_WIDTH = 40 * this.GRID_UNIT;++    /**+     * @override+     */+    this.STATEMENT_INPUT_PADDING_LEFT = 4 * this.GRID_UNIT;++    /**+     * @override+     */+    this.EMPTY_INLINE_INPUT_PADDING = 4 * this.GRID_UNIT;++    /**+     * @override+     */+    this.EMPTY_INLINE_INPUT_HEIGHT = 8 * this.GRID_UNIT;++    /**+     * @override+     */+    this.DUMMY_INPUT_MIN_HEIGHT = 8 * this.GRID_UNIT;++    /**+     * @override+     */+    this.DUMMY_INPUT_SHADOW_MIN_HEIGHT = 6 * this.GRID_UNIT;++    /**+     * @override+     */+    this.CURSOR_WS_WIDTH = 20 * this.GRID_UNIT;++    /**+     * @override+     */+    this.CURSOR_COLOUR = '#ffa200';++    /**+     * Radius of the cursor for input and output connections.+     * @type {number}+     * @package+     */+    this.CURSOR_RADIUS = 5;++    /**+     * @override+     */+    this.JAGGED_TEETH_HEIGHT = 0;++    /**+     * @override+     */+    this.JAGGED_TEETH_WIDTH = 0;++    /**+     * @override+     */+    this.START_HAT_HEIGHT = 22;++    /**+     * @override+     */+    this.START_HAT_WIDTH = 96;++    /**+     * @enum {number}+     * @override+     */+    this.SHAPES = {HEXAGONAL: 1, ROUND: 2, SQUARE: 3, PUZZLE: 4, NOTCH: 5};++    /**+     * Map of output/input shapes and the amount they should cause a block to be+     * padded. Outer key is the outer shape, inner key is the inner shape.+     * When a block with the outer shape contains an input block with the inner+     * shape on its left or right edge, the block elements are aligned such that+     * the padding specified is reached.+     * @package+     */+    this.SHAPE_IN_SHAPE_PADDING = {+      1: {+        // Outer shape: hexagon.+        0: 5 * this.GRID_UNIT,  // Field in hexagon.+        1: 2 * this.GRID_UNIT,  // Hexagon in hexagon.+        2: 5 * this.GRID_UNIT,  // Round in hexagon.+        3: 5 * this.GRID_UNIT,  // Square in hexagon.+      },+      2: {+        // Outer shape: round.+        0: 3 * this.GRID_UNIT,  // Field in round.+        1: 3 * this.GRID_UNIT,  // Hexagon in round.+        2: 1 * this.GRID_UNIT,  // Round in round.+        3: 2 * this.GRID_UNIT,  // Square in round.+      },+      3: {+        // Outer shape: square.+        0: 2 * this.GRID_UNIT,  // Field in square.+        1: 2 * this.GRID_UNIT,  // Hexagon in square.+        2: 2 * this.GRID_UNIT,  // Round in square.+        3: 2 * this.GRID_UNIT,  // Square in square.+      },+    };++    /**+     * @override+     */+    this.FULL_BLOCK_FIELDS = true;++    /**+     * @override+     */+    this.FIELD_TEXT_FONTSIZE = 3 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_TEXT_FONTWEIGHT = 'bold';++    /**+     * @override+     */+    this.FIELD_TEXT_FONTFAMILY =+        '"Helvetica Neue", "Segoe UI", Helvetica, sans-serif';++    /**+     * @override+     */+    this.FIELD_BORDER_RECT_RADIUS = this.CORNER_RADIUS;++    /**+     * @override+     */+    this.FIELD_BORDER_RECT_X_PADDING = 2 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_BORDER_RECT_Y_PADDING = 1.625 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true;++    /**+     * @override+     */+    this.FIELD_DROPDOWN_COLOURED_DIV = true;++    /**+     * @override+     */+    this.FIELD_DROPDOWN_SVG_ARROW = true;++    /**+     * @override+     */+    this.FIELD_DROPDOWN_SVG_ARROW_PADDING = this.FIELD_BORDER_RECT_X_PADDING;++    /**+     * @override+     */+    this.FIELD_TEXTINPUT_BOX_SHADOW = true;++    /**+     * @override+     */+    this.FIELD_COLOUR_FULL_BLOCK = true;++    /**+     * @override+     */+    this.FIELD_COLOUR_DEFAULT_WIDTH = 2 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_COLOUR_DEFAULT_HEIGHT = 4 * this.GRID_UNIT;++    /**+     * @override+     */+    this.FIELD_CHECKBOX_X_OFFSET = 1 * this.GRID_UNIT;++    /**+     * The maximum width of a dynamic connection shape.+     * @type {number}+     */+    this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH = 12 * this.GRID_UNIT;++    /**+     * The selected glow colour.+     * @type {string}+     */+    this.SELECTED_GLOW_COLOUR = '#fff200';++    /**+     * The size of the selected glow.+     * @type {number}+     */+    this.SELECTED_GLOW_SIZE = 0.5;++    /**+     * The replacement glow colour.+     * @type {string}+     */+    this.REPLACEMENT_GLOW_COLOUR = '#fff200';++    /**+     * The size of the selected glow.+     * @type {number}+     */+    this.REPLACEMENT_GLOW_SIZE = 2;++    /**+     * The ID of the selected glow filter, or the empty string if no filter is+     * set.+     * @type {string}+     * @package+     */+    this.selectedGlowFilterId = '';++    /**+     * The <filter> element to use for a selected glow, or null if not set.+     * @type {SVGElement}+     * @private+     */+    this.selectedGlowFilter_ = null;++    /**+     * The ID of the replacement glow filter, or the empty string if no filter is+     * set.+     * @type {string}+     * @package+     */+    this.replacementGlowFilterId = '';++    /**+     * The <filter> element to use for a replacement glow, or null if not set.+     * @type {SVGElement}+     * @private+     */+    this.replacementGlowFilter_ = null;++    /**

I had to add declarations for HEXAGONAL, ROUNDED, and SQUARED. I didn't change anything about how they are initialized, so they start null and get set later.

In shapeFor I added casts to make the return value non-null. That does assume that things have been initialized before shapeFor is called.

rachel-fenichel

comment created time in 5 days

Pull request review commentgoogle/blockly

refactor: convert renderer classes to es6 classes

 const MarkerSvg = function(workspace, constants, marker) {    * @type {string}    */   this.colour_ = marker.colour || defaultColour;++  /**+   * The root SVG group containing the marker.+   * @type {SVGGElement}+   * @protected+   */+  this.markerSvg_ = null;

Added to satisfy compiler when I changed subclasses.

rachel-fenichel

comment created time in 5 days

PullRequestReviewEvent
PullRequestReviewEvent

PR opened google/blockly

refactor: convert renderer classes to es6 classes

The basics

  • [ ] I branched from develop
  • [ ] My pull request is against develop
  • [ ] My code follows the style guide

The details

Resolves

Part of #5860 and part of #2892

Proposed Changes

Converts classes in the renderers directory to es6 classes.

Reason for Changes

<!--TODO: Explain why these changes should be made. Include screenshots if applicable. -->

Test Coverage

Normal tests, and after finishing each renderer I tested it in the advanced playground.

Documentation

I added some new documentation where required by the compiler--generally jsdoc

Additional Information

<!-- Anything else we should know? -->

+3566 -3464

0 comment

25 changed files

pr created time in 5 days

create barnchrachel-fenichel/blockly

branch : renderer_classes

created branch time in 5 days

PullRequestReviewEvent

PR opened google/blockly

refactor: convert some classes to es6 classes

The basics

  • [x] I branched from develop
  • [x] My pull request is against develop
  • [x] My code follows the style guide

The details

Resolves

Part of #5860 and part of #2892

Proposed Changes

Converts event classes to ES6 classes.

As usual, this is best reviewed one commit at a time, and at the end I ran format and rebuilt tests/deps.js.

Reason for Changes

Move to ES6 classes to reduce hassle when converting classes to Typescript.

Test Coverage

Mocha tests, running build-debug to look for compiler errors, and opening up the playground to test when I changed the flyout classes in particular.

+5053 -4939

0 comment

13 changed files

pr created time in 6 days

create barnchrachel-fenichel/blockly

branch : convert_classes

created branch time in 6 days

push eventrachel-fenichel/blockly

Rachel Fenichel

commit sha 29fb7b78930d82619f54dff120c18324750abfe2

refactor: convert leaf event classes to es6 classes (#5870) * chore(tests): update event assert functions to pass in types directly * refactor: move event types from prototypes to constructors * refactor: convert events/events_block_change.js to ES6 class * refactor: convert events/events_block_create.js to ES6 class * refactor: convert events/events_block_delete.js to ES6 class * refactor: convert events/events_block_drag.js to ES6 class * refactor: convert events/events_block_move.js to ES6 class * refactor: convert events/events_click.js to ES6 class * refactor: convert events/events_comment_change.js to ES6 class * refactor: convert events/events_comment_create.js to ES6 class * refactor: convert events/events_comment_delete.js to ES6 class * refactor: convert events/events_comment_move.js to ES6 class * refactor: convert events/events_marker_move.js to ES6 class * refactor: convert events/events_selected.js to ES6 class * refactor: convert events/events_theme_change.js to ES6 class * refactor: convert events/events_toolbox_item_select.js to ES6 class * refactor: convert events/events_trashcan_open.js to ES6 class * refactor: convert events/events_ui.js to ES6 class * refactor: convert events/events_var_create.js to ES6 class * refactor: convert events/events_var_delete.js to ES6 class * refactor: convert events/events_var_rename.js to ES6 class * refactor: convert events/events_viewport.js to ES6 class * chore: rebuild * chore: run clang-format

view details

push time in 6 days

push eventgoogle/blockly

Rachel Fenichel

commit sha 29fb7b78930d82619f54dff120c18324750abfe2

refactor: convert leaf event classes to es6 classes (#5870) * chore(tests): update event assert functions to pass in types directly * refactor: move event types from prototypes to constructors * refactor: convert events/events_block_change.js to ES6 class * refactor: convert events/events_block_create.js to ES6 class * refactor: convert events/events_block_delete.js to ES6 class * refactor: convert events/events_block_drag.js to ES6 class * refactor: convert events/events_block_move.js to ES6 class * refactor: convert events/events_click.js to ES6 class * refactor: convert events/events_comment_change.js to ES6 class * refactor: convert events/events_comment_create.js to ES6 class * refactor: convert events/events_comment_delete.js to ES6 class * refactor: convert events/events_comment_move.js to ES6 class * refactor: convert events/events_marker_move.js to ES6 class * refactor: convert events/events_selected.js to ES6 class * refactor: convert events/events_theme_change.js to ES6 class * refactor: convert events/events_toolbox_item_select.js to ES6 class * refactor: convert events/events_trashcan_open.js to ES6 class * refactor: convert events/events_ui.js to ES6 class * refactor: convert events/events_var_create.js to ES6 class * refactor: convert events/events_var_delete.js to ES6 class * refactor: convert events/events_var_rename.js to ES6 class * refactor: convert events/events_viewport.js to ES6 class * chore: rebuild * chore: run clang-format

view details

push time in 6 days

delete branch rachel-fenichel/blockly

delete branch : convert_classes

delete time in 6 days

PR merged google/blockly

refactor: convert leaf event classes to es6 classes

The basics

  • [x] I branched from develop
  • [x] My pull request is against develop
  • [x] My code follows the style guide

The details

Resolves

Part of #5860 and part of #2892

Proposed Changes

Converts event classes to ES6 classes.

I spoke with @cpcallen to understand the implementation of object.inherits that we were using and confirmed that changing over to extends would work.

I skipped classes that did not call the super constructor.

I also updated two test helper functions to not rely on accessing the type on the prototype of the class object (first commit).

As usual, this is best reviewed one commit at a time, and at the end I ran format and rebuilt tests/deps.js.

Reason for Changes

Move to ES6 classes to reduce hassle when converting classes to Typescript.

Test Coverage

Our event code is actually well tested, so I trusted the mocha tests. I did occasionally break things (e.g. not calling a super function) to verify that the tests would catch it.

Documentation

Additional Information

+1404 -1356

0 comment

34 changed files

rachel-fenichel

pr closed time in 6 days

PR opened google/blockly

refactor: convert leaf event classes to es6 classes

The basics

  • [x] I branched from develop
  • [x] My pull request is against develop
  • [x] My code follows the style guide

The details

Resolves

Part of #5860 and part of #2892

Proposed Changes

Converts event classes to ES6 classes.

I spoke with @cpcallen to understand the implementation of object.inherits that we were using and confirmed that changing over to extends would work.

I skipped classes that did not call the super constructor.

I also updated two test helper functions to not rely on accessing the type on the prototype of the class object (first commit).

As usual, this is best reviewed one commit at a time, and at the end I ran format and rebuilt tests/deps.js.

Reason for Changes

Move to ES6 classes to reduce hassle when converting classes to Typescript.

Test Coverage

Our event code is actually well tested, so I trusted the mocha tests. I did occasionally break things (e.g. not calling a super function) to verify that the tests would catch it.

Documentation

Additional Information

+1404 -1356

0 comment

34 changed files

pr created time in 7 days

create barnchrachel-fenichel/blockly

branch : convert_classes

created branch time in 7 days

pull request commentgoogle/blockly

feature: Replace text quotes and pilcrow with custom font

Can we do a fixed-size vector image instead of a font? It would still scale better and wouldn't need to be measured.

NeilFraser

comment created time in 7 days

issue commentgoogle/blockly

blockly.d.ts incorrect types

Which command did you run to get those errors?

https://github.com/google/blockly/issues/5857 tracks work to move to Typescript, if you want to keep an eye on it. I'm currently working on updating to ES6 classes.

benjamindamm

comment created time in 7 days

more