blockly 12.4.0 → 12.4.1

package/core/renderers/geras/highlight_constants.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+/** An object containing sizing and path information about an outside corner. */
+export interface OutsideCorner {
+    height: number;
+    topLeft: (p1: boolean) => string;
+    bottomLeft: () => string;
+}
+/** An object containing sizing and path information about an inside corner. */
+export interface InsideCorner {
+    width: number;
+    height: number;
+    pathTop: (p1: boolean) => string;
+    pathBottom: (p1: boolean) => string;
+}
+/** An object containing sizing and path information about a start hat. */
+export interface StartHat {
+    path: (p1: boolean) => string;
+}
+/** An object containing sizing and path information about a notch. */
+export interface Notch {
+    pathLeft: string;
+}
+/** An object containing sizing and path information about a puzzle tab. */
+export interface PuzzleTab {
+    width: number;
+    height: number;
+    pathDown: (p1: boolean) => string;
+    pathUp: (p1: boolean) => string;
+}
+/**
+ * An object containing sizing and path information about collapsed block
+ * indicators.
+ */
+export interface JaggedTeeth {
+    height: number;
+    width: number;
+    pathLeft: string;
+}
+/**
+ * An object that provides constants for rendering highlights on blocks.
+ * Some highlights are simple offsets of the parent paths and can be generated
+ * programmatically.  Others, especially on curves, are just made out of piles
+ * of constants and are hard to tweak.
+ */
+export declare class HighlightConstantProvider {
+    constantProvider: ConstantProvider;
+    /** The offset between the block's main path and highlight path. */
+    OFFSET: number;
+    START_POINT: string;
+    INSIDE_CORNER: InsideCorner;
+    OUTSIDE_CORNER: OutsideCorner;
+    PUZZLE_TAB: PuzzleTab;
+    NOTCH: Notch;
+    JAGGED_TEETH: JaggedTeeth;
+    START_HAT: StartHat;
+    /**
+     * @param constants The rendering constants provider.
+     */
+    constructor(constants: ConstantProvider);
+    /**
+     * Initialize shape objects based on the constants set in the constructor.
+     */
+    init(): void;
+    /**
+     * @returns An object containing sizing and path information about inside
+     *     corner highlights.
+     */
+    protected makeInsideCorner(): InsideCorner;
+    /**
+     * @returns An object containing sizing and path information about outside
+     *     corner highlights.
+     */
+    protected makeOutsideCorner(): OutsideCorner;
+    /**
+     * @returns An object containing sizing and path information about puzzle tab
+     *     highlights.
+     */
+    protected makePuzzleTab(): PuzzleTab;
+    /**
+     * @returns An object containing sizing and path information about notch
+     *     highlights.
+     */
+    protected makeNotch(): Notch;
+    /**
+     * @returns An object containing sizing and path information about collapsed
+     *     block edge highlights.
+     */
+    protected makeJaggedTeeth(): JaggedTeeth;
+    /**
+     * @returns An object containing sizing and path information about start
+     *     highlights.
+     */
+    protected makeStartHat(): StartHat;
+}
+//# sourceMappingURL=highlight_constants.d.ts.map

package/core/renderers/geras/highlighter.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+import type { BottomRow } from '../measurables/bottom_row.js';
+import type { Row } from '../measurables/row.js';
+import type { TopRow } from '../measurables/top_row.js';
+import type { HighlightConstantProvider, InsideCorner, JaggedTeeth, Notch, OutsideCorner, PuzzleTab, StartHat } from './highlight_constants.js';
+import type { RenderInfo } from './info.js';
+import type { InlineInput } from './measurables/inline_input.js';
+/**
+ * An object that adds highlights to a block based on the given rendering
+ * information.
+ *
+ * Highlighting is interesting because the highlights do not fully enclose the
+ * block.  Instead, they are positioned based on a light source in the top left.
+ * This means that rendering highlights requires exact information about the
+ * position of each part of the block.  The resulting paths are not continuous
+ * or closed paths.  The highlights for tabs and notches are loosely based on
+ * tab and notch shapes, but are not exactly the same.
+ */
+export declare class Highlighter {
+    info_: RenderInfo;
+    steps_: string;
+    inlineSteps_: string;
+    RTL_: boolean;
+    constants_: ConstantProvider;
+    highlightConstants_: HighlightConstantProvider;
+    private readonly highlightOffset;
+    outsideCornerPaths_: OutsideCorner;
+    insideCornerPaths_: InsideCorner;
+    puzzleTabPaths_: PuzzleTab;
+    notchPaths_: Notch;
+    startPaths_: StartHat;
+    jaggedTeethPaths_: JaggedTeeth;
+    /**
+     * @param info An object containing all information needed to render this
+     *     block.
+     */
+    constructor(info: RenderInfo);
+    /**
+     * Get the steps for the highlight path.
+     *
+     * @returns The steps for the highlight path.
+     */
+    getPath(): string;
+    /**
+     * Add a highlight to the top corner of a block.
+     *
+     * @param row The top row of the block.
+     */
+    drawTopCorner(row: TopRow): void;
+    /**
+     * Add a highlight on a jagged edge for a collapsed block.
+     *
+     * @param row  The row to highlight.
+     */
+    drawJaggedEdge_(row: Row): void;
+    /**
+     * Add a highlight on a value input.
+     *
+     * @param row The row the input belongs to.
+     */
+    drawValueInput(row: Row): void;
+    /**
+     * Add a highlight on a statement input.
+     *
+     * @param row The row to highlight.
+     */
+    drawStatementInput(row: Row): void;
+    /**
+     * Add a highlight on the right side of a row.
+     *
+     * @param row The row to highlight.
+     */
+    drawRightSideRow(row: Row): void;
+    /**
+     * Add a highlight to the bottom row.
+     *
+     * @param row The row to highlight.
+     */
+    drawBottomRow(row: BottomRow): void;
+    /**
+     * Draw the highlight on the left side of the block.
+     */
+    drawLeft(): void;
+    /**
+     * Add a highlight to an inline input.
+     *
+     * @param input The input to highlight.
+     */
+    drawInlineInput(input: InlineInput): void;
+}
+//# sourceMappingURL=highlighter.d.ts.map

package/core/renderers/geras/info.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Input } from '../../inputs/input.js';
+import { RenderInfo as BaseRenderInfo } from '../common/info.js';
+import type { Measurable } from '../measurables/base.js';
+import type { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import type { Renderer } from './renderer.js';
+/**
+ * An object containing all sizing information needed to draw this block,
+ * customized for the geras renderer.
+ *
+ * This measure pass does not propagate changes to the block (although fields
+ * may choose to rerender when getSize() is called).  However, calling it
+ * repeatedly may be expensive.
+ */
+export declare class RenderInfo extends BaseRenderInfo {
+    constants_: ConstantProvider;
+    protected readonly renderer_: Renderer;
+    /**
+     * @param renderer The renderer in use.
+     * @param block The block to measure.
+     */
+    constructor(renderer: Renderer, block: BlockSvg);
+    /**
+     * Get the block renderer in use.
+     *
+     * @returns The block renderer in use.
+     */
+    getRenderer(): Renderer;
+    populateBottomRow_(): void;
+    addInput_(input: Input, activeRow: Row): void;
+    addElemSpacing_(): void;
+    getInRowSpacing_(prev: Measurable | null, next: Measurable | null): number;
+    getSpacerRowHeight_(prev: Row, next: Row): number;
+    getElemCenterline_(row: Row, elem: Measurable): number;
+    alignRowElements_(): void;
+    getDesiredRowWidth_(row: Row): number;
+    finalize_(): void;
+}
+//# sourceMappingURL=info.d.ts.map

package/core/renderers/geras/measurables/inline_input.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../../inputs/input.js';
+import type { ConstantProvider as BaseConstantProvider } from '../../../renderers/common/constants.js';
+import { InlineInput as BaseInlineInput } from '../../../renderers/measurables/inline_input.js';
+import type { ConstantProvider as GerasConstantProvider } from '../constants.js';
+/**
+ * An object containing information about the space an inline input takes up
+ * during rendering.
+ */
+export declare class InlineInput extends BaseInlineInput {
+    constants_: GerasConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The inline input to measure and store information for.
+     */
+    constructor(constants: BaseConstantProvider, input: Input);
+}
+//# sourceMappingURL=inline_input.d.ts.map

package/core/renderers/geras/measurables/statement_input.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../../inputs/input.js';
+import type { ConstantProvider as BaseConstantProvider } from '../../../renderers/common/constants.js';
+import { StatementInput as BaseStatementInput } from '../../../renderers/measurables/statement_input.js';
+import type { ConstantProvider as GerasConstantProvider } from '../constants.js';
+/**
+ * An object containing information about the space a statement input takes up
+ * during rendering.
+ */
+export declare class StatementInput extends BaseStatementInput {
+    constants_: GerasConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The statement input to measure and store information for.
+     */
+    constructor(constants: BaseConstantProvider, input: Input);
+}
+//# sourceMappingURL=statement_input.d.ts.map

package/core/renderers/geras/path_object.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { BlockStyle } from '../../theme.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 declare class PathObject extends BasePathObject {
+    constants: ConstantProvider;
+    svgPathDark: SVGElement;
+    svgPathLight: SVGElement;
+    /**
+     * The colour of the dark path on the block in '#RRGGBB' format.
+     */
+    colourDark: string;
+    /**
+     * @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);
+    setPath(mainPath: string): void;
+    /**
+     * Set the highlight path generated by the renderer onto the SVG element.
+     *
+     * @param highlightPath The highlight path.
+     */
+    setHighlightPath(highlightPath: string): void;
+    flipRTL(): void;
+    applyColour(block: BlockSvg): void;
+    setStyle(blockStyle: BlockStyle): void;
+    updateHighlighted(highlighted: boolean): void;
+    updateShadow_(shadow: boolean): void;
+    updateDisabled_(disabled: boolean): void;
+}
+//# sourceMappingURL=path_object.d.ts.map

package/core/renderers/geras/renderer.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { BlockStyle, Theme } from '../../theme.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 { HighlightConstantProvider } from './highlight_constants.js';
+import { RenderInfo } from './info.js';
+import { PathObject } from './path_object.js';
+/**
+ * The geras renderer. This renderer was designed to be backwards compatible
+ * with pre-2019 Blockly. Newer projects that are not constrained by backwards
+ * compatibility should use thrasos, which is a more modern take on this
+ * renderer.
+ *
+ * Geras is the ancient Greek spirit of old age.
+ */
+export declare class Renderer extends BaseRenderer {
+    /** The renderer's highlight constant provider. */
+    private highlightConstants;
+    /**
+     * @param name The renderer name.
+     */
+    constructor(name: string);
+    /**
+     * Initialize the renderer.  Geras has a highlight provider in addition to
+     * the normal constant provider.
+     */
+    init(theme: Theme, opt_rendererOverrides?: {
+        [rendererConstant: string]: any;
+    }): void;
+    refreshDom(svg: SVGElement, theme: Theme, injectionDiv: HTMLElement): void;
+    makeConstants_(): 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;
+    /**
+     * 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: BaseRenderInfo): Drawer;
+    /**
+     * 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): PathObject;
+    /**
+     * Create a new instance of the renderer's highlight constant provider.
+     *
+     * @returns The highlight constant provider.
+     */
+    protected makeHighlightConstants_(): HighlightConstantProvider;
+    /**
+     * Get the renderer's highlight constant provider.  We assume that when this
+     * is called, the renderer has already been initialized.
+     *
+     * @returns The highlight constant provider.
+     */
+    getHighlightConstants(): HighlightConstantProvider;
+}
+//# sourceMappingURL=renderer.d.ts.map

package/core/renderers/measurables/base.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+/**
+ * The base class to represent a part of a block that takes up space during
+ * rendering.  The constructor for each non-spacer Measurable records the size
+ * of the block element (e.g. field, statement input).
+ */
+export declare class Measurable {
+    width: number;
+    height: number;
+    type: number;
+    xPos: number;
+    centerline: number;
+    notchOffset: number;
+    /** The renderer's constant provider. */
+    protected readonly constants_: ConstantProvider;
+    /**
+     * @param constants The rendering constants provider.
+     */
+    constructor(constants: ConstantProvider);
+}
+//# sourceMappingURL=base.d.ts.map

package/core/renderers/measurables/bottom_row.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { ConstantProvider } from '../common/constants.js';
+import type { NextConnection } from './next_connection.js';
+import { Row } from './row.js';
+/**
+ * An object containing information about what elements are in the bottom row of
+ * a block as well as spacing information for the bottom row.
+ * Elements in a bottom row can consist of corners, spacers and next
+ * connections.
+ */
+export declare class BottomRow extends Row {
+    /**
+     * Whether this row has a next connection.
+     */
+    hasNextConnection: boolean;
+    /**
+     * The next connection on the row, if any.
+     */
+    connection: NextConnection | null;
+    /**
+     * The amount that the bottom of the block extends below the horizontal
+     * edge, e.g. because of a next connection.  Must be non-negative (see
+     * #2820).
+     */
+    descenderHeight: number;
+    /**
+     * The Y position of the bottom edge of the block, relative to the origin
+     * of the block rendering.
+     */
+    baseline: number;
+    /**
+     * @param constants The rendering constants provider.
+     */
+    constructor(constants: ConstantProvider);
+    /**
+     * Returns whether or not the bottom row has a left square corner.
+     *
+     * @param block The block whose bottom row this represents.
+     * @returns Whether or not the bottom row has a left square corner.
+     */
+    hasLeftSquareCorner(block: BlockSvg): boolean;
+    /**
+     * Returns whether or not the bottom row has a right square corner.
+     *
+     * @param _block The block whose bottom row this represents.
+     * @returns Whether or not the bottom row has a right square corner.
+     */
+    hasRightSquareCorner(_block: BlockSvg): boolean;
+    measure(): void;
+    startsWithElemSpacer(): boolean;
+    endsWithElemSpacer(): boolean;
+}
+//# sourceMappingURL=bottom_row.d.ts.map

package/core/renderers/measurables/connection.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { RenderedConnection } from '../../rendered_connection.js';
+import type { ConstantProvider, Shape } from '../common/constants.js';
+import { Measurable } from './base.js';
+/**
+ * The base class to represent a connection and the space that it takes up on
+ * the block.
+ */
+export declare class Connection extends Measurable {
+    connectionModel: RenderedConnection;
+    shape: Shape;
+    isDynamicShape: boolean;
+    highlighted: boolean;
+    /**
+     * @param constants The rendering constants provider.
+     * @param connectionModel The connection object on the block that this
+     *     represents.
+     */
+    constructor(constants: ConstantProvider, connectionModel: RenderedConnection);
+}
+//# sourceMappingURL=connection.d.ts.map

package/core/renderers/measurables/external_value_input.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../inputs/input.js';
+import type { ConstantProvider } from '../common/constants.js';
+import { InputConnection } from './input_connection.js';
+/**
+ * An object containing information about the space an external value input
+ * takes up during rendering
+ */
+export declare class ExternalValueInput extends InputConnection {
+    height: number;
+    width: number;
+    connectionOffsetY: number;
+    connectionHeight: number;
+    connectionWidth: number;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The external value input to measure and store information for.
+     */
+    constructor(constants: ConstantProvider, input: Input);
+}
+//# sourceMappingURL=external_value_input.d.ts.map

package/core/renderers/measurables/field.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Field as BlocklyField } from '../../field.js';
+import type { Input } from '../../inputs/input.js';
+import type { ConstantProvider } from '../common/constants.js';
+import { Measurable } from './base.js';
+/**
+ * An object containing information about the space a field takes up during
+ * rendering
+ */
+export declare class Field extends Measurable {
+    field: BlocklyField;
+    parentInput: Input;
+    isEditable: boolean;
+    flipRtl: boolean;
+    height: number;
+    width: number;
+    /**
+     * @param constants The rendering constants provider.
+     * @param field The field to measure and store information for.
+     * @param parentInput The parent input for the field.
+     */
+    constructor(constants: ConstantProvider, field: BlocklyField, parentInput: Input);
+}
+//# sourceMappingURL=field.d.ts.map

package/core/renderers/measurables/hat.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+import { Measurable } from './base.js';
+/**
+ * An object containing information about the space a hat takes up during
+ * rendering.
+ */
+export declare class Hat extends Measurable {
+    ascenderHeight: number;
+    /**
+     * @param constants The rendering constants provider.
+     */
+    constructor(constants: ConstantProvider);
+}
+//# sourceMappingURL=hat.d.ts.map

package/core/renderers/measurables/icon.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { IIcon as BlocklyIcon } from '../../interfaces/i_icon.js';
+import type { ConstantProvider } from '../common/constants.js';
+import { Measurable } from './base.js';
+/**
+ * An object containing information about the space an icon takes up during
+ * rendering.
+ */
+export declare class Icon extends Measurable {
+    icon: BlocklyIcon;
+    flipRtl: boolean;
+    /**
+     * An object containing information about the space an icon takes up during
+     * rendering.
+     *
+     * @param constants The rendering constants provider.
+     * @param icon The icon to measure and store information for.
+     */
+    constructor(constants: ConstantProvider, icon: BlocklyIcon);
+}
+//# sourceMappingURL=icon.d.ts.map

package/core/renderers/measurables/in_row_spacer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { ConstantProvider } from '../common/constants.js';
+import { Measurable } from './base.js';
+/**
+ * An object containing information about a spacer between two elements on a
+ * row.
+ */
+export declare class InRowSpacer extends Measurable {
+    private inRowSpacer;
+    /**
+     * @param constants The rendering constants provider.
+     * @param width The width of the spacer.
+     */
+    constructor(constants: ConstantProvider, width: number);
+}
+//# sourceMappingURL=in_row_spacer.d.ts.map

package/core/renderers/measurables/inline_input.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { Input } from '../../inputs/input.js';
+import type { ConstantProvider } from '../common/constants.js';
+import { InputConnection } from './input_connection.js';
+/**
+ * An object containing information about the space an inline input takes up
+ * during rendering.
+ */
+export declare class InlineInput extends InputConnection {
+    connectionHeight: number;
+    connectionWidth: number;
+    /**
+     * @param constants The rendering constants provider.
+     * @param input The inline input to measure and store information for.
+     */
+    constructor(constants: ConstantProvider, input: Input);
+}
+//# sourceMappingURL=inline_input.d.ts.map