blockly 8.0.4 → 8.0.5-beta.0

package/core/renderers/geras/highlight_constants.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+/** An object containing sizing and path information about an outside corner. */
+export interface OutsideCorner {
+    height: number;
+    topLeft: (p1: boolean) => string;
+    bottomLeft: () => string;
+}
+/** An object containing sizing and path information about an inside corner. */
+export interface InsideCorner {
+    width: number;
+    height: number;
+    pathTop: (p1: boolean) => string;
+    pathBottom: (p1: boolean) => string;
+}
+/** An object containing sizing and path information about a start hat. */
+export interface StartHat {
+    path: (p1: boolean) => string;
+}
+/** An object containing sizing and path information about a notch. */
+export interface Notch {
+    pathLeft: string;
+}
+/** An object containing sizing and path information about a puzzle tab. */
+export interface PuzzleTab {
+    width: number;
+    height: number;
+    pathDown: (p1: boolean) => string;
+    pathUp: (p1: boolean) => string;
+}
+/**
+ * An object containing sizing and path information about collapsed block
+ * indicators.
+ */
+export interface JaggedTeeth {
+    height: number;
+    width: number;
+    pathLeft: string;
+}
+/**
+ * An object that provides constants for rendering highlights on blocks.
+ * Some highlights are simple offsets of the parent paths and can be generated
+ * programmatically.  Others, especially on curves, are just made out of piles
+ * of constants and are hard to tweak.
+ * @alias Blockly.geras.HighlightConstantProvider
+ */
+export declare class HighlightConstantProvider {
+    constantProvider: ConstantProvider;
+    /** The offset between the block's main path and highlight path. */
+    OFFSET: number;
+    START_POINT: string;
+    INSIDE_CORNER: InsideCorner;
+    OUTSIDE_CORNER: OutsideCorner;
+    PUZZLE_TAB: PuzzleTab;
+    NOTCH: Notch;
+    JAGGED_TEETH: JaggedTeeth;
+    START_HAT: StartHat;
+    /**
+     * @param constants The rendering constants provider.
+     * @internal
+     */
+    constructor(constants: ConstantProvider);
+    /**
+     * Initialize shape objects based on the constants set in the constructor.
+     * @internal
+     */
+    init(): void;
+    /**
+     * @return An object containing sizing and path information about inside
+     *     corner highlights.
+     * @internal
+     */
+    makeInsideCorner(): InsideCorner;
+    /**
+     * @return An object containing sizing and path information about outside
+     *     corner highlights.
+     * @internal
+     */
+    makeOutsideCorner(): OutsideCorner;
+    /**
+     * @return An object containing sizing and path information about puzzle tab
+     *     highlights.
+     * @internal
+     */
+    makePuzzleTab(): PuzzleTab;
+    /**
+     * @return An object containing sizing and path information about notch
+     *     highlights.
+     * @internal
+     */
+    makeNotch(): Notch;
+    /**
+     * @return An object containing sizing and path information about collapsed
+     *     block edge highlights.
+     * @internal
+     */
+    makeJaggedTeeth(): JaggedTeeth;
+    /**
+     * @return An object containing sizing and path information about start
+     *     highlights.
+     * @internal
+     */
+    makeStartHat(): StartHat;
+}

package/core/renderers/geras/{highlight_constants.js → highlight_constants.ts}

@@ -7,19 +7,61 @@
 /**
  * @fileoverview Objects for rendering highlights on blocks.
  */
-'use strict';
 
 /**
  * Objects for rendering highlights on blocks.
  * @class
  */
-goog.module('Blockly.geras.HighlightConstantProvider');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.HighlightConstantProvider');
 
-const svgPaths = goog.require('Blockly.utils.svgPaths');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+import * as svgPaths from '../../utils/svg_paths.js';
+import type {ConstantProvider} from '../common/constants.js';
 
 
+/** An object containing sizing and path information about an outside corner. */
+export interface OutsideCorner {
+  height: number;
+  topLeft: (p1: boolean) => string;
+  bottomLeft: () => string;
+}
+
+/** An object containing sizing and path information about an inside corner. */
+export interface InsideCorner {
+  width: number;
+  height: number;
+  pathTop: (p1: boolean) => string;
+  pathBottom: (p1: boolean) => string;
+}
+
+/** An object containing sizing and path information about a start hat. */
+export interface StartHat {
+  path: (p1: boolean) => string;
+}
+
+/** An object containing sizing and path information about a notch. */
+export interface Notch {
+  pathLeft: string;
+}
+
+/** An object containing sizing and path information about a puzzle tab. */
+export interface PuzzleTab {
+  width: number;
+  height: number;
+  pathDown: (p1: boolean) => string;
+  pathUp: (p1: boolean) => string;
+}
+
+/**
+ * An object containing sizing and path information about collapsed block
+ * indicators.
+ */
+export interface JaggedTeeth {
+  height: number;
+  width: number;
+  pathLeft: string;
+}
+
 /**
  * An object that provides constants for rendering highlights on blocks.
  * Some highlights are simple offsets of the parent paths and can be generated
@@ -27,93 +69,93 @@ const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProv
  * of constants and are hard to tweak.
  * @alias Blockly.geras.HighlightConstantProvider
  */
-class HighlightConstantProvider {
+export class HighlightConstantProvider {
+  constantProvider: ConstantProvider;
+
+  /** The offset between the block's main path and highlight path. */
+  OFFSET = 0.5;
+  START_POINT: string;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  INSIDE_CORNER!: InsideCorner;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  OUTSIDE_CORNER!: OutsideCorner;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  PUZZLE_TAB!: PuzzleTab;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  NOTCH!: Notch;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  JAGGED_TEETH!: JaggedTeeth;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  START_HAT!: StartHat;
+
   /**
-   * @param {!ConstantProvider} constants The rendering
-   *   constants provider.
-   * @package
+   * @param constants The rendering constants provider.
+   * @internal
    */
-  constructor(constants) {
-    /**
-     * The renderer's constant provider.
-     * @type {!ConstantProvider}
-     */
+  constructor(constants: ConstantProvider) {
+    /** The renderer's constant provider. */
     this.constantProvider = constants;
 
-    /**
-     * The offset between the block's main path and highlight path.
-     * @type {number}
-     * @package
-     */
-    this.OFFSET = 0.5;
-
     /**
      * The start point, which is offset in both X and Y, as an SVG path chunk.
-     * @type {string}
+     * @internal
      */
     this.START_POINT = svgPaths.moveBy(this.OFFSET, this.OFFSET);
   }
 
   /**
    * Initialize shape objects based on the constants set in the constructor.
-   * @package
+   * @internal
    */
   init() {
     /**
      * An object containing sizing and path information about inside corner
      * highlights.
-     * @type {!Object}
      */
     this.INSIDE_CORNER = this.makeInsideCorner();
 
     /**
      * An object containing sizing and path information about outside corner
      * highlights.
-     * @type {!Object}
      */
     this.OUTSIDE_CORNER = this.makeOutsideCorner();
 
     /**
      * An object containing sizing and path information about puzzle tab
      * highlights.
-     * @type {!Object}
      */
     this.PUZZLE_TAB = this.makePuzzleTab();
 
     /**
      * An object containing sizing and path information about notch highlights.
-     * @type {!Object}
      */
     this.NOTCH = this.makeNotch();
 
     /**
      * An object containing sizing and path information about highlights for
      * collapsed block indicators.
-     * @type {!Object}
      */
     this.JAGGED_TEETH = this.makeJaggedTeeth();
 
     /**
      * An object containing sizing and path information about start hat
      * highlights.
-     * @type {!Object}
      */
     this.START_HAT = this.makeStartHat();
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     inside corner highlights.
-   * @package
+   * @return An object containing sizing and path information about inside
+   *     corner highlights.
+   * @internal
    */
-  makeInsideCorner() {
+  makeInsideCorner(): InsideCorner {
     const radius = this.constantProvider.CORNER_RADIUS;
     const offset = this.OFFSET;
 
     /**
      * Distance from shape edge to intersect with a curved corner at 45 degrees.
      * Applies to highlighting on around the outside of a curve.
-     * @const
      */
     const distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset;
 
@@ -137,28 +179,27 @@ class HighlightConstantProvider {
     return {
       width: radius + offset,
       height: radius,
-      pathTop: function(rtl) {
+      pathTop(rtl) {
         return rtl ? pathTopRtl : '';
       },
-      pathBottom: function(rtl) {
+      pathBottom(rtl) {
         return rtl ? pathBottomRtl : pathBottomLtr;
       },
     };
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     outside corner highlights.
-   * @package
+   * @return An object containing sizing and path information about outside
+   *     corner highlights.
+   * @internal
    */
-  makeOutsideCorner() {
+  makeOutsideCorner(): OutsideCorner {
     const radius = this.constantProvider.CORNER_RADIUS;
     const offset = this.OFFSET;
 
     /**
      * Distance from shape edge to intersect with a curved corner at 45 degrees.
      * Applies to highlighting on around the inside of a curve.
-     * @const
      */
     const distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;
 
@@ -171,7 +212,6 @@ class HighlightConstantProvider {
             svgPaths.point(radius - topLeftStartX, -topLeftStartY + offset));
     /**
      * SVG path for drawing the highlight on the rounded top-left corner.
-     * @const
      */
     const topLeftCornerHighlightLtr = svgPaths.moveBy(offset, radius) +
         svgPaths.arc(
@@ -188,21 +228,21 @@ class HighlightConstantProvider {
 
     return {
       height: radius,
-      topLeft: function(rtl) {
+      topLeft(rtl) {
         return rtl ? topLeftCornerHighlightRtl : topLeftCornerHighlightLtr;
       },
-      bottomLeft: function() {
+      bottomLeft() {
         return bottomLeftPath;
       },
     };
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     puzzle tab highlights.
-   * @package
+   * @return An object containing sizing and path information about puzzle tab
+   *     highlights.
+   * @internal
    */
-  makePuzzleTab() {
+  makePuzzleTab(): PuzzleTab {
     const width = this.constantProvider.TAB_WIDTH;
     const height = this.constantProvider.TAB_HEIGHT;
 
@@ -236,46 +276,46 @@ class HighlightConstantProvider {
         svgPaths.moveBy(-5, height - 0.7) + svgPaths.lineTo(width * 0.46, -2.1);
 
     return {
-      width: width,
-      height: height,
-      pathUp: function(rtl) {
+      width,
+      height,
+      pathUp(rtl) {
         return rtl ? highlightRtlUp : highlightLtrUp;
       },
-      pathDown: function(rtl) {
+      pathDown(rtl) {
         return rtl ? highlightRtlDown : highlightLtrDown;
       },
     };
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     notch highlights.
-   * @package
+   * @return An object containing sizing and path information about notch
+   *     highlights.
+   * @internal
    */
-  makeNotch() {
+  makeNotch(): Notch {
     // This is only for the previous connection.
     const pathLeft = svgPaths.lineOnAxis('h', this.OFFSET) +
         this.constantProvider.NOTCH.pathLeft;
-    return {pathLeft: pathLeft};
+    return {pathLeft};
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     collapsed block edge highlights.
-   * @package
+   * @return An object containing sizing and path information about collapsed
+   *     block edge highlights.
+   * @internal
    */
-  makeJaggedTeeth() {
+  makeJaggedTeeth(): JaggedTeeth {
     const pathLeft = svgPaths.lineTo(5.1, 2.6) + svgPaths.moveBy(-10.2, 6.8) +
         svgPaths.lineTo(5.1, 2.6);
-    return {pathLeft: pathLeft, height: 12, width: 10.2};
+    return {pathLeft, height: 12, width: 10.2};
   }
 
   /**
-   * @return {!Object} An object containing sizing and path information about
-   *     start highlights.
-   * @package
+   * @return An object containing sizing and path information about start
+   *     highlights.
+   * @internal
    */
-  makeStartHat() {
+  makeStartHat(): StartHat {
     const hatHeight = this.constantProvider.START_HAT.height;
     const pathRtl = svgPaths.moveBy(25, -8.7) + svgPaths.curve('c', [
       svgPaths.point(29.7, -6.2),
@@ -289,11 +329,9 @@ class HighlightConstantProvider {
       svgPaths.point(75, -8.7),
     ]) + svgPaths.moveTo(100.5, hatHeight + 0.5);
     return {
-      path: function(rtl) {
+      path(rtl) {
         return rtl ? pathRtl : pathLtr;
       },
     };
   }
 }
-
-exports.HighlightConstantProvider = HighlightConstantProvider;

package/core/renderers/geras/highlighter.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+import type { BottomRow } from '../measurables/bottom_row.js';
+import type { Row } from '../measurables/row.js';
+import type { TopRow } from '../measurables/top_row.js';
+import type { HighlightConstantProvider, InsideCorner, JaggedTeeth, Notch, OutsideCorner, PuzzleTab, StartHat } from './highlight_constants.js';
+import type { RenderInfo } from './info.js';
+import type { InlineInput } from './measurables/inline_input.js';
+/**
+ * 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.
+ * @alias Blockly.geras.Highlighter
+ */
+export declare class Highlighter {
+    info_: RenderInfo;
+    steps_: string;
+    inlineSteps_: string;
+    RTL_: boolean;
+    constants_: ConstantProvider;
+    highlightConstants_: HighlightConstantProvider;
+    private readonly highlightOffset_;
+    outsideCornerPaths_: OutsideCorner;
+    insideCornerPaths_: InsideCorner;
+    puzzleTabPaths_: PuzzleTab;
+    notchPaths_: Notch;
+    startPaths_: StartHat;
+    jaggedTeethPaths_: JaggedTeeth;
+    /**
+     * @param info An object containing all information needed to render this
+     *     block.
+     * @internal
+     */
+    constructor(info: RenderInfo);
+    /**
+     * Get the steps for the highlight path.
+     * @return The steps for the highlight path.
+     * @internal
+     */
+    getPath(): string;
+    /**
+     * Add a highlight to the top corner of a block.
+     * @param row The top row of the block.
+     * @internal
+     */
+    drawTopCorner(row: TopRow): void;
+    /**
+     * Add a highlight on a jagged edge for a collapsed block.
+     * @param row  The row to highlight.
+     * @internal
+     */
+    drawJaggedEdge_(row: Row): void;
+    /**
+     * Add a highlight on a value input.
+     * @param row The row the input belongs to.
+     * @internal
+     */
+    drawValueInput(row: Row): void;
+    /**
+     * Add a highlight on a statement input.
+     * @param row The row to highlight.
+     * @internal
+     */
+    drawStatementInput(row: Row): void;
+    /**
+     * Add a highlight on the right side of a row.
+     * @param row The row to highlight.
+     * @internal
+     */
+    drawRightSideRow(row: Row): void;
+    /**
+     * Add a highlight to the bottom row.
+     * @param row The row to highlight.
+     * @internal
+     */
+    drawBottomRow(row: BottomRow): void;
+    /**
+     * Draw the highlight on the left side of the block.
+     * @internal
+     */
+    drawLeft(): void;
+    /**
+     * Add a highlight to an inline input.
+     * @param input The input to highlight.
+     * @internal
+     */
+    drawInlineInput(input: InlineInput): void;
+}