feat: improve expandable block

amp · amp · commit a2bfdccafd02 · 2026-04-12T15:12:15.000+01:00
* Remove empty array from the toolbox.
* Make expandablemake empty in toolbox by default.
* Fix a bug that causes shadow inputs to break in expandables.
diff --git a/packages/blocks/blocks_vertical/arrays.js b/packages/blocks/blocks_vertical/arrays.js
@@ -267,138 +267,158 @@ Blockly.Blocks["arrays_range"] = {
 };
 
 Blockly.Blocks['arrays_expandablemake'] = {
-    /**
-     * Block for creating an array with dynamic placeholders.
-     * Fixed to prevent shadow block ghosting during drags.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.jsonInit({
-            "message0": "array with %1 %2",
-            "args0": [
-                {
-                    "type": "field_expandable_remove",
-                    "name": "REMOVE"
-                },
-                {
-                    "type": "field_expandable_add",
-                    "name": "ADD"
-                }
-            ],
-            "output": "Array",
-            "extensions": ["colours_data_lists", "shape_square"]
-        });
+  init: function () {
+    this.jsonInit({
+      // We use a dummy input for the main label so we can change it later
+      "message0": "%2 %3 %1",
+      "args0": [
+        {
+          "type": "field_label",
+          "text": "array",
+          "name": "MAIN_LABEL"
+        },
+        {
+          "type": "field_expandable_remove",
+          "name": "REMOVE"
+        },
+        {
+          "type": "field_expandable_add",
+          "name": "ADD"
+        }
+      ],
+      "output": "Array",
+      "extensions": ["colours_data_lists", "shape_square"]
+    });
 
-        this.inputs_ = 0;
-        this.placeholders_ = ["apple", "banana", "pear", "orange", "kiwi"];
+    this.placeholders_ = ["apple", "banana", "pear", "orange", "kiwi"];
+    this.inputs_ = 0; // Start at 0 to keep it clean
+  },
 
-        // Initial setup
-        for (let i = 0; i < 2; i++) {
-            this.addInput_(i);
-            this.inputs_++;
-        }
-    },
+  /**
+   * Internal helper to update labels and create/remove inputs.
+   */
+  updateShape_: function (targetCount, isLoading) {
+    const labelField = this.getField('MAIN_LABEL');
+    if (labelField) {
+      labelField.setValue(targetCount > 0 ? "array with" : Blockly.Msg.ARRAYS_EMPTY_ARRAY);
+    }
 
-    /**
-     * Save the number of inputs to the XML.
-     */
-    mutationToDom: function () {
-        const container = document.createElement('mutation');
-        container.setAttribute('items', String(this.inputs_));
-        return container;
+    // Add new inputs
+    while (this.inputs_ < targetCount) {
+      const index = this.inputs_;
+      this.inputs_++;
+      const inputName = `ADD${index}`;
+      const input = this.appendValueInput(inputName);
+      
+      // CRITICAL FIX: Only fill shadows if NOT loading from XML
+      if (!isLoading && (this.rendered || this.isInFlyout)) {
+        this.fillInBlock(input.connection, index);
+      }
+    }
+
+    // Remove inputs
+    while (this.inputs_ > targetCount) {
+      this.removeInput(`ADD${this.inputs_ - 1}`);
+      this.inputs_--;
+    }
     },
 
-    /**
-     * Restore the number of inputs from XML.
-     */
-    domToMutation: function (xmlElement) {
-        const items = parseInt(xmlElement.getAttribute('items'), 10);
-        const newCount = isNaN(items) ? 0 : items;
-
-        // 1. Remove existing inputs to ensure a clean rebuild
-        for (let i = 0; i < this.inputs_; i++) {
-            if (this.getInput('ADD' + i)) {
-                this.removeInput('ADD' + i);
-            }
-        }
+  fillInBlock: function (connection, index) {
+    if (connection.sourceBlock_.isInsertionMarker_) return;
 
-        // 2. Update count and rebuild structure
-        this.inputs_ = newCount;
-        for (let i = 0; i < this.inputs_; i++) {
-            this.addInput_(i);
-        }
-    },
+    const textValue = this.placeholders_[index] || "item";
 
-    /**
-     * Internal helper to create the input hole.
-     * Shadow blocks are only created when manually expanding, not during drag/load.
-     * @param {number} index The current input index.
-     * @private
-     */
-    addInput_: function (index) {
-        const inputName = 'ADD' + index;
-        if (this.getInput(inputName)) return; // Prevent duplicate inputs
-
-        const input = this.appendValueInput(inputName);
-        input.setCheck(null);
-
-        // Logic check: Only spawn new shadow blocks if this is a live user action
-        // and NOT a re-rendering/dragging event (where recordUndo is usually false/null)
-        const isLiveAction = Blockly.Events.isEnabled() && !this.workspace.isFlyout;
-
-        if (isLiveAction && this.workspace) {
-            const placeholderText = this.placeholders_[index] || "thing";
-            const conn = input.connection;
-
-            if (conn && !conn.targetConnection) {
-                const shadowBlock = this.workspace.newBlock('text');
-                shadowBlock.setShadow(true);
-                if (shadowBlock.getField('TEXT')) {
-                    shadowBlock.setFieldValue(placeholderText, 'TEXT');
-                }
-                shadowBlock.initSvg();
-                shadowBlock.render();
-                conn.connect(shadowBlock.outputConnection);
-            }
+    // 1. Create the XML definition of the shadow block
+    const shadowDom = document.createElement("shadow");
+    shadowDom.setAttribute("type", "text");
+    
+    const fieldDom = document.createElement("field");
+    fieldDom.setAttribute("name", "TEXT");
+    fieldDom.textContent = textValue;
+    
+    shadowDom.appendChild(fieldDom);
+
+    // 2. Register the shadow XML directly to the connection
+    connection.setShadowDom(shadowDom);
+
+    // 3. Spawn the shadow block visually
+    if (connection.respawnShadow_) {
+        // The native Scratch-Blocks way to generate a shadow from its DOM
+        connection.respawnShadow_();
+    } else {
+        // Fallback just in case respawnShadow_ is missing in your specific VM
+        const shadowBlock = Blockly.Xml.domToBlock(shadowDom, this.workspace);
+        shadowBlock.setShadow(true);
+        shadowBlock.outputConnection.connect(connection);
+        if (this.rendered) {
+        shadowBlock.initSvg();
+        shadowBlock.render(false);
         }
+    }
     },
 
-    /**
-     * Triggered by FieldExpandable buttons.
-     */
-    onExpandableButtonClicked_: function (isAdding) {
-        if (this.workspace && this.workspace.isFlyout) {
-            return;
-        }
-        Blockly.Events.setGroup(true);
-        const oldMutation = Blockly.Xml.domToText(this.mutationToDom());
-
-        if (isAdding) {
-            // Logic for adding a new input
-            this.addInput_(this.inputs_);
-            this.inputs_++;
-        } else {
-            // Logic for removing the last input
-            if (this.inputs_ > 0) {
-                this.inputs_--;
-                const inputName = 'ADD' + this.inputs_;
-                const input = this.getInput(inputName);
-                if (input && input.connection && input.connection.targetBlock()) {
-                    const target = input.connection.targetBlock();
-                    if (target.isShadow()) {
-                        target.dispose();
-                    }
-                }
-                this.removeInput(inputName);
+  mutationToDom: function () {
+    const container = document.createElement("mutation");
+    container.setAttribute("items", String(this.inputs_));
+    return container;
+  },
+
+  domToMutation: function (xmlElement) {
+    const items = parseInt(xmlElement.getAttribute('items'), 10);
+    const newCount = isNaN(items) ? 0 : items;
+
+    // Update label
+    const labelField = this.getField('MAIN_LABEL');
+    if (labelField) {
+        labelField.setValue(newCount > 0 ? "array with" : Blockly.Msg.ARRAYS_EMPTY_ARRAY);
+    }
+
+    // Remove existing inputs (dispose any live shadows first)
+    for (let i = this.inputs_ - 1; i >= 0; i--) {
+        const input = this.getInput('ADD' + i);
+        if (input && input.connection) {
+            const target = input.connection.targetBlock();
+            if (target && target.isShadow()) {
+                target.dispose(false, false);
             }
         }
+        this.removeInput('ADD' + i);
+    }
+    this.inputs_ = 0;
 
-        this.initSvg();
-        this.render();
+    // Re-create inputs: register shadowDom for future respawning,
+    // but do NOT call respawnShadow_() — the XML loader will attach
+    // the saved block/shadow from the project file itself.
+    for (let i = 0; i < newCount; i++) {
+        const input = this.appendValueInput('ADD' + i);
+        this.inputs_++;
 
-        const newMutation = Blockly.Xml.domToText(this.mutationToDom());
-        Blockly.Events.fire(new Blockly.Events.BlockChange(this,
-            'mutation', null, oldMutation, newMutation));
-        Blockly.Events.setGroup(false);
+        // Register shadow DOM so it respawns when a real block is later removed
+        const textValue = this.placeholders_[i] || "item";
+        const shadowDom = document.createElement("shadow");
+        shadowDom.setAttribute("type", "text");
+        const fieldDom = document.createElement("field");
+        fieldDom.setAttribute("name", "TEXT");
+        fieldDom.textContent = textValue;
+        shadowDom.appendChild(fieldDom);
+        input.connection.setShadowDom(shadowDom);
+        // ← No respawnShadow_() here! XML loader does the attachment.
     }
+},
+
+  onExpandableButtonClicked_: function (isAdding) {
+    Blockly.Events.setGroup(true);
+    const oldMutation = Blockly.Xml.domToText(this.mutationToDom());
+
+    const newCount = isAdding ? this.inputs_ + 1 : Math.max(0, this.inputs_ - 1);
+    this.updateShape_(newCount);
+
+    this.initSvg();
+    if (this.rendered) this.render();
+
+    const newMutation = Blockly.Xml.domToText(this.mutationToDom());
+    Blockly.Events.fire(new Blockly.Events.BlockChange(this,
+      'mutation', null, oldMutation, newMutation));
+    Blockly.Events.setGroup(false);
+  }
 };
diff --git a/packages/gui/src/lib/make-toolbox-xml.js b/packages/gui/src/lib/make-toolbox-xml.js
@@ -913,20 +913,8 @@ const arrays = function (isInitialSetup, isStage, targetId, colors) {
         id="arrays"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}">
-        <block type="arrays_empty_array" />
-        ${blockSeparator}
         <block type="arrays_expandablemake">
-            <mutation items="2"></mutation>
-            <value name="ADD0">
-            <shadow type="text">
-                <field name="TEXT">apple</field>
-            </shadow>
-            </value>
-            <value name="ADD1">
-            <shadow type="text">
-                <field name="TEXT">banana</field>
-            </shadow>
-            </value>
+            <mutation items="0"></mutation>
         </block>
         <block type="arrays_delimited_to_array">
             <value name="TEXT">
