listening for block drop changes and extracting project into localstorage

Author: loiswells97

src/components/Editor/Project/Project.jsx

@@ -96,10 +96,10 @@ const Project = (props) => {
   const scratchGuiProps = {
     locale: "en",
     menuBarHidden: true,
-    assetHost: "https://editor-scratch.raspberrypi.org/api/assets",
-    basePath: scratchBasePath,
-    projectId: scratchProjectId,
-    projectHost: scratchProjectHost,
+    // assetHost: "https://editor-scratch.raspberrypi.org/api/assets",
+    // basePath: scratchBasePath,
+    // projectId: scratchProjectId,
+    // projectHost: scratchProjectHost,
   };
 
   return (

src/components/Editor/Project/ScratchIntegrationHOC.jsx

@@ -20,16 +20,114 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
         "handleUpload",
         "handleRemix",
         "handleSave",
+        "handleBlocksChanged",
       ]);
     }
     componentDidMount() {
       window.addEventListener("message", this.handleMessage);
       this.props.setStageSize();
+      if (this.props.vm) {
+        console.log("Setting up VM listeners in componentDidMount...");
+        this.setupVMListeners();
+      } else {
+        console.log("VM not available yet in componentDidMount.");
+      }
+    }
+
+    componentDidUpdate(prevProps) {
+      // Set up listeners when VM becomes available
+      if (!prevProps.vm && this.props.vm) {
+        console.log("Setting up VM listeners in componentDidUpdate...");
+        this.setupVMListeners();
+      }
     }
+
     componentWillUnmount() {
       window.removeEventListener("message", this.handleMessage);
+      this.removeVMListeners();
+    }
+
+    setupVMListeners() {
+      const vm = this.props.vm;
+      if (!vm) return;
+
+      console.log("=== Looking for Blockly workspace ===");
+      
+      // Method 1: Check for global Blockly
+      if (window.Blockly) {
+        console.log("Found global Blockly:", window.Blockly);
+        const workspace = window.Blockly.getMainWorkspace?.();
+        console.log("Blockly main workspace:", workspace);
+        
+        if (workspace) {
+          workspace.addChangeListener((event) => {
+            console.log("Blockly workspace change event:", event);
+            console.log("Event type:", event.type);
+            if (event.type === "endDrag") {
+              this.handleBlocksChanged();
+            }
+          });
+          console.log("✓ Added Blockly workspace change listener");
+          return; // Success!
+        }
+      }
+      // const vm = this.props.vm;
+      // if (!vm) return;
+
+      // // if (vm.runtime.getEditingTarget()) {
+      //   // const workspace = vm.runtime.getEditingTarget().blocks;
+      //   console.log(vm);
+      //   console.log(vm.runtime);
+      //   console.log(vm.runtime.constructor.PROJECT_CHANGED);
+      //   vm.runtime.on('BLOCK_DRAG_UPDATE', this.handleBlocksChanged);
+      //   // workspace.on('BLOCK_CREATE', this.handleBlocksChanged);
+      //   // workspace.on('BLOCK_DELETE', this.handleBlocksChanged);
+      // // }
+      // console.log("Blocks changed listener set up...")
+      // // this.startPolling();
+    }
+
+    removeVMListeners() {
+      // Clean up any listeners set up in setupVMListeners
+      const vm = this.props.vm;
+      if (!vm) return;
+
+      // const workspace = vm.runtime.getEditingTarget()?.blocks;
+      vm.runtime.removeListener('BLOCK_DRAG_UPDATE', this.handleBlocksChanged);
     }
+    handleBlocksChanged() {
+      console.log("Blocks have changed");
+      
+      // Debounce to avoid saving on every tiny change
+      if (this.saveTimeout) {
+        clearTimeout(this.saveTimeout);
+      }
+      
+      this.saveTimeout = setTimeout(() => {
+        if (this.props.saveProjectSb3) {
+          this.props.saveProjectSb3().then((sb3Content) => {
+            console.log("Autosaving project...", sb3Content);
+            
+            // Convert Blob/ArrayBuffer to base64 for localStorage
+            const reader = new FileReader();
+            reader.onloadend = () => {
+              const base64String = reader.result.split(',')[1]; // Remove data:application/octet-stream;base64, prefix
+              localStorage.setItem("autosavedProject", base64String);
+              console.log("Project saved to localStorage (base64)");
+            };
+            reader.readAsDataURL(sb3Content);
+            
+            // This sb3Content is what you'd send to your save API
+            // It's the complete .sb3 file content
+          });
+        }
+      }, 2000); // Wait 2 seconds after last change
+    };
+
     handleMessage(event) {
+      // These are events sent from the page telling Scratch GUI to do certain things.
+      // Here we are telling Scratch GUI how to do those things.
+      // We want this the other way around in some of these cases.
       if (event.origin !== window.location.origin) return;
 
       switch (event.data.type) {
@@ -103,13 +201,17 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
         saveProjectSb3: null,
         loadProject: null,
         vmReady: false,
+        vm: null,
       };
+    } else {
+      console.log("Scratch VM is initialized");
     }
 
     return {
       saveProjectSb3: vm.saveProjectSb3?.bind(vm),
       loadProject: vm.loadProject?.bind(vm),
       vmReady: true,
+      vm: vm,
     };
   };