blockly 12.4.0 → 12.4.1

package/core/theme.ts

@@ -1,232 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The class representing a theme.
- *
- * @class
- */
-// Former goog.module ID: Blockly.Theme
-
-import * as registry from './registry.js';
-import * as object from './utils/object.js';
-
-export interface ITheme {
-  blockStyles?: {[key: string]: Partial<BlockStyle>};
-  categoryStyles?: {[key: string]: CategoryStyle};
-  componentStyles?: ComponentStyle;
-  fontStyle?: FontStyle;
-  startHats?: boolean;
-  base?: string | Theme;
-  name: string;
-}
-
-/**
- * Class for a theme.
- */
-export class Theme implements ITheme {
-  /** @internal */
-  blockStyles: {[key: string]: BlockStyle};
-  /** @internal */
-  categoryStyles: {[key: string]: CategoryStyle};
-  /** @internal */
-  componentStyles: ComponentStyle;
-  /** @internal */
-  fontStyle: FontStyle;
-
-  /**
-   * Whether or not to add a 'hat' on top of all blocks with no previous or
-   * output connections.
-   *
-   * @internal
-   */
-  startHats?: boolean = false;
-
-  /**
-   * @param name Theme name.
-   * @param opt_blockStyles A map from style names (strings) to objects with
-   *     style attributes for blocks.
-   * @param opt_categoryStyles A map from style names (strings) to objects with
-   *     style attributes for categories.
-   * @param opt_componentStyles A map of Blockly component names to style value.
-   */
-  constructor(
-    public name: string,
-    opt_blockStyles?: {[key: string]: Partial<BlockStyle>},
-    opt_categoryStyles?: {[key: string]: CategoryStyle},
-    opt_componentStyles?: ComponentStyle,
-  ) {
-    /** The block styles map. */
-    this.blockStyles = opt_blockStyles || Object.create(null);
-
-    /** The category styles map. */
-    this.categoryStyles = opt_categoryStyles || Object.create(null);
-
-    /** The UI components styles map. */
-    this.componentStyles =
-      opt_componentStyles || (Object.create(null) as ComponentStyle);
-
-    /** The font style. */
-    this.fontStyle = Object.create(null) as FontStyle;
-
-    // Register the theme by name.
-    registry.register(registry.Type.THEME, name, this, true);
-  }
-
-  /**
-   * Gets the class name that identifies this theme.
-   *
-   * @returns The CSS class name.
-   * @internal
-   */
-  getClassName(): string {
-    return this.name + '-theme';
-  }
-
-  /**
-   * Overrides or adds a style to the blockStyles map.
-   *
-   * @param blockStyleName The name of the block style.
-   * @param blockStyle The block style.
-   */
-  setBlockStyle(blockStyleName: string, blockStyle: BlockStyle) {
-    this.blockStyles[blockStyleName] = blockStyle;
-  }
-
-  /**
-   * Overrides or adds a style to the categoryStyles map.
-   *
-   * @param categoryStyleName The name of the category style.
-   * @param categoryStyle The category style.
-   */
-  setCategoryStyle(categoryStyleName: string, categoryStyle: CategoryStyle) {
-    this.categoryStyles[categoryStyleName] = categoryStyle;
-  }
-
-  /**
-   * Gets the style for a given Blockly UI component.  If the style value is a
-   * string, we attempt to find the value of any named references.
-   *
-   * @param componentName The name of the component.
-   * @returns The style value.
-   */
-  getComponentStyle(componentName: string): string | null {
-    const style = (this.componentStyles as AnyDuringMigration)[componentName];
-    if (!style) {
-      return null;
-    }
-    if (typeof style === 'string') {
-      const recursiveStyle = this.getComponentStyle(style);
-      if (recursiveStyle) {
-        return recursiveStyle;
-      }
-    }
-    return `${style}`;
-  }
-
-  /**
-   * Configure a specific Blockly UI component with a style value.
-   *
-   * @param componentName The name of the component.
-   * @param styleValue The style value.
-   */
-  setComponentStyle(componentName: string, styleValue: AnyDuringMigration) {
-    (this.componentStyles as AnyDuringMigration)[componentName] = styleValue;
-  }
-
-  /**
-   * Configure a theme's font style.
-   *
-   * @param fontStyle The font style.
-   */
-  setFontStyle(fontStyle: FontStyle) {
-    this.fontStyle = fontStyle;
-  }
-
-  /**
-   * Configure a theme's start hats.
-   *
-   * @param startHats True if the theme enables start hats, false otherwise.
-   */
-  setStartHats(startHats: boolean) {
-    this.startHats = startHats;
-  }
-
-  /**
-   * Define a new Blockly theme.
-   *
-   * @param name The name of the theme.
-   * @param themeObj An object containing theme properties.
-   * @returns A new Blockly theme.
-   */
-  static defineTheme(name: string, themeObj: ITheme): Theme {
-    name = name.toLowerCase();
-    const theme = new Theme(name);
-    let base = themeObj['base'];
-    if (base) {
-      if (typeof base === 'string') {
-        base = registry.getObject(registry.Type.THEME, base) ?? undefined;
-      }
-      if (base instanceof Theme) {
-        object.deepMerge(theme, base);
-        theme.name = name;
-      }
-    }
-
-    object.deepMerge(theme.blockStyles, themeObj['blockStyles']);
-    object.deepMerge(theme.categoryStyles, themeObj['categoryStyles']);
-    object.deepMerge(theme.componentStyles, themeObj['componentStyles']);
-    object.deepMerge(theme.fontStyle, themeObj['fontStyle']);
-    if (themeObj['startHats'] !== null) {
-      theme.startHats = themeObj['startHats'];
-    }
-
-    return theme;
-  }
-}
-
-export namespace Theme {
-  export interface BlockStyle {
-    colourPrimary: string;
-    colourSecondary: string;
-    colourTertiary: string;
-    hat: string;
-  }
-
-  export interface CategoryStyle {
-    colour: string;
-  }
-
-  export interface ComponentStyle {
-    workspaceBackgroundColour?: string;
-    toolboxBackgroundColour?: string;
-    toolboxForegroundColour?: string;
-    flyoutBackgroundColour?: string;
-    flyoutForegroundColour?: string;
-    flyoutOpacity?: number;
-    scrollbarColour?: string;
-    scrollbarOpacity?: number;
-    insertionMarkerColour?: string;
-    insertionMarkerOpacity?: number;
-    markerColour?: string;
-    cursorColour?: string;
-    selectedGlowColour?: string;
-    selectedGlowOpacity?: number;
-    replacementGlowColour?: string;
-    replacementGlowOpacity?: number;
-  }
-
-  export interface FontStyle {
-    family?: string;
-    weight?: string;
-    size?: number;
-  }
-}
-
-export type BlockStyle = Theme.BlockStyle;
-export type CategoryStyle = Theme.CategoryStyle;
-export type ComponentStyle = Theme.ComponentStyle;
-export type FontStyle = Theme.FontStyle;

package/core/theme_manager.ts

@@ -1,192 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Object in charge of storing and updating a workspace theme
- *     and UI components.
- *
- * @class
- */
-// Former goog.module ID: Blockly.ThemeManager
-
-import type {Theme} from './theme.js';
-import * as arrayUtils from './utils/array.js';
-import * as dom from './utils/dom.js';
-import type {Workspace} from './workspace.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-/**
- * Class for storing and updating a workspace's theme and UI components.
- */
-export class ThemeManager {
-  /** A list of workspaces that are subscribed to this theme. */
-  private subscribedWorkspaces: Workspace[] = [];
-  private componentDB = new Map<string, Component[]>();
-
-  /**
-   * @param workspace The main workspace.
-   * @param theme The workspace theme.
-   * @internal
-   */
-  constructor(
-    private readonly workspace: WorkspaceSvg,
-    private theme: Theme,
-  ) {}
-
-  /**
-   * Get the workspace theme.
-   *
-   * @returns The workspace theme.
-   * @internal
-   */
-  getTheme(): Theme {
-    return this.theme;
-  }
-
-  /**
-   * Set the workspace theme, and refresh the workspace and all components.
-   *
-   * @param theme The workspace theme.
-   * @internal
-   */
-  setTheme(theme: Theme) {
-    const prevTheme = this.theme;
-    this.theme = theme;
-    // Set the theme name onto the injection div.
-    const injectionDiv = this.workspace.getInjectionDiv();
-    if (injectionDiv) {
-      if (prevTheme) {
-        const oldClassName = prevTheme.getClassName();
-        if (oldClassName) {
-          dom.removeClass(injectionDiv, oldClassName);
-        }
-      }
-      const newClassName = this.theme.getClassName();
-      if (newClassName) {
-        dom.addClass(injectionDiv, newClassName);
-      }
-    }
-
-    // Refresh all subscribed workspaces.
-    for (
-      let i = 0, workspace;
-      (workspace = this.subscribedWorkspaces[i]);
-      i++
-    ) {
-      (workspace as WorkspaceSvg).refreshTheme();
-    }
-
-    // Refresh all registered Blockly UI components.
-    for (const [key, componentList] of this.componentDB) {
-      for (const component of componentList) {
-        const element = component.element;
-        const propertyName = component.propertyName;
-        const style = this.theme && this.theme.getComponentStyle(key);
-        element.style.setProperty(propertyName, style || '');
-      }
-    }
-
-    for (const workspace of this.subscribedWorkspaces) {
-      (workspace as WorkspaceSvg).hideChaff();
-    }
-  }
-
-  /**
-   * Subscribe a workspace to changes to the selected theme.  If a new theme is
-   * set, the workspace is called to refresh its blocks.
-   *
-   * @param workspace The workspace to subscribe.
-   * @internal
-   */
-  subscribeWorkspace(workspace: Workspace) {
-    this.subscribedWorkspaces.push(workspace);
-  }
-
-  /**
-   * Unsubscribe a workspace to changes to the selected theme.
-   *
-   * @param workspace The workspace to unsubscribe.
-   * @internal
-   */
-  unsubscribeWorkspace(workspace: Workspace) {
-    if (!arrayUtils.removeElem(this.subscribedWorkspaces, workspace)) {
-      throw Error(
-        "Cannot unsubscribe a workspace that hasn't been subscribed.",
-      );
-    }
-  }
-
-  /**
-   * Subscribe an element to changes to the selected theme.  If a new theme is
-   * selected, the element's style is refreshed with the new theme's style.
-   *
-   * @param element The element to subscribe.
-   * @param componentName The name used to identify the component. This must be
-   *     the same name used to configure the style in the Theme object.
-   * @param propertyName The inline style property name to update.
-   * @internal
-   */
-  subscribe(
-    element: HTMLElement | SVGElement,
-    componentName: string,
-    propertyName: string,
-  ) {
-    if (!this.componentDB.has(componentName)) {
-      this.componentDB.set(componentName, []);
-    }
-
-    // Add the element to our component map.
-    this.componentDB.get(componentName)!.push({element, propertyName});
-
-    // Initialize the element with its corresponding theme style.
-    const style = this.theme && this.theme.getComponentStyle(componentName);
-    element.style.setProperty(propertyName, style || '');
-  }
-
-  /**
-   * Unsubscribe an element to changes to the selected theme.
-   *
-   * @param element The element to unsubscribe.
-   * @internal
-   */
-  unsubscribe(element: HTMLElement | SVGElement) {
-    if (!element) {
-      return;
-    }
-    // Go through all component, and remove any references to this element.
-    for (const [componentName, elements] of this.componentDB) {
-      for (let i = elements.length - 1; i >= 0; i--) {
-        if (elements[i].element === element) {
-          elements.splice(i, 1);
-        }
-      }
-      // Clean up the component map entry if the list is empty.
-      if (!elements.length) {
-        this.componentDB.delete(componentName);
-      }
-    }
-  }
-
-  /**
-   * Dispose of this theme manager.
-   *
-   * @internal
-   */
-  dispose() {
-    this.subscribedWorkspaces.length = 0;
-    this.componentDB.clear();
-  }
-}
-
-export namespace ThemeManager {
-  /** The type for a Blockly UI Component. */
-  export interface Component {
-    element: HTMLElement | SVGElement;
-    propertyName: string;
-  }
-}
-
-export type Component = ThemeManager.Component;

package/core/toast.ts

@@ -1,219 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import * as Css from './css.js';
-import {Msg} from './msg.js';
-import * as aria from './utils/aria.js';
-import * as dom from './utils/dom.js';
-import {Svg} from './utils/svg.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-const CLASS_NAME = 'blocklyToast';
-const MESSAGE_CLASS_NAME = 'blocklyToastMessage';
-const CLOSE_BUTTON_CLASS_NAME = 'blocklyToastCloseButton';
-
-/**
- * Display/configuration options for a toast notification.
- */
-export interface ToastOptions {
-  /**
-   * Toast ID. If set along with `oncePerSession`, will cause subsequent toasts
-   * with this ID to not be shown.
-   */
-  id?: string;
-
-  /**
-   * Flag to show the toast once per session only.
-   * Subsequent calls are ignored.
-   */
-  oncePerSession?: boolean;
-
-  /**
-   * Text of the message to display on the toast.
-   */
-  message: string;
-
-  /**
-   * Duration in seconds before the toast is removed. Defaults to 5.
-   */
-  duration?: number;
-
-  /**
-   * How prominently/interrupting the readout of the toast should be for
-   * screenreaders. Corresponds to aria-live and defaults to polite.
-   */
-  assertiveness?: Toast.Assertiveness;
-}
-
-/**
- * Class that allows for showing and dismissing temporary notifications.
- */
-export class Toast {
-  /** IDs of toasts that have previously been shown. */
-  private static shownIds = new Set<string>();
-
-  /**
-   * Shows a toast notification.
-   *
-   * @param workspace The workspace to show the toast on.
-   * @param options Configuration options for the toast message, duration, etc.
-   */
-  static show(workspace: WorkspaceSvg, options: ToastOptions) {
-    if (options.oncePerSession && options.id) {
-      if (this.shownIds.has(options.id)) return;
-      this.shownIds.add(options.id);
-    }
-
-    // Clear any existing toasts.
-    this.hide(workspace);
-
-    const toast = this.createDom(workspace, options);
-
-    // Animate the toast into view.
-    requestAnimationFrame(() => {
-      toast.style.bottom = '2rem';
-    });
-  }
-
-  /**
-   * Creates the DOM representation of a toast.
-   *
-   * @param workspace The workspace to inject the toast notification onto.
-   * @param options Configuration options for the toast.
-   * @returns The root DOM element of the toast.
-   */
-  protected static createDom(workspace: WorkspaceSvg, options: ToastOptions) {
-    const {
-      message,
-      duration = 5,
-      assertiveness = Toast.Assertiveness.POLITE,
-    } = options;
-
-    const toast = document.createElement('div');
-    workspace.getInjectionDiv().appendChild(toast);
-    toast.dataset.toastId = options.id;
-    toast.className = CLASS_NAME;
-    aria.setRole(toast, aria.Role.STATUS);
-    aria.setState(toast, aria.State.LIVE, assertiveness);
-
-    const messageElement = toast.appendChild(document.createElement('div'));
-    messageElement.className = MESSAGE_CLASS_NAME;
-    messageElement.innerText = message;
-    const closeButton = toast.appendChild(document.createElement('button'));
-    closeButton.className = CLOSE_BUTTON_CLASS_NAME;
-    aria.setState(closeButton, aria.State.LABEL, Msg['CLOSE']);
-    const closeIcon = dom.createSvgElement(
-      Svg.SVG,
-      {
-        width: 24,
-        height: 24,
-        viewBox: '0 0 24 24',
-        fill: 'none',
-      },
-      closeButton,
-    );
-    aria.setState(closeIcon, aria.State.HIDDEN, true);
-    dom.createSvgElement(
-      Svg.RECT,
-      {
-        x: 19.7782,
-        y: 2.80762,
-        width: 2,
-        height: 24,
-        transform: 'rotate(45, 19.7782, 2.80762)',
-        fill: 'black',
-      },
-      closeIcon,
-    );
-    dom.createSvgElement(
-      Svg.RECT,
-      {
-        x: 2.80762,
-        y: 4.22183,
-        width: 2,
-        height: 24,
-        transform: 'rotate(-45, 2.80762, 4.22183)',
-        fill: 'black',
-      },
-      closeIcon,
-    );
-    closeButton.addEventListener('click', () => {
-      toast.remove();
-      workspace.markFocused();
-    });
-
-    let timeout: ReturnType<typeof setTimeout>;
-    const setToastTimeout = () => {
-      timeout = setTimeout(() => toast.remove(), duration * 1000);
-    };
-    const clearToastTimeout = () => clearTimeout(timeout);
-    toast.addEventListener('focusin', clearToastTimeout);
-    toast.addEventListener('focusout', setToastTimeout);
-    toast.addEventListener('mouseenter', clearToastTimeout);
-    toast.addEventListener('mousemove', clearToastTimeout);
-    toast.addEventListener('mouseleave', setToastTimeout);
-    setToastTimeout();
-
-    return toast;
-  }
-
-  /**
-   * Dismiss a toast, e.g. in response to a user action.
-   *
-   * @param workspace The workspace to dismiss a toast in.
-   * @param id The toast ID, or undefined to clear any toast.
-   */
-  static hide(workspace: WorkspaceSvg, id?: string) {
-    const toast = workspace.getInjectionDiv().querySelector(`.${CLASS_NAME}`);
-    if (toast instanceof HTMLElement && (!id || id === toast.dataset.toastId)) {
-      toast.remove();
-    }
-  }
-}
-
-/**
- * Options for how aggressively toasts should be read out by screenreaders.
- * Values correspond to those for aria-live.
- */
-export namespace Toast {
-  export enum Assertiveness {
-    ASSERTIVE = 'assertive',
-    POLITE = 'polite',
-  }
-}
-
-Css.register(`
-.${CLASS_NAME} {
-  font-size: 1.2rem;
-  position: absolute;
-  bottom: -10rem;
-  right: 2rem;
-  padding: 1rem;
-  color: black;
-  background-color: white;
-  border: 2px solid black;
-  border-radius: 0.4rem;
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  line-height: 1.5;
-  transition: bottom 0.3s ease-out;
-}
-
-.${CLASS_NAME} .${MESSAGE_CLASS_NAME} {
-  maxWidth: 18rem;
-}
-
-.${CLASS_NAME} .${CLOSE_BUTTON_CLASS_NAME} {
-  margin: 0;
-  padding: 0.2rem;
-  background-color: transparent;
-  color: black;
-  border: none;
-  cursor: pointer;
-}
-`);