Add dropdown functionality

project/src/index.html

@@ -16,19 +16,18 @@
       <div class="menuGroup">
         <button class="menuButton">File</button>
         <div class="dropdown">
-          <a href="#" class="dropdownItem" data-action="new">New</a>
-          <a href="#" class="dropdownItem" data-action="open">Open</a>
-          <a href="#" class="dropdownItem" data-action="download">Download</a>
+          <a href="#" id="newButton" class="dropdownItem" data-action="new">New</a>
+          <a href="#" id="loadButton" class="dropdownItem" data-action="open">Open</a>
+          <a href="#" id="saveButton" class="dropdownItem" data-action="download">Download</a>
         </div>
       </div>
 
       <div class="menuGroup">
         <button class="menuButton">Edit</button>
         <div class="dropdown">
-          <a href="#" class="dropdownItem" data-action="undo">Undo</a>
-          <a href="#" class="dropdownItem" data-action="redo">Redo</a>
-          <a href="#" class="dropdownItem" data-action="cleanup">Clean up</a>
-          <a href="#" class="dropdownItem" data-action="clear">Clear</a>
+          <a href="#" id="undoButton" class="dropdownItem" data-action="undo">Undo</a>
+          <a href="#" id="redoButton" class="dropdownItem" data-action="redo">Redo</a>
+          <a href="#" id="cleanWorkspace" class="dropdownItem" data-action="cleanup">Clean up</a>
         </div>
       </div>
 

project/src/index.js

@@ -41,6 +41,66 @@ const ws = Blockly.inject(blocklyDiv, {
 
 window.workspace = ws;
 
+const newButton = document.querySelector('#newButton');
+
+newButton.addEventListener("click", () => {
+  ws.clear()
+
+  // Create the MCP block
+  const mcpBlock = ws.newBlock('create_mcp');
+  mcpBlock.initSvg();
+  mcpBlock.setDeletable(false);
+  mcpBlock.setMovable(true);  // Allow moving but not deleting
+
+  // Position it in a reasonable spot
+  mcpBlock.moveBy(50, 50);
+  mcpBlock.render();
+});
+
+loadButton.addEventListener("click", () => {
+  const input = document.createElement('input');
+  let fileContent;
+  input.type = 'file';
+  input.accept = '.txt'; // Specify the file types you want to accept
+  input.onchange = function (event) {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      fileContent = JSON.parse(event.target.result); // Parse directly without decoding
+      Blockly.serialization.workspaces.load(fileContent, ws);
+    };
+    reader.readAsText(file);
+  };
+  input.click();
+});
+
+saveButton.addEventListener("click", () => {
+  const state = Blockly.serialization.workspaces.save(ws);
+  const stateString = JSON.stringify(state);
+
+  var filename = "mcpBlockly.txt";
+  var element = document.createElement('a');
+
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(stateString));
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+});
+
+undoButton.addEventListener("click", () => {
+  ws.undo(false);
+});
+
+redoButton.addEventListener("click", () => {
+  ws.undo(true);
+});
+
+cleanWorkspace.addEventListener("click", () => {
+  ws.cleanUp();
+});
+
 // Observe any size change to the blockly container
 const observer = new ResizeObserver(() => {
   Blockly.svgResize(ws);