blockly 8.0.5 → 9.0.0-beta.0

package/core/renderers/geras/measurables/inline_input.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../../input.js';
+import type { ConstantProvider as BaseConstantProvider } from '../../../renderers/common/constants.js';
+import { InlineInput as BaseInlineInput } from '../../../renderers/measurables/inline_input.js';
+import type { ConstantProvider as GerasConstantProvider } from '../constants.js';
+/**
+ * An object containing information about the space an inline input takes up
+ * during rendering.
+ * @alias Blockly.geras.InlineInput
+ */
+export declare class InlineInput extends BaseInlineInput {
+    constants_: GerasConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The inline input to measure and store information for.
+     * @internal
+     */
+    constructor(constants: BaseConstantProvider, input: Input);
+}

package/core/renderers/geras/measurables/inline_input.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Objects representing inline inputs with connections on a
+ * rendered block.
+ */
+
+/**
+ * Objects representing inline inputs with connections on a
+ * rendered block.
+ * @class
+ */
+import * as goog from '../../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.InlineInput');
+
+/* eslint-disable-next-line no-unused-vars */
+import type {Input} from '../../../input.js';
+import type {ConstantProvider as BaseConstantProvider} from '../../../renderers/common/constants.js';
+import {InlineInput as BaseInlineInput} from '../../../renderers/measurables/inline_input.js';
+import type {ConstantProvider as GerasConstantProvider} from '../constants.js';
+
+
+/**
+ * An object containing information about the space an inline input takes up
+ * during rendering.
+ * @alias Blockly.geras.InlineInput
+ */
+export class InlineInput extends BaseInlineInput {
+  override constants_: GerasConstantProvider;
+
+  /**
+   * @param constants The rendering constants provider.
+   * @param input The inline input to measure and store information for.
+   * @internal
+   */
+  constructor(constants: BaseConstantProvider, input: Input) {
+    super(constants, input);
+    this.constants_ = constants as GerasConstantProvider;
+
+    if (this.connectedBlock) {
+      // We allow the dark path to show on the parent block so that the child
+      // block looks embossed.  This takes up an extra pixel in both x and y.
+      this.width += this.constants_.DARK_PATH_OFFSET;
+      this.height += this.constants_.DARK_PATH_OFFSET;
+    }
+  }
+}

package/core/renderers/geras/measurables/statement_input.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../../input.js';
+import type { ConstantProvider as BaseConstantProvider } from '../../../renderers/common/constants.js';
+import { StatementInput as BaseStatementInput } from '../../../renderers/measurables/statement_input.js';
+import type { ConstantProvider as GerasConstantProvider } from '../constants.js';
+/**
+ * An object containing information about the space a statement input takes up
+ * during rendering.
+ * @alias Blockly.geras.StatementInput
+ */
+export declare class StatementInput extends BaseStatementInput {
+    constants_: GerasConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The statement input to measure and store information for.
+     * @internal
+     */
+    constructor(constants: BaseConstantProvider, input: Input);
+}

package/core/renderers/geras/measurables/statement_input.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Objects representing statement inputs with connections on a
+ * rendered block.
+ */
+
+/**
+ * Objects representing statement inputs with connections on a
+ * rendered block.
+ * @class
+ */
+import * as goog from '../../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.StatementInput');
+
+/* eslint-disable-next-line no-unused-vars */
+import type {Input} from '../../../input.js';
+import type {ConstantProvider as BaseConstantProvider} from '../../../renderers/common/constants.js';
+import {StatementInput as BaseStatementInput} from '../../../renderers/measurables/statement_input.js';
+import type {ConstantProvider as GerasConstantProvider} from '../constants.js';
+
+
+/**
+ * An object containing information about the space a statement input takes up
+ * during rendering.
+ * @alias Blockly.geras.StatementInput
+ */
+export class StatementInput extends BaseStatementInput {
+  override constants_: GerasConstantProvider;
+
+  /**
+   * @param constants The rendering constants provider.
+   * @param input The statement input to measure and store information for.
+   * @internal
+   */
+  constructor(constants: BaseConstantProvider, input: Input) {
+    super(constants, input);
+    this.constants_ = constants as GerasConstantProvider;
+
+    if (this.connectedBlock) {
+      // We allow the dark path to show on the parent block so that the child
+      // block looks embossed.  This takes up an extra pixel in both x and y.
+      this.height += this.constants_.DARK_PATH_OFFSET;
+    }
+  }
+}

package/core/renderers/geras/path_object.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 type { BlockStyle } from '../../theme.js';
+import { PathObject as BasePathObject } from '../common/path_object.js';
+import type { ConstantProvider } from './constants.js';
+/**
+ * An object that handles creating and setting each of the SVG elements
+ * used by the renderer.
+ * @alias Blockly.geras.PathObject
+ */
+export declare class PathObject extends BasePathObject {
+    constants: ConstantProvider;
+    /** @internal */
+    svgPathDark: SVGElement;
+    /** @internal */
+    svgPathLight: SVGElement;
+    /**
+     * The colour of the dark path on the block in '#RRGGBB' format.
+     * @internal
+     */
+    colourDark: string;
+    style: any;
+    /**
+     * @param root The root SVG element.
+     * @param style The style object to use for colouring.
+     * @param constants The renderer's constants.
+     * @internal
+     */
+    constructor(root: SVGElement, style: BlockStyle, constants: ConstantProvider);
+    setPath(mainPath: string): void;
+    /**
+     * Set the highlight path generated by the renderer onto the SVG element.
+     * @param highlightPath The highlight path.
+     * @internal
+     */
+    setHighlightPath(highlightPath: string): void;
+    flipRTL(): void;
+    applyColour(block: BlockSvg): void;
+    setStyle(blockStyle: BlockStyle): void;
+    updateHighlighted(highlighted: boolean): void;
+    updateShadow_(shadow: boolean): void;
+    updateDisabled_(disabled: boolean): void;
+}

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

@@ -8,22 +8,25 @@
  * @fileoverview An object that owns a block's rendering SVG elements.
  */
 
-'use strict';
-
 /**
  * An object that owns a block's rendering SVG elements.
  * @class
  */
-goog.module('Blockly.geras.PathObject');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.PathObject');
 
-const colour = goog.require('Blockly.utils.colour');
-const dom = goog.require('Blockly.utils.dom');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
-const {PathObject: BasePathObject} = goog.require('Blockly.blockRendering.PathObject');
-const {Svg} = goog.require('Blockly.utils.Svg');
 /* eslint-disable-next-line no-unused-vars */
-const {Theme} = goog.requireType('Blockly.Theme');
+// Unused import preserved for side-effects. Remove if unneeded.
+// import '../../theme.js';
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {BlockStyle} from '../../theme.js';
+import * as colour from '../../utils/colour.js';
+import * as dom from '../../utils/dom.js';
+import {Svg} from '../../utils/svg.js';
+import {PathObject as BasePathObject} from '../common/path_object.js';
+
+import type {ConstantProvider} from './constants.js';
 
 
 /**
@@ -31,82 +34,65 @@ const {Theme} = goog.requireType('Blockly.Theme');
  * used by the renderer.
  * @alias Blockly.geras.PathObject
  */
-class PathObject extends BasePathObject {
+export class PathObject extends BasePathObject {
+  /** @internal */
+  svgPathDark: SVGElement;
+  /** @internal */
+  svgPathLight: SVGElement;
+
   /**
-   * @param {!SVGElement} root The root SVG element.
-   * @param {!Theme.BlockStyle} style The style object to use for
-   *     colouring.
-   * @param {!ConstantProvider} constants The renderer's constants.
-   * @package
+   * The colour of the dark path on the block in '#RRGGBB' format.
+   * @internal
    */
-  constructor(root, style, constants) {
+  colourDark = '#000000';
+  override style: AnyDuringMigration;
+
+  /**
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @param constants The renderer's constants.
+   * @internal
+   */
+  constructor(
+      root: SVGElement, style: BlockStyle,
+      public override constants: ConstantProvider) {
     super(root, style, constants);
-    /**
-     * The renderer's constant provider.
-     * @type {!ConstantProvider}
-     */
-    this.constants = constants;
-
-    /**
-     * The dark path of the block.
-     * @type {SVGElement}
-     * @package
-     */
+
+    /** The dark path of the block. */
     this.svgPathDark = dom.createSvgElement(
         Svg.PATH, {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'});
-
     // SVG draw order is based on the order of elements (top most = back most)
     // So we need to insert the dark path before the base path to make sure it
     // gets drawn first.
     this.svgRoot.insertBefore(this.svgPathDark, this.svgPath);
 
-    /**
-     * The light path of the block.
-     * @type {SVGElement}
-     * @package
-     */
+    /** The light path of the block. */
     this.svgPathLight = dom.createSvgElement(
         Svg.PATH, {'class': 'blocklyPathLight'}, this.svgRoot);
-
-    /**
-     * The colour of the dark path on the block in '#RRGGBB' format.
-     * @type {string}
-     * @package
-     */
-    this.colourDark = '#000000';
   }
 
-  /**
-   * @override
-   */
-  setPath(mainPath) {
+  override setPath(mainPath: string) {
     this.svgPath.setAttribute('d', mainPath);
     this.svgPathDark.setAttribute('d', mainPath);
   }
 
   /**
    * Set the highlight path generated by the renderer onto the SVG element.
-   * @param {string} highlightPath The highlight path.
-   * @package
+   * @param highlightPath The highlight path.
+   * @internal
    */
-  setHighlightPath(highlightPath) {
+  setHighlightPath(highlightPath: string) {
     this.svgPathLight.setAttribute('d', highlightPath);
   }
 
-  /**
-   * @override
-   */
-  flipRTL() {
+  override flipRTL() {
     // Mirror the block's path.
     this.svgPath.setAttribute('transform', 'scale(-1 1)');
     this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
     this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
   }
 
-  /**
-   * @override
-   */
-  applyColour(block) {
+  override applyColour(block: BlockSvg) {
     this.svgPathLight.style.display = '';
     this.svgPathDark.style.display = '';
     this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
@@ -117,19 +103,13 @@ class PathObject extends BasePathObject {
     this.svgPath.setAttribute('stroke', 'none');
   }
 
-  /**
-   * @override
-   */
-  setStyle(blockStyle) {
+  override setStyle(blockStyle: BlockStyle) {
     this.style = blockStyle;
     this.colourDark =
         colour.blend('#000', this.style.colourPrimary, 0.2) || this.colourDark;
   }
 
-  /**
-   * @override
-   */
-  updateHighlighted(highlighted) {
+  override updateHighlighted(highlighted: boolean) {
     if (highlighted) {
       this.svgPath.setAttribute(
           'filter', 'url(#' + this.constants.embossFilterId + ')');
@@ -140,10 +120,7 @@ class PathObject extends BasePathObject {
     }
   }
 
-  /**
-   * @override
-   */
-  updateShadow_(shadow) {
+  override updateShadow_(shadow: boolean) {
     if (shadow) {
       this.svgPathLight.style.display = 'none';
       this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
@@ -152,15 +129,10 @@ class PathObject extends BasePathObject {
     }
   }
 
-  /**
-   * @override
-   */
-  updateDisabled_(disabled) {
+  override updateDisabled_(disabled: boolean) {
     super.updateDisabled_(disabled);
     if (disabled) {
       this.svgPath.setAttribute('stroke', 'none');
     }
   }
 }
-
-exports.PathObject = PathObject;

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { BlockStyle, Theme } from '../../theme.js';
+import type { RenderInfo as BaseRenderInfo } from '../common/info.js';
+import { Renderer as BaseRenderer } from '../common/renderer.js';
+import { ConstantProvider } from './constants.js';
+import { Drawer } from './drawer.js';
+import { HighlightConstantProvider } from './highlight_constants.js';
+import { RenderInfo } from './info.js';
+import { PathObject } from './path_object.js';
+/**
+ * The geras renderer.
+ * @alias Blockly.geras.Renderer
+ */
+export declare class Renderer extends BaseRenderer {
+    /** The renderer's highlight constant provider. */
+    private highlightConstants_;
+    /**
+     * @param name The renderer name.
+     * @internal
+     */
+    constructor(name: string);
+    /**
+     * Initialize the renderer.  Geras has a highlight provider in addition to
+     * the normal constant provider.
+     * @internal
+     */
+    init(theme: Theme, opt_rendererOverrides: any): void;
+    refreshDom(svg: SVGElement, theme: Theme): void;
+    makeConstants_(): ConstantProvider;
+    /**
+     * Create a new instance of the renderer's render info object.
+     * @param block The block to measure.
+     * @return The render info object.
+     */
+    protected makeRenderInfo_(block: BlockSvg): RenderInfo;
+    /**
+     * Create a new instance of the renderer's drawer.
+     * @param block The block to render.
+     * @param info An object containing all information needed to render this
+     *     block.
+     * @return The drawer.
+     */
+    protected makeDrawer_(block: BlockSvg, info: BaseRenderInfo): Drawer;
+    /**
+     * Create a new instance of a renderer path object.
+     * @param root The root SVG element.
+     * @param style The style object to use for colouring.
+     * @return The renderer path object.
+     * @internal
+     */
+    makePathObject(root: SVGElement, style: BlockStyle): PathObject;
+    /**
+     * Create a new instance of the renderer's highlight constant provider.
+     * @return The highlight constant provider.
+     */
+    protected makeHighlightConstants_(): HighlightConstantProvider;
+    /**
+     * Get the renderer's highlight constant provider.  We assume that when this
+     * is called, the renderer has already been initialized.
+     * @return The highlight constant provider.
+     * @internal
+     */
+    getHighlightConstants(): HighlightConstantProvider;
+}

package/core/renderers/geras/renderer.ts

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Geras renderer.
+ */
+
+/**
+ * Geras renderer.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.Renderer');
+
+/* eslint-disable-next-line no-unused-vars */
+// Unused import preserved for side-effects. Remove if unneeded.
+// import '../common/constants.js';
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {BlockStyle, Theme} from '../../theme.js';
+import * as blockRendering from '../common/block_rendering.js';
+import type {RenderInfo as BaseRenderInfo} from '../common/info.js';
+import {Renderer as BaseRenderer} from '../common/renderer.js';
+
+import {ConstantProvider} from './constants.js';
+import {Drawer} from './drawer.js';
+import {HighlightConstantProvider} from './highlight_constants.js';
+import {RenderInfo} from './info.js';
+import {PathObject} from './path_object.js';
+
+
+/**
+ * The geras renderer.
+ * @alias Blockly.geras.Renderer
+ */
+export class Renderer extends BaseRenderer {
+  /** The renderer's highlight constant provider. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'HighlightConstantProvider'.
+  private highlightConstants_: HighlightConstantProvider =
+      null as AnyDuringMigration;
+
+  /**
+   * @param name The renderer name.
+   * @internal
+   */
+  constructor(name: string) {
+    super(name);
+  }
+
+  /**
+   * Initialize the renderer.  Geras has a highlight provider in addition to
+   * the normal constant provider.
+   * @internal
+   */
+  override init(theme: Theme, opt_rendererOverrides: AnyDuringMigration) {
+    super.init(theme, opt_rendererOverrides);
+    this.highlightConstants_ = this.makeHighlightConstants_();
+    this.highlightConstants_.init();
+  }
+
+  override refreshDom(svg: SVGElement, theme: Theme) {
+    super.refreshDom(svg, theme);
+    this.getHighlightConstants().init();
+  }
+
+  override makeConstants_() {
+    return new ConstantProvider();
+  }
+
+  /**
+   * Create a new instance of the renderer's render info object.
+   * @param block The block to measure.
+   * @return The render info object.
+   */
+  protected override makeRenderInfo_(block: BlockSvg): RenderInfo {
+    return new RenderInfo(this, block);
+  }
+
+  /**
+   * Create a new instance of the renderer's drawer.
+   * @param block The block to render.
+   * @param info An object containing all information needed to render this
+   *     block.
+   * @return The drawer.
+   */
+  protected override makeDrawer_(block: BlockSvg, info: BaseRenderInfo):
+      Drawer {
+    return new Drawer(block, (info as RenderInfo));
+  }
+
+  /**
+   * Create a new instance of a renderer path object.
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @return The renderer path object.
+   * @internal
+   */
+  override makePathObject(root: SVGElement, style: BlockStyle): PathObject {
+    return new PathObject(
+        root, style, (this.getConstants() as ConstantProvider));
+  }
+
+  /**
+   * Create a new instance of the renderer's highlight constant provider.
+   * @return The highlight constant provider.
+   */
+  protected makeHighlightConstants_(): HighlightConstantProvider {
+    return new HighlightConstantProvider((this.getConstants()));
+  }
+
+  /**
+   * Get the renderer's highlight constant provider.  We assume that when this
+   * is called, the renderer has already been initialized.
+   * @return The highlight constant provider.
+   * @internal
+   */
+  getHighlightConstants(): HighlightConstantProvider {
+    return this.highlightConstants_;
+  }
+}
+
+blockRendering.register('geras', Renderer);

package/core/renderers/measurables/base.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+/**
+ * The base class to represent a part of a block that takes up space during
+ * rendering.  The constructor for each non-spacer Measurable records the size
+ * of the block element (e.g. field, statement input).
+ * @alias Blockly.blockRendering.Measurable
+ */
+export declare class Measurable {
+    width: number;
+    height: number;
+    type: number;
+    xPos: number;
+    centerline: number;
+    notchOffset: number;
+    /** The renderer's constant provider. */
+    protected readonly constants_: ConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     * @internal
+     */
+    constructor(constants: ConstantProvider);
+}

package/core/renderers/measurables/base.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods for graphically rendering a block as SVG.
+ */
+
+/**
+ * Methods for graphically rendering a block as SVG.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.blockRendering.Measurable');
+
+import type {ConstantProvider} from '../common/constants.js';
+
+import {Types} from './types.js';
+
+
+/**
+ * The base class to represent a part of a block that takes up space during
+ * rendering.  The constructor for each non-spacer Measurable records the size
+ * of the block element (e.g. field, statement input).
+ * @alias Blockly.blockRendering.Measurable
+ */
+export class Measurable {
+  width: number = 0;
+
+  height: number = 0;
+  type: number;
+  xPos = 0;
+
+  centerline = 0;
+  notchOffset: number;
+
+  /** The renderer's constant provider. */
+  protected readonly constants_: ConstantProvider
+
+  /**
+   * @param constants The rendering constants provider.
+   * @internal
+   */
+  constructor(constants: ConstantProvider) {
+    this.constants_ = constants;
+
+    this.type = Types.NONE;
+
+    this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+  }
+}