Add make_json, weather ex, comment

project/src/blocks/text.js

@@ -1,5 +1,9 @@
 import * as Blockly from 'blockly';
 import { pythonGenerator } from 'blockly/python';
+import { registerFieldMultilineInput } from '@blockly/field-multilineinput';
+
+registerFieldMultilineInput();
+
 
 // Utility to create a unique input reference block type
 function createInputRefBlockType(inputName) {
@@ -540,12 +544,26 @@ const llm_call = {
 
 const call_api = {
   "type": "call_api",
-  "message0": "call API with url %1",
+  "message0": "call API with method %1 url %2 headers %3",
   "args0": [
     {
-      "type": "field_input",
+      type: "field_dropdown",
+      name: "METHOD",
+      options: [
+        ["GET", "GET"],
+        ["POST", "POST"],
+        ["PUT", "PUT"],
+        ["DELETE", "DELETE"],
+      ]
+    },
+    {
+      "type": "input_value",
       "name": "URL",
     },
+    {
+      "type": "input_value",
+      "name": "HEADERS",
+    },
   ],
   "output": ["String", "Integer", "List"],
   "colour": 165,
@@ -570,6 +588,38 @@ const in_json = {
   "inputsInline": true
 }
 
+const json_field = {
+  type: "json_field",
+  message0: "field",
+  args0: [],
+  previousStatement: null,
+  nextStatement: null,
+  colour: 165,
+};
+
+const make_json_container = {
+  type: "make_json_container",
+  message0: "fields %1",
+  args0: [
+    { type: "input_statement", name: "STACK" },
+  ],
+  colour: 165,
+  inputsInline: false
+};
+
+const make_json = {
+  type: "make_json",
+  message0: "make JSON %1",
+  args0: [
+    { type: "input_dummy" },
+  ],
+  colour: 165,
+  inputsInline: false,
+  output: ["String", "Integer"],
+  mutator: "json_mutator",
+  fieldCount_: 1,
+};
+
 // Dynamic function call block
 const func_call = {
   type: "func_call",
@@ -651,6 +701,142 @@ Blockly.Extensions.register('test_cleanup_extension', function () {
   };
 });
 
+// JSON mutator for dynamic field creation
+Blockly.Extensions.registerMutator(
+  'json_mutator',
+  {
+
+    decompose: function (workspace) {
+      const containerBlock = workspace.newBlock('make_json_container');
+      containerBlock.initSvg();
+      let connection = containerBlock.getInput('STACK').connection;
+
+      // Initialize defaults if not set
+      if (this.fieldCount_ === undefined) {
+        this.fieldCount_ = 0;
+        this.fieldKeys_ = [];
+      }
+
+      // Restore dynamically added field items
+      for (let i = 0; i < this.fieldCount_; i++) {
+        const itemBlock = workspace.newBlock('json_field');
+        itemBlock.initSvg();
+        // Store the connection for compose
+        const input = this.getInput('FIELD' + i);
+        if (input && input.connection && input.connection.targetConnection) {
+          itemBlock.valueConnection_ = input.connection.targetConnection;
+        }
+
+        connection.connect(itemBlock.previousConnection);
+        connection = itemBlock.nextConnection;
+      }
+
+      return containerBlock;
+    },
+
+    compose: function (containerBlock) {
+      Blockly.Events.disable();
+      try {
+        // Initialize defaults if not set
+        if (this.fieldCount_ === undefined) {
+          this.fieldCount_ = 0;
+          this.fieldKeys_ = [];
+        }
+
+        const connections = [];
+        let itemBlock = containerBlock.getInputTargetBlock('STACK');
+
+        // Collect all child connections from mutator stack
+        while (itemBlock) {
+          connections.push(itemBlock.valueConnection_);
+          itemBlock = itemBlock.nextConnection && itemBlock.nextConnection.targetBlock();
+        }
+
+        const newCount = connections.length;
+        const oldCount = this.fieldCount_;
+        this.fieldCount_ = newCount;
+
+        // Preserve old keys and extend array if needed
+        if (!this.fieldKeys_) {
+          this.fieldKeys_ = [];
+        }
+
+        // Remove all dynamic inputs before reconstruction
+        let i = 0;
+        while (this.getInput('FIELD' + i)) this.removeInput('FIELD' + i++);
+
+        // Add each dynamic field input with editable key name
+        for (let j = 0; j < newCount; j++) {
+          // Use existing key or create new one
+          if (!this.fieldKeys_[j]) {
+            this.fieldKeys_[j] = 'key' + j;
+          }
+          const key = this.fieldKeys_[j];
+          const input = this.appendValueInput('FIELD' + j);
+          const field = new Blockly.FieldTextInput(key);
+          field.setValidator((newValue) => {
+            // Update the stored key when user edits it
+            this.fieldKeys_[j] = newValue || 'key' + j;
+            return newValue;
+          });
+          input.appendField(field, 'KEY' + j);
+          input.appendField(':');
+          this.moveInputBefore('FIELD' + j, null);
+        }
+
+        // Trim fieldKeys array if fields were removed
+        if (newCount < oldCount) {
+          this.fieldKeys_.length = newCount;
+        }
+
+        // Reconnect preserved connections to new structure
+        for (let k = 0; k < newCount; k++) {
+          const conn = connections[k];
+          if (conn) {
+            try {
+              this.getInput('FIELD' + k).connection.connect(conn);
+            } catch { }
+          }
+        }
+
+        this.workspace.render();
+      } finally {
+        Blockly.Events.enable();
+      }
+    },
+
+    saveExtraState: function () {
+      return {
+        fieldCount: this.fieldCount_,
+        fieldKeys: this.fieldKeys_,
+      };
+    },
+
+    loadExtraState: function (state) {
+      this.fieldCount_ = state.fieldCount || 0;
+      this.fieldKeys_ = state.fieldKeys || [];
+
+      // Immediately rebuild the inputs structure so they exist when connections are loaded
+      if (this.fieldCount_ > 0) {
+        for (let j = 0; j < this.fieldCount_; j++) {
+          const key = this.fieldKeys_[j] || ('key' + j);
+          const input = this.appendValueInput('FIELD' + j);
+          const field = new Blockly.FieldTextInput(key);
+          field.setValidator((newValue) => {
+            // Update the stored key when user edits it
+            this.fieldKeys_[j] = newValue || 'key' + j;
+            return newValue;
+          });
+          input.appendField(field, 'KEY' + j);
+          input.appendField(':');
+        }
+      }
+    }
+  },
+  null,
+  ['json_field']
+);
+
 // Extension for dynamic function call blocks
 Blockly.Extensions.register('func_call_dynamic', function () {
   const block = this;
@@ -911,6 +1097,30 @@ Blockly.Blocks['func_call'] = {
   }
 };
 
+// Register json_field block (internal mutator block, not user-visible)
+Blockly.Blocks['json_field'] = {
+  init: function () {
+    this.jsonInit(json_field);
+  }
+};
+
+// Register make_json_container block (internal mutator block, not user-visible)
+Blockly.Blocks['make_json_container'] = {
+  init: function () {
+    this.jsonInit(make_json_container);
+  }
+};
+
+// Register make_json block separately to include custom init logic
+Blockly.Blocks['make_json'] = {
+  init: function () {
+    this.jsonInit(make_json);
+    // Initialize with no fields by default
+    this.fieldCount_ = 0;
+    this.fieldKeys_ = [];
+  }
+};
+
 export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([
   container,
   container_input,

project/src/generators/python.js

@@ -283,10 +283,12 @@ forBlock['func_call'] = function (block, generator) {
 };
 
 forBlock['call_api'] = function (block, generator) {
-  const url = block.getFieldValue('URL');
+  const url = generator.valueToCode(block, 'URL', Order.NONE) || "''";
+  const method = block.getFieldValue('METHOD');
+  const headers = generator.valueToCode(block, 'HEADERS', Order.NONE) || "''";
 
   // Generate code to call an LLM model with a prompt
-  const code = `call_api(url="${url}")`;
+  const code = `call_api(url=${url}, method="${method}", headers=${headers})`;
   return [code, Order.NONE];
 };
 
@@ -297,4 +299,23 @@ forBlock['in_json'] = function (block, generator) {
   // Generate code to call an LLM model with a prompt
   const code = `${json}["${name}"]`;
   return [code, Order.NONE];
+};
+
+forBlock['make_json'] = function (block, generator) {
+  const pairs = [];
+  let i = 0;
+
+  // Collect all key-value pairs
+  while (block.getInput('FIELD' + i)) {
+    // Get the key from the text field on the block
+    const keyField = block.getField('KEY' + i);
+    const key = keyField ? keyField.getValue() : (block.fieldKeys_[i] || ('key' + i));
+    const value = generator.valueToCode(block, 'FIELD' + i, Order.NONE) || "''";
+    pairs.push(`"${key}": ${value}`);
+    i++;
+  }
+
+  // Generate valid Python dict syntax
+  const code = pairs.length > 0 ? `{${pairs.join(', ')}}` : '{}';
+  return [code, Order.ATOMIC];
 };

project/src/index.html

@@ -33,7 +33,9 @@
 
       <div class="menuGroup">
         <button class="menuButton">Examples</button>
-        <div class="dropdown"></div>
+        <div class="dropdown">
+          <a href="#" id="weatherButton" class="dropdownItem" data-action="undo">Weather API</a>
+        </div>
       </div>
     </div>
     <div id="githubLink">

project/src/index.js

@@ -41,6 +41,8 @@ const ws = Blockly.inject(blocklyDiv, {
 
 window.workspace = ws;
 
+Blockly.ContextMenuItems.registerCommentOptions();
+
 const newButton = document.querySelector('#newButton');
 
 newButton.addEventListener("click", () => {
@@ -89,6 +91,16 @@ saveButton.addEventListener("click", () => {
   document.body.removeChild(element);
 });
 
+const weatherText = `{"workspaceComments":[{"height":120,"width":479,"id":"XI5[EHp-Ow+kinXf6n5y","x":51.234375,"y":-83,"text":"Gets temperature of location with a latitude and a longitude.\\n\\nThe API requires a minimum of one decimal point to work."}],"blocks":{"languageVersion":0,"blocks":[{"type":"create_mcp","id":")N.HEG1x]Z/,k#TeWr,S","x":50,"y":50,"deletable":false,"extraState":{"inputCount":2,"inputNames":["latitude","longitude"],"inputTypes":["integer","integer"],"outputCount":1,"outputNames":["output0"],"outputTypes":["string"],"toolCount":0},"inputs":{"X0":{"block":{"type":"input_reference_latitude","id":"]3mj!y}qfRt+!okheU7L","deletable":false,"extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"latitude"}}},"X1":{"block":{"type":"input_reference_longitude","id":"Do/{HFNGSd.!;POiKS?D","deletable":false,"extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"longitude"}}},"R0":{"block":{"type":"in_json","id":"R|j?_8s^H{l0;UZ-oQt3","fields":{"NAME":"temperature_2m"},"inputs":{"JSON":{"block":{"type":"in_json","id":"X=M,R1@7bRjJVZIPi[qD","fields":{"NAME":"current"},"inputs":{"JSON":{"block":{"type":"call_api","id":"^(.vyM.yni08S~c1EBm=","fields":{"METHOD":"GET"},"inputs":{"URL":{"shadow":{"type":"text","id":"}.T;_U_OsRS)B_y09p % { ","fields":{"TEXT":""}},"block":{"type":"text_replace","id":"OwH9uERJPTGQG!UER#ch","inputs":{"FROM":{"shadow":{"type":"text","id":"ya05#^ 7 % UbUeXX#eDSmH","fields":{"TEXT":"{latitude}"}}},"TO":{"shadow":{"type":"text","id":": _ZloQuh9c-MNf-U]!k5","fields":{"TEXT":""}},"block":{"type":"input_reference_latitude","id":"?%@)3sErZ)}=#4ags#gu","extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"latitude"}}},"TEXT":{"shadow":{"type":"text","id":"w@zsP)m6:WjkUp,ln3$x","fields":{"TEXT":""}},"block":{"type":"text_replace","id":"ImNPsvzD7r^+1MJ%IirV","inputs":{"FROM":{"shadow":{"type":"text","id":"%o(3rro?WLIFpmE0#MMM","fields":{"TEXT":"{longitude}"}}},"TO":{"shadow":{"type":"text","id":"Zpql-%oJ_sdSi | r |* er | ","fields":{"TEXT":""}},"block":{"type":"input_reference_longitude","id":"WUgiJP$X + zY#f$5nhnTX","extraState":{"ownerBlockId":") N.HEG1x]Z /, k#TeWr, S"},"fields":{"VARNAME":"longitude"}}},"TEXT":{"shadow":{"type":"text","id":", (vw$o_s7P = b4P; 8]}yj","fields":{"TEXT":"https://api.open-meteo.com/v1/forecast?latitude={latitude}&longitude={longitude}&current=temperature_2m,wind_speed_10m"}}}}}}}}}}}}}}}}}}}}]}}`;
+weatherButton.addEventListener("click", () => {
+  try {
+    const fileContent = JSON.parse(weatherText);
+    Blockly.serialization.workspaces.load(fileContent, ws);
+  } catch (error) {
+    console.error("Error loading weather.txt contents:", error);
+  }
+});
+
 undoButton.addEventListener("click", () => {
   ws.undo(false);
 });
@@ -124,10 +136,10 @@ const updateCode = () => {
   
 `;
 
-  const API = `def call_api(url):
+  const API = `def call_api(url, method="GET", headers={}):
   import requests
 
-  response = requests.get(url)
+  response = requests.request(method, url, headers=headers)
   data = response.json()
   return data
 

project/src/toolbox.js

@@ -43,11 +43,25 @@ export const toolbox = {
         {
           kind: 'block',
           type: 'call_api',
+          inputs: {
+            URL: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  text: "10",
+                },
+              },
+            },
+          },
         },
         {
           kind: 'block',
           type: 'in_json',
         },
+        {
+          kind: 'block',
+          type: 'make_json',
+        },
       ]
     },
     {