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

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

@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import type { Field } from '../measurables/field.js';
+import type { Icon } from '../measurables/icon.js';
+import type { InlineInput } from '../measurables/inline_input.js';
+import type { Row } from '../measurables/row.js';
+import type { ConstantProvider } from './constants.js';
+import type { RenderInfo } from './info.js';
+/**
+ * An object that draws a block based on the given rendering information.
+ *
+ * @alias Blockly.blockRendering.Drawer
+ */
+export declare class Drawer {
+    block_: any;
+    info_: any;
+    topLeft_: any;
+    outlinePath_: string;
+    inlinePath_: string;
+    protected 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 the block to the workspace. Here "drawing" means setting SVG path
+     * elements and moving fields, icons, and connections on the screen.
+     *
+     * The pieces of the paths are pushed into arrays of "steps", which are then
+     * joined with spaces and set directly on the block.  This guarantees that
+     * the steps are separated by spaces for improved readability, but isn't
+     * required.
+     *
+     * @internal
+     */
+    draw(): void;
+    /**
+     * Save sizing information back to the block
+     * Most of the rendering information can be thrown away at the end of the
+     * render. Anything that needs to be kept around should be set in this
+     * function.
+     */
+    protected recordSizeOnBlock_(): void;
+    /** Hide icons that were marked as hidden. */
+    protected hideHiddenIcons_(): void;
+    /** Create the outline of the block.  This is a single continuous path. */
+    protected drawOutline_(): void;
+    /**
+     * Add steps for the top corner of the block, taking into account
+     * details such as hats and rounded corners.
+     */
+    protected drawTop_(): void;
+    /**
+     * Add steps for the jagged edge of a row on a collapsed block.
+     *
+     * @param row The row to draw the side of.
+     */
+    protected drawJaggedEdge_(row: Row): void;
+    /**
+     * Add steps for an external value input, rendered as a notch in the side
+     * of the block.
+     *
+     * @param row The row that this input belongs to.
+     */
+    protected drawValueInput_(row: Row): void;
+    /**
+     * Add steps for a statement input.
+     *
+     * @param row The row that this input belongs to.
+     */
+    protected drawStatementInput_(row: Row): void;
+    /**
+     * Add steps for the right side of a row that does not have value or
+     * statement input connections.
+     *
+     * @param row The row to draw the side of.
+     */
+    protected drawRightSideRow_(row: Row): void;
+    /**
+     * Add steps for the bottom edge of a block, possibly including a notch
+     * for the next connection.
+     */
+    protected drawBottom_(): void;
+    /**
+     * Add steps for the left side of the block, which may include an output
+     * connection
+     */
+    protected drawLeft_(): void;
+    /**
+     * Draw the internals of the block: inline inputs, fields, and icons.  These
+     * do not depend on the outer path for placement.
+     */
+    protected drawInternals_(): void;
+    /**
+     * Push a field or icon's new position to its SVG root.
+     *
+     * @param fieldInfo The rendering information for the field or icon.
+     */
+    protected layoutField_(fieldInfo: Icon | Field): void;
+    /**
+     * Add steps for an inline input.
+     *
+     * @param input The information about the input to render.
+     */
+    protected drawInlineInput_(input: InlineInput): void;
+    /**
+     * Position the connection on an inline value input, taking into account
+     * RTL and the small gap between the parent block and child block which lets
+     * the parent block's dark path show through.
+     *
+     * @param input The information about the input that the connection is on.
+     */
+    protected positionInlineInputConnection_(input: InlineInput): void;
+    /**
+     * Position the connection on a statement input, taking into account
+     * RTL and the small gap between the parent block and child block which lets
+     * the parent block's dark path show through.
+     *
+     * @param row The row that the connection is on.
+     */
+    protected positionStatementInputConnection_(row: Row): void;
+    /**
+     * Position the connection on an external value input, taking into account
+     * RTL and the small gap between the parent block and child block which lets
+     * the parent block's dark path show through.
+     *
+     * @param row The row that the connection is on.
+     */
+    protected positionExternalValueConnection_(row: Row): void;
+    /** Position the previous connection on a block. */
+    protected positionPreviousConnection_(): void;
+    /** Position the next connection on a block. */
+    protected positionNextConnection_(): void;
+    /** Position the output connection on a block. */
+    protected positionOutputConnection_(): void;
+}
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockStyle } from '../../theme.js';
+import type { ConstantProvider } from './constants.js';
+/**
+ * An interface for a block's path object.
+ *
+ * @param _root The root SVG element.
+ * @param _constants The renderer's constants.
+ * @alias Blockly.blockRendering.IPathObject
+ */
+export interface IPathObject {
+    /** The primary path of the block. */
+    svgPath: SVGElement;
+    /** The renderer's constant provider. */
+    constants: ConstantProvider;
+    /** The primary path of the block. */
+    style: BlockStyle;
+    /**
+     * Holds the cursors SVG element when the cursor is attached to the block.
+     * This is null if there is no cursor on the block.
+     */
+    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.
+     */
+    markerSvg: SVGElement;
+    /**
+     * Set the path generated by the renderer onto the respective SVG element.
+     *
+     * @param pathString The path.
+     * @internal
+     */
+    setPath: any;
+    /**
+     * 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: any;
+    /**
+     * Update the style.
+     *
+     * @param blockStyle The block style to use.
+     * @internal
+     */
+    setStyle: any;
+    /**
+     * 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: any;
+    /**
+     * 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: any;
+    /**
+     * Set whether the block shows a highlight or not.  Block highlighting is
+     * often used to visually mark blocks currently being executed.
+     *
+     * @param highlighted True if highlighted.
+     * @internal
+     */
+    updateHighlighted: any;
+    /**
+     * Add or remove styling showing that a block is selected.
+     *
+     * @param enable True if selection is enabled, false otherwise.
+     * @internal
+     */
+    updateSelected: any;
+    /**
+     * 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: any;
+    /**
+     * 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: any;
+    /**
+     * Add or remove styling showing that a block is movable.
+     *
+     * @param enable True if the block is movable, false otherwise.
+     * @internal
+     */
+    updateMovable: any;
+    /**
+     * 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: any;
+    /**
+     * 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: any;
+}
+//# sourceMappingURL=i_path_object.d.ts.map

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

@@ -0,0 +1,211 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { BlockSvg } from '../../block_svg.js';
+import { Input } from '../../input.js';
+import type { Measurable } from '../measurables/base.js';
+import { BottomRow } from '../measurables/bottom_row.js';
+import { Icon } from '../measurables/icon.js';
+import { InputRow } from '../measurables/input_row.js';
+import { OutputConnection } from '../measurables/output_connection.js';
+import type { Row } from '../measurables/row.js';
+import { SpacerRow } from '../measurables/spacer_row.js';
+import { TopRow } from '../measurables/top_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.
+ *
+ * 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.
+ *
+ * @alias Blockly.blockRendering.RenderInfo
+ */
+export declare class RenderInfo {
+    block_: any;
+    protected constants_: ConstantProvider;
+    outputConnection: OutputConnection;
+    isInline: boolean;
+    isCollapsed: boolean;
+    isInsertionMarker: boolean;
+    RTL: boolean;
+    /** The block renderer in use. */
+    protected readonly renderer_: Renderer;
+    /** The height of the rendered block, including child blocks. */
+    height: number;
+    /** The width of the rendered block, including child blocks. */
+    widthWithChildren: number;
+    /**
+     * The width of the rendered block, excluding child blocks.  This is the
+     * right edge of the block when rendered LTR.
+     */
+    width: number;
+    statementEdge: number;
+    /** An array of Row objects containing sizing information. */
+    rows: Row[];
+    /** An array of input rows on the block. */
+    inputRows: InputRow[];
+    /** An array of measurable objects containing hidden icons. */
+    hiddenIcons: Icon[];
+    topRow: TopRow;
+    bottomRow: BottomRow;
+    startX: number;
+    startY: number;
+    /**
+     * @param renderer The renderer in use.
+     * @param block The block to measure.
+     * @internal
+     */
+    constructor(renderer: Renderer, block: BlockSvg);
+    /**
+     * Get the block renderer in use.
+     *
+     * @returns The block renderer in use.
+     * @internal
+     */
+    getRenderer(): Renderer;
+    /**
+     * Populate and return an object containing all sizing information needed to
+     * draw this block.
+     *
+     * 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.
+     *
+     * @internal
+     */
+    measure(): void;
+    /**
+     * Create rows of Measurable objects representing all renderable parts of the
+     * block.
+     */
+    protected createRows_(): void;
+    /**
+     * Create all non-spacer elements that belong on the top row.
+     *
+     * @internal
+     */
+    populateTopRow_(): void;
+    /**
+     * Create all non-spacer elements that belong on the bottom row.
+     *
+     * @internal
+     */
+    populateBottomRow_(): void;
+    /**
+     * Add an input element to the active row, if needed, and record the type of
+     * the input on the row.
+     *
+     * @param input The input to record information about.
+     * @param activeRow The row that is currently being populated.
+     */
+    protected addInput_(input: Input, activeRow: Row): void;
+    /**
+     * Decide whether to start a new row between the two Blockly.Inputs.
+     *
+     * @param input The first input to consider
+     * @param lastInput The input that follows.
+     * @returns True if the next input should be rendered on a new row.
+     */
+    protected shouldStartNewRow_(input: Input, lastInput: Input): boolean;
+    /** Add horizontal spacing between and around elements within each row. */
+    protected addElemSpacing_(): void;
+    /**
+     * Calculate the width of a spacer element in a row based on the previous and
+     * next elements in that row.  For instance, extra padding is added between
+     * two editable fields.
+     *
+     * @param prev The element before the spacer.
+     * @param next The element after the spacer.
+     * @returns The size of the spacing between the two elements.
+     */
+    protected getInRowSpacing_(prev: Measurable | null, next: Measurable | null): number;
+    /**
+     * Figure out where the right edge of the block and right edge of statement
+     * inputs should be placed.
+     */
+    protected computeBounds_(): void;
+    /**
+     * Extra spacing may be necessary to make sure that the right sides of all
+     * rows line up.  This can only be calculated after a first pass to calculate
+     * the sizes of all rows.
+     */
+    protected alignRowElements_(): void;
+    /**
+     * Calculate the desired width of an input row.
+     *
+     * @param _row The input row.
+     * @returns The desired width of the input row.
+     */
+    protected getDesiredRowWidth_(_row: Row): number;
+    /**
+     * Modify the given row to add the given amount of padding around its fields.
+     * The exact location of the padding is based on the alignment property of the
+     * last input in the field.
+     *
+     * @param row The row to add padding to.
+     * @param missingSpace How much padding to add.
+     */
+    protected addAlignmentPadding_(row: Row, missingSpace: number): void;
+    /**
+     * Align the elements of a statement row based on computed bounds.
+     * Unlike other types of rows, statement rows add space in multiple places.
+     *
+     * @param row The statement row to resize.
+     */
+    protected alignStatementRow_(row: InputRow): void;
+    /** Add spacers between rows and set their sizes. */
+    protected addRowSpacing_(): void;
+    /**
+     * Create a spacer row to go between prev and next, and set its size.
+     *
+     * @param prev The previous row.
+     * @param next The next row.
+     * @returns The newly created spacer row.
+     */
+    protected makeSpacerRow_(prev: Row, next: Row): SpacerRow;
+    /**
+     * Calculate the width of a spacer row.
+     *
+     * @param _prev The row before the spacer.
+     * @param _next The row after the spacer.
+     * @returns The desired width of the spacer row between these two rows.
+     */
+    protected getSpacerRowWidth_(_prev: Row, _next: Row): number;
+    /**
+     * Calculate the height of a spacer row.
+     *
+     * @param _prev The row before the spacer.
+     * @param _next The row after the spacer.
+     * @returns The desired height of the spacer row between these two rows.
+     */
+    protected getSpacerRowHeight_(_prev: Row, _next: Row): number;
+    /**
+     * Calculate the centerline of an element in a rendered row.
+     * This base implementation puts the centerline at the middle of the row
+     * vertically, with no special cases.  You will likely need extra logic to
+     * handle (at minimum) top and bottom rows.
+     *
+     * @param row The row containing the element.
+     * @param elem The element to place.
+     * @returns The desired centerline of the given element, as an offset from the
+     *     top left of the block.
+     */
+    protected getElemCenterline_(row: Row, elem: Measurable): number;
+    /**
+     * Record final position information on elements on the given row, for use in
+     * drawing.  At minimum this records xPos and centerline on each element.
+     *
+     * @param row The row containing the elements.
+     */
+    protected recordElemPositions_(row: Row): void;
+    /**
+     * Make any final changes to the rendering information object.  In particular,
+     * store the y position of each row, and record the height of the full block.
+     */
+    protected finalize_(): void;
+}
+//# sourceMappingURL=info.d.ts.map