scratch-blocks 2.0.0-beta.1 → 2.0.0-beta.2

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

@@ -1,324 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.blockRendering.PathObject
-
-import type {BlockSvg} from '../../block_svg.js';
-import type {Connection} from '../../connection.js';
-import {RenderedConnection} from '../../rendered_connection.js';
-import type {BlockStyle} from '../../theme.js';
-import {Coordinate} from '../../utils/coordinate.js';
-import * as dom from '../../utils/dom.js';
-import {Svg} from '../../utils/svg.js';
-
-import type {ConstantProvider} from './constants.js';
-import type {IPathObject} from './i_path_object.js';
-
-/**
- * An object that handles creating and setting each of the SVG elements
- * used by the renderer.
- */
-export class PathObject implements IPathObject {
-  svgRoot: SVGElement;
-  svgPath: SVGElement;
-
-  /**
-   * Holds the cursors svg element when the cursor is attached to the block.
-   * This is null if there is no cursor on the block.
-   */
-  cursorSvg: SVGElement | null = null;
-
-  /**
-   * Holds the markers svg element when the marker is attached to the block.
-   * This is null if there is no marker on the block.
-   */
-  markerSvg: SVGElement | null = null;
-
-  constants: ConstantProvider;
-  style: BlockStyle;
-
-  /** Highlight paths associated with connections. */
-  private connectionHighlights = new WeakMap<RenderedConnection, SVGElement>();
-
-  /** Locations of connection highlights. */
-  private highlightOffsets = new WeakMap<RenderedConnection, Coordinate>();
-
-  /**
-   * @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,
-  ) {
-    this.constants = constants;
-    this.style = style;
-    this.svgRoot = root;
-
-    /** The primary path of the block. */
-    this.svgPath = dom.createSvgElement(
-      Svg.PATH,
-      {'class': 'blocklyPath'},
-      this.svgRoot,
-    );
-
-    this.setClass_('blocklyBlock', true);
-  }
-
-  /**
-   * Set the path generated by the renderer onto the respective SVG element.
-   *
-   * @param pathString The path.
-   */
-  setPath(pathString: string) {
-    this.svgPath.setAttribute('d', pathString);
-  }
-
-  /**
-   * Flip the SVG paths in RTL.
-   */
-  flipRTL() {
-    // Mirror the block's path.
-    this.svgPath.setAttribute('transform', 'scale(-1 1)');
-  }
-
-  /**
-   * Add the cursor SVG to this block's SVG group.
-   *
-   * @param cursorSvg The SVG root of the cursor to be added to the block SVG
-   *     group.
-   */
-  setCursorSvg(cursorSvg: SVGElement) {
-    if (!cursorSvg) {
-      this.cursorSvg = null;
-      return;
-    }
-
-    this.svgRoot.appendChild(cursorSvg);
-    this.cursorSvg = cursorSvg;
-  }
-
-  /**
-   * Add the marker SVG to this block's SVG group.
-   *
-   * @param markerSvg The SVG root of the marker to be added to the block SVG
-   *     group.
-   */
-  setMarkerSvg(markerSvg: SVGElement) {
-    if (!markerSvg) {
-      this.markerSvg = null;
-      return;
-    }
-
-    if (this.cursorSvg) {
-      this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
-    } else {
-      this.svgRoot.appendChild(markerSvg);
-    }
-    this.markerSvg = markerSvg;
-  }
-
-  /**
-   * Apply the stored colours to the block's path, taking into account whether
-   * the paths belong to a shadow block.
-   *
-   * @param block The source block.
-   */
-  applyColour(block: BlockSvg) {
-    this.svgPath.setAttribute('stroke', this.style.colourTertiary);
-    this.svgPath.setAttribute('fill', this.style.colourPrimary);
-
-    this.updateShadow_(block.isShadow());
-    this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
-  }
-
-  /**
-   * Set the style.
-   *
-   * @param blockStyle The block style to use.
-   */
-  setStyle(blockStyle: BlockStyle) {
-    this.style = blockStyle;
-  }
-
-  /**
-   * Add or remove the given CSS class on the path object's root SVG element.
-   *
-   * @param className The name of the class to add or remove
-   * @param add True if the class should be added.  False if it should be
-   *     removed.
-   */
-  protected setClass_(className: string, add: boolean) {
-    if (!className) {
-      return;
-    }
-    if (add) {
-      dom.addClass(this.svgRoot, className);
-    } else {
-      dom.removeClass(this.svgRoot, className);
-    }
-  }
-
-  /**
-   * Set whether the block shows a highlight or not.  Block highlighting is
-   * often used to visually mark blocks currently being executed.
-   *
-   * @param enable True if highlighted.
-   */
-
-  updateHighlighted(enable: boolean) {
-    if (enable) {
-      this.svgPath.setAttribute(
-        'filter',
-        'url(#' + this.constants.embossFilterId + ')',
-      );
-      this.setClass_('blocklyHighlighted', true);
-    } else {
-      this.svgPath.setAttribute('filter', 'none');
-      this.setClass_('blocklyHighlighted', false);
-    }
-  }
-
-  /**
-   * Updates the look of the block to reflect a shadow state.
-   *
-   * @param shadow True if the block is a shadow block.
-   */
-  protected updateShadow_(shadow: boolean) {
-    if (shadow) {
-      this.setClass_('blocklyShadow', true);
-      this.svgPath.setAttribute('stroke', 'none');
-      this.svgPath.setAttribute('fill', this.style.colourSecondary);
-    } else {
-      this.setClass_('blocklyShadow', false);
-    }
-  }
-
-  /**
-   * Updates the look of the block to reflect a disabled state.
-   *
-   * @param disabled True if disabled.
-   */
-  protected updateDisabled_(disabled: boolean) {
-    this.setClass_('blocklyDisabled', disabled);
-    if (disabled) {
-      this.svgPath.setAttribute(
-        'fill',
-        'url(#' + this.constants.disabledPatternId + ')',
-      );
-    }
-  }
-
-  /**
-   * Add or remove styling showing that a block is selected.
-   *
-   * @param enable True if selection is enabled, false otherwise.
-   */
-  updateSelected(enable: boolean) {
-    this.setClass_('blocklySelected', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is dragged over a delete area.
-   *
-   * @param enable True if the block is being dragged over a delete area, false
-   *     otherwise.
-   */
-  updateDraggingDelete(enable: boolean) {
-    this.setClass_('blocklyDraggingDelete', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is an insertion marker.
-   *
-   * @param enable True if the block is an insertion marker, false otherwise.
-   */
-  updateInsertionMarker(enable: boolean) {
-    this.setClass_('blocklyInsertionMarker', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is movable.
-   *
-   * @param enable True if the block is movable, false otherwise.
-   */
-  updateMovable(enable: boolean) {
-    this.setClass_('blocklyDraggable', enable);
-  }
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be replaced.  If a shadow block, it will disappear.
-   * Otherwise it will bump.
-   *
-   * @param enable True if styling should be added.
-   */
-  updateReplacementFade(enable: boolean) {
-    this.setClass_('blocklyReplaceable', enable);
-  }
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be connected to the input.
-   *
-   * @param _conn The connection on the input to highlight.
-   * @param _enable True if styling should be added.
-   */
-  updateShapeForInputHighlight(_conn: Connection, _enable: boolean) {
-    // NOOP
-  }
-
-  /** Adds the given path as a connection highlight for the given connection. */
-  addConnectionHighlight(
-    connection: RenderedConnection,
-    connectionPath: string,
-    offset: Coordinate,
-    rtl: boolean,
-  ) {
-    if (this.connectionHighlights.has(connection)) {
-      if (this.currentHighlightMatchesNew(connection, connectionPath, offset)) {
-        return;
-      }
-      this.removeConnectionHighlight(connection);
-    }
-
-    const highlight = dom.createSvgElement(
-      Svg.PATH,
-      {
-        'class': 'blocklyHighlightedConnectionPath',
-        'd': connectionPath,
-        'transform':
-          `translate(${offset.x}, ${offset.y})` + (rtl ? ' scale(-1 1)' : ''),
-      },
-      this.svgRoot,
-    );
-    this.connectionHighlights.set(connection, highlight);
-  }
-
-  private currentHighlightMatchesNew(
-    connection: RenderedConnection,
-    newPath: string,
-    newOffset: Coordinate,
-  ): boolean {
-    const currPath = this.connectionHighlights
-      .get(connection)
-      ?.getAttribute('d');
-    const currOffset = this.highlightOffsets.get(connection);
-    return currPath === newPath && Coordinate.equals(currOffset, newOffset);
-  }
-
-  /**
-   * Removes any highlight associated with the given connection, if it exists.
-   */
-  removeConnectionHighlight(connection: RenderedConnection) {
-    const highlight = this.connectionHighlights.get(connection);
-    if (!highlight) return;
-    dom.removeNode(highlight);
-    this.connectionHighlights.delete(connection);
-  }
-}

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

@@ -1,281 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: 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 {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';
-import * as deprecation from '../../utils/deprecation.js';
-
-/**
- * The base class for a block renderer.
- */
-export class Renderer implements IRegistrable {
-  /** The renderer's constant provider. */
-  protected constants_!: ConstantProvider;
-
-  protected name: string;
-
-  /**
-   * Rendering constant overrides, passed in through options.
-   */
-  protected overrides: object | null = null;
-
-  /**
-   * @param name The renderer name.
-   */
-  constructor(name: string) {
-    this.name = name;
-  }
-
-  /**
-   * Gets the class name that identifies this renderer.
-   *
-   * @returns The CSS class name.
-   */
-  getClassName(): string {
-    return this.name + '-renderer';
-  }
-
-  /**
-   * Initialize the renderer.
-   *
-   * @param theme The workspace theme object.
-   * @param opt_rendererOverrides Rendering constant overrides.
-   */
-  init(
-    theme: Theme,
-    opt_rendererOverrides?: {[rendererConstant: string]: any},
-  ) {
-    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.
-   * If you need to create additional DOM elements, override the
-   * {@link ConstantProvider#createDom} method instead.
-   *
-   * @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.
-   */
-  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.
-   */
-  dispose() {
-    if (this.constants_) {
-      this.constants_.dispose();
-    }
-  }
-
-  /**
-   * Create a new instance of the renderer's constant provider.
-   *
-   * @returns 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.
-   * @returns 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.
-   * @returns The drawer.
-   */
-  protected makeDrawer_(block: BlockSvg, info: RenderInfo): Drawer {
-    return new Drawer(block, info);
-  }
-
-  /**
-   * Create a new instance of the renderer's marker drawer.
-   *
-   * @param workspace The workspace the marker belongs to.
-   * @param marker The marker.
-   * @returns The object in charge of drawing the marker.
-   */
-  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.
-   */
-  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.
-   *
-   * @returns The constant provider.
-   */
-  getConstants(): ConstantProvider {
-    return this.constants_;
-  }
-
-  /**
-   * Determine whether or not to highlight a connection.
-   *
-   * @param _conn The connection to determine whether or not to highlight.
-   * @returns True if we should highlight the connection.
-   */
-  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.
-   * @returns Whether there is a home for the orphan or not.
-   */
-  protected 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.
-   * @returns The preview type to display.
-   *
-   * @deprecated v10 - This function is no longer respected. A custom
-   *    IConnectionPreviewer may be able to fulfill the functionality.
-   */
-  getConnectionPreviewMethod(
-    closest: RenderedConnection,
-    local: RenderedConnection,
-    topBlock: BlockSvg,
-  ): PreviewType {
-    deprecation.warn(
-      'getConnectionPreviewMethod',
-      'v10',
-      'v12',
-      'an IConnectionPreviewer, if it fulfills your use case.',
-    );
-    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) {
-    const info = this.makeRenderInfo_(block);
-    info.measure();
-    this.makeDrawer_(block, info).draw();
-  }
-}

package/blockly-rc/core/renderers/geras/constants.ts

@@ -1,46 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.geras.ConstantProvider
-
-import {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
-
-/**
- * An object that provides constants for rendering blocks in Geras mode.
- */
-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 = -this.NOTCH_HEIGHT / 2;
-
-  constructor() {
-    super();
-  }
-
-  override getCSS_(selector: string) {
-    return super.getCSS_(selector).concat([
-      /* eslint-disable indent */
-      /* clang-format off */
-      // Insertion marker.
-      `${selector} .blocklyInsertionMarker>.blocklyPathLight,`,
-      `${selector} .blocklyInsertionMarker>.blocklyPathDark {`,
-      `fill-opacity: ${this.INSERTION_MARKER_OPACITY};`,
-      `stroke: none;`,
-      '}',
-      /* clang-format on */
-      /* eslint-enable indent */
-    ]);
-  }
-}