Statement inputs with subsequent FieldTextInputs are indented

[mattbishop]

Describe the bug

I'm using the Zelos Renderer. I have a block with multiple statement inputs in a row.

If I append a text input field in a dummy input right after a statement input, the text box appears indented to be after the notch in a the previous statement block. However, If I do the same thing with a plain label input field, that label appears left-aligned as I would expect.

To Reproduce

Here is the code I'm using to do this:

 this.appendDummyInput()
 .appendField(newFieldImage('icons/file-icon.png', 32, 32, 'schema file', 'Your schema'))
 .appendField(new Blockly.FieldTextInput('', null, {tooltip: 'Schema name'}), 'schema_name')
 this.appendDummyInput()
 .appendField(newFieldImage('icons/plus-icon.png', 16, 16, 'Add Definition', 'Add new definition'))
 .appendField('Definitions')

 this.appendDummyInput()
 .appendField(new Blockly.FieldTextInput('', null, {tooltip: 'Definition name'}), 'def_1')
 .appendField(newFieldImage('icons/minus-icon.png', 16, 16, 'Remove definition', 'Remove this definition'))
 this.appendStatementInput('$defs1')
 .setCheck(schemaTypes)

 this.appendDummyInput()
 .appendField(new Blockly.FieldTextInput('', null, {tooltip: 'Definition name'}), 'def_2')
 .appendField(newFieldImage('icons/minus-icon.png', 16, 16, 'Remove definition', 'Remove this definition'))
 this.appendStatementInput('$defs2')
 .setCheck(schemaTypes)

 this.appendDummyInput()
 .appendField("a label")
 .appendField(newFieldImage('iicons/minus-icon.png', 16, 16, 'Remove definition', 'Remove this definition'))
 this.appendStatementInput('$defs3')
 .setCheck(schemaTypes)

 this.setNextStatement(true, schemaTypes)
 this.setColour(195)

Expected behavior

The text field should be left-aligned like the label. I haven't tested this with other input controls.

Screenshots

Desktop (please complete the following information):

• NPM: "blockly": "Broken sentence #3.20200625.1"
• OS: macOS 10.15.5
• Browser Safari
• Version 13.1

[samelhusseini]

This is kind of by design, let me explain what is happening and let me know what you think.

Each rendered row in the zelos renderer goes through some after-render processes to limit the padding in between rows / columns in some situations. What you're seeing above is a conflict between the Notch and any field that is not a label field.
If you were to leave the text input field where it would normally be rendered (ie: left aligned), because of its size it would be rendered like so:

Notice how the notch and text field intersect.
In order to avoid any intersection, we bump the x position of any field that is not a label.
If you'd like to play around with this code, try commenting out this.adjustXPosition_(); in the measure method in core/renderers/zelos/info.js.

[mattbishop]

That makes sense, and I think I was expecting the gap to grow higher to accommodate. I'll see if I can work on it that way.

[mattbishop]

I have a solution that works for me. It involves two monkey-patches. The first expands the spacer row if next appears to have Fields in it, meaning the minHeight has been impacted by Field border rect:

 const origMakeSpacerRow_ = Blockly.blockRendering.RenderInfo.prototype.makeSpacerRow_
 Blockly.blockRendering.RenderInfo.prototype.makeSpacerRow_ = function() {
 const spacer = origMakeSpacerRow_.apply(this, arguments)
 if (spacer.followsStatement && arguments[1].minHeight >= this.constants_.FIELD_BORDER_RECT_HEIGHT) {
 spacer.height += this.constants_.NOTCH_HEIGHT
 }
 return spacer
 }

The second, as @samelhusseini suggested, turns off the adjustXPosition_() method in the zelos renderer:

 Blockly.zelos.RenderInfo.prototype.adjustXPosition_ = function() {
 // do nothing
 }

[samelhusseini]

Great, those seem reasonable to me.
If you're interested in making a PR for this, we could make this decision of whether or not to shift the X position or add additional vertical space based on a constant. At this point, we'd want to keep the current behaviour as the default, but if it's behind a renderer constant, it becomes an option for folks to adjust.