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

package/blockly-rc/core/icons/icon.ts

@@ -1,147 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type {Block} from '../block.js';
-import type {BlockSvg} from '../block_svg.js';
-import * as browserEvents from '../browser_events.js';
-import {hasBubble} from '../interfaces/i_has_bubble.js';
-import type {IIcon} from '../interfaces/i_icon.js';
-import {Coordinate} from '../utils/coordinate.js';
-import * as dom from '../utils/dom.js';
-import {Size} from '../utils/size.js';
-import {Svg} from '../utils/svg.js';
-import type {IconType} from './icon_types.js';
-import * as tooltip from '../tooltip.js';
-
-/**
- * The abstract icon class. Icons are visual elements that live in the top-start
- * corner of the block. Usually they provide more "meta" information about a
- * block (such as warnings or comments) as opposed to fields, which provide
- * "actual" information, related to how a block functions.
- */
-export abstract class Icon implements IIcon {
-  /**
-   * The position of this icon relative to its blocks top-start,
-   * in workspace units.
-   */
-  protected offsetInBlock: Coordinate = new Coordinate(0, 0);
-
-  /** The position of this icon in workspace coordinates. */
-  protected workspaceLocation: Coordinate = new Coordinate(0, 0);
-
-  /** The root svg element visually representing this icon. */
-  protected svgRoot: SVGGElement | null = null;
-
-  /** The tooltip for this icon. */
-  protected tooltip: tooltip.TipInfo;
-
-  constructor(protected sourceBlock: Block) {
-    this.tooltip = sourceBlock;
-  }
-
-  getType(): IconType<IIcon> {
-    throw new Error('Icons must implement getType');
-  }
-
-  initView(pointerdownListener: (e: PointerEvent) => void): void {
-    if (this.svgRoot) return; // The icon has already been initialized.
-
-    const svgBlock = this.sourceBlock as BlockSvg;
-    this.svgRoot = dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'});
-    svgBlock.getSvgRoot().appendChild(this.svgRoot);
-    this.updateSvgRootOffset();
-    browserEvents.conditionalBind(
-      this.svgRoot,
-      'pointerdown',
-      this,
-      pointerdownListener,
-    );
-    (this.svgRoot as any).tooltip = this;
-    tooltip.bindMouseEvents(this.svgRoot);
-  }
-
-  dispose(): void {
-    tooltip.unbindMouseEvents(this.svgRoot);
-    dom.removeNode(this.svgRoot);
-  }
-
-  getWeight(): number {
-    return -1;
-  }
-
-  getSize(): Size {
-    return new Size(0, 0);
-  }
-
-  /**
-   * Sets the tooltip for this icon to the given value. Null to show the
-   * tooltip of the block.
-   */
-  setTooltip(tip: tooltip.TipInfo | null) {
-    this.tooltip = tip ?? this.sourceBlock;
-  }
-
-  /** Returns the tooltip for this icon. */
-  getTooltip(): tooltip.TipInfo {
-    return this.tooltip;
-  }
-
-  applyColour(): void {}
-
-  updateEditable(): void {}
-
-  updateCollapsed(): void {
-    if (!this.svgRoot) return;
-    if (this.sourceBlock.isCollapsed()) {
-      this.svgRoot.style.display = 'none';
-    } else {
-      this.svgRoot.style.display = 'block';
-    }
-    if (hasBubble(this)) {
-      this.setBubbleVisible(false);
-    }
-  }
-
-  hideForInsertionMarker(): void {
-    if (!this.svgRoot) return;
-    this.svgRoot.style.display = 'none';
-  }
-
-  isShownWhenCollapsed(): boolean {
-    return false;
-  }
-
-  setOffsetInBlock(offset: Coordinate): void {
-    this.offsetInBlock = offset;
-    this.updateSvgRootOffset();
-  }
-
-  private updateSvgRootOffset(): void {
-    this.svgRoot?.setAttribute(
-      'transform',
-      `translate(${this.offsetInBlock.x}, ${this.offsetInBlock.y})`,
-    );
-  }
-
-  onLocationChange(blockOrigin: Coordinate): void {
-    this.workspaceLocation = Coordinate.sum(blockOrigin, this.offsetInBlock);
-  }
-
-  onClick(): void {}
-
-  /**
-   * Check whether the icon should be clickable while the block is in a flyout.
-   * The default is that icons are clickable in all flyouts (auto-closing or not).
-   * Subclasses may override this function to change this behavior.
-   *
-   * @param autoClosingFlyout true if the containing flyout is an auto-closing one.
-   * @returns Whether the icon should be clickable while the block is in a flyout.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isClickableInFlyout(autoClosingFlyout: boolean): boolean {
-    return true;
-  }
-}

package/blockly-rc/core/icons/icon_types.ts

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {ICommentIcon} from '../interfaces/i_comment_icon.js';
-import {IIcon} from '../interfaces/i_icon.js';
-import {MutatorIcon} from './mutator_icon.js';
-import {WarningIcon} from './warning_icon.js';
-
-/**
- * Defines the type of an icon, so that it can be retrieved from block.getIcon
- */
-export class IconType<_T extends IIcon> {
-  /** @param name The name of the registry type. */
-  constructor(private readonly name: string) {}
-
-  /** @returns the name of the type. */
-  toString(): string {
-    return this.name;
-  }
-
-  /** @returns true if this icon type is equivalent to the given icon type. */
-  equals(type: IconType<IIcon>): boolean {
-    return this.name === type.toString();
-  }
-
-  static MUTATOR = new IconType<MutatorIcon>('mutator');
-  static WARNING = new IconType<WarningIcon>('warning');
-  static COMMENT = new IconType<ICommentIcon>('comment');
-}

package/blockly-rc/core/icons/mutator_icon.ts

@@ -1,354 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.Mutator
-
-import type {Abstract} from '../events/events_abstract.js';
-import {BlockChange} from '../events/events_block_change.js';
-import type {BlocklyOptions} from '../blockly_options.js';
-import type {BlockSvg} from '../block_svg.js';
-import {Coordinate} from '../utils/coordinate.js';
-import * as dom from '../utils/dom.js';
-import * as eventUtils from '../events/utils.js';
-import type {IHasBubble} from '../interfaces/i_has_bubble.js';
-import {Icon} from './icon.js';
-import {MiniWorkspaceBubble} from '../bubbles/mini_workspace_bubble.js';
-import {Rect} from '../utils/rect.js';
-import {Size} from '../utils/size.js';
-import {Svg} from '../utils/svg.js';
-import type {WorkspaceSvg} from '../workspace_svg.js';
-import {IconType} from './icon_types.js';
-import * as renderManagement from '../render_management.js';
-
-/** The size of the mutator icon in workspace-scale units. */
-const SIZE = 17;
-
-/**
- * The distance between the root block in the mini workspace and that
- * workspace's edges.
- */
-const WORKSPACE_MARGIN = 16;
-
-/**
- * An icon that allows the user to change the shape of the block.
- *
- * For example, it could be used to add additional fields or inputs to
- * the block.
- */
-export class MutatorIcon extends Icon implements IHasBubble {
-  /** The type string used to identify this icon. */
-  static readonly TYPE = IconType.MUTATOR;
-
-  /**
-   * The weight this icon has relative to other icons. Icons with more positive
-   * weight values are rendered farther toward the end of the block.
-   */
-  static readonly WEIGHT = 1;
-
-  /** The bubble used to show the mini workspace to the user. */
-  private miniWorkspaceBubble: MiniWorkspaceBubble | null = null;
-
-  /** The root block in the mini workspace. */
-  private rootBlock: BlockSvg | null = null;
-
-  /** The PID tracking updating the workkspace in response to user events. */
-  private updateWorkspacePid: ReturnType<typeof setTimeout> | null = null;
-
-  /**
-   * The change listener in the main workspace that triggers the saveConnections
-   * method when anything in the main workspace changes.
-   *
-   * Only actually registered to listen for events while the mutator bubble is
-   * open.
-   */
-  private saveConnectionsListener: (() => void) | null = null;
-
-  constructor(
-    private readonly flyoutBlockTypes: string[],
-    protected readonly sourceBlock: BlockSvg,
-  ) {
-    super(sourceBlock);
-  }
-
-  override getType(): IconType<MutatorIcon> {
-    return MutatorIcon.TYPE;
-  }
-
-  override initView(pointerdownListener: (e: PointerEvent) => void): void {
-    if (this.svgRoot) return; // Already initialized.
-
-    super.initView(pointerdownListener);
-
-    // Square with rounded corners.
-    dom.createSvgElement(
-      Svg.RECT,
-      {
-        'class': 'blocklyIconShape',
-        'rx': '4',
-        'ry': '4',
-        'height': '16',
-        'width': '16',
-      },
-      this.svgRoot,
-    );
-    // Gear teeth.
-    dom.createSvgElement(
-      Svg.PATH,
-      {
-        'class': 'blocklyIconSymbol',
-        'd':
-          'm4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,' +
-          '0.11 1.043,-0.457 1.187,0.683 0.127,1.134 0.3,0.3 1.8,0 0.3,' +
-          '-0.299 0.127,-1.138 1.185,-0.682 1.046,0.458 0.409,-0.11 0.9,' +
-          '-1.559 -0.11,-0.41 -0.92,-0.677 0,-1.366 0.92,-0.677 0.11,' +
-          '-0.41 -0.9,-1.559 -0.409,-0.109 -1.046,0.458 -1.185,-0.682 ' +
-          '-0.127,-1.138 -0.3,-0.299 -1.8,0 -0.3,0.3 -0.126,1.135 -1.187,' +
-          '0.682 -1.043,-0.457 -0.41,0.11 -0.899,1.559 0.108,0.409z',
-      },
-      this.svgRoot,
-    );
-    // Axle hole.
-    dom.createSvgElement(
-      Svg.CIRCLE,
-      {'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'},
-      this.svgRoot,
-    );
-    dom.addClass(this.svgRoot!, 'blocklyMutatorIcon');
-  }
-
-  override dispose(): void {
-    super.dispose();
-    this.miniWorkspaceBubble?.dispose();
-  }
-
-  override getWeight(): number {
-    return MutatorIcon.WEIGHT;
-  }
-
-  override getSize(): Size {
-    return new Size(SIZE, SIZE);
-  }
-
-  override applyColour(): void {
-    super.applyColour();
-    this.miniWorkspaceBubble?.setColour(this.sourceBlock.style.colourPrimary);
-    this.miniWorkspaceBubble?.updateBlockStyles();
-  }
-
-  override updateCollapsed(): void {
-    super.updateCollapsed();
-    if (this.sourceBlock.isCollapsed()) this.setBubbleVisible(false);
-  }
-
-  override onLocationChange(blockOrigin: Coordinate): void {
-    super.onLocationChange(blockOrigin);
-    this.miniWorkspaceBubble?.setAnchorLocation(this.getAnchorLocation());
-  }
-
-  override onClick(): void {
-    super.onClick();
-    if (this.sourceBlock.isEditable()) {
-      this.setBubbleVisible(!this.bubbleIsVisible());
-    }
-  }
-
-  override isClickableInFlyout(): boolean {
-    return false;
-  }
-
-  bubbleIsVisible(): boolean {
-    return !!this.miniWorkspaceBubble;
-  }
-
-  async setBubbleVisible(visible: boolean): Promise<void> {
-    if (this.bubbleIsVisible() === visible) return;
-
-    await renderManagement.finishQueuedRenders();
-
-    if (visible) {
-      this.miniWorkspaceBubble = new MiniWorkspaceBubble(
-        this.getMiniWorkspaceConfig(),
-        this.sourceBlock.workspace,
-        this.getAnchorLocation(),
-        this.getBubbleOwnerRect(),
-      );
-      this.applyColour();
-      this.createRootBlock();
-      this.addSaveConnectionsListener();
-      this.miniWorkspaceBubble?.addWorkspaceChangeListener(
-        this.createMiniWorkspaceChangeListener(),
-      );
-    } else {
-      this.miniWorkspaceBubble?.dispose();
-      this.miniWorkspaceBubble = null;
-      if (this.saveConnectionsListener) {
-        this.sourceBlock.workspace.removeChangeListener(
-          this.saveConnectionsListener,
-        );
-      }
-      this.saveConnectionsListener = null;
-    }
-
-    eventUtils.fire(
-      new (eventUtils.get(eventUtils.BUBBLE_OPEN))(
-        this.sourceBlock,
-        visible,
-        'mutator',
-      ),
-    );
-  }
-
-  /** @returns the configuration the mini workspace should have. */
-  private getMiniWorkspaceConfig() {
-    const options: BlocklyOptions = {
-      'disable': false,
-      'media': this.sourceBlock.workspace.options.pathToMedia,
-      'rtl': this.sourceBlock.RTL,
-      'renderer': this.sourceBlock.workspace.options.renderer,
-      'rendererOverrides':
-        this.sourceBlock.workspace.options.rendererOverrides ?? undefined,
-    };
-
-    if (this.flyoutBlockTypes.length) {
-      options.toolbox = {
-        'kind': 'flyoutToolbox',
-        'contents': this.flyoutBlockTypes.map((type) => ({
-          'kind': 'block',
-          'type': type,
-        })),
-      };
-    }
-
-    return options;
-  }
-
-  /**
-   * @returns the location the bubble should be anchored to.
-   *     I.E. the middle of this icon.
-   */
-  private getAnchorLocation(): Coordinate {
-    const midIcon = SIZE / 2;
-    return Coordinate.sum(
-      this.workspaceLocation,
-      new Coordinate(midIcon, midIcon),
-    );
-  }
-
-  /**
-   * @returns the rect the bubble should avoid overlapping.
-   *     I.E. the block that owns this icon.
-   */
-  private getBubbleOwnerRect(): Rect {
-    const bbox = this.sourceBlock.getSvgRoot().getBBox();
-    return new Rect(bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width);
-  }
-
-  /** Decomposes the source block to create blocks in the mini workspace. */
-  private createRootBlock() {
-    if (!this.sourceBlock.decompose) {
-      throw new Error(
-        'Blocks with mutator icons must include a decompose method',
-      );
-    }
-    this.rootBlock = this.sourceBlock.decompose(
-      this.miniWorkspaceBubble!.getWorkspace(),
-    )!;
-
-    for (const child of this.rootBlock.getDescendants(false)) {
-      child.queueRender();
-    }
-
-    this.rootBlock.setMovable(false);
-    this.rootBlock.setDeletable(false);
-
-    const flyoutWidth =
-      this.miniWorkspaceBubble?.getWorkspace()?.getFlyout()?.getWidth() ?? 0;
-    this.rootBlock.moveBy(
-      this.rootBlock.RTL ? -(flyoutWidth + WORKSPACE_MARGIN) : WORKSPACE_MARGIN,
-      WORKSPACE_MARGIN,
-    );
-  }
-
-  /** Adds a listen to the source block that triggers saving connections. */
-  private addSaveConnectionsListener() {
-    if (!this.sourceBlock.saveConnections || !this.rootBlock) return;
-    this.saveConnectionsListener = () => {
-      if (!this.sourceBlock.saveConnections || !this.rootBlock) return;
-      this.sourceBlock.saveConnections(this.rootBlock);
-    };
-    this.saveConnectionsListener();
-    this.sourceBlock.workspace.addChangeListener(this.saveConnectionsListener);
-  }
-
-  /**
-   * Creates a change listener to add to the mini workspace which recomposes
-   * the block.
-   */
-  private createMiniWorkspaceChangeListener() {
-    return (e: Abstract) => {
-      if (!MutatorIcon.isIgnorableMutatorEvent(e) && !this.updateWorkspacePid) {
-        this.updateWorkspacePid = setTimeout(() => {
-          this.updateWorkspacePid = null;
-          this.recomposeSourceBlock();
-        }, 0);
-      }
-    };
-  }
-
-  /**
-   * Returns true if the given event is not one the mutator needs to
-   * care about.
-   *
-   * @internal
-   */
-  static isIgnorableMutatorEvent(e: Abstract) {
-    return (
-      e.isUiEvent ||
-      e.type === eventUtils.CREATE ||
-      (e.type === eventUtils.CHANGE &&
-        (e as BlockChange).element === 'disabled')
-    );
-  }
-
-  /** Recomposes the source block based on changes to the mini workspace. */
-  private recomposeSourceBlock() {
-    if (!this.rootBlock) return;
-    if (!this.sourceBlock.compose) {
-      throw new Error(
-        'Blocks with mutator icons must include a compose method',
-      );
-    }
-
-    const existingGroup = eventUtils.getGroup();
-    if (!existingGroup) eventUtils.setGroup(true);
-
-    const oldExtraState = BlockChange.getExtraBlockState_(this.sourceBlock);
-    this.sourceBlock.compose(this.rootBlock);
-    const newExtraState = BlockChange.getExtraBlockState_(this.sourceBlock);
-
-    if (oldExtraState !== newExtraState) {
-      eventUtils.fire(
-        new (eventUtils.get(eventUtils.BLOCK_CHANGE))(
-          this.sourceBlock,
-          'mutation',
-          null,
-          oldExtraState,
-          newExtraState,
-        ),
-      );
-    }
-
-    eventUtils.setGroup(existingGroup);
-  }
-
-  /**
-   * @returns The workspace of the mini workspace bubble, if the bubble is
-   *     currently open.
-   */
-  getWorkspace(): WorkspaceSvg | undefined {
-    return this.miniWorkspaceBubble?.getWorkspace();
-  }
-}

package/blockly-rc/core/icons/registry.ts

@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type {Block} from '../block.js';
-import type {IIcon} from '../interfaces/i_icon.js';
-import * as registry from '../registry.js';
-import {IconType} from './icon_types.js';
-
-/**
- * Registers the given icon so that it can be deserialized.
- *
- * @param type The type of the icon to register. This should be the same string
- *     that is returned from its `getType` method.
- * @param iconConstructor The icon class/constructor to register.
- */
-export function register(
-  type: IconType<IIcon>,
-  iconConstructor: new (block: Block) => IIcon,
-) {
-  registry.register(registry.Type.ICON, type.toString(), iconConstructor);
-}
-
-/**
- * Unregisters the icon associated with the given type.
- *
- * @param type The type of the icon to unregister.
- */
-export function unregister(type: string) {
-  registry.unregister(registry.Type.ICON, type);
-}