scratch-blocks 1.1.206 → 2.0.0-beta.1

package/blockly-rc/core/renderers/zelos/marker_svg.ts

@@ -0,0 +1,145 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.MarkerSvg
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {ASTNode} from '../../keyboard_nav/ast_node.js';
+import type {Marker} from '../../keyboard_nav/marker.js';
+import type {RenderedConnection} from '../../rendered_connection.js';
+import * as dom from '../../utils/dom.js';
+import {Svg} from '../../utils/svg.js';
+import type {WorkspaceSvg} from '../../workspace_svg.js';
+import type {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
+import {MarkerSvg as BaseMarkerSvg} from '../common/marker_svg.js';
+
+import type {ConstantProvider as ZelosConstantProvider} from './constants.js';
+
+/**
+ * Class to draw a marker.
+ */
+export class MarkerSvg extends BaseMarkerSvg {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  constants_!: ZelosConstantProvider;
+
+  private markerCircle: SVGCircleElement | null = null;
+
+  /**
+   * @param workspace The workspace the marker belongs to.
+   * @param constants The constants for the renderer.
+   * @param marker The marker to draw.
+   */
+  constructor(
+    workspace: WorkspaceSvg,
+    constants: BaseConstantProvider,
+    marker: Marker,
+  ) {
+    super(workspace, constants, marker);
+  }
+
+  /**
+   * Position and display the marker for an input or an output connection.
+   *
+   * @param curNode The node to draw the marker for.
+   */
+  private showWithInputOutput(curNode: ASTNode) {
+    const block = curNode.getSourceBlock() as BlockSvg;
+    const connection = curNode.getLocation() as RenderedConnection;
+    const offsetInBlock = connection.getOffsetInBlock();
+
+    this.positionCircle(offsetInBlock.x, offsetInBlock.y);
+    this.setParent_(block);
+    this.showCurrent_();
+  }
+
+  override showWithOutput_(curNode: ASTNode) {
+    this.showWithInputOutput(curNode);
+  }
+
+  override showWithInput_(curNode: ASTNode) {
+    this.showWithInputOutput(curNode);
+  }
+
+  /**
+   * Draw a rectangle around the block.
+   *
+   * @param curNode The current node of the marker.
+   */
+  override showWithBlock_(curNode: ASTNode) {
+    const block = curNode.getLocation() as BlockSvg;
+
+    // Gets the height and width of entire stack.
+    const heightWidth = block.getHeightWidth();
+    // Add padding so that being on a stack looks different than being on a
+    // block.
+    this.positionRect_(0, 0, heightWidth.width, heightWidth.height);
+    this.setParent_(block);
+    this.showCurrent_();
+  }
+
+  /**
+   * Position the circle we use for input and output connections.
+   *
+   * @param x The x position of the circle.
+   * @param y The y position of the circle.
+   */
+  private positionCircle(x: number, y: number) {
+    this.markerCircle?.setAttribute('cx', `${x}`);
+    this.markerCircle?.setAttribute('cy', `${y}`);
+    this.currentMarkerSvg = this.markerCircle;
+  }
+
+  override hide() {
+    super.hide();
+    if (this.markerCircle) {
+      this.markerCircle.style.display = 'none';
+    }
+  }
+
+  override createDomInternal_() {
+    /* clang-format off */
+    /* This markup will be generated and added to the .svgGroup_:
+        <g>
+          <rect width="100" height="5">
+            <animate attributeType="XML" attributeName="fill" dur="1s"
+              values="transparent;transparent;#fff;transparent" repeatCount="indefinite" />
+          </rect>
+        </g>
+        */
+    /* clang-format on */
+    super.createDomInternal_();
+
+    this.markerCircle = dom.createSvgElement(
+      Svg.CIRCLE,
+      {
+        'r': this.constants_.CURSOR_RADIUS,
+        'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
+      },
+      this.markerSvg_,
+    );
+    this.hide();
+
+    // Markers and stack cursors don't blink.
+    if (this.isCursor()) {
+      const blinkProperties = this.getBlinkProperties_();
+      dom.createSvgElement(Svg.ANIMATE, blinkProperties, this.markerCircle!);
+    }
+
+    return this.markerSvg_!;
+  }
+
+  override applyColour_(curNode: ASTNode) {
+    super.applyColour_(curNode);
+
+    this.markerCircle?.setAttribute('fill', this.colour_);
+    this.markerCircle?.setAttribute('stroke', this.colour_);
+
+    if (this.isCursor()) {
+      const values = this.colour_ + ';transparent;transparent;';
+      this.markerCircle?.firstElementChild!.setAttribute('values', values);
+    }
+  }
+}

package/blockly-rc/core/renderers/zelos/measurables/bottom_row.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.BottomRow
+
+import type {BlockSvg} from '../../../block_svg.js';
+import type {ConstantProvider} from '../../../renderers/common/constants.js';
+import {BottomRow as BaseBottomRow} from '../../../renderers/measurables/bottom_row.js';
+
+/**
+ * An object containing information about what elements are in the bottom row of
+ * a block as well as spacing information for the top row.
+ * Elements in a bottom row can consist of corners, spacers and next
+ * connections.
+ */
+export class BottomRow extends BaseBottomRow {
+  /**
+   * @param constants The rendering constants provider.
+   */
+  constructor(constants: ConstantProvider) {
+    super(constants);
+  }
+
+  override endsWithElemSpacer() {
+    return false;
+  }
+
+  /** Render a round corner unless the block has an output connection. */
+  override hasLeftSquareCorner(block: BlockSvg) {
+    return !!block.outputConnection;
+  }
+
+  /** Render a round corner unless the block has an output connection. */
+  override hasRightSquareCorner(block: BlockSvg) {
+    return (
+      !!block.outputConnection &&
+      !block.statementInputCount &&
+      !block.nextConnection
+    );
+  }
+}

package/blockly-rc/core/renderers/zelos/measurables/inputs.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.StatementInput
+
+/* eslint-disable-next-line no-unused-vars */
+import type {Input} from '../../../inputs/input.js';
+import type {ConstantProvider} from '../../../renderers/common/constants.js';
+import {StatementInput as BaseStatementInput} from '../../../renderers/measurables/statement_input.js';
+
+/**
+ * An object containing information about the space a statement input takes up
+ * during rendering.
+ */
+export class StatementInput extends BaseStatementInput {
+  connectedBottomNextConnection = false;
+
+  /**
+   * @param constants The rendering constants provider.
+   * @param input The statement input to measure and store information for.
+   */
+  constructor(constants: ConstantProvider, input: Input) {
+    super(constants, input);
+
+    if (this.connectedBlock) {
+      // Find the bottom-most connected block in the stack.
+      let block = this.connectedBlock;
+      let nextBlock;
+      while ((nextBlock = block.getNextBlock())) {
+        block = nextBlock;
+      }
+      if (!block.nextConnection) {
+        this.height = this.connectedBlockHeight;
+        this.connectedBottomNextConnection = true;
+      }
+    }
+  }
+}

package/blockly-rc/core/renderers/zelos/measurables/row_elements.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.RightConnectionShape
+
+import type {ConstantProvider} from '../../../renderers/common/constants.js';
+import {Measurable} from '../../../renderers/measurables/base.js';
+import {Types} from '../../../renderers/measurables/types.js';
+
+/**
+ * An object containing information about the space a right connection shape
+ * takes up during rendering.
+ */
+export class RightConnectionShape extends Measurable {
+  // Size is dynamic
+  override height = 0;
+  override width = 0;
+
+  /**
+   * @param constants The rendering constants provider.
+   */
+  constructor(constants: ConstantProvider) {
+    super(constants);
+    this.type |= Types.getType('RIGHT_CONNECTION');
+  }
+}

package/blockly-rc/core/renderers/zelos/measurables/top_row.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.TopRow
+
+import type {BlockSvg} from '../../../block_svg.js';
+import type {ConstantProvider} from '../../../renderers/common/constants.js';
+import {TopRow as BaseTopRow} from '../../../renderers/measurables/top_row.js';
+
+/**
+ * An object containing information about what elements are in the top row of a
+ * block as well as sizing information for the top row.
+ * Elements in a top row can consist of corners, hats, spacers, and previous
+ * connections.
+ * After this constructor is called, the row will contain all non-spacer
+ * elements it needs.
+ */
+export class TopRow extends BaseTopRow {
+  /**
+   * @param constants The rendering constants provider.
+   */
+  constructor(constants: ConstantProvider) {
+    super(constants);
+  }
+
+  override endsWithElemSpacer() {
+    return false;
+  }
+
+  /** Render a round corner unless the block has an output connection. */
+  override hasLeftSquareCorner(block: BlockSvg) {
+    const hasHat =
+      (block.hat ? block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
+      !block.outputConnection &&
+      !block.previousConnection;
+    return !!block.outputConnection || hasHat;
+  }
+
+  /** Render a round corner unless the block has an output connection. */
+  override hasRightSquareCorner(block: BlockSvg) {
+    return (
+      !!block.outputConnection &&
+      !block.statementInputCount &&
+      !block.nextConnection
+    );
+  }
+}

package/blockly-rc/core/renderers/zelos/path_object.ts

@@ -0,0 +1,209 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.PathObject
+
+import type {BlockSvg} from '../../block_svg.js';
+import type {Connection} from '../../connection.js';
+import type {BlockStyle} from '../../theme.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';
+
+/**
+ * An object that handles creating and setting each of the SVG elements
+ * used by the renderer.
+ */
+export class PathObject extends BasePathObject {
+  /** The selected path of the block. */
+  private svgPathSelected: SVGElement | null = null;
+
+  /** The outline paths on the block. */
+  private readonly outlines = new Map<string, SVGElement>();
+
+  /**
+   * A set used to determine which outlines were used during a draw pass.  The
+   * set is initialized with a reference to all the outlines in
+   * `this.outlines`. Every time we use an outline during the draw pass, the
+   * reference is removed from this set.
+   */
+  private remainingOutlines = new Set<string>();
+
+  /**
+   * The type of block's output connection shape.  This is set when a block
+   * with an output connection is drawn.
+   */
+  outputShapeType: number | null = null;
+
+  public override constants: ConstantProvider;
+
+  /**
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @param constants The renderer's constants.
+   */
+  constructor(
+    root: SVGElement,
+    style: BlockStyle,
+    constants: ConstantProvider,
+  ) {
+    super(root, style, constants);
+
+    this.constants = constants;
+  }
+
+  override setPath(pathString: string) {
+    super.setPath(pathString);
+    if (this.svgPathSelected) {
+      this.svgPathSelected.setAttribute('d', pathString);
+    }
+  }
+
+  override applyColour(block: BlockSvg) {
+    super.applyColour(block);
+    // Set shadow stroke colour.
+    const parent = block.getParent();
+    if (block.isShadow() && parent) {
+      this.svgPath.setAttribute('stroke', parent.style.colourTertiary);
+    }
+
+    // Apply colour to outlines.
+    for (const outline of this.outlines.values()) {
+      outline.setAttribute('fill', this.style.colourTertiary);
+    }
+  }
+
+  override flipRTL() {
+    super.flipRTL();
+    // Mirror each input outline path.
+    for (const outline of this.outlines.values()) {
+      outline.setAttribute('transform', 'scale(-1 1)');
+    }
+  }
+
+  override updateSelected(enable: boolean) {
+    this.setClass_('blocklySelected', enable);
+    if (enable) {
+      if (!this.svgPathSelected) {
+        this.svgPathSelected = this.svgPath.cloneNode(true) as SVGElement;
+        this.svgPathSelected.setAttribute('fill', 'none');
+        this.svgPathSelected.setAttribute(
+          'filter',
+          'url(#' + this.constants.selectedGlowFilterId + ')',
+        );
+        this.svgRoot.appendChild(this.svgPathSelected);
+      }
+    } else {
+      if (this.svgPathSelected) {
+        this.svgRoot.removeChild(this.svgPathSelected);
+        this.svgPathSelected = null;
+      }
+    }
+  }
+
+  override updateReplacementFade(enable: boolean) {
+    this.setClass_('blocklyReplaceable', enable);
+    if (enable) {
+      this.svgPath.setAttribute(
+        'filter',
+        'url(#' + this.constants.replacementGlowFilterId + ')',
+      );
+    } else {
+      this.svgPath.removeAttribute('filter');
+    }
+  }
+
+  override updateShapeForInputHighlight(conn: Connection, enable: boolean) {
+    const name = conn.getParentInput()!.name;
+    const outlinePath = this.getOutlinePath(name);
+    if (!outlinePath) {
+      return;
+    }
+    if (enable) {
+      outlinePath.setAttribute(
+        'filter',
+        'url(#' + this.constants.replacementGlowFilterId + ')',
+      );
+    } else {
+      outlinePath.removeAttribute('filter');
+    }
+  }
+
+  /**
+   * Method that's called when the drawer is about to draw the block.
+   */
+  beginDrawing() {
+    this.remainingOutlines.clear();
+    for (const key of this.outlines.keys()) {
+      this.remainingOutlines.add(key);
+    }
+  }
+
+  /**
+   * Method that's called when the drawer is done drawing.
+   */
+  endDrawing() {
+    // Go through all remaining outlines that were not used this draw pass, and
+    // remove them.
+    if (this.remainingOutlines.size) {
+      for (const key of this.remainingOutlines) {
+        this.removeOutlinePath(key);
+      }
+    }
+    this.remainingOutlines.clear();
+  }
+
+  /**
+   * Set the path generated by the renderer for an outline path on the
+   * respective outline path SVG element.
+   *
+   * @param name The input name.
+   * @param pathString The path.
+   */
+  setOutlinePath(name: string, pathString: string) {
+    const outline = this.getOutlinePath(name);
+    outline.setAttribute('d', pathString);
+    outline.setAttribute('fill', this.style.colourTertiary);
+  }
+
+  /**
+   * Create's an outline path for the specified input.
+   *
+   * @param name The input name.
+   * @returns The SVG outline path.
+   */
+  private getOutlinePath(name: string): SVGElement {
+    if (!this.outlines.has(name)) {
+      this.outlines.set(
+        name,
+        dom.createSvgElement(
+          Svg.PATH,
+          {
+            'class': 'blocklyOutlinePath', // IE doesn't like paths without the
+            // data definition, set empty
+            // default
+            'd': '',
+          },
+          this.svgRoot,
+        ),
+      );
+    }
+    this.remainingOutlines.delete(name);
+    return this.outlines.get(name)!;
+  }
+
+  /**
+   * Remove an outline path that is associated with the specified input.
+   *
+   * @param name The input name.
+   */
+  private removeOutlinePath(name: string) {
+    this.outlines.get(name)?.parentNode?.removeChild(this.outlines.get(name)!);
+    this.outlines.delete(name);
+  }
+}

package/blockly-rc/core/renderers/zelos/renderer.ts

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos.Renderer
+
+import type {BlockSvg} from '../../block_svg.js';
+import {ConnectionType} from '../../connection_type.js';
+import {InsertionMarkerManager} from '../../insertion_marker_manager.js';
+import type {Marker} from '../../keyboard_nav/marker.js';
+import type {RenderedConnection} from '../../rendered_connection.js';
+import type {BlockStyle} from '../../theme.js';
+import type {WorkspaceSvg} from '../../workspace_svg.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 {RenderInfo} from './info.js';
+import {MarkerSvg} from './marker_svg.js';
+import {PathObject} from './path_object.js';
+import * as deprecation from '../../utils/deprecation.js';
+
+/**
+ * The zelos renderer. This renderer emulates Scratch-style and MakeCode-style
+ * rendering.
+ *
+ * Zelos is the ancient Greek spirit of rivalry and emulation.
+ */
+export class Renderer extends BaseRenderer {
+  protected override constants_!: ConstantProvider;
+
+  /**
+   * @param name The renderer name.
+   */
+  constructor(name: string) {
+    super(name);
+  }
+
+  /**
+   * Create a new instance of the renderer's constant provider.
+   *
+   * @returns The constant provider.
+   */
+  protected override makeConstants_(): ConstantProvider {
+    return new ConstantProvider();
+  }
+
+  /**
+   * Create a new instance of the renderer's render info object.
+   *
+   * @param block The block to measure.
+   * @returns 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.
+   * @returns The drawer.
+   */
+  protected override makeDrawer_(
+    block: BlockSvg,
+    info: BaseRenderInfo,
+  ): Drawer {
+    return new Drawer(block, info as RenderInfo);
+  }
+
+  /**
+   * Create a new instance of the renderer's cursor drawer.
+   *
+   * @param workspace The workspace the cursor belongs to.
+   * @param marker The marker.
+   * @returns The object in charge of drawing the marker.
+   */
+  override 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.
+   * @returns The renderer path object.
+   */
+  override makePathObject(root: SVGElement, style: BlockStyle): PathObject {
+    return new PathObject(root, style, this.getConstants() as ConstantProvider);
+  }
+
+  /**
+   * Get the current renderer's constant provider.  We assume that when this is
+   * called, the renderer has already been initialized.
+   *
+   * @returns The constant provider.
+   */
+  override getConstants(): ConstantProvider {
+    return this.constants_;
+  }
+
+  /**
+   * @deprecated v10 - This function is no longer respected. A custom
+   *    IConnectionPreviewer may be able to fulfill the functionality.
+   */
+  override getConnectionPreviewMethod(
+    closest: RenderedConnection,
+    local: RenderedConnection,
+    topBlock: BlockSvg,
+  ) {
+    deprecation.warn(
+      'getConnectionPreviewMethod',
+      'v10',
+      'v12',
+      'an IConnectionPreviewer, if it fulfills your use case.',
+    );
+    if (local.type === ConnectionType.OUTPUT_VALUE) {
+      if (!closest.isConnected()) {
+        return InsertionMarkerManager.PREVIEW_TYPE.INPUT_OUTLINE;
+      }
+      // TODO: Returning this is a total hack, because we don't want to show
+      //   a replacement fade, we want to show an outline affect.
+      //   Sadly zelos does not support showing an outline around filled
+      //   inputs, so we have to pretend like the connected block is getting
+      //   replaced.
+      return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
+    }
+
+    return super.getConnectionPreviewMethod(closest, local, topBlock);
+  }
+}
+
+blockRendering.register('zelos', Renderer);

package/blockly-rc/core/renderers/zelos/zelos.ts

@@ -0,0 +1,33 @@
+/** @file Re-exports of Blockly.zelos.* modules. */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.zelos
+
+import {ConstantProvider} from './constants.js';
+import {Drawer} from './drawer.js';
+import {RenderInfo} from './info.js';
+import {MarkerSvg} from './marker_svg.js';
+import {BottomRow} from './measurables/bottom_row.js';
+import {StatementInput} from './measurables/inputs.js';
+import {RightConnectionShape} from './measurables/row_elements.js';
+import {TopRow} from './measurables/top_row.js';
+import {PathObject} from './path_object.js';
+import {Renderer} from './renderer.js';
+
+export {
+  BottomRow,
+  ConstantProvider,
+  Drawer,
+  MarkerSvg,
+  PathObject,
+  Renderer,
+  RenderInfo,
+  RightConnectionShape,
+  StatementInput,
+  TopRow,
+};