blockly 9.0.0-beta.0 → 9.0.0-beta.1

package/core/renderers/geras/drawer.ts

@@ -1,176 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Renderer that preserves the look and feel of Blockly pre-2019.
- */
-
-/**
- * Renderer that preserves the look and feel of Blockly pre-2019.
- * @class
- */
-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.
- * @alias Blockly.geras.Drawer
- */
-export class Drawer extends BaseDrawer {
-  highlighter_: AnyDuringMigration;
-  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
-  override 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) {
-    super(block, info);
-    // Unlike Thrasos, Geras has highlights and drop shadows.
-    this.highlighter_ = new Highlighter(info);
-  }
-
-  override draw() {
-    this.hideHiddenIcons_();
-    this.drawOutline_();
-    this.drawInternals_();
-
-    const pathObject = this.block_.pathObject as 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_();
-  }
-
-  override drawTop_() {
-    this.highlighter_.drawTopCorner(this.info_.topRow);
-    this.highlighter_.drawRightSideRow(this.info_.topRow);
-
-    super.drawTop_();
-  }
-
-  override drawJaggedEdge_(row: Row) {
-    this.highlighter_.drawJaggedEdge_(row);
-
-    super.drawJaggedEdge_(row);
-  }
-
-  override drawValueInput_(row: Row) {
-    this.highlighter_.drawValueInput(row);
-
-    super.drawValueInput_(row);
-  }
-
-  override drawStatementInput_(row: Row) {
-    this.highlighter_.drawStatementInput(row);
-
-    super.drawStatementInput_(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_() {
-    this.highlighter_.drawBottomRow(this.info_.bottomRow);
-
-    super.drawBottom_();
-  }
-
-  /**
-   * Add steps for the left side of the block, which may include an output
-   * connection
-   */
-  protected override drawLeft_() {
-    this.highlighter_.drawLeft();
-
-    super.drawLeft_();
-  }
-
-  override drawInlineInput_(input: InlineInput) {
-    this.highlighter_.drawInlineInput(input as InlineInput);
-
-    super.drawInlineInput_(input);
-  }
-
-  override positionInlineInputConnection_(input: InlineInput) {
-    const yPos = input.centerline - input.height / 2;
-    // Move the connection.
-    if (input.connectionModel) {
-      // xPos already contains info about startX
-      let connX =
-          input.xPos + input.connectionWidth + this.constants_.DARK_PATH_OFFSET;
-      if (this.info_.RTL) {
-        connX *= -1;
-      }
-      input.connectionModel.setOffsetInBlock(
-          connX,
-          yPos + input.connectionOffsetY + this.constants_.DARK_PATH_OFFSET);
-    }
-  }
-
-  override positionStatementInputConnection_(row: Row) {
-    const input = row.getLastInput();
-    if (input.connectionModel) {
-      let connX = row.xPos + row.statementEdge + input.notchOffset;
-      if (this.info_.RTL) {
-        connX *= -1;
-      } else {
-        connX += this.constants_.DARK_PATH_OFFSET;
-      }
-      input.connectionModel.setOffsetInBlock(
-          connX, row.yPos + this.constants_.DARK_PATH_OFFSET);
-    }
-  }
-
-  override positionExternalValueConnection_(row: Row) {
-    const input = row.getLastInput();
-    if (input.connectionModel) {
-      let connX = row.xPos + row.width + this.constants_.DARK_PATH_OFFSET;
-      if (this.info_.RTL) {
-        connX *= -1;
-      }
-      input.connectionModel.setOffsetInBlock(connX, row.yPos);
-    }
-  }
-
-  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;
-      connInfo.connectionModel.setOffsetInBlock(
-          connX, bottomRow.baseline + this.constants_.DARK_PATH_OFFSET);
-    }
-  }
-}

package/core/renderers/geras/geras.ts

@@ -1,37 +0,0 @@
-/** @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
-};

package/core/renderers/geras/highlight_constants.ts

@@ -1,337 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Objects for rendering highlights on blocks.
- */
-
-/**
- * Objects for rendering highlights on blocks.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.geras.HighlightConstantProvider');
-
-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
- * programmatically.  Others, especially on curves, are just made out of piles
- * of constants and are hard to tweak.
- * @alias Blockly.geras.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 constants The rendering constants provider.
-   * @internal
-   */
-  constructor(constants: ConstantProvider) {
-    /** The renderer's constant provider. */
-    this.constantProvider = constants;
-
-    /**
-     * The start point, which is offset in both X and Y, as an SVG path chunk.
-     * @internal
-     */
-    this.START_POINT = svgPaths.moveBy(this.OFFSET, this.OFFSET);
-  }
-
-  /**
-   * Initialize shape objects based on the constants set in the constructor.
-   * @internal
-   */
-  init() {
-    /**
-     * An object containing sizing and path information about inside corner
-     * highlights.
-     */
-    this.INSIDE_CORNER = this.makeInsideCorner();
-
-    /**
-     * An object containing sizing and path information about outside corner
-     * highlights.
-     */
-    this.OUTSIDE_CORNER = this.makeOutsideCorner();
-
-    /**
-     * An object containing sizing and path information about puzzle tab
-     * highlights.
-     */
-    this.PUZZLE_TAB = this.makePuzzleTab();
-
-    /**
-     * An object containing sizing and path information about notch highlights.
-     */
-    this.NOTCH = this.makeNotch();
-
-    /**
-     * An object containing sizing and path information about highlights for
-     * collapsed block indicators.
-     */
-    this.JAGGED_TEETH = this.makeJaggedTeeth();
-
-    /**
-     * An object containing sizing and path information about start hat
-     * highlights.
-     */
-    this.START_HAT = this.makeStartHat();
-  }
-
-  /**
-   * @return An object containing sizing and path information about inside
-   *     corner highlights.
-   * @internal
-   */
-  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 distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset;
-
-    const pathTopRtl = svgPaths.moveBy(distance45outside, distance45outside) +
-        svgPaths.arc(
-            'a', '0 0,0', radius,
-            svgPaths.point(
-                -distance45outside - offset, radius - distance45outside));
-
-    const pathBottomRtl = svgPaths.arc(
-        'a', '0 0,0', radius + offset,
-        svgPaths.point(radius + offset, radius + offset));
-
-    const pathBottomLtr =
-        svgPaths.moveBy(distance45outside, -distance45outside) +
-        svgPaths.arc(
-            'a', '0 0,0', radius + offset,
-            svgPaths.point(
-                radius - distance45outside, distance45outside + offset));
-
-    return {
-      width: radius + offset,
-      height: radius,
-      pathTop(rtl) {
-        return rtl ? pathTopRtl : '';
-      },
-      pathBottom(rtl) {
-        return rtl ? pathBottomRtl : pathBottomLtr;
-      },
-    };
-  }
-
-  /**
-   * @return An object containing sizing and path information about outside
-   *     corner highlights.
-   * @internal
-   */
-  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 distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;
-
-    const topLeftStartX = distance45inside;
-    const topLeftStartY = distance45inside;
-    const topLeftCornerHighlightRtl =
-        svgPaths.moveBy(topLeftStartX, topLeftStartY) +
-        svgPaths.arc(
-            'a', '0 0,1', radius - offset,
-            svgPaths.point(radius - topLeftStartX, -topLeftStartY + offset));
-    /**
-     * SVG path for drawing the highlight on the rounded top-left corner.
-     */
-    const topLeftCornerHighlightLtr = svgPaths.moveBy(offset, radius) +
-        svgPaths.arc(
-            'a', '0 0,1', radius - offset,
-            svgPaths.point(radius, -radius + offset));
-
-    const bottomLeftStartX = distance45inside;
-    const bottomLeftStartY = -distance45inside;
-    const bottomLeftPath = svgPaths.moveBy(bottomLeftStartX, bottomLeftStartY) +
-        svgPaths.arc(
-            'a', '0 0,1', radius - offset,
-            svgPaths.point(
-                -bottomLeftStartX + offset, -bottomLeftStartY - radius));
-
-    return {
-      height: radius,
-      topLeft(rtl) {
-        return rtl ? topLeftCornerHighlightRtl : topLeftCornerHighlightLtr;
-      },
-      bottomLeft() {
-        return bottomLeftPath;
-      },
-    };
-  }
-
-  /**
-   * @return An object containing sizing and path information about puzzle tab
-   *     highlights.
-   * @internal
-   */
-  makePuzzleTab(): PuzzleTab {
-    const width = this.constantProvider.TAB_WIDTH;
-    const height = this.constantProvider.TAB_HEIGHT;
-
-    // This is how much of the vertical block edge is actually drawn by the
-    // puzzle tab.
-    const verticalOverlap = 2.5;
-
-    const highlightRtlUp =
-        svgPaths.moveBy(-2, -height + verticalOverlap + 0.9) +
-        svgPaths.lineTo(width * -0.45, -2.1);
-
-    const highlightRtlDown = svgPaths.lineOnAxis('v', verticalOverlap) +
-        svgPaths.moveBy(-width * 0.97, 2.5) +
-        svgPaths.curve(
-            'q',
-            [
-              svgPaths.point(-width * 0.05, 10),
-              svgPaths.point(width * 0.3, 9.5),
-            ]) +
-        svgPaths.moveBy(width * 0.67, -1.9) +
-        svgPaths.lineOnAxis('v', verticalOverlap);
-
-    const highlightLtrUp = svgPaths.lineOnAxis('v', -1.5) +
-        svgPaths.moveBy(width * -0.92, -0.5) +
-        svgPaths.curve(
-            'q',
-            [svgPaths.point(width * -0.19, -5.5), svgPaths.point(0, -11)]) +
-        svgPaths.moveBy(width * 0.92, 1);
-
-    const highlightLtrDown =
-        svgPaths.moveBy(-5, height - 0.7) + svgPaths.lineTo(width * 0.46, -2.1);
-
-    return {
-      width,
-      height,
-      pathUp(rtl) {
-        return rtl ? highlightRtlUp : highlightLtrUp;
-      },
-      pathDown(rtl) {
-        return rtl ? highlightRtlDown : highlightLtrDown;
-      },
-    };
-  }
-
-  /**
-   * @return An object containing sizing and path information about notch
-   *     highlights.
-   * @internal
-   */
-  makeNotch(): Notch {
-    // This is only for the previous connection.
-    const pathLeft = svgPaths.lineOnAxis('h', this.OFFSET) +
-        this.constantProvider.NOTCH.pathLeft;
-    return {pathLeft};
-  }
-
-  /**
-   * @return An object containing sizing and path information about collapsed
-   *     block edge highlights.
-   * @internal
-   */
-  makeJaggedTeeth(): JaggedTeeth {
-    const pathLeft = svgPaths.lineTo(5.1, 2.6) + svgPaths.moveBy(-10.2, 6.8) +
-        svgPaths.lineTo(5.1, 2.6);
-    return {pathLeft, height: 12, width: 10.2};
-  }
-
-  /**
-   * @return An object containing sizing and path information about start
-   *     highlights.
-   * @internal
-   */
-  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),
-      svgPaths.point(57.2, -0.5),
-      svgPaths.point(75, 8.7),
-    ]);
-
-    const pathLtr = svgPaths.curve('c', [
-      svgPaths.point(17.8, -9.2),
-      svgPaths.point(45.3, -14.9),
-      svgPaths.point(75, -8.7),
-    ]) + svgPaths.moveTo(100.5, hatHeight + 0.5);
-    return {
-      path(rtl) {
-        return rtl ? pathRtl : pathLtr;
-      },
-    };
-  }
-}