blockly 8.20220331.0-beta.0 → 9.0.0-beta.1

package/core/renderers/common/marker_svg.d.ts

@@ -0,0 +1,249 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../events/events_marker_move.js';
+import type { IASTNodeLocationSvg } from '../../interfaces/i_ast_node_location_svg.js';
+import { ASTNode } from '../../keyboard_nav/ast_node.js';
+import type { Marker } from '../../keyboard_nav/marker.js';
+import type { RenderedConnection } from '../../rendered_connection.js';
+import type { WorkspaceSvg } from '../../workspace_svg.js';
+import type { ConstantProvider, Notch, PuzzleTab } from './constants.js';
+/**
+ * Class for a marker.
+ *
+ * @alias Blockly.blockRendering.MarkerSvg
+ */
+export declare class MarkerSvg {
+    private readonly workspace;
+    private readonly marker;
+    /**
+     * The workspace, field, or block that the marker SVG element should be
+     * attached to.
+     */
+    private parent_;
+    /** The current SVG element for the marker. */
+    currentMarkerSvg: Element | null;
+    colour_: string;
+    /** The root SVG group containing the marker. */
+    protected markerSvg_: SVGGElement | null;
+    protected svgGroup_: SVGGElement | null;
+    protected markerBlock_: SVGPathElement | null;
+    protected markerInput_: SVGPathElement | null;
+    protected markerSvgLine_: SVGRectElement | null;
+    protected markerSvgRect_: SVGRectElement | null;
+    /** The constants necessary to draw the marker. */
+    protected constants_: ConstantProvider;
+    /**
+     * @param workspace The workspace the marker belongs to.
+     * @param constants The constants for the renderer.
+     * @param marker The marker to draw.
+     */
+    constructor(workspace: WorkspaceSvg, constants: ConstantProvider, marker: Marker);
+    /**
+     * Return the root node of the SVG or null if none exists.
+     *
+     * @returns The root SVG node.
+     */
+    getSvgRoot(): SVGElement;
+    /**
+     * Get the marker.
+     *
+     * @returns The marker to draw for.
+     */
+    getMarker(): Marker;
+    /**
+     * True if the marker should be drawn as a cursor, false otherwise.
+     * A cursor is drawn as a flashing line. A marker is drawn as a solid line.
+     *
+     * @returns True if the marker is a cursor, false otherwise.
+     */
+    isCursor(): boolean;
+    /**
+     * Create the DOM element for the marker.
+     *
+     * @returns The marker controls SVG group.
+     * @internal
+     */
+    createDom(): SVGElement;
+    /**
+     * Attaches the SVG root of the marker to the SVG group of the parent.
+     *
+     * @param newParent The workspace, field, or block that the marker SVG element
+     *     should be attached to.
+     */
+    protected setParent_(newParent: IASTNodeLocationSvg): void;
+    /**
+     * Update the marker.
+     *
+     * @param oldNode The previous node the marker was on or null.
+     * @param curNode The node that we want to draw the marker for.
+     */
+    draw(oldNode: ASTNode, curNode: ASTNode): void;
+    /**
+     * Update the marker's visible state based on the type of curNode..
+     *
+     * @param curNode The node that we want to draw the marker for.
+     */
+    protected showAtLocation_(curNode: ASTNode): void;
+    /**************************
+     * Display
+     **************************/
+    /**
+     * Show the marker as a combination of the previous connection and block,
+     * the output connection and block, or just the block.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    private showWithBlockPrevOutput_;
+    /**
+     * Position and display the marker for a block.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithBlock_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for a previous connection.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithPrevious_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for an output connection.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithOutput_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for a workspace coordinate.
+     * This is a horizontal line.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithCoordinates_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for a field.
+     * This is a box around the field.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithField_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for an input.
+     * This is a puzzle piece.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithInput_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for a next connection.
+     * This is a horizontal line.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithNext_(curNode: ASTNode): void;
+    /**
+     * Position and display the marker for a stack.
+     * This is a box with extra padding around the entire stack of blocks.
+     *
+     * @param curNode The node to draw the marker for.
+     */
+    protected showWithStack_(curNode: ASTNode): void;
+    /** Show the current marker. */
+    protected showCurrent_(): void;
+    /**************************
+     * Position
+     **************************/
+    /**
+     * Position the marker for a block.
+     * Displays an outline of the top half of a rectangle around a block.
+     *
+     * @param width The width of the block.
+     * @param markerOffset The extra padding for around the block.
+     * @param markerHeight The height of the marker.
+     */
+    protected positionBlock_(width: number, markerOffset: number, markerHeight: number): void;
+    /**
+     * Position the marker for an input connection.
+     * Displays a filled in puzzle piece.
+     *
+     * @param connection The connection to position marker around.
+     */
+    protected positionInput_(connection: RenderedConnection): void;
+    /**
+     * Move and show the marker at the specified coordinate in workspace units.
+     * Displays a horizontal line.
+     *
+     * @param x The new x, in workspace units.
+     * @param y The new y, in workspace units.
+     * @param width The new width, in workspace units.
+     */
+    protected positionLine_(x: number, y: number, width: number): void;
+    /**
+     * Position the marker for an output connection.
+     * Displays a puzzle outline and the top and bottom path.
+     *
+     * @param width The width of the block.
+     * @param height The height of the block.
+     * @param connectionShape The shape object for the connection.
+     */
+    protected positionOutput_(width: number, height: number, connectionShape: Notch | PuzzleTab): void;
+    /**
+     * Position the marker for a previous connection.
+     * Displays a half rectangle with a notch in the top to represent the previous
+     * connection.
+     *
+     * @param width The width of the block.
+     * @param markerOffset The offset of the marker from around the block.
+     * @param markerHeight The height of the marker.
+     * @param connectionShape The shape object for the connection.
+     */
+    protected positionPrevious_(width: number, markerOffset: number, markerHeight: number, connectionShape: Notch | PuzzleTab): void;
+    /**
+     * Move and show the marker at the specified coordinate in workspace units.
+     * Displays a filled in rectangle.
+     *
+     * @param x The new x, in workspace units.
+     * @param y The new y, in workspace units.
+     * @param width The new width, in workspace units.
+     * @param height The new height, in workspace units.
+     */
+    protected positionRect_(x: number, y: number, width: number, height: number): void;
+    /**
+     * Flip the SVG paths in RTL.
+     *
+     * @param markerSvg The marker that we want to flip.
+     */
+    private flipRtl_;
+    /** Hide the marker. */
+    hide(): void;
+    /**
+     * Fire event for the marker or marker.
+     *
+     * @param oldNode The old node the marker used to be on.
+     * @param curNode The new node the marker is currently on.
+     */
+    private fireMarkerEvent_;
+    /**
+     * Get the properties to make a marker blink.
+     *
+     * @returns The object holding attributes to make the marker blink.
+     */
+    protected getBlinkProperties_(): any;
+    /**
+     * Create the marker SVG.
+     *
+     * @returns The SVG node created.
+     */
+    protected createDomInternal_(): Element;
+    /**
+     * Apply the marker's colour.
+     *
+     * @param _curNode The node that we want to draw the marker for.
+     */
+    protected applyColour_(_curNode: ASTNode): void;
+    /** Dispose of this marker. */
+    dispose(): void;
+}
+//# sourceMappingURL=marker_svg.d.ts.map

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

@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Connection } from '../../connection.js';
+import type { BlockStyle } from '../../theme.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.
+ *
+ * @alias Blockly.blockRendering.PathObject
+ */
+export declare class PathObject implements IPathObject {
+    svgRoot: any;
+    /** @internal */
+    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.
+     *
+     * @internal
+     */
+    cursorSvg: SVGElement;
+    /**
+     * Holds the markers svg element when the marker is attached to the block.
+     * This is null if there is no marker on the block.
+     *
+     * @internal
+     */
+    markerSvg: SVGElement;
+    /** @internal */
+    constants: ConstantProvider;
+    /** @internal */
+    style: BlockStyle;
+    /**
+     * @param root The root SVG element.
+     * @param style The style object to use for colouring.
+     * @param constants The renderer's constants.
+     * @internal
+     */
+    constructor(root: SVGElement, style: BlockStyle, constants: ConstantProvider);
+    /**
+     * Set the path generated by the renderer onto the respective SVG element.
+     *
+     * @param pathString The path.
+     * @internal
+     */
+    setPath(pathString: string): void;
+    /**
+     * Flip the SVG paths in RTL.
+     *
+     * @internal
+     */
+    flipRTL(): void;
+    /**
+     * 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.
+     * @internal
+     */
+    setCursorSvg(cursorSvg: SVGElement): void;
+    /**
+     * 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.
+     * @internal
+     */
+    setMarkerSvg(markerSvg: SVGElement): void;
+    /**
+     * 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.
+     * @internal
+     */
+    applyColour(block: BlockSvg): void;
+    /**
+     * Set the style.
+     *
+     * @param blockStyle The block style to use.
+     * @internal
+     */
+    setStyle(blockStyle: BlockStyle): void;
+    /**
+     * 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): void;
+    /**
+     * 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.
+     * @internal
+     */
+    updateHighlighted(enable: boolean): void;
+    /**
+     * 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): void;
+    /**
+     * Updates the look of the block to reflect a disabled state.
+     *
+     * @param disabled True if disabled.
+     */
+    protected updateDisabled_(disabled: boolean): void;
+    /**
+     * Add or remove styling showing that a block is selected.
+     *
+     * @param enable True if selection is enabled, false otherwise.
+     * @internal
+     */
+    updateSelected(enable: boolean): void;
+    /**
+     * 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.
+     * @internal
+     */
+    updateDraggingDelete(enable: boolean): void;
+    /**
+     * Add or remove styling showing that a block is an insertion marker.
+     *
+     * @param enable True if the block is an insertion marker, false otherwise.
+     * @internal
+     */
+    updateInsertionMarker(enable: boolean): void;
+    /**
+     * Add or remove styling showing that a block is movable.
+     *
+     * @param enable True if the block is movable, false otherwise.
+     * @internal
+     */
+    updateMovable(enable: boolean): void;
+    /**
+     * 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.
+     * @internal
+     */
+    updateReplacementFade(enable: boolean): void;
+    /**
+     * 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.
+     * @internal
+     */
+    updateShapeForInputHighlight(_conn: Connection, _enable: boolean): void;
+}
+//# sourceMappingURL=path_object.d.ts.map

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

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import { Connection } from '../../connection.js';
+import { 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 { Debug } from './debugger.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';
+/**
+ * The base class for a block renderer.
+ *
+ * @alias Blockly.blockRendering.Renderer
+ */
+export declare class Renderer implements IRegistrable {
+    /** The renderer's constant provider. */
+    protected constants_: ConstantProvider;
+    /** @internal */
+    name: string;
+    /**
+     * Rendering constant overrides, passed in through options.
+     *
+     * @internal
+     */
+    overrides: object | null;
+    /**
+     * @param name The renderer name.
+     * @internal
+     */
+    constructor(name: string);
+    /**
+     * Gets the class name that identifies this renderer.
+     *
+     * @returns The CSS class name.
+     * @internal
+     */
+    getClassName(): string;
+    /**
+     * Initialize the renderer.
+     *
+     * @param theme The workspace theme object.
+     * @param opt_rendererOverrides Rendering constant overrides.
+     * @internal
+     */
+    init(theme: Theme, opt_rendererOverrides?: {
+        [rendererConstant: string]: any;
+    }): void;
+    /**
+     * Create any DOM elements that this renderer needs.
+     *
+     * @param svg The root of the workspace's SVG.
+     * @param theme The workspace theme object.
+     * @internal
+     */
+    createDom(svg: SVGElement, theme: Theme): void;
+    /**
+     * Refresh the renderer after a theme change.
+     *
+     * @param svg The root of the workspace's SVG.
+     * @param theme The workspace theme object.
+     * @internal
+     */
+    refreshDom(svg: SVGElement, theme: Theme): void;
+    /**
+     * Dispose of this renderer.
+     * Delete all DOM elements that this renderer and its constants created.
+     *
+     * @internal
+     */
+    dispose(): void;
+    /**
+     * Create a new instance of the renderer's constant provider.
+     *
+     * @returns The constant provider.
+     */
+    protected 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: RenderInfo): Drawer;
+    /**
+     * Create a new instance of the renderer's debugger.
+     *
+     * @returns The renderer debugger.
+     * @suppress {strictModuleDepCheck} Debug renderer only included in
+     * playground.
+     */
+    protected makeDebugger_(): Debug;
+    /**
+     * 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.
+     * @internal
+     */
+    makeMarkerDrawer(workspace: WorkspaceSvg, marker: Marker): MarkerSvg;
+    /**
+     * 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.
+     * @internal
+     */
+    makePathObject(root: SVGElement, style: BlockStyle): IPathObject;
+    /**
+     * Get the current renderer's constant provider.  We assume that when this is
+     * called, the renderer has already been initialized.
+     *
+     * @returns The constant provider.
+     * @internal
+     */
+    getConstants(): ConstantProvider;
+    /**
+     * 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.
+     * @internal
+     */
+    shouldHighlightConnection(_conn: Connection): boolean;
+    /**
+     * 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.
+     * @internal
+     */
+    orphanCanConnectAtEnd(topBlock: BlockSvg, orphanBlock: BlockSvg, localType: number): boolean;
+    /**
+     * 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.
+     * @internal
+     */
+    getConnectionPreviewMethod(closest: RenderedConnection, local: RenderedConnection, topBlock: BlockSvg): PreviewType;
+    /**
+     * Render the block.
+     *
+     * @param block The block to render.
+     * @internal
+     */
+    render(block: BlockSvg): void;
+}
+//# sourceMappingURL=renderer.d.ts.map

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ConstantProvider as BaseConstantProvider } from '../common/constants.js';
+/**
+ * An object that provides constants for rendering blocks in Geras mode.
+ *
+ * @alias Blockly.geras.ConstantProvider
+ */
+export declare class ConstantProvider extends BaseConstantProvider {
+    FIELD_TEXT_BASELINE_CENTER: boolean;
+    DARK_PATH_OFFSET: number;
+    /**
+     * The maximum width of a bottom row that follows a statement input and has
+     * inputs inline.
+     */
+    MAX_BOTTOM_WIDTH: number;
+    STATEMENT_BOTTOM_SPACER: any;
+    /** @internal */
+    constructor();
+    getCSS_(selector: string): string[];
+}
+//# sourceMappingURL=constants.d.ts.map

package/core/renderers/geras/drawer.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 { Drawer as BaseDrawer } from '../common/drawer.js';
+import type { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import type { RenderInfo } from './info.js';
+import type { InlineInput } from './measurables/inline_input.js';
+/**
+ * An object that draws a block based on the given rendering information.
+ *
+ * @alias Blockly.geras.Drawer
+ */
+export declare class Drawer extends BaseDrawer {
+    highlighter_: any;
+    constants_: ConstantProvider;
+    /**
+     * @param block The block to render.
+     * @param info An object containing all information needed to render this
+     *     block.
+     * @internal
+     */
+    constructor(block: BlockSvg, info: RenderInfo);
+    draw(): void;
+    drawTop_(): void;
+    drawJaggedEdge_(row: Row): void;
+    drawValueInput_(row: Row): void;
+    drawStatementInput_(row: Row): void;
+    drawRightSideRow_(row: Row): void;
+    drawBottom_(): void;
+    /**
+     * Add steps for the left side of the block, which may include an output
+     * connection
+     */
+    protected drawLeft_(): void;
+    drawInlineInput_(input: InlineInput): void;
+    positionInlineInputConnection_(input: InlineInput): void;
+    positionStatementInputConnection_(row: Row): void;
+    positionExternalValueConnection_(row: Row): void;
+    positionNextConnection_(): void;
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1,12 @@
+/** @file Re-exports of Blockly.geras.* modules. */
+import { ConstantProvider } from './constants.js';
+import { Drawer } from './drawer.js';
+import { HighlightConstantProvider } from './highlight_constants.js';
+import { Highlighter } from './highlighter.js';
+import { RenderInfo } from './info.js';
+import { InlineInput } from './measurables/inline_input.js';
+import { StatementInput } from './measurables/statement_input.js';
+import { PathObject } from './path_object.js';
+import { Renderer } from './renderer.js';
+export { ConstantProvider, Drawer, HighlightConstantProvider, Highlighter, InlineInput, PathObject, Renderer, RenderInfo, StatementInput, };
+//# sourceMappingURL=geras.d.ts.map