blockly 12.4.0 → 12.4.1

package/core/keyboard_nav/marker.ts

@@ -1,86 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The class representing a marker.
- * Used primarily for keyboard navigation to show a marked location.
- *
- * @class
- */
-// Former goog.module ID: Blockly.Marker
-
-import {BlockSvg} from '../block_svg.js';
-import {Field} from '../field.js';
-import {Icon} from '../icons/icon.js';
-import type {IFocusableNode} from '../interfaces/i_focusable_node.js';
-import {RenderedConnection} from '../rendered_connection.js';
-
-/**
- * Class for a marker.
- * This is used in keyboard navigation to save a location in the Blockly AST.
- */
-export class Marker {
-  /** The colour of the marker. */
-  colour: string | null = null;
-
-  /** The current location of the marker. */
-  protected curNode: IFocusableNode | null = null;
-
-  /** The type of the marker. */
-  type = 'marker';
-
-  /**
-   * Gets the current location of the marker.
-   *
-   * @returns The current field, connection, or block the marker is on.
-   */
-  getCurNode(): IFocusableNode | null {
-    return this.curNode;
-  }
-
-  /**
-   * Set the location of the marker and call the update method.
-   *
-   * @param newNode The new location of the marker, or null to remove it.
-   */
-  setCurNode(newNode: IFocusableNode | null) {
-    this.curNode = newNode;
-  }
-
-  /** Dispose of this marker. */
-  dispose() {
-    this.curNode = null;
-  }
-
-  /**
-   * Returns the block that the given node is a child of.
-   *
-   * @returns The parent block of the node if any, otherwise null.
-   */
-  getSourceBlockFromNode(node: IFocusableNode | null): BlockSvg | null {
-    if (node instanceof BlockSvg) {
-      return node;
-    } else if (node instanceof Field) {
-      return node.getSourceBlock() as BlockSvg;
-    } else if (node instanceof RenderedConnection) {
-      return node.getSourceBlock();
-    } else if (node instanceof Icon) {
-      return node.getSourceBlock() as BlockSvg;
-    }
-
-    return null;
-  }
-
-  /**
-   * Returns the block that this marker's current node is a child of.
-   *
-   * @returns The parent block of the marker's current node if any, otherwise
-   *     null.
-   */
-  getSourceBlock(): BlockSvg | null {
-    return this.getSourceBlockFromNode(this.getCurNode());
-  }
-}

package/core/keyboard_nav/workspace_comment_navigation_policy.ts

@@ -1,77 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {RenderedWorkspaceComment} from '../comments/rendered_workspace_comment.js';
-import type {IFocusableNode} from '../interfaces/i_focusable_node.js';
-import type {INavigationPolicy} from '../interfaces/i_navigation_policy.js';
-import {navigateStacks} from './block_navigation_policy.js';
-
-/**
- * Set of rules controlling keyboard navigation from an RenderedWorkspaceComment.
- */
-export class WorkspaceCommentNavigationPolicy
-  implements INavigationPolicy<RenderedWorkspaceComment>
-{
-  /**
-   * Returns the first child of the given workspace comment.
-   *
-   * @param current The workspace comment to return the first child of.
-   * @returns The first child button of the given comment.
-   */
-  getFirstChild(current: RenderedWorkspaceComment): IFocusableNode | null {
-    return current.view.getCommentBarButtons()[0];
-  }
-
-  /**
-   * Returns the parent of the given workspace comment.
-   *
-   * @param current The workspace comment to return the parent of.
-   * @returns The parent workspace of the given comment.
-   */
-  getParent(current: RenderedWorkspaceComment): IFocusableNode | null {
-    return current.workspace;
-  }
-
-  /**
-   * Returns the next peer node of the given workspace comment.
-   *
-   * @param current The workspace comment to find the following element of.
-   * @returns The next workspace comment or block stack, if any.
-   */
-  getNextSibling(current: RenderedWorkspaceComment): IFocusableNode | null {
-    return navigateStacks(current, 1);
-  }
-
-  /**
-   * Returns the previous peer node of the given workspace comment.
-   *
-   * @param current The workspace comment to find the preceding element of.
-   * @returns The previous workspace comment or block stack, if any.
-   */
-  getPreviousSibling(current: RenderedWorkspaceComment): IFocusableNode | null {
-    return navigateStacks(current, -1);
-  }
-
-  /**
-   * Returns whether or not the given workspace comment can be navigated to.
-   *
-   * @param current The instance to check for navigability.
-   * @returns True if the given workspace comment can be focused.
-   */
-  isNavigable(current: RenderedWorkspaceComment): boolean {
-    return current.canBeFocused();
-  }
-
-  /**
-   * Returns whether the given object can be navigated from by this policy.
-   *
-   * @param current The object to check if this policy applies to.
-   * @returns True if the object is an RenderedWorkspaceComment.
-   */
-  isApplicable(current: any): current is RenderedWorkspaceComment {
-    return current instanceof RenderedWorkspaceComment;
-  }
-}

package/core/keyboard_nav/workspace_navigation_policy.ts

@@ -1,77 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type {IFocusableNode} from '../interfaces/i_focusable_node.js';
-import type {INavigationPolicy} from '../interfaces/i_navigation_policy.js';
-import {WorkspaceSvg} from '../workspace_svg.js';
-
-/**
- * Set of rules controlling keyboard navigation from a workspace.
- */
-export class WorkspaceNavigationPolicy
-  implements INavigationPolicy<WorkspaceSvg>
-{
-  /**
-   * Returns the first child of the given workspace.
-   *
-   * @param current The workspace to return the first child of.
-   * @returns The top block of the first block stack, if any.
-   */
-  getFirstChild(current: WorkspaceSvg): IFocusableNode | null {
-    const blocks = current.getTopBlocks(true);
-    return blocks.length ? blocks[0] : null;
-  }
-
-  /**
-   * Returns the parent of the given workspace.
-   *
-   * @param _current The workspace to return the parent of.
-   * @returns Null.
-   */
-  getParent(_current: WorkspaceSvg): IFocusableNode | null {
-    return null;
-  }
-
-  /**
-   * Returns the next sibling of the given workspace.
-   *
-   * @param _current The workspace to return the next sibling of.
-   * @returns Null.
-   */
-  getNextSibling(_current: WorkspaceSvg): IFocusableNode | null {
-    return null;
-  }
-
-  /**
-   * Returns the previous sibling of the given workspace.
-   *
-   * @param _current The workspace to return the previous sibling of.
-   * @returns Null.
-   */
-  getPreviousSibling(_current: WorkspaceSvg): IFocusableNode | null {
-    return null;
-  }
-
-  /**
-   * Returns whether or not the given workspace can be navigated to.
-   *
-   * @param current The instance to check for navigability.
-   * @returns True if the given workspace can be focused.
-   */
-  isNavigable(current: WorkspaceSvg): boolean {
-    return current.canBeFocused() && !current.isMutator;
-  }
-
-  /**
-   * Returns whether the given object can be navigated from by this policy.
-   *
-   * @param current The object to check if this policy applies to.
-   * @returns True if the object is a WorkspaceSvg.
-   */
-  isApplicable(current: any): current is WorkspaceSvg {
-    return current instanceof WorkspaceSvg;
-  }
-}

package/core/keyboard_navigation_controller.ts

@@ -1,63 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The KeyboardNavigationController handles coordinating Blockly-wide
- * keyboard navigation behavior, such as enabling/disabling full
- * cursor visualization.
- */
-export class KeyboardNavigationController {
-  /** Whether the user is actively using keyboard navigation. */
-  private isActive = false;
-  /** Css class name added to body if keyboard nav is active. */
-  private activeClassName = 'blocklyKeyboardNavigation';
-
-  /**
-   * Sets whether a user is actively using keyboard navigation.
-   *
-   * If they are, apply a css class to the entire page so that
-   * focused items can apply additional styling for keyboard users.
-   *
-   * Note that since enabling keyboard navigation presents significant UX changes
-   * (such as cursor visualization and move mode), callers should take care to
-   * only set active keyboard navigation when they have a high confidence in that
-   * being the correct state. In general, in any given mouse or key input situation
-   * callers can choose one of three paths:
-   * 1. Do nothing. This should be the choice for neutral actions that don't
-   *    predominantly imply keyboard or mouse usage (such as clicking to select a block).
-   * 2. Disable keyboard navigation. This is the best choice when a user is definitely
-   *    predominantly using the mouse (such as using a right click to open the context menu).
-   * 3. Enable keyboard navigation. This is the best choice when there's high confidence
-   *    a user actually intends to use it (such as attempting to use the arrow keys to move
-   *    around).
-   *
-   * @param isUsing
-   */
-  setIsActive(isUsing: boolean = true) {
-    this.isActive = isUsing;
-    this.updateActiveVisualization();
-  }
-
-  /**
-   * @returns true if the user is actively using keyboard navigation
-   * (e.g., has recently taken some action that is only relevant to keyboard users)
-   */
-  getIsActive(): boolean {
-    return this.isActive;
-  }
-
-  /** Adds or removes the css class that indicates keyboard navigation is active. */
-  private updateActiveVisualization() {
-    if (this.isActive) {
-      document.body.classList.add(this.activeClassName);
-    } else {
-      document.body.classList.remove(this.activeClassName);
-    }
-  }
-}
-
-/** Singleton instance of the keyboard navigation controller. */
-export const keyboardNavigationController = new KeyboardNavigationController();

package/core/label_flyout_inflater.ts

@@ -1,75 +0,0 @@
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {FlyoutButton} from './flyout_button.js';
-import {FlyoutItem} from './flyout_item.js';
-import type {IFlyout} from './interfaces/i_flyout.js';
-import type {IFlyoutInflater} from './interfaces/i_flyout_inflater.js';
-import * as registry from './registry.js';
-import {ButtonOrLabelInfo} from './utils/toolbox.js';
-const LABEL_TYPE = 'label';
-
-/**
- * Class responsible for creating labels for flyouts.
- */
-export class LabelFlyoutInflater implements IFlyoutInflater {
-  /**
-   * Inflates a flyout label from the given state and adds it to the flyout.
-   *
-   * @param state A JSON representation of a flyout label.
-   * @param flyout The flyout to create the label on.
-   * @returns A FlyoutButton configured as a label.
-   */
-  load(state: object, flyout: IFlyout): FlyoutItem {
-    const label = new FlyoutButton(
-      flyout.getWorkspace(),
-      flyout.targetWorkspace!,
-      state as ButtonOrLabelInfo,
-      true,
-    );
-    label.show();
-
-    return new FlyoutItem(label, LABEL_TYPE);
-  }
-
-  /**
-   * Returns the amount of space that should follow this label.
-   *
-   * @param state A JSON representation of a flyout label.
-   * @param defaultGap The default spacing for flyout items.
-   * @returns The amount of space that should follow this label.
-   */
-  gapForItem(state: object, defaultGap: number): number {
-    return defaultGap;
-  }
-
-  /**
-   * Disposes of the given label.
-   *
-   * @param item The flyout label to dispose of.
-   */
-  disposeItem(item: FlyoutItem): void {
-    const element = item.getElement();
-    if (element instanceof FlyoutButton) {
-      element.dispose();
-    }
-  }
-
-  /**
-   * Returns the type of items this inflater is responsible for creating.
-   *
-   * @returns An identifier for the type of items this inflater creates.
-   */
-  getType() {
-    return LABEL_TYPE;
-  }
-}
-
-registry.register(
-  registry.Type.FLYOUT_INFLATER,
-  LABEL_TYPE,
-  LabelFlyoutInflater,
-);

package/core/layer_manager.ts

@@ -1,229 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {getFocusManager} from './focus_manager.js';
-import type {IFocusableNode} from './interfaces/i_focusable_node.js';
-import {IRenderedElement} from './interfaces/i_rendered_element.js';
-import * as layerNums from './layers.js';
-import {Coordinate} from './utils/coordinate.js';
-import * as dom from './utils/dom.js';
-import {Svg} from './utils/svg.js';
-import {WorkspaceSvg} from './workspace_svg.js';
-
-/** @internal */
-export class LayerManager {
-  /** The layer elements being dragged are appended to. */
-  private dragLayer: SVGGElement | undefined;
-  /** The layer elements being animated are appended to. */
-  private animationLayer: SVGGElement | undefined;
-  /** The layers elements not being dragged are appended to.  */
-  private layers = new Map<number, SVGGElement>();
-
-  /** @internal */
-  constructor(private workspace: WorkspaceSvg) {
-    const injectionDiv = workspace.getInjectionDiv();
-    // `getInjectionDiv` is actually nullable. We hit this if the workspace
-    // is part of a flyout and the workspace the flyout is attached to hasn't
-    // been appended yet.
-    if (injectionDiv) {
-      this.dragLayer = this.createDragLayer(injectionDiv);
-      this.animationLayer = this.createAnimationLayer(injectionDiv);
-    }
-
-    // We construct these manually so we can add the css class for backwards
-    // compatibility.
-    const blockLayer = this.createLayer(layerNums.BLOCK);
-    dom.addClass(blockLayer, 'blocklyBlockCanvas');
-    const bubbleLayer = this.createLayer(layerNums.BUBBLE);
-    dom.addClass(bubbleLayer, 'blocklyBubbleCanvas');
-  }
-
-  private createDragLayer(injectionDiv: Element) {
-    const svg = dom.createSvgElement(Svg.SVG, {
-      'class': 'blocklyBlockDragSurface',
-      'xmlns': dom.SVG_NS,
-      'xmlns:html': dom.HTML_NS,
-      'xmlns:xlink': dom.XLINK_NS,
-      'version': '1.1',
-    });
-    injectionDiv.append(svg);
-    return dom.createSvgElement(Svg.G, {}, svg);
-  }
-
-  private createAnimationLayer(injectionDiv: Element) {
-    const svg = dom.createSvgElement(Svg.SVG, {
-      'class': 'blocklyAnimationLayer',
-      'xmlns': dom.SVG_NS,
-      'xmlns:html': dom.HTML_NS,
-      'xmlns:xlink': dom.XLINK_NS,
-      'version': '1.1',
-    });
-    injectionDiv.append(svg);
-    return dom.createSvgElement(Svg.G, {}, svg);
-  }
-
-  /**
-   * Appends the element to the animation layer. The animation layer doesn't
-   * move when the workspace moves, so e.g. delete animations don't move
-   * when a block delete triggers a workspace resize.
-   *
-   * @internal
-   */
-  appendToAnimationLayer(elem: IRenderedElement) {
-    const currentTransform = this.dragLayer?.style.transform;
-    // Only update the current transform when appending, so animations don't
-    // move if the workspace moves.
-    if (currentTransform && this.animationLayer) {
-      this.animationLayer.style.transform = currentTransform;
-    }
-    this.animationLayer?.appendChild(elem.getSvgRoot());
-  }
-
-  /**
-   * Translates layers when the workspace is dragged or zoomed.
-   *
-   * @internal
-   */
-  translateLayers(newCoord: Coordinate, newScale: number) {
-    const translation = `translate(${newCoord.x}px, ${newCoord.y}px) scale(${newScale})`;
-    if (this.dragLayer) {
-      this.dragLayer.style.transform = translation;
-    }
-    for (const [_, layer] of this.layers) {
-      layer.style.transform = translation;
-    }
-  }
-
-  /**
-   * Moves the given element to the drag layer, which exists on top of all other
-   * layers, and the drag surface.
-   *
-   * @param elem The element to move onto the drag layer.
-   * @param focus Whether or not to focus the element post-move.
-   *
-   * @internal
-   */
-  moveToDragLayer(elem: IRenderedElement & IFocusableNode, focus = true) {
-    this.dragLayer?.appendChild(elem.getSvgRoot());
-
-    if (focus && elem.canBeFocused()) {
-      // Since moving the element to the drag layer will cause it to lose focus,
-      // ensure it regains focus (to ensure proper highlights & sent events).
-      getFocusManager().focusNode(elem);
-    }
-  }
-
-  /**
-   * Moves the given element off of the drag layer.
-   *
-   * @param elem The element to move off of the drag layer.
-   * @param layerNum The identifier of the layer to move the element onto.
-   *     Should be a constant from layers.ts.
-   * @param focus Whether or not the element should be focused once moved onto
-   *     the destination layer.
-   *
-   * @internal
-   */
-  moveOffDragLayer(
-    elem: IRenderedElement & IFocusableNode,
-    layerNum: number,
-    focus = true,
-  ) {
-    this.append(elem, layerNum);
-
-    if (focus && elem.canBeFocused()) {
-      // Since moving the element off the drag layer will cause it to lose focus,
-      // ensure it regains focus (to ensure proper highlights & sent events).
-      getFocusManager().focusNode(elem);
-    }
-  }
-
-  /**
-   * Appends the given element to a layer. If the layer does not exist, it is
-   * created.
-   *
-   * @internal
-   */
-  append(elem: IRenderedElement, layerNum: number) {
-    if (!this.layers.has(layerNum)) {
-      this.createLayer(layerNum);
-    }
-    const childElem = elem.getSvgRoot();
-    if (this.layers.get(layerNum)?.lastChild !== childElem) {
-      // Only append the child if it isn't already last (to avoid re-firing
-      // events like focused).
-      this.layers.get(layerNum)?.appendChild(childElem);
-    }
-  }
-
-  /**
-   * Creates a layer and inserts it at the proper place given the layer number.
-   *
-   * More positive layers exist later in the dom and are rendered ontop of
-   * less positive layers. Layers are added to the layer map as a side effect.
-   */
-  private createLayer(layerNum: number): SVGGElement {
-    const parent = this.workspace.getSvgGroup();
-    const layer = dom.createSvgElement(Svg.G, {});
-
-    let inserted = false;
-    const sortedLayers = [...this.layers].sort((a, b) => a[0] - b[0]);
-    for (const [num, sib] of sortedLayers) {
-      if (layerNum < num) {
-        parent.insertBefore(layer, sib);
-        inserted = true;
-        break;
-      }
-    }
-    if (!inserted) {
-      parent.appendChild(layer);
-    }
-    this.layers.set(layerNum, layer);
-    return layer;
-  }
-
-  /**
-   * Returns true if the given element is a layer managed by the layer manager.
-   * False otherwise.
-   *
-   * @internal
-   */
-  hasLayer(elem: SVGElement) {
-    return (
-      elem === this.dragLayer ||
-      new Set(this.layers.values()).has(elem as SVGGElement)
-    );
-  }
-
-  /**
-   * We need to be able to access this layer explicitly for backwards
-   * compatibility.
-   *
-   * @internal
-   */
-  getBlockLayer(): SVGGElement {
-    return this.layers.get(layerNums.BLOCK)!;
-  }
-
-  /**
-   * We need to be able to access this layer explicitly for backwards
-   * compatibility.
-   *
-   * @internal
-   */
-  getBubbleLayer(): SVGGElement {
-    return this.layers.get(layerNums.BUBBLE)!;
-  }
-
-  /**
-   * Returns the drag layer.
-   *
-   * @internal
-   */
-  getDragLayer(): SVGGElement | undefined {
-    return this.dragLayer;
-  }
-}

package/core/layers.ts

@@ -1,17 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The layer to place blocks on.
- *
- */
-export const BLOCK = 50;
-
-/**
- * The layer to place bubbles on.
- *
- */
-export const BUBBLE = 100;

package/core/main.ts

@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @file The entrypoint for blockly_compressed.js.  Provides various
- * backwards-compatibility hacks.  Not used when loading in
- * uncompressed mode.
- */
-
-// Former goog.module ID: Blockly.main
-
-import * as Msg from './msg.js';
-
-// If Blockly is compiled with ADVANCED_COMPILATION and/or loaded as a
-// CJS or ES module there will not be a Blockly global variable
-// created.  This can cause problems because a very common way of
-// loading translations is to use a <script> tag to load one of
-// the generated msg/*.js files, which consists of lines like:
-//
-// Blockly.Msg["ADD_COMMENT"] = "Add Comment";
-// Blockly.Msg["CLEAN_UP"] = "Clean up Blocks";
-//
-// This obviously only works if Blockly.Msg is the Msg export from the
-// Blockly.Msg module - so make sure it is, but only if there is not
-// yet a Blockly global variable.
-if (!('Blockly' in globalThis)) {
-  (globalThis as any)['Blockly'] = {'Msg': Msg};
-}