[zelos] Multi-line rendering (#3501)

* Add isMultiRow property and computation for padding with multirow blocks.
This commit is contained in:
Sam El-Husseini
2019-12-11 14:12:36 -08:00
committed by GitHub
parent 78e2fb2f4b
commit bb5939f77c
2 changed files with 58 additions and 5 deletions

View File

@@ -138,6 +138,13 @@ Blockly.blockRendering.RenderInfo = function(renderer, block) {
*/
this.rows = [];
/**
* The total number of input rows added onto the block.
* @type {number}
* @protected
*/
this.inputRowNum_ = 1;
/**
* An array of measurable objects containing hidden icons.
* @type {!Array.<!Blockly.blockRendering.Icon>}
@@ -224,6 +231,7 @@ Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() {
// Finish this row and create a new one.
this.rows.push(activeRow);
activeRow = new Blockly.blockRendering.InputRow(this.constants_);
this.inputRowNum_ ++;
}
// All of the fields in an input go on the same row.

View File

@@ -84,6 +84,13 @@ Blockly.zelos.RenderInfo = function(renderer, block) {
*/
this.isInline = true;
/**
* Whether the block should be rendered as a multi-line block, either because
* it's not inline or because it has been collapsed.
* @type {boolean}
*/
this.isMultiRow = !block.getInputsInline() || block.isCollapsed();
/**
* An object with rendering information about the right connection shape.
* @type {Blockly.zelos.RightConnectionShape}
@@ -117,6 +124,28 @@ Blockly.zelos.RenderInfo.prototype.measure = function() {
this.finalize_();
};
/**
* @override
*/
Blockly.zelos.RenderInfo.prototype.shouldStartNewRow_ = function(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 == Blockly.NEXT_STATEMENT ||
lastInput.type == Blockly.NEXT_STATEMENT) {
return true;
}
// Value and dummy inputs get new row if inputs are not inlined.
if (input.type == Blockly.INPUT_VALUE || input.type == Blockly.DUMMY_INPUT) {
return !this.isInline || this.isMultiRow;
}
return false;
};
/**
* @override
*/
@@ -253,6 +282,7 @@ Blockly.zelos.RenderInfo.prototype.finalizeOutputConnection_ = function() {
row.yPos = yCursor;
yCursor += row.height;
}
this.height = yCursor;
// Adjust the height of the output connection.
var connectionHeight = this.outputConnection.shape.height(yCursor);
@@ -300,12 +330,14 @@ Blockly.zelos.RenderInfo.prototype.finalizeHorizontalAlignment_ = function() {
// Maintain a minimum block width, split negative spacing between left
// and right edge.
totalNegativeSpacing = this.width - minBlockWidth;
row.getFirstSpacer().width = -totalNegativeSpacing / 2;
row.getLastSpacer().width = -totalNegativeSpacing / 2;
} else {
row.getFirstSpacer().width = -leftNegPadding;
row.getLastSpacer().width = -rightNegPadding;
leftNegPadding = totalNegativeSpacing / 2;
rightNegPadding = totalNegativeSpacing / 2;
}
// Add a negative spacer on the start and end of the block.
row.elements.unshift(new Blockly.blockRendering.InRowSpacer(this.constants_,
-leftNegPadding));
row.elements.push(new Blockly.blockRendering.InRowSpacer(this.constants_,
-rightNegPadding));
}
if (totalNegativeSpacing) {
this.width -= totalNegativeSpacing;
@@ -338,6 +370,19 @@ Blockly.zelos.RenderInfo.prototype.getNegativeSpacing_ = function(elem) {
var outerShape = this.outputConnection.shape.type;
var constants =
/** @type {!Blockly.zelos.ConstantProvider} */ (this.constants_);
if (this.isMultiRow && this.inputRowNum_ > 1) {
switch (outerShape) {
case constants.SHAPES.ROUND:
// Special case for multi-row round reporter blocks.
var radius = this.height / 2;
var topPadding = this.constants_.SMALL_PADDING;
var roundPadding = radius *
(1 - Math.sin(Math.acos((radius - topPadding) / radius)));
return connectionWidth - roundPadding;
default:
return 0;
}
}
if (Blockly.blockRendering.Types.isInlineInput(elem)) {
var innerShape = elem.connectedBlock ?
elem.connectedBlock.pathObject.outputShapeType :