fix: add block loading and saving

Author: C2Coder

src/App.tsx

@@ -8,19 +8,39 @@ import BlocklyEditorFixer from "./components/topLevel/BlockyEditorFixer";
 import Monitor from "./components/topLevel/Monitor";
 import "./customBlocks/customBlocks";
 import CodeResult from "./components/topLevel/CodeResult";
+import { useState } from "react";
 
 
 function App() {
+    const [currentWorkspaceJson, setCurrentWorkspaceJson] = useState<object>({});
+    const [externalJson, setExternalJson] = useState<object | undefined>(undefined);
+
+    const handleWorkspaceChange = (workspaceJson: object) => {
+        setCurrentWorkspaceJson(workspaceJson);
+    };
+
+    const handleLoadWorkspace = (workspaceJson: object) => {
+        setExternalJson(workspaceJson);
+        // Reset external JSON after it's been applied
+        setTimeout(() => setExternalJson(undefined), 200);
+    };
+
     return (
         <DeviceProvider >
             <GenerateCodeProvider>
                 <div className="flex flex-col h-full w-full">
                     <Header />
-                    <TopBar />
+                    <TopBar 
+                        currentWorkspaceJson={currentWorkspaceJson}
+                        onLoadWorkspace={handleLoadWorkspace}
+                    />
                     <div className="grid grid-cols-3 gap-2 h-full">
                         <div className="col-span-2 min-h-full">
                             <BlocklyEditorFixer />
-                            <BlocklyEditor />
+                            <BlocklyEditor 
+                                onWorkspaceChange={handleWorkspaceChange}
+                                externalJson={externalJson}
+                            />
                         </div>
                         <div className="col-span-1 flex flex-col">
                             <div className="w-full">

src/components/buttons/LoadBtn.tsx

@@ -0,0 +1,68 @@
+import { FC, InputHTMLAttributes, useState } from "react";
+import Button, { classNamesOverride } from "./Button";
+import { loadWorkspaceFromFile, isValidWorkspaceJson } from "../../utils/blocklyStorage";
+
+export interface LoadBtnProps extends InputHTMLAttributes<HTMLInputElement> {
+  onLoadWorkspace: (workspaceJson: object) => void;
+}
+
+const LoadBtn: FC<LoadBtnProps> = ({ onLoadWorkspace }) => {
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = async () => {
+    try {
+      setLoading(true);
+      
+      const workspaceJson = await loadWorkspaceFromFile();
+      
+      // Validate the loaded JSON
+      if (!isValidWorkspaceJson(workspaceJson)) {
+        throw new Error('Invalid workspace format');
+      }
+      
+      // Call the callback to update the workspace
+      onLoadWorkspace(workspaceJson);
+      
+      setLoaded(true);
+      setTimeout(() => setLoaded(false), 2000); // Reset after 2 seconds
+    } catch (error) {
+      console.error('Failed to load blocks:', error);
+      if (error instanceof Error) {
+        if (error.message === 'File selection cancelled') {
+          // User cancelled file selection, don't show error
+          return;
+        }
+        alert(`Failed to load blocks: ${error.message}`);
+      } else {
+        alert('Failed to load blocks. Please ensure you selected a valid JSON file.');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getButtonText = () => {
+    if (loading) return "Loading...";
+    if (loaded) return "Loaded!";
+    return "Load Blocks";
+  };
+
+  const getButtonClass = () => {
+    if (loaded) return "bg-green-500 hover:bg-green-600";
+    if (loading) return "bg-yellow-500 hover:bg-yellow-600";
+    return "";
+  };
+
+  return (
+    <Button 
+      classNames={classNamesOverride(getButtonClass())} 
+      text={getButtonText()} 
+      active={!loading} 
+      onClick={handleLoad}
+      disabled={loading}
+    />
+  );
+};
+
+export default LoadBtn;

src/components/buttons/SaveBtn.tsx

@@ -0,0 +1,57 @@
+import { FC, InputHTMLAttributes, useState } from "react";
+import Button, { classNamesOverride } from "./Button";
+import { saveWorkspaceToFile } from "../../utils/blocklyStorage";
+
+export interface SaveBtnProps extends InputHTMLAttributes<HTMLInputElement> {
+  workspaceJson: object;
+}
+
+const SaveBtn: FC<SaveBtnProps> = ({ workspaceJson }) => {
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      
+      // Generate filename with timestamp
+      const now = new Date();
+      const timestamp = now.toISOString().slice(0, 19).replace(/[:.]/g, '-');
+      const filename = `blocks-${timestamp}.json`;
+      
+      await saveWorkspaceToFile(workspaceJson, filename);
+      
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000); // Reset after 2 seconds
+    } catch (error) {
+      console.error('Failed to save blocks:', error);
+      alert('Failed to save blocks. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const getButtonText = () => {
+    if (saving) return "Saving...";
+    if (saved) return "Saved!";
+    return "Save Blocks";
+  };
+
+  const getButtonClass = () => {
+    if (saved) return "bg-green-500 hover:bg-green-600";
+    if (saving) return "bg-yellow-500 hover:bg-yellow-600";
+    return "";
+  };
+
+  return (
+    <Button 
+      classNames={classNamesOverride(getButtonClass())} 
+      text={getButtonText()} 
+      active={!saving} 
+      onClick={handleSave}
+      disabled={saving}
+    />
+  );
+};
+
+export default SaveBtn;

src/components/topLevel/BlocklyEditor.tsx

@@ -1,4 +1,4 @@
-import {FC, InputHTMLAttributes, useRef, useState} from "react";
+import {FC, InputHTMLAttributes, useRef, useState, useEffect} from "react";
 import {useGenerateCode} from "../../context/GenerateCodeContext";
 import Blockly from "blockly";
 import {javascriptGenerator} from "blockly/javascript";
@@ -7,14 +7,28 @@ import "./../../customBlocks/customBlocks";
 
 import {toolbox} from "../../customBlocks/toolbox";
 export interface HeaderProps extends InputHTMLAttributes<HTMLInputElement> {
+    onWorkspaceChange?: (workspaceJson: object) => void;
+    externalJson?: object;
 }
 
 const defaultJson = '{"blocks":{"languageVersion":0,"blocks":[{"type":"variables_set","id":"Y?k]s#{Xr~,YqBs2fh]t","x":130,"y":170,"fields":{"VAR":{"id":"C(8;cYCF}~vSgkxzJ+{O"}},"inputs":{"VALUE":{"block":{"type":"math_number","id":"C:U)n7kMTy+b,XG{uxL^","fields":{"NUM":0}}}},"next":{"block":{"type":"set_interval","id":"F%q?js8I#%9/ki7ne!|;","inputs":{"NAME":{"shadow":{"type":"text","id":"=_68LlU9{7okadzqzuEh","fields":{"TEXT":""}}},"CODE":{"block":{"type":"console","id":"XO60!gMqEwBhnZ.p)IHd","fields":{"TYPE":"log"},"inputs":{"TEXT":{"shadow":{"type":"text","id":"fNM*#(#5*~Q#vGQ!QZ2!","fields":{"TEXT":""}},"block":{"type":"text_join","id":":t|fc3dH_+UPH|4V]VyS","extraState":{"itemCount":2},"inputs":{"ADD0":{"block":{"type":"text","id":"mNfX8`}O`4Q]H.!G_]~8","fields":{"TEXT":"JacLy - index: "}}},"ADD1":{"block":{"type":"variables_get","id":"E[o(]lO4#gYq5t-aCp.{","fields":{"VAR":{"id":"C(8;cYCF}~vSgkxzJ+{O"}}}}}}}},"next":{"block":{"type":"math_change","id":"_t{5oErJ:8+j.S3~?G;{","fields":{"VAR":{"id":"C(8;cYCF}~vSgkxzJ+{O"}},"inputs":{"DELTA":{"shadow":{"type":"math_number","id":"t]D:_fB#0@yvgTT=3Zy4","fields":{"NUM":1}}}}}}}},"INTERVAL":{"shadow":{"type":"math_number","id":"]~,3m4c`7d-s3PqgU?*~","fields":{"NUM":1000}}}}}}}]},"variables":[{"name":"i","id":"C(8;cYCF}~vSgkxzJ+{O"}]}'
 
-const BlocklyEditor: FC<HeaderProps> = ({}) => {
+const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) => {
 
     const {setCode} = useGenerateCode();
     const [json, setJson] = useState<object>(JSON.parse(localStorage.getItem("blockly") || defaultJson));
+    const [workspaceKey, setWorkspaceKey] = useState<number>(0);
+    
+    // Effect to handle external JSON loading
+    useEffect(() => {
+        if (externalJson) {
+            setJson(externalJson);
+            localStorage.setItem("blockly", JSON.stringify(externalJson));
+            // Force re-mount of BlocklyWorkspace component by changing the key
+            setWorkspaceKey(prev => prev + 1);
+        }
+    }, [externalJson]);
+
     const handleWorkspaceChange = (newWorkspace: Blockly.WorkspaceSvg) => {
         console.log("Workspace changed")
         try {
@@ -29,10 +43,15 @@ const BlocklyEditor: FC<HeaderProps> = ({}) => {
         setJson(newJson);
         // save to local storage
         localStorage.setItem("blockly", JSON.stringify(newJson));
+        // Notify parent component of workspace changes
+        if (onWorkspaceChange) {
+            onWorkspaceChange(newJson);
+        }
     }
 
     return (
         <BlocklyWorkspace
+            key={workspaceKey} // Force re-mount when key changes
             className="w-full h-full"
             toolboxConfiguration={toolbox}
             onWorkspaceChange={handleWorkspaceChange}

src/components/topLevel/TopBar.tsx

@@ -6,11 +6,16 @@ import StopBtn from "../buttons/StopBtn";
 import RestartBtn from "../buttons/RestartBtn";
 import CopyBtn from "../buttons/CopyBtn";
 import UploadLibsBtn from "../buttons/UploadLibsBtn";
+import SaveBtn from "../buttons/SaveBtn";
+import LoadBtn from "../buttons/LoadBtn";
+
 export interface buttonProps extends InputHTMLAttributes<HTMLInputElement> {
+    currentWorkspaceJson?: object;
+    onLoadWorkspace?: (workspaceJson: object) => void;
 }
 
 
-const ConnectionBar: FC<buttonProps> = ({}) => {
+const ConnectionBar: FC<buttonProps> = ({ currentWorkspaceJson = {}, onLoadWorkspace }) => {
 
     return (
         <div className="white_text w-full bg-gray-200 rounded p-2 mb-2 flex flex-row gap-2">
@@ -22,6 +27,9 @@ const ConnectionBar: FC<buttonProps> = ({}) => {
             <StopBtn/>
             <RestartBtn/>
             <div className="w-2"></div>
+            <SaveBtn workspaceJson={currentWorkspaceJson} />
+            {onLoadWorkspace && <LoadBtn onLoadWorkspace={onLoadWorkspace} />}
+            <div className="w-2"></div>
             <div className="flex flex-grow"></div>
             <CopyBtn/>
         </div>

src/customBlocks/categories/Robutek.ts

@@ -128,7 +128,7 @@ Blockly.Blocks['robutek_setSpeed'] = {
 }
 
 javascriptGenerator.forBlock['robutek_setSpeed'] = function (b: BlockSvg, g: CodeGenerator) {
-    var speed = getField(b, 'SPEED') || '0';
+    var speed = getVal(g, b, 'SPEED') || '0';
     return "robutek.setSpeed(" + speed + ");\n";
 }
 
@@ -159,7 +159,7 @@ Blockly.Blocks['robutek_setRamp'] = {
 }
 
 javascriptGenerator.forBlock['robutek_setRamp'] = function (b: BlockSvg, g: CodeGenerator) {
-    var ramp = getField(b, 'RAMP') || '0';
+    var ramp = getVal(g, b, 'RAMP') || '0';
     return "robutek.setRamp(" + ramp + ");\n";
 }
 
@@ -293,4 +293,34 @@ Blockly.Blocks['robutek_rotate'] = {
 
 javascriptGenerator.forBlock['robutek_rotate'] = function (b: BlockSvg, g: CodeGenerator) {
     return 'robutek.rotate(' + getVal(g, b, 'ANGLE') + ');\n';
+}
+
+// ---- //
+
+// Robutek stop(break:boolean)
+addItemToToolbox(toolbox, "Robutek",
+    {
+        kind: "block",
+        blockxml:
+            '    <block type="robutek_stop">\n' +
+            '      <value name="BREAK">\n' +
+            '        <shadow type="logic_boolean">\n' +
+            '          <field name="BOOL">FALSE</field>\n' +
+            "        </shadow>\n" +
+            "      </value>\n" +
+            "    </block>\n",
+    },
+);
+
+Blockly.Blocks['robutek_stop'] = {
+    init: function () {
+        dummy(this, 'robutek.stop');
+        value(this, "BREAK", "");
+        inline(this);
+        color(this, "Robutek");
+    }
+}
+
+javascriptGenerator.forBlock['robutek_stop'] = function (b: BlockSvg, g: CodeGenerator) {
+    return 'robutek.stop(' + getVal(g, b, 'BREAK') + ');\n';
 }

src/customBlocks/categories/Servo.ts

@@ -22,7 +22,7 @@ Blockly.Blocks['servo_import'] = {
 }
 
 javascriptGenerator.forBlock['servo_import'] = function (b: BlockSvg, g: CodeGenerator) {
-    return "import * as servo from './libs/servo.js';\n"
+    return "import { Servo } from './libs/servo.js';\n"
 }
 
 // ---- //