mirror of
https://github.com/google/blockly.git
synced 2026-01-07 09:00:11 +01:00
776 lines
26 KiB
TypeScript
776 lines
26 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Methods for graphically rendering a block as SVG.
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* Methods for graphically rendering a block as SVG.
|
|
* @class
|
|
*/
|
|
goog.module('Blockly.blockRendering.RenderInfo');
|
|
|
|
const {Align} = goog.require('Blockly.Input');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
|
|
const {BottomRow} = goog.require('Blockly.blockRendering.BottomRow');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
|
|
const {ExternalValueInput} = goog.require('Blockly.blockRendering.ExternalValueInput');
|
|
const {Field} = goog.require('Blockly.blockRendering.Field');
|
|
const {Hat} = goog.require('Blockly.blockRendering.Hat');
|
|
const {Icon} = goog.require('Blockly.blockRendering.Icon');
|
|
const {InRowSpacer} = goog.require('Blockly.blockRendering.InRowSpacer');
|
|
const {InlineInput} = goog.require('Blockly.blockRendering.InlineInput');
|
|
const {InputRow} = goog.require('Blockly.blockRendering.InputRow');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {Input} = goog.requireType('Blockly.Input');
|
|
const {JaggedEdge} = goog.require('Blockly.blockRendering.JaggedEdge');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {Measurable} = goog.requireType('Blockly.blockRendering.Measurable');
|
|
const {NextConnection} = goog.require('Blockly.blockRendering.NextConnection');
|
|
const {OutputConnection} = goog.require('Blockly.blockRendering.OutputConnection');
|
|
const {PreviousConnection} = goog.require('Blockly.blockRendering.PreviousConnection');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {RenderedConnection} = goog.requireType('Blockly.RenderedConnection');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {Renderer} = goog.requireType('Blockly.blockRendering.Renderer');
|
|
const {RoundCorner} = goog.require('Blockly.blockRendering.RoundCorner');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {Row} = goog.requireType('Blockly.blockRendering.Row');
|
|
const {SpacerRow} = goog.require('Blockly.blockRendering.SpacerRow');
|
|
const {SquareCorner} = goog.require('Blockly.blockRendering.SquareCorner');
|
|
const {StatementInput} = goog.require('Blockly.blockRendering.StatementInput');
|
|
const {TopRow} = goog.require('Blockly.blockRendering.TopRow');
|
|
const {Types} = goog.require('Blockly.blockRendering.Types');
|
|
const {inputTypes} = goog.require('Blockly.inputTypes');
|
|
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
class RenderInfo {
|
|
/**
|
|
* @param {!Renderer} renderer The renderer in use.
|
|
* @param {!BlockSvg} block The block to measure.
|
|
* @package
|
|
*/
|
|
constructor(renderer, block) {
|
|
this.block_ = block;
|
|
|
|
/**
|
|
* The block renderer in use.
|
|
* @type {!Renderer}
|
|
* @protected
|
|
*/
|
|
this.renderer_ = renderer;
|
|
|
|
/**
|
|
* The renderer's constant provider.
|
|
* @type {!ConstantProvider}
|
|
* @protected
|
|
*/
|
|
this.constants_ = this.renderer_.getConstants();
|
|
|
|
/**
|
|
* A measurable representing the output connection if the block has one.
|
|
* Otherwise null.
|
|
* @type {OutputConnection}
|
|
*/
|
|
this.outputConnection = !block.outputConnection ?
|
|
null :
|
|
new OutputConnection(
|
|
this.constants_,
|
|
/** @type {!RenderedConnection} */ (block.outputConnection));
|
|
|
|
/**
|
|
* Whether the block should be rendered as a single line, either because
|
|
* it's inline or because it has been collapsed.
|
|
* @type {boolean}
|
|
*/
|
|
this.isInline = block.getInputsInline() && !block.isCollapsed();
|
|
|
|
/**
|
|
* Whether the block is collapsed.
|
|
* @type {boolean}
|
|
*/
|
|
this.isCollapsed = block.isCollapsed();
|
|
|
|
/**
|
|
* Whether the block is an insertion marker. Insertion markers are the same
|
|
* shape as normal blocks, but don't show fields.
|
|
* @type {boolean}
|
|
*/
|
|
this.isInsertionMarker = block.isInsertionMarker();
|
|
|
|
/**
|
|
* True if the block should be rendered right-to-left.
|
|
* @type {boolean}
|
|
*/
|
|
this.RTL = block.RTL;
|
|
|
|
/**
|
|
* The height of the rendered block, including child blocks.
|
|
* @type {number}
|
|
*/
|
|
this.height = 0;
|
|
|
|
/**
|
|
* The width of the rendered block, including child blocks.
|
|
* @type {number}
|
|
*/
|
|
this.widthWithChildren = 0;
|
|
|
|
/**
|
|
* The width of the rendered block, excluding child blocks. This is the
|
|
* right edge of the block when rendered LTR.
|
|
* @type {number}
|
|
*/
|
|
this.width = 0;
|
|
|
|
/**
|
|
*
|
|
* @type {number}
|
|
*/
|
|
this.statementEdge = 0;
|
|
|
|
/**
|
|
* An array of Row objects containing sizing information.
|
|
* @type {!Array<!Row>}
|
|
*/
|
|
this.rows = [];
|
|
|
|
/**
|
|
* An array of input rows on the block.
|
|
* @type {!Array<!InputRow>}
|
|
*/
|
|
this.inputRows = [];
|
|
|
|
/**
|
|
* An array of measurable objects containing hidden icons.
|
|
* @type {!Array<!Icon>}
|
|
*/
|
|
this.hiddenIcons = [];
|
|
|
|
/**
|
|
* An object with rendering information about the top row of the block.
|
|
* @type {!TopRow}
|
|
*/
|
|
this.topRow = new TopRow(this.constants_);
|
|
|
|
/**
|
|
* An object with rendering information about the bottom row of the block.
|
|
* @type {!BottomRow}
|
|
*/
|
|
this.bottomRow = new BottomRow(this.constants_);
|
|
|
|
// The position of the start point for drawing, relative to the block's
|
|
// location.
|
|
this.startX = 0;
|
|
this.startY = 0;
|
|
}
|
|
|
|
/**
|
|
* Get the block renderer in use.
|
|
* @return {!Renderer} The block renderer in use.
|
|
* @package
|
|
*/
|
|
getRenderer() {
|
|
return this.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.
|
|
*
|
|
* @package
|
|
*/
|
|
measure() {
|
|
this.createRows_();
|
|
this.addElemSpacing_();
|
|
this.addRowSpacing_();
|
|
this.computeBounds_();
|
|
this.alignRowElements_();
|
|
this.finalize_();
|
|
}
|
|
|
|
/**
|
|
* Create rows of Measurable objects representing all renderable parts of the
|
|
* block.
|
|
* @protected
|
|
*/
|
|
createRows_() {
|
|
this.populateTopRow_();
|
|
this.rows.push(this.topRow);
|
|
let activeRow = new InputRow(this.constants_);
|
|
this.inputRows.push(activeRow);
|
|
|
|
// Icons always go on the first row, before anything else.
|
|
const icons = this.block_.getIcons();
|
|
for (let i = 0, icon; (icon = icons[i]); i++) {
|
|
const iconInfo = new Icon(this.constants_, icon);
|
|
if (this.isCollapsed && icon.collapseHidden) {
|
|
this.hiddenIcons.push(iconInfo);
|
|
} else {
|
|
activeRow.elements.push(iconInfo);
|
|
}
|
|
}
|
|
|
|
let lastInput = null;
|
|
// Loop across all of the inputs on the block, creating objects for anything
|
|
// that needs to be rendered and breaking the block up into visual rows.
|
|
for (let i = 0, input; (input = this.block_.inputList[i]); i++) {
|
|
if (!input.isVisible()) {
|
|
continue;
|
|
}
|
|
if (this.shouldStartNewRow_(input, lastInput)) {
|
|
// Finish this row and create a new one.
|
|
this.rows.push(activeRow);
|
|
activeRow = new InputRow(this.constants_);
|
|
this.inputRows.push(activeRow);
|
|
}
|
|
|
|
// All of the fields in an input go on the same row.
|
|
for (let j = 0, field; (field = input.fieldRow[j]); j++) {
|
|
activeRow.elements.push(new Field(this.constants_, field, input));
|
|
}
|
|
this.addInput_(input, activeRow);
|
|
lastInput = input;
|
|
}
|
|
|
|
if (this.isCollapsed) {
|
|
activeRow.hasJaggedEdge = true;
|
|
activeRow.elements.push(new JaggedEdge(this.constants_));
|
|
}
|
|
|
|
if (activeRow.elements.length || activeRow.hasDummyInput) {
|
|
this.rows.push(activeRow);
|
|
}
|
|
this.populateBottomRow_();
|
|
this.rows.push(this.bottomRow);
|
|
}
|
|
|
|
/**
|
|
* Create all non-spacer elements that belong on the top row.
|
|
* @package
|
|
*/
|
|
populateTopRow_() {
|
|
const hasPrevious = !!this.block_.previousConnection;
|
|
const hasHat = (this.block_.hat ? this.block_.hat === 'cap' :
|
|
this.constants_.ADD_START_HATS) &&
|
|
!this.outputConnection && !hasPrevious;
|
|
|
|
let cornerClass = this.topRow.hasLeftSquareCorner(this.block_) ?
|
|
SquareCorner :
|
|
RoundCorner;
|
|
this.topRow.elements.push(new cornerClass(this.constants_));
|
|
|
|
if (hasHat) {
|
|
const hat = new Hat(this.constants_);
|
|
this.topRow.elements.push(hat);
|
|
this.topRow.capline = hat.ascenderHeight;
|
|
} else if (hasPrevious) {
|
|
this.topRow.hasPreviousConnection = true;
|
|
this.topRow.connection = new PreviousConnection(
|
|
this.constants_,
|
|
/** @type {!RenderedConnection} */
|
|
(this.block_.previousConnection));
|
|
this.topRow.elements.push(this.topRow.connection);
|
|
}
|
|
|
|
const precedesStatement = this.block_.inputList.length &&
|
|
this.block_.inputList[0].type === inputTypes.STATEMENT;
|
|
|
|
// This is the minimum height for the row. If one of its elements has a
|
|
// greater height it will be overwritten in the compute pass.
|
|
if (precedesStatement && !this.block_.isCollapsed()) {
|
|
this.topRow.minHeight =
|
|
this.constants_.TOP_ROW_PRECEDES_STATEMENT_MIN_HEIGHT;
|
|
} else {
|
|
this.topRow.minHeight = this.constants_.TOP_ROW_MIN_HEIGHT;
|
|
}
|
|
|
|
cornerClass = this.topRow.hasRightSquareCorner(this.block_) ? SquareCorner :
|
|
RoundCorner;
|
|
this.topRow.elements.push(new cornerClass(this.constants_, 'right'));
|
|
}
|
|
|
|
/**
|
|
* Create all non-spacer elements that belong on the bottom row.
|
|
* @package
|
|
*/
|
|
populateBottomRow_() {
|
|
this.bottomRow.hasNextConnection = !!this.block_.nextConnection;
|
|
|
|
const followsStatement = this.block_.inputList.length &&
|
|
this.block_.inputList[this.block_.inputList.length - 1].type ===
|
|
inputTypes.STATEMENT;
|
|
|
|
// This is the minimum height for the row. If one of its elements has a
|
|
// greater height it will be overwritten in the compute pass.
|
|
if (followsStatement) {
|
|
this.bottomRow.minHeight =
|
|
this.constants_.BOTTOM_ROW_AFTER_STATEMENT_MIN_HEIGHT;
|
|
} else {
|
|
this.bottomRow.minHeight = this.constants_.BOTTOM_ROW_MIN_HEIGHT;
|
|
}
|
|
|
|
const leftSquareCorner = this.bottomRow.hasLeftSquareCorner(this.block_);
|
|
|
|
if (leftSquareCorner) {
|
|
this.bottomRow.elements.push(new SquareCorner(this.constants_));
|
|
} else {
|
|
this.bottomRow.elements.push(new RoundCorner(this.constants_));
|
|
}
|
|
|
|
if (this.bottomRow.hasNextConnection) {
|
|
this.bottomRow.connection = new NextConnection(
|
|
this.constants_,
|
|
/** @type {!RenderedConnection} */ (this.block_.nextConnection));
|
|
this.bottomRow.elements.push(this.bottomRow.connection);
|
|
}
|
|
|
|
const rightSquareCorner = this.bottomRow.hasRightSquareCorner(this.block_);
|
|
|
|
if (rightSquareCorner) {
|
|
this.bottomRow.elements.push(new SquareCorner(this.constants_, 'right'));
|
|
} else {
|
|
this.bottomRow.elements.push(new RoundCorner(this.constants_, 'right'));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add an input element to the active row, if needed, and record the type of
|
|
* the input on the row.
|
|
* @param {!Input} input The input to record information about.
|
|
* @param {!Row} activeRow The row that is currently being
|
|
* populated.
|
|
* @protected
|
|
*/
|
|
addInput_(input, activeRow) {
|
|
// Non-dummy inputs have visual representations onscreen.
|
|
if (this.isInline && input.type === inputTypes.VALUE) {
|
|
activeRow.elements.push(new InlineInput(this.constants_, input));
|
|
activeRow.hasInlineInput = true;
|
|
} else if (input.type === inputTypes.STATEMENT) {
|
|
activeRow.elements.push(new StatementInput(this.constants_, input));
|
|
activeRow.hasStatement = true;
|
|
} else if (input.type === inputTypes.VALUE) {
|
|
activeRow.elements.push(new ExternalValueInput(this.constants_, input));
|
|
activeRow.hasExternalInput = true;
|
|
} else if (input.type === inputTypes.DUMMY) {
|
|
// Dummy inputs have no visual representation, but the information is
|
|
// still important.
|
|
activeRow.minHeight = Math.max(
|
|
activeRow.minHeight,
|
|
input.getSourceBlock() && input.getSourceBlock().isShadow() ?
|
|
this.constants_.DUMMY_INPUT_SHADOW_MIN_HEIGHT :
|
|
this.constants_.DUMMY_INPUT_MIN_HEIGHT);
|
|
activeRow.hasDummyInput = true;
|
|
}
|
|
if (activeRow.align === null) {
|
|
activeRow.align = input.align;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Decide whether to start a new row between the two Blockly.Inputs.
|
|
* @param {!Input} input The first input to consider
|
|
* @param {Input} lastInput The input that follows.
|
|
* @return {boolean} True if the next input should be rendered on a new row.
|
|
* @protected
|
|
*/
|
|
shouldStartNewRow_(input, lastInput) {
|
|
// If this is the first input, just add to the existing row.
|
|
// That row is either empty or has some icons in it.
|
|
if (!lastInput) {
|
|
return false;
|
|
}
|
|
// A statement input or an input following one always gets a new row.
|
|
if (input.type === inputTypes.STATEMENT ||
|
|
lastInput.type === inputTypes.STATEMENT) {
|
|
return true;
|
|
}
|
|
// Value and dummy inputs get new row if inputs are not inlined.
|
|
if (input.type === inputTypes.VALUE || input.type === inputTypes.DUMMY) {
|
|
return !this.isInline;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Add horizontal spacing between and around elements within each row.
|
|
* @protected
|
|
*/
|
|
addElemSpacing_() {
|
|
for (let i = 0, row; (row = this.rows[i]); i++) {
|
|
const oldElems = row.elements;
|
|
row.elements = [];
|
|
// No spacing needed before the corner on the top row or the bottom row.
|
|
if (row.startsWithElemSpacer()) {
|
|
// There's a spacer before the first element in the row.
|
|
row.elements.push(new InRowSpacer(
|
|
this.constants_, this.getInRowSpacing_(null, oldElems[0])));
|
|
}
|
|
if (!oldElems.length) {
|
|
continue;
|
|
}
|
|
for (let e = 0; e < oldElems.length - 1; e++) {
|
|
row.elements.push(oldElems[e]);
|
|
const spacing = this.getInRowSpacing_(oldElems[e], oldElems[e + 1]);
|
|
row.elements.push(new InRowSpacer(this.constants_, spacing));
|
|
}
|
|
row.elements.push(oldElems[oldElems.length - 1]);
|
|
if (row.endsWithElemSpacer()) {
|
|
// There's a spacer after the last element in the row.
|
|
row.elements.push(new InRowSpacer(
|
|
this.constants_,
|
|
this.getInRowSpacing_(oldElems[oldElems.length - 1], null)));
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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 {Measurable} prev The element before the
|
|
* spacer.
|
|
* @param {Measurable} next The element after the spacer.
|
|
* @return {number} The size of the spacing between the two elements.
|
|
* @protected
|
|
*/
|
|
getInRowSpacing_(prev, next) {
|
|
if (!prev) {
|
|
// Statement input padding.
|
|
if (next && Types.isStatementInput(next)) {
|
|
return this.constants_.STATEMENT_INPUT_PADDING_LEFT;
|
|
}
|
|
}
|
|
// Between inputs and the end of the row.
|
|
if (prev && Types.isInput(prev) && !next) {
|
|
if (Types.isExternalInput(prev)) {
|
|
return this.constants_.NO_PADDING;
|
|
} else if (Types.isInlineInput(prev)) {
|
|
return this.constants_.LARGE_PADDING;
|
|
} else if (Types.isStatementInput(prev)) {
|
|
return this.constants_.NO_PADDING;
|
|
}
|
|
}
|
|
|
|
// Spacing between a square corner and a previous or next connection
|
|
if (prev && Types.isLeftSquareCorner(prev) && next) {
|
|
if (Types.isPreviousConnection(next) || Types.isNextConnection(next)) {
|
|
return next.notchOffset;
|
|
}
|
|
}
|
|
|
|
// Spacing between a rounded corner and a previous or next connection.
|
|
if (prev && Types.isLeftRoundedCorner(prev) && next) {
|
|
if (Types.isPreviousConnection(next) || Types.isNextConnection(next)) {
|
|
return next.notchOffset - this.constants_.CORNER_RADIUS;
|
|
}
|
|
}
|
|
|
|
return this.constants_.MEDIUM_PADDING;
|
|
}
|
|
|
|
/**
|
|
* Figure out where the right edge of the block and right edge of statement
|
|
* inputs should be placed.
|
|
* @protected
|
|
*/
|
|
computeBounds_() {
|
|
let widestStatementRowFields = 0;
|
|
let blockWidth = 0;
|
|
let widestRowWithConnectedBlocks = 0;
|
|
for (let i = 0, row; (row = this.rows[i]); i++) {
|
|
row.measure();
|
|
blockWidth = Math.max(blockWidth, row.width);
|
|
if (row.hasStatement) {
|
|
const statementInput = row.getLastInput();
|
|
const innerWidth = row.width - statementInput.width;
|
|
widestStatementRowFields =
|
|
Math.max(widestStatementRowFields, innerWidth);
|
|
}
|
|
widestRowWithConnectedBlocks =
|
|
Math.max(widestRowWithConnectedBlocks, row.widthWithConnectedBlocks);
|
|
}
|
|
|
|
this.statementEdge = widestStatementRowFields;
|
|
this.width = blockWidth;
|
|
|
|
for (let i = 0, row; (row = this.rows[i]); i++) {
|
|
if (row.hasStatement) {
|
|
row.statementEdge = this.statementEdge;
|
|
}
|
|
}
|
|
|
|
this.widthWithChildren = Math.max(blockWidth, widestRowWithConnectedBlocks);
|
|
|
|
if (this.outputConnection) {
|
|
this.startX = this.outputConnection.width;
|
|
this.width += this.outputConnection.width;
|
|
this.widthWithChildren += this.outputConnection.width;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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_() {
|
|
for (let i = 0, row; (row = this.rows[i]); i++) {
|
|
if (row.hasStatement) {
|
|
this.alignStatementRow_(
|
|
/** @type {!InputRow} */ (row));
|
|
} else {
|
|
const currentWidth = row.width;
|
|
const desiredWidth = this.getDesiredRowWidth_(row);
|
|
const missingSpace = desiredWidth - currentWidth;
|
|
if (missingSpace > 0) {
|
|
this.addAlignmentPadding_(row, missingSpace);
|
|
}
|
|
if (Types.isTopOrBottomRow(row)) {
|
|
row.widthWithConnectedBlocks = row.width;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Calculate the desired width of an input row.
|
|
* @param {!Row} _row The input row.
|
|
* @return {number} The desired width of the input row.
|
|
* @protected
|
|
*/
|
|
getDesiredRowWidth_(_row) {
|
|
return this.width - this.startX;
|
|
}
|
|
|
|
/**
|
|
* 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} row The row to add padding to.
|
|
* @param {number} missingSpace How much padding to add.
|
|
* @protected
|
|
*/
|
|
addAlignmentPadding_(row, missingSpace) {
|
|
const firstSpacer = row.getFirstSpacer();
|
|
const lastSpacer = row.getLastSpacer();
|
|
if (row.hasExternalInput || row.hasStatement) {
|
|
row.widthWithConnectedBlocks += missingSpace;
|
|
}
|
|
|
|
// Decide where the extra padding goes.
|
|
if (row.align === Align.LEFT) {
|
|
// Add padding to the end of the row.
|
|
lastSpacer.width += missingSpace;
|
|
} else if (row.align === Align.CENTRE) {
|
|
// Split the padding between the beginning and end of the row.
|
|
firstSpacer.width += missingSpace / 2;
|
|
lastSpacer.width += missingSpace / 2;
|
|
} else if (row.align === Align.RIGHT) {
|
|
// Add padding at the beginning of the row.
|
|
firstSpacer.width += missingSpace;
|
|
} else {
|
|
// Default to left-aligning.
|
|
lastSpacer.width += missingSpace;
|
|
}
|
|
row.width += missingSpace;
|
|
}
|
|
|
|
/**
|
|
* Align the elements of a statement row based on computed bounds.
|
|
* Unlike other types of rows, statement rows add space in multiple places.
|
|
* @param {!InputRow} row The statement row to resize.
|
|
* @protected
|
|
*/
|
|
alignStatementRow_(row) {
|
|
const statementInput = row.getLastInput();
|
|
let currentWidth = row.width - statementInput.width;
|
|
let desiredWidth = this.statementEdge;
|
|
// Add padding before the statement input.
|
|
const missingSpace = desiredWidth - currentWidth;
|
|
if (missingSpace > 0) {
|
|
this.addAlignmentPadding_(row, missingSpace);
|
|
}
|
|
// Also widen the statement input to reach to the right side of the
|
|
// block. Note that this does not add padding.
|
|
currentWidth = row.width;
|
|
desiredWidth = this.getDesiredRowWidth_(row);
|
|
statementInput.width += (desiredWidth - currentWidth);
|
|
statementInput.height = Math.max(statementInput.height, row.height);
|
|
row.width += (desiredWidth - currentWidth);
|
|
row.widthWithConnectedBlocks =
|
|
Math.max(row.width, this.statementEdge + row.connectedBlockWidths);
|
|
}
|
|
|
|
/**
|
|
* Add spacers between rows and set their sizes.
|
|
* @protected
|
|
*/
|
|
addRowSpacing_() {
|
|
const oldRows = this.rows;
|
|
this.rows = [];
|
|
|
|
for (let r = 0; r < oldRows.length; r++) {
|
|
this.rows.push(oldRows[r]);
|
|
if (r !== oldRows.length - 1) {
|
|
this.rows.push(this.makeSpacerRow_(oldRows[r], oldRows[r + 1]));
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a spacer row to go between prev and next, and set its size.
|
|
* @param {!Row} prev The previous row.
|
|
* @param {!Row} next The next row.
|
|
* @return {!SpacerRow} The newly created spacer row.
|
|
* @protected
|
|
*/
|
|
makeSpacerRow_(prev, next) {
|
|
const height = this.getSpacerRowHeight_(prev, next);
|
|
const width = this.getSpacerRowWidth_(prev, next);
|
|
const spacer = new SpacerRow(this.constants_, height, width);
|
|
if (prev.hasStatement) {
|
|
spacer.followsStatement = true;
|
|
}
|
|
if (next.hasStatement) {
|
|
spacer.precedesStatement = true;
|
|
}
|
|
return spacer;
|
|
}
|
|
|
|
/**
|
|
* Calculate the width of a spacer row.
|
|
* @param {!Row} _prev The row before the spacer.
|
|
* @param {!Row} _next The row after the spacer.
|
|
* @return {number} The desired width of the spacer row between these two
|
|
* rows.
|
|
* @protected
|
|
*/
|
|
getSpacerRowWidth_(_prev, _next) {
|
|
return this.width - this.startX;
|
|
}
|
|
|
|
/**
|
|
* Calculate the height of a spacer row.
|
|
* @param {!Row} _prev The row before the spacer.
|
|
* @param {!Row} _next The row after the spacer.
|
|
* @return {number} The desired height of the spacer row between these two
|
|
* rows.
|
|
* @protected
|
|
*/
|
|
getSpacerRowHeight_(_prev, _next) {
|
|
return this.constants_.MEDIUM_PADDING;
|
|
}
|
|
|
|
/**
|
|
* 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} row The row containing the element.
|
|
* @param {!Measurable} elem The element to place.
|
|
* @return {number} The desired centerline of the given element, as an offset
|
|
* from the top left of the block.
|
|
* @protected
|
|
*/
|
|
getElemCenterline_(row, elem) {
|
|
if (Types.isSpacer(elem)) {
|
|
return row.yPos + elem.height / 2;
|
|
}
|
|
if (Types.isBottomRow(row)) {
|
|
const bottomRow = /** @type {!BottomRow} */ (row);
|
|
const baseline =
|
|
bottomRow.yPos + bottomRow.height - bottomRow.descenderHeight;
|
|
if (Types.isNextConnection(elem)) {
|
|
return baseline + elem.height / 2;
|
|
}
|
|
return baseline - elem.height / 2;
|
|
}
|
|
if (Types.isTopRow(row)) {
|
|
const topRow = /** @type {!TopRow} */ (row);
|
|
if (Types.isHat(elem)) {
|
|
return topRow.capline - elem.height / 2;
|
|
}
|
|
return topRow.capline + elem.height / 2;
|
|
}
|
|
return row.yPos + row.height / 2;
|
|
}
|
|
|
|
/**
|
|
* 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} row The row containing the elements.
|
|
* @protected
|
|
*/
|
|
recordElemPositions_(row) {
|
|
let xCursor = row.xPos;
|
|
for (let j = 0, elem; (elem = row.elements[j]); j++) {
|
|
// Now that row heights are finalized, make spacers use the row height.
|
|
if (Types.isSpacer(elem)) {
|
|
elem.height = row.height;
|
|
}
|
|
elem.xPos = xCursor;
|
|
elem.centerline = this.getElemCenterline_(row, elem);
|
|
xCursor += elem.width;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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_() {
|
|
// Performance note: this could be combined with the draw pass, if the time
|
|
// that this takes is excessive. But it shouldn't be, because it only
|
|
// accesses and sets properties that already exist on the objects.
|
|
let widestRowWithConnectedBlocks = 0;
|
|
let yCursor = 0;
|
|
for (let i = 0, row; (row = this.rows[i]); i++) {
|
|
row.yPos = yCursor;
|
|
row.xPos = this.startX;
|
|
yCursor += row.height;
|
|
|
|
widestRowWithConnectedBlocks =
|
|
Math.max(widestRowWithConnectedBlocks, row.widthWithConnectedBlocks);
|
|
this.recordElemPositions_(row);
|
|
}
|
|
if (this.outputConnection && this.block_.nextConnection &&
|
|
this.block_.nextConnection.isConnected()) {
|
|
// Include width of connected block in value to stack width measurement.
|
|
widestRowWithConnectedBlocks = Math.max(
|
|
widestRowWithConnectedBlocks,
|
|
this.block_.nextConnection.targetBlock().getHeightWidth().width);
|
|
}
|
|
|
|
this.widthWithChildren = widestRowWithConnectedBlocks + this.startX;
|
|
|
|
this.height = yCursor;
|
|
this.startY = this.topRow.capline;
|
|
this.bottomRow.baseline = yCursor - this.bottomRow.descenderHeight;
|
|
}
|
|
}
|
|
|
|
exports.RenderInfo = RenderInfo;
|