scratch-blocks 1.2.0-beta.1 → 1.2.0

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

@@ -1,145 +0,0 @@
-/**
- * @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

@@ -1,44 +0,0 @@
-/**
- * @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

@@ -1,41 +0,0 @@
-/**
- * @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

@@ -1,29 +0,0 @@
-/**
- * @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

@@ -1,50 +0,0 @@
-/**
- * @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

@@ -1,209 +0,0 @@
-/**
- * @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

@@ -1,143 +0,0 @@
-/**
- * @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

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