Google Blockly update Input type

Question

I am currently trying to use Google Blockly (a visual code editor) in a project of mine. The example below shows a "block", with several inputs. What I am trying to do is, having a block add another input to itself based on the dropdown field selection. This works, but the input always breaks to a new line. I can set it inline, but I don't like the look of that. Do you have any idea how to achieve that?

Thanks in advance,

Chrisstar

Code:

Blockly.Blocks['page_settings'] = {

  init: function() {
    var PROPERTIES =
        [["Nothing", "NONE"], ["Show Text Component", "SHOW_TEXT"], ["Show Item", "SHOW_ITEM"]];
    this.setColour(65);
    this.appendValueInput("TEXT")
        .setCheck("String")
        .appendField("Text");
    this.appendValueInput("FORMAT")
      .setCheck("mc_text_format")
      .appendField("Format");
    var dropdown = new Blockly.FieldDropdown(PROPERTIES, function(option) {
      this.sourceBlock_.updateShape_(option);
    });
    this.appendDummyInput()
        .appendField("Hover Event")
        .appendField(dropdown, 'HOVER_EVENT_TYPE');
    this.setInputsInline(false);
    this.setOutput(true, 'Boolean');
    this.setTooltip('Blockly.Msg.MATH_IS_TOOLTIP');
  },

  mutationToDom: function() {
    var container = document.createElement('mutation');
    var itemInput = this.getFieldValue('HOVER_EVENT_TYPE');
    container.setAttribute('hover_type', itemInput);
    return container;
  },

  domToMutation: function(xmlElement) {
    var itemInput = xmlElement.getAttribute('hover_type');
    this.updateShape_(itemInput);
  },

  updateShape_: function(input_type) {
    // Add or remove a Value Input.
    var inputExists = this.getInput('HOVER_INPUT');
    if (input_type == 'SHOW_TEXT') {
      if (!inputExists) {
        this.appendValueInput('HOVER_INPUT')
            .setCheck('mc_text_component');
      }
    }else if(input_type == 'SHOW_ITEM') {
      if (!inputExists) {
        this.appendValueInput('HOVER_INPUT')
            .setCheck('mc_item');
      }
    }else if(inputExists) {
      this.removeInput('HOVER_INPUT');
    }
  }
};

I researched and tested a bit more and came to the conclusion that because of the way this framework works, it is not possible to do what I want (you could change native code, but that's too advanced for me). Since I don't need it anymore, will flag this to be closed. — Chrisstar, Aug 06 '17 at 10:59
Hello. I was wondering how could i append an input at a certain position. Currently the mutator always adds input at the end of the block. How can i add an input between some fields? — Arbaz Sheikh, May 25 '21 at 10:12

score 1 · Accepted Answer · answered Aug 10 '17 at 17:24

1

In Blockly, you can set all the inputs to be inline or all of them followed by a line break ("external"). There is no support for only some inputs being inline. See the setInputsInline(..) methods (or inlineInputs in the JSON block definition).

answered Aug 10 '17 at 17:24

Anm

3,291
2
29
40

Although I am no longer working on this, it is what I figured out myself. I wanted to achieve the look of the "external" inputs without breaking a new line. I figure this is not possible (without changing the original code) – Chrisstar Aug 10 '17 at 17:26

Google Blockly update Input type

1 Answers1