blockly 8.0.4-beta.0 → 8.0.5-beta.0

package/core/renderers/zelos/drawer.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import { Drawer as BaseDrawer } from '../common/drawer.js';
+import type { InlineInput } from '../measurables/inline_input.js';
+import type { Row } from '../measurables/row.js';
+import type { RenderInfo } from './info.js';
+/**
+ * An object that draws a block based on the given rendering information.
+ * @alias Blockly.zelos.Drawer
+ */
+export declare class Drawer extends BaseDrawer {
+    info_: RenderInfo;
+    /**
+     * @param block The block to render.
+     * @param info An object containing all information needed to render this
+     *     block.
+     * @internal
+     */
+    constructor(block: BlockSvg, info: RenderInfo);
+    draw(): void;
+    drawOutline_(): void;
+    drawLeft_(): void;
+    /**
+     * Add steps for the right side of a row that does not have value or
+     * statement input connections.
+     * @param row The row to draw the side of.
+     */
+    protected drawRightSideRow_(row: Row): void;
+    /**
+     * Add steps to draw the right side of an output with a dynamic connection.
+     */
+    protected drawRightDynamicConnection_(): void;
+    /**
+     * Add steps to draw the left side of an output with a dynamic connection.
+     */
+    protected drawLeftDynamicConnection_(): void;
+    /** Add steps to draw a flat top row. */
+    protected drawFlatTop_(): void;
+    /** Add steps to draw a flat bottom row. */
+    protected drawFlatBottom_(): void;
+    drawInlineInput_(input: InlineInput): void;
+    drawStatementInput_(row: Row): void;
+}

package/core/renderers/zelos/{drawer.js → drawer.ts}

@@ -7,59 +7,54 @@
 /**
  * @fileoverview Zelos renderer.
  */
-'use strict';
 
 /**
  * Zelos renderer.
  * @class
  */
-goog.module('Blockly.zelos.Drawer');
-
-const debug = goog.require('Blockly.blockRendering.debug');
-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');
-/* eslint-disable-next-line no-unused-vars */
-const {PathObject} = goog.requireType('Blockly.zelos.PathObject');
-/* eslint-disable-next-line no-unused-vars */
-const {RenderInfo} = goog.requireType('Blockly.zelos.RenderInfo');
-/* eslint-disable-next-line no-unused-vars */
-const {Row} = goog.requireType('Blockly.blockRendering.Row');
-/* eslint-disable-next-line no-unused-vars */
-const {SpacerRow} = goog.requireType('Blockly.blockRendering.SpacerRow');
-/* eslint-disable-next-line no-unused-vars */
-const {StatementInput} = goog.requireType('Blockly.zelos.StatementInput');
-const {Types} = goog.require('Blockly.blockRendering.Types');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.zelos.Drawer');
+
+import type {BlockSvg} from '../../block_svg.js';
+import * as svgPaths from '../../utils/svg_paths.js';
+import type {BaseShape, DynamicShape, Notch} from '../common/constants.js';
+import * as debug from '../common/debug.js';
+import {Drawer as BaseDrawer} from '../common/drawer.js';
+import type {InlineInput} from '../measurables/inline_input.js';
+import type {Row} from '../measurables/row.js';
+import type {SpacerRow} from '../measurables/spacer_row.js';
+import {Types} from '../measurables/types.js';
+
+import type {InsideCorners} from './constants.js';
+import type {RenderInfo} from './info.js';
+import type {StatementInput} from './measurables/inputs.js';
+import type {PathObject} from './path_object.js';
 
 
 /**
  * An object that draws a block based on the given rendering information.
- * @extends {BaseDrawer}
  * @alias Blockly.zelos.Drawer
  */
-class Drawer extends BaseDrawer {
+export class Drawer extends BaseDrawer {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  override info_!: RenderInfo;
+
   /**
-   * @param {!BlockSvg} block The block to render.
-   * @param {!RenderInfo} info An object containing all
-   *   information needed to render this block.
-   * @package
+   * @param block The block to render.
+   * @param info An object containing all information needed to render this
+   *     block.
+   * @internal
    */
-  constructor(block, info) {
-    super(block, info);
-
-    /**
-     * @type {!RenderInfo}
-     */
-    this.info_;
+  constructor(block: BlockSvg, info: RenderInfo) {
+    // AnyDuringMigration because:  Argument of type
+    // 'import("/google/src/cloud/adodson/blockly-ts/../../renderers/zelos/info").RenderInfo'
+    // is not assignable to parameter of type
+    // 'import("/google/src/cloud/adodson/bloc...
+    super(block, info as AnyDuringMigration);
   }
 
-  /**
-   * @override
-   */
-  draw() {
-    const pathObject =
-        /** @type {!PathObject} */ (this.block_.pathObject);
+  override draw() {
+    const pathObject = this.block_.pathObject as PathObject;
     pathObject.beginDrawing();
     this.hideHiddenIcons_();
     this.drawOutline_();
@@ -76,15 +71,15 @@ class Drawer extends BaseDrawer {
     if (this.info_.outputConnection) {
       // Store the output connection shape type for parent blocks to use during
       // rendering.
-      pathObject.outputShapeType = this.info_.outputConnection.shape.type;
+      // AnyDuringMigration because:  Type 'number' is not assignable to type
+      // 'null'.
+      pathObject.outputShapeType =
+          this.info_.outputConnection.shape.type as AnyDuringMigration;
     }
     pathObject.endDrawing();
   }
 
-  /**
-   * @override
-   */
-  drawOutline_() {
+  override drawOutline_() {
     if (this.info_.outputConnection &&
         this.info_.outputConnection.isDynamicShape &&
         !this.info_.hasStatementInput &&
@@ -98,10 +93,7 @@ class Drawer extends BaseDrawer {
     }
   }
 
-  /**
-   * @override
-   */
-  drawLeft_() {
+  override drawLeft_() {
     if (this.info_.outputConnection &&
         this.info_.outputConnection.isDynamicShape) {
       this.drawLeftDynamicConnection_();
@@ -113,29 +105,30 @@ class Drawer extends BaseDrawer {
   /**
    * Add steps for the right side of a row that does not have value or
    * statement input connections.
-   * @param {!Row} row The row to draw the
-   *     side of.
-   * @protected
+   * @param row The row to draw the side of.
    */
-  drawRightSideRow_(row) {
+  protected override drawRightSideRow_(row: Row) {
     if (row.height <= 0) {
       return;
     }
     if (Types.isSpacer(row)) {
-      const spacerRow = /** @type {!SpacerRow} */ (row);
+      const spacerRow = row as SpacerRow;
       if (spacerRow.precedesStatement || spacerRow.followsStatement) {
-        const cornerHeight = this.constants_.INSIDE_CORNERS.rightHeight;
+        const cornerHeight =
+            (this.constants_.INSIDE_CORNERS as InsideCorners).rightHeight;
         const remainingHeight =
             spacerRow.height - (spacerRow.precedesStatement ? cornerHeight : 0);
         this.outlinePath_ +=
             (spacerRow.followsStatement ?
-                 this.constants_.INSIDE_CORNERS.pathBottomRight :
+                 (this.constants_.INSIDE_CORNERS as InsideCorners)
+                     .pathBottomRight :
                  '') +
             (remainingHeight > 0 ?
                  svgPaths.lineOnAxis('V', spacerRow.yPos + remainingHeight) :
                  '') +
             (spacerRow.precedesStatement ?
-                 this.constants_.INSIDE_CORNERS.pathTopRight :
+                 (this.constants_.INSIDE_CORNERS as InsideCorners)
+                     .pathTopRight :
                  '');
         return;
       }
@@ -145,33 +138,28 @@ class Drawer extends BaseDrawer {
 
   /**
    * Add steps to draw the right side of an output with a dynamic connection.
-   * @protected
    */
-  drawRightDynamicConnection_() {
-    this.outlinePath_ += this.info_.outputConnection.shape.pathRightDown(
-        this.info_.outputConnection.height);
+  protected drawRightDynamicConnection_() {
+    this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
+                             .pathRightDown(this.info_.outputConnection.height);
   }
 
   /**
    * Add steps to draw the left side of an output with a dynamic connection.
-   * @protected
    */
-  drawLeftDynamicConnection_() {
+  protected drawLeftDynamicConnection_() {
     this.positionOutputConnection_();
 
-    this.outlinePath_ += this.info_.outputConnection.shape.pathUp(
-        this.info_.outputConnection.height);
+    this.outlinePath_ += (this.info_.outputConnection.shape as DynamicShape)
+                             .pathUp(this.info_.outputConnection.height);
 
     // Close off the path.  This draws a vertical line up to the start of the
     // block's path, which may be either a rounded or a sharp corner.
     this.outlinePath_ += 'z';
   }
 
-  /**
-   * Add steps to draw a flat top row.
-   * @protected
-   */
-  drawFlatTop_() {
+  /** Add steps to draw a flat top row. */
+  protected drawFlatTop_() {
     const topRow = this.info_.topRow;
     this.positionPreviousConnection_();
 
@@ -180,11 +168,8 @@ class Drawer extends BaseDrawer {
     this.outlinePath_ += svgPaths.lineOnAxis('h', topRow.width);
   }
 
-  /**
-   * Add steps to draw a flat bottom row.
-   * @protected
-   */
-  drawFlatBottom_() {
+  /** Add steps to draw a flat bottom row. */
+  protected drawFlatBottom_() {
     const bottomRow = this.info_.bottomRow;
     this.positionNextConnection_();
 
@@ -193,10 +178,7 @@ class Drawer extends BaseDrawer {
     this.outlinePath_ += svgPaths.lineOnAxis('h', -bottomRow.width);
   }
 
-  /**
-   * @override
-   */
-  drawInlineInput_(input) {
+  override drawInlineInput_(input: InlineInput) {
     this.positionInlineInputConnection_(input);
 
     const inputName = input.input.name;
@@ -204,7 +186,7 @@ class Drawer extends BaseDrawer {
       return;
     }
 
-    const width = input.width - (input.connectionWidth * 2);
+    const width = input.width - input.connectionWidth * 2;
     const height = input.height;
     const yPos = input.centerline - height / 2;
 
@@ -212,32 +194,30 @@ class Drawer extends BaseDrawer {
 
     const outlinePath = svgPaths.moveTo(connectionRight, yPos) +
         svgPaths.lineOnAxis('h', width) +
-        input.shape.pathRightDown(input.height) +
-        svgPaths.lineOnAxis('h', -width) + input.shape.pathUp(input.height) +
-        'z';
-    this.block_.pathObject.setOutlinePath(inputName, outlinePath);
+        (input.shape as DynamicShape).pathRightDown(input.height) +
+        svgPaths.lineOnAxis('h', -width) +
+        (input.shape as DynamicShape).pathUp(input.height) + 'z';
+    const pathObject = this.block_.pathObject as PathObject;
+    pathObject.setOutlinePath(inputName, outlinePath);
   }
 
-  /**
-   * @override
-   */
-  drawStatementInput_(row) {
-    const input = /** @type {!StatementInput} */ (row.getLastInput());
+  override drawStatementInput_(row: Row) {
+    const input = row.getLastInput() as StatementInput;
     // Where to start drawing the notch, which is on the right side in LTR.
-    const x = input.xPos + input.notchOffset + input.shape.width;
+    const x = input.xPos + input.notchOffset + (input.shape as BaseShape).width;
 
-    const innerTopLeftCorner = input.shape.pathRight +
+    const innerTopLeftCorner = (input.shape as Notch).pathRight +
         svgPaths.lineOnAxis(
             'h', -(input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
         this.constants_.INSIDE_CORNERS.pathTop;
 
-    const innerHeight =
-        row.height - (2 * this.constants_.INSIDE_CORNERS.height);
+    const innerHeight = row.height - 2 * this.constants_.INSIDE_CORNERS.height;
 
     const innerBottomLeftCorner = this.constants_.INSIDE_CORNERS.pathBottom +
         svgPaths.lineOnAxis(
-            'h', (input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
-        (input.connectedBottomNextConnection ? '' : input.shape.pathLeft);
+            'h', input.notchOffset - this.constants_.INSIDE_CORNERS.width) +
+        (input.connectedBottomNextConnection ? '' :
+                                               (input.shape as Notch).pathLeft);
 
     this.outlinePath_ += svgPaths.lineOnAxis('H', x) + innerTopLeftCorner +
         svgPaths.lineOnAxis('v', innerHeight) + innerBottomLeftCorner +
@@ -246,5 +226,3 @@ class Drawer extends BaseDrawer {
     this.positionStatementInputConnection_(row);
   }
 }
-
-exports.Drawer = Drawer;

package/core/renderers/zelos/info.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview Makecode/scratch-style renderer.
+ * Zelos: spirit of eager rivalry, emulation, envy, jealousy, and zeal.
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import { Input } from '../../input.js';
+import { RenderInfo as BaseRenderInfo } from '../common/info.js';
+import type { Measurable } from '../measurables/base.js';
+import type { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import { BottomRow } from './measurables/bottom_row.js';
+import { RightConnectionShape } from './measurables/row_elements.js';
+import { TopRow } from './measurables/top_row.js';
+import type { Renderer } from './renderer.js';
+/**
+ * An object containing all sizing information needed to draw this block.
+ *
+ * This measure pass does not propagate changes to the block (although fields
+ * may choose to rerender when getSize() is called).  However, calling it
+ * repeatedly may be expensive.
+ * @alias Blockly.zelos.RenderInfo
+ */
+export declare class RenderInfo extends BaseRenderInfo {
+    topRow: TopRow;
+    bottomRow: BottomRow;
+    constants_: ConstantProvider;
+    renderer_: Renderer;
+    isInline: boolean;
+    isMultiRow: boolean;
+    hasStatementInput: boolean;
+    rightSide: RightConnectionShape | null;
+    private readonly rightAlignedDummyInputs_;
+    /**
+     * @param renderer The renderer in use.
+     * @param block The block to measure.
+     * @internal
+     */
+    constructor(renderer: Renderer, block: BlockSvg);
+    /**
+     * Get the block renderer in use.
+     * @return The block renderer in use.
+     * @internal
+     */
+    getRenderer(): Renderer;
+    measure(): void;
+    shouldStartNewRow_(input: Input, lastInput: Input): boolean;
+    getDesiredRowWidth_(row: Row): number;
+    getInRowSpacing_(prev: Measurable | null, next: Measurable | null): number;
+    getSpacerRowHeight_(prev: Row, next: Row): number;
+    getSpacerRowWidth_(prev: Row, next: Row): number;
+    getElemCenterline_(row: Row, elem: Measurable): number;
+    addInput_(input: Input, activeRow: Row): void;
+    addAlignmentPadding_(row: Row, missingSpace: number): void;
+    /**
+     * Adjust the x position of fields to bump all non-label fields in the first
+     * row past the notch position.  This must be called before ``computeBounds``
+     * is called.
+     */
+    protected adjustXPosition_(): void;
+    /**
+     * Finalize the output connection info.  In particular, set the height of the
+     * output connection to match that of the block.  For the right side, add a
+     * right connection shape element and have it match the dimensions of the
+     * output connection.
+     */
+    protected finalizeOutputConnection_(): void;
+    /**
+     * Finalize horizontal alignment of elements on the block.  In particular,
+     * reduce the implicit spacing created by the left and right output connection
+     * shapes by adding setting negative spacing onto the leftmost and rightmost
+     * spacers.
+     */
+    protected finalizeHorizontalAlignment_(): void;
+    /**
+     * Calculate the spacing to reduce the left and right edges by based on the
+     * outer and inner connection shape.
+     * @param elem The first or last element on a block.
+     * @return The amount of spacing to reduce the first or last spacer.
+     */
+    protected getNegativeSpacing_(elem: Measurable): number;
+    /**
+     * Finalize vertical alignment of rows on a block.  In particular, reduce the
+     * implicit spacing when a non-shadow block is connected to any of an input
+     * row's inline inputs.
+     */
+    protected finalizeVerticalAlignment_(): void;
+    finalize_(): void;
+}