blockly 8.0.4 → 8.0.5-beta.0

package/core/renderers/common/renderer.ts

@@ -0,0 +1,271 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Base renderer.
+ */
+
+/**
+ * Base renderer.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.blockRendering.Renderer');
+
+import type {Block} from '../../block.js';
+import type {BlockSvg} from '../../block_svg.js';
+import {Connection} from '../../connection.js';
+import {ConnectionType} from '../../connection_type.js';
+import {InsertionMarkerManager, PreviewType} from '../../insertion_marker_manager.js';
+import type {IRegistrable} from '../../interfaces/i_registrable.js';
+import type {Marker} from '../../keyboard_nav/marker.js';
+import type {RenderedConnection} from '../../rendered_connection.js';
+import type {BlockStyle, Theme} from '../../theme.js';
+import type {WorkspaceSvg} from '../../workspace_svg.js';
+
+import {ConstantProvider} from './constants.js';
+import * as debug from './debug.js';
+import {Debug} from './debugger.js';
+import {Drawer} from './drawer.js';
+import type {IPathObject} from './i_path_object.js';
+import {RenderInfo} from './info.js';
+import {MarkerSvg} from './marker_svg.js';
+import {PathObject} from './path_object.js';
+
+
+/**
+ * The base class for a block renderer.
+ * @alias Blockly.blockRendering.Renderer
+ */
+export class Renderer implements IRegistrable {
+  /** The renderer's constant provider. */
+  protected constants_!: ConstantProvider;
+
+  /** @internal */
+  name: string;
+
+  /**
+   * Rendering constant overrides, passed in through options.
+   * @internal
+   */
+  overrides: object|null = null;
+
+  /**
+   * @param name The renderer name.
+   * @internal
+   */
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  /**
+   * Gets the class name that identifies this renderer.
+   * @return The CSS class name.
+   * @internal
+   */
+  getClassName(): string {
+    return this.name + '-renderer';
+  }
+
+  /**
+   * Initialize the renderer.
+   * @param theme The workspace theme object.
+   * @param opt_rendererOverrides Rendering constant overrides.
+   * @internal
+   */
+  init(theme: Theme, opt_rendererOverrides?: object) {
+    this.constants_ = this.makeConstants_();
+    if (opt_rendererOverrides) {
+      this.overrides = opt_rendererOverrides;
+      Object.assign(this.constants_, opt_rendererOverrides);
+    }
+    this.constants_.setTheme(theme);
+    this.constants_.init();
+  }
+
+  /**
+   * Create any DOM elements that this renderer needs.
+   * @param svg The root of the workspace's SVG.
+   * @param theme The workspace theme object.
+   * @internal
+   */
+  createDom(svg: SVGElement, theme: Theme) {
+    this.constants_.createDom(
+        svg, this.name + '-' + theme.name,
+        '.' + this.getClassName() + '.' + theme.getClassName());
+  }
+
+  /**
+   * Refresh the renderer after a theme change.
+   * @param svg The root of the workspace's SVG.
+   * @param theme The workspace theme object.
+   * @internal
+   */
+  refreshDom(svg: SVGElement, theme: Theme) {
+    const previousConstants = this.getConstants();
+    previousConstants.dispose();
+    this.constants_ = this.makeConstants_();
+    if (this.overrides) {
+      Object.assign(this.constants_, this.overrides);
+    }
+    // Ensure the constant provider's random identifier does not change.
+    this.constants_.randomIdentifier = previousConstants.randomIdentifier;
+    this.constants_.setTheme(theme);
+    this.constants_.init();
+    this.createDom(svg, theme);
+  }
+
+  /**
+   * Dispose of this renderer.
+   * Delete all DOM elements that this renderer and its constants created.
+   * @internal
+   */
+  dispose() {
+    if (this.constants_) {
+      this.constants_.dispose();
+    }
+  }
+
+  /**
+   * Create a new instance of the renderer's constant provider.
+   * @return The constant provider.
+   */
+  protected makeConstants_(): ConstantProvider {
+    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 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 makeDrawer_(block: BlockSvg, info: RenderInfo): Drawer {
+    return new Drawer(block, info);
+  }
+
+  /**
+   * Create a new instance of the renderer's debugger.
+   * @return The renderer debugger.
+   * @suppress {strictModuleDepCheck} Debug renderer only included in
+   * playground.
+   */
+  protected makeDebugger_(): Debug {
+    return new Debug(this.getConstants());
+  }
+
+  /**
+   * Create a new instance of the renderer's marker drawer.
+   * @param workspace The workspace the marker belongs to.
+   * @param marker The marker.
+   * @return The object in charge of drawing the marker.
+   * @internal
+   */
+  makeMarkerDrawer(workspace: WorkspaceSvg, marker: Marker): MarkerSvg {
+    return new MarkerSvg(workspace, this.getConstants(), marker);
+  }
+
+  /**
+   * 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): IPathObject {
+    return new PathObject(root, style, (this.constants_));
+  }
+
+  /**
+   * Get the current renderer's constant provider.  We assume that when this is
+   * called, the renderer has already been initialized.
+   * @return The constant provider.
+   * @internal
+   */
+  getConstants(): ConstantProvider {
+    return this.constants_;
+  }
+
+  /**
+   * Determine whether or not to highlight a connection.
+   * @param _conn The connection to determine whether or not to highlight.
+   * @return True if we should highlight the connection.
+   * @internal
+   */
+  shouldHighlightConnection(_conn: Connection): boolean {
+    return true;
+  }
+
+  /**
+   * Checks if an orphaned block can connect to the "end" of the topBlock's
+   * block-clump. If the clump is a row the end is the last input. If the clump
+   * is a stack, the end is the last next connection. If the clump is neither,
+   * then this returns false.
+   * @param topBlock The top block of the block clump we want to try and connect
+   *     to.
+   * @param orphanBlock The orphan block that wants to find a home.
+   * @param localType The type of the connection being dragged.
+   * @return Whether there is a home for the orphan or not.
+   * @internal
+   */
+  orphanCanConnectAtEnd(
+      topBlock: BlockSvg, orphanBlock: BlockSvg, localType: number): boolean {
+    const orphanConnection = localType === ConnectionType.OUTPUT_VALUE ?
+        orphanBlock.outputConnection :
+        orphanBlock.previousConnection;
+    return !!Connection.getConnectionForOrphanedConnection(
+        topBlock as Block, orphanConnection as Connection);
+  }
+
+  /**
+   * Chooses a connection preview method based on the available connection, the
+   * current dragged connection, and the block being dragged.
+   * @param closest The available connection.
+   * @param local The connection currently being dragged.
+   * @param topBlock The block currently being dragged.
+   * @return The preview type to display.
+   * @internal
+   */
+  getConnectionPreviewMethod(
+      closest: RenderedConnection, local: RenderedConnection,
+      topBlock: BlockSvg): PreviewType {
+    if (local.type === ConnectionType.OUTPUT_VALUE ||
+        local.type === ConnectionType.PREVIOUS_STATEMENT) {
+      if (!closest.isConnected() ||
+          this.orphanCanConnectAtEnd(
+              topBlock, closest.targetBlock() as BlockSvg, local.type)) {
+        return InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
+      }
+      return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
+    }
+
+    return InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
+  }
+
+  /**
+   * Render the block.
+   * @param block The block to render.
+   * @internal
+   */
+  render(block: BlockSvg) {
+    if (debug.isDebuggerEnabled() && !block.renderingDebugger) {
+      block.renderingDebugger = this.makeDebugger_();
+    }
+    const info = this.makeRenderInfo_(block);
+    info.measure();
+    this.makeDrawer_(block, info).draw();
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ConstantProvider as BaseConstantProvider } from '../common/constants.js';
+/**
+ * An object that provides constants for rendering blocks in Geras mode.
+ * @alias Blockly.geras.ConstantProvider
+ */
+export declare class ConstantProvider extends BaseConstantProvider {
+    FIELD_TEXT_BASELINE_CENTER: boolean;
+    DARK_PATH_OFFSET: number;
+    /**
+     * The maximum width of a bottom row that follows a statement input and has
+     * inputs inline.
+     */
+    MAX_BOTTOM_WIDTH: number;
+    STATEMENT_BOTTOM_SPACER: any;
+    /** @internal */
+    constructor();
+    getCSS_(selector: string): string[];
+}

package/core/renderers/geras/constants.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview An object that provides constants for rendering blocks in Geras
+ * mode.
+ */
+
+/**
+ * An object that provides constants for rendering blocks in Geras
+ * mode.
+ * @class
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.ConstantProvider');
+
+import {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
+
+
+/**
+ * An object that provides constants for rendering blocks in Geras mode.
+ * @alias Blockly.geras.ConstantProvider
+ */
+export class ConstantProvider extends BaseConstantProvider {
+  override FIELD_TEXT_BASELINE_CENTER = false;
+
+  // The dark/shadow path in classic rendering is the same as the normal block
+  // path, but translated down one and right one.
+  DARK_PATH_OFFSET = 1;
+
+  /**
+   * The maximum width of a bottom row that follows a statement input and has
+   * inputs inline.
+   */
+  MAX_BOTTOM_WIDTH = 30;
+  override STATEMENT_BOTTOM_SPACER: AnyDuringMigration;
+
+  /** @internal */
+  constructor() {
+    super();
+
+    this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT / 2;
+  }
+
+  override getCSS_(selector: string) {
+    return super.getCSS_(selector)
+        .concat(/* eslint-enable indent */
+                [
+                  /* eslint-disable indent */
+                  // Insertion marker.
+                  selector + ' .blocklyInsertionMarker>.blocklyPathLight,',
+                  selector + ' .blocklyInsertionMarker>.blocklyPathDark {',
+                  'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+                  'stroke: none;',
+                  '}',
+                ]);
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @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 { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import type { RenderInfo } from './info.js';
+import type { InlineInput } from './measurables/inline_input.js';
+/**
+ * An object that draws a block based on the given rendering information.
+ * @alias Blockly.geras.Drawer
+ */
+export declare class Drawer extends BaseDrawer {
+    highlighter_: any;
+    constants_: ConstantProvider;
+    /**
+     * @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;
+    drawTop_(): void;
+    drawJaggedEdge_(row: Row): void;
+    drawValueInput_(row: Row): void;
+    drawStatementInput_(row: Row): void;
+    drawRightSideRow_(row: Row): void;
+    drawBottom_(): void;
+    /**
+     * Add steps for the left side of the block, which may include an output
+     * connection
+     */
+    protected drawLeft_(): void;
+    drawInlineInput_(input: InlineInput): void;
+    positionInlineInputConnection_(input: InlineInput): void;
+    positionStatementInputConnection_(row: Row): void;
+    positionExternalValueConnection_(row: Row): void;
+    positionNextConnection_(): void;
+}

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

@@ -7,61 +7,54 @@
 /**
  * @fileoverview Renderer that preserves the look and feel of Blockly pre-2019.
  */
-'use strict';
 
 /**
  * Renderer that preserves the look and feel of Blockly pre-2019.
  * @class
  */
-goog.module('Blockly.geras.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');
-/* eslint-disable-next-line no-unused-vars */
-const {ConstantProvider} = goog.requireType('Blockly.geras.ConstantProvider');
-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');
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras.Drawer');
+
+import type {BlockSvg} from '../../block_svg.js';
+import * as svgPaths from '../../utils/svg_paths.js';
+import * as debug from '../common/debug.js';
+import {Drawer as BaseDrawer} from '../common/drawer.js';
+import type {Row} from '../measurables/row.js';
+
+import type {ConstantProvider} from './constants.js';
+import {Highlighter} from './highlighter.js';
+import type {RenderInfo} from './info.js';
+import type {InlineInput} from './measurables/inline_input.js';
+import type {PathObject} from './path_object.js';
 
 
 /**
  * An object that draws a block based on the given rendering information.
- * @extends {BaseDrawer}
  * @alias Blockly.geras.Drawer
  */
-class Drawer extends BaseDrawer {
+export class Drawer extends BaseDrawer {
+  highlighter_: AnyDuringMigration;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  override constants_!: ConstantProvider;
+
   /**
-   * @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) {
+  constructor(block: BlockSvg, info: RenderInfo) {
     super(block, info);
     // Unlike Thrasos, Geras has highlights and drop shadows.
     this.highlighter_ = new Highlighter(info);
-
-    /** @type {!ConstantProvider} */
-    this.constants_;
   }
 
-  /**
-   * @override
-   */
-  draw() {
+  override draw() {
     this.hideHiddenIcons_();
     this.drawOutline_();
     this.drawInternals_();
 
-    const pathObject =
-        /** @type {!PathObject} */ (this.block_.pathObject);
+    const pathObject = this.block_.pathObject as PathObject;
     pathObject.setPath(this.outlinePath_ + '\n' + this.inlinePath_);
     pathObject.setHighlightPath(this.highlighter_.getPath());
     if (this.info_.RTL) {
@@ -73,57 +66,39 @@ class Drawer extends BaseDrawer {
     this.recordSizeOnBlock_();
   }
 
-  /**
-   * @override
-   */
-  drawTop_() {
+  override drawTop_() {
     this.highlighter_.drawTopCorner(this.info_.topRow);
     this.highlighter_.drawRightSideRow(this.info_.topRow);
 
     super.drawTop_();
   }
 
-  /**
-   * @override
-   */
-  drawJaggedEdge_(row) {
+  override drawJaggedEdge_(row: Row) {
     this.highlighter_.drawJaggedEdge_(row);
 
     super.drawJaggedEdge_(row);
   }
 
-  /**
-   * @override
-   */
-  drawValueInput_(row) {
+  override drawValueInput_(row: Row) {
     this.highlighter_.drawValueInput(row);
 
     super.drawValueInput_(row);
   }
 
-  /**
-   * @override
-   */
-  drawStatementInput_(row) {
+  override drawStatementInput_(row: Row) {
     this.highlighter_.drawStatementInput(row);
 
     super.drawStatementInput_(row);
   }
 
-  /**
-   * @override
-   */
-  drawRightSideRow_(row) {
+  override drawRightSideRow_(row: Row) {
     this.highlighter_.drawRightSideRow(row);
 
     this.outlinePath_ += svgPaths.lineOnAxis('H', row.xPos + row.width) +
         svgPaths.lineOnAxis('V', row.yPos + row.height);
   }
 
-  /**
-   * @override
-   */
-  drawBottom_() {
+  override drawBottom_() {
     this.highlighter_.drawBottomRow(this.info_.bottomRow);
 
     super.drawBottom_();
@@ -132,28 +107,20 @@ class Drawer extends BaseDrawer {
   /**
    * Add steps for the left side of the block, which may include an output
    * connection
-   * @protected
-   * @override
    */
-  drawLeft_() {
+  protected override drawLeft_() {
     this.highlighter_.drawLeft();
 
     super.drawLeft_();
   }
 
-  /**
-   * @override
-   */
-  drawInlineInput_(input) {
-    this.highlighter_.drawInlineInput(/** @type {!InlineInput} */ (input));
+  override drawInlineInput_(input: InlineInput) {
+    this.highlighter_.drawInlineInput(input as InlineInput);
 
     super.drawInlineInput_(input);
   }
 
-  /**
-   * @override
-   */
-  positionInlineInputConnection_(input) {
+  override positionInlineInputConnection_(input: InlineInput) {
     const yPos = input.centerline - input.height / 2;
     // Move the connection.
     if (input.connectionModel) {
@@ -169,10 +136,7 @@ class Drawer extends BaseDrawer {
     }
   }
 
-  /**
-   * @override
-   */
-  positionStatementInputConnection_(row) {
+  override positionStatementInputConnection_(row: Row) {
     const input = row.getLastInput();
     if (input.connectionModel) {
       let connX = row.xPos + row.statementEdge + input.notchOffset;
@@ -186,10 +150,7 @@ class Drawer extends BaseDrawer {
     }
   }
 
-  /**
-   * @override
-   */
-  positionExternalValueConnection_(row) {
+  override positionExternalValueConnection_(row: Row) {
     const input = row.getLastInput();
     if (input.connectionModel) {
       let connX = row.xPos + row.width + this.constants_.DARK_PATH_OFFSET;
@@ -200,21 +161,16 @@ class Drawer extends BaseDrawer {
     }
   }
 
-  /**
-   * @override
-   */
-  positionNextConnection_() {
+  override positionNextConnection_() {
     const bottomRow = this.info_.bottomRow;
 
     if (bottomRow.connection) {
       const connInfo = bottomRow.connection;
       const x = connInfo.xPos;  // Already contains info about startX.
       const connX =
-          (this.info_.RTL ? -x : x) + (this.constants_.DARK_PATH_OFFSET / 2);
+          (this.info_.RTL ? -x : x) + this.constants_.DARK_PATH_OFFSET / 2;
       connInfo.connectionModel.setOffsetInBlock(
           connX, bottomRow.baseline + this.constants_.DARK_PATH_OFFSET);
     }
   }
 }
-
-exports.Drawer = Drawer;

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

@@ -0,0 +1,11 @@
+/** @fileoverview Re-exports of Blockly.geras.* modules. */
+import { ConstantProvider } from './constants.js';
+import { Drawer } from './drawer.js';
+import { HighlightConstantProvider } from './highlight_constants.js';
+import { Highlighter } from './highlighter.js';
+import { RenderInfo } from './info.js';
+import { InlineInput } from './measurables/inline_input.js';
+import { StatementInput } from './measurables/statement_input.js';
+import { PathObject } from './path_object.js';
+import { Renderer } from './renderer.js';
+export { ConstantProvider, Drawer, HighlightConstantProvider, Highlighter, InlineInput, PathObject, Renderer, RenderInfo, StatementInput };

package/core/renderers/geras/geras.ts

@@ -0,0 +1,37 @@
+/** @fileoverview Re-exports of Blockly.geras.* modules. */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Re-exports of Blockly.geras.* modules.
+ * @namespace Blockly.geras
+ */
+import * as goog from '../../../closure/goog/goog.js';
+goog.declareModuleId('Blockly.geras');
+
+import {ConstantProvider} from './constants.js';
+import {Drawer} from './drawer.js';
+import {HighlightConstantProvider} from './highlight_constants.js';
+import {Highlighter} from './highlighter.js';
+import {RenderInfo} from './info.js';
+import {InlineInput} from './measurables/inline_input.js';
+import {StatementInput} from './measurables/statement_input.js';
+import {PathObject} from './path_object.js';
+import {Renderer} from './renderer.js';
+
+
+export {
+  ConstantProvider,
+  Drawer,
+  HighlightConstantProvider,
+  Highlighter,
+  InlineInput,
+  PathObject,
+  Renderer,
+  RenderInfo,
+  StatementInput
+};