From bccbc0e6a92e0660a8176ab7340f870d60a40138 Mon Sep 17 00:00:00 2001 From: chamodperera Date: Fri, 29 Mar 2024 09:46:30 +0530 Subject: [PATCH] fixed errors in opening project --- imagelab_react/package.json | 3 +- imagelab_react/src/App.js | 146 +++++++++++++++++++++++------------- imagelab_react/yarn.lock | 9 ++- 3 files changed, 104 insertions(+), 54 deletions(-) diff --git a/imagelab_react/package.json b/imagelab_react/package.json index e8a2d78..8840223 100644 --- a/imagelab_react/package.json +++ b/imagelab_react/package.json @@ -28,7 +28,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "dev": "concurrently -k \"BROWSER=none yarn start\" \"yarn:electron\"", + "dev": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn:electron\"", "electron": "electron ." }, "eslintConfig": { @@ -51,6 +51,7 @@ }, "devDependencies": { "concurrently": "^8.1.0", + "cross-env": "^7.0.3", "wait-on": "^7.0.1" } } diff --git a/imagelab_react/src/App.js b/imagelab_react/src/App.js index 9000812..5a5b499 100644 --- a/imagelab_react/src/App.js +++ b/imagelab_react/src/App.js @@ -1,14 +1,14 @@ -import './App.css'; -import './imagelab-block' +import "./App.css"; +import "./imagelab-block"; import React, { useState, useEffect, useRef } from "react"; import { BlocklyWorkspace } from "react-blockly"; import Blockly from "blockly"; -import { MY_TOOLBOX } from './toolboxConfiguration'; -import { Navbar, Alignment, Button, Card, Elevation } from '@blueprintjs/core'; -import './CustomBlockly.css'; -import ImageViewer from './components/ImageViewer'; -import { workspaceConfiguration } from './workspaceConfig'; -import { redo, reset, run, undo } from './utils/main'; +import { MY_TOOLBOX } from "./toolboxConfiguration"; +import { Navbar, Alignment, Button, Card, Elevation } from "@blueprintjs/core"; +import "./CustomBlockly.css"; +import ImageViewer from "./components/ImageViewer"; +import { workspaceConfiguration } from "./workspaceConfig"; +import { redo, reset, run, undo } from "./utils/main"; function App() { const [xml, setXml] = useState(""); @@ -20,32 +20,32 @@ function App() { const start = () => { const topBlock = Blockly.getMainWorkspace().getTopBlocks()[0]; run(topBlock); - } + }; //Hook to handle updating the image useEffect(() => { // Add event listener for the message - window.addEventListener('message', handleMessage); + window.addEventListener("message", handleMessage); // Cleanup the event listener on unmount return () => { - window.removeEventListener('message', handleMessage); + window.removeEventListener("message", handleMessage); }; }, []); useEffect(() => { return () => { - localStorage.removeItem('base64Image'); - localStorage.removeItem('storedImage'); + localStorage.removeItem("base64Image"); + localStorage.removeItem("storedImage"); }; }, []); const handleMessage = (event) => { - if (event.data.type === 'imageSelected') { + if (event.data.type === "imageSelected") { const imageUrl = event.data.imageUrl; setImageUrl(imageUrl); } - if (event.data.type === 'imageProcessed') { + if (event.data.type === "imageProcessed") { const processedImage = event.data.canvasImageData; setProcessedImage(processedImage); } @@ -53,61 +53,96 @@ function App() { const saveWorkspace = () => { const xmlText = xml; - const element = document.createElement('a'); - const file = new Blob([xmlText], { type: 'text/plain' }); + const element = document.createElement("a"); + const file = new Blob([xmlText], { type: "text/plain" }); element.href = URL.createObjectURL(file); - element.download = 'blockly-workspace.xml'; + element.download = "blockly-workspace.xml"; document.body.appendChild(element); element.click(); - } + }; const loadWorkspace = (event) => { + if (event.target.files.length === 0) { + window.alert("No file selected. Please select a project."); + return; + } const file = event.target.files[0]; + if (!file) { + window.alert("Failed to load the file. Please try again."); + return; + } const reader = new FileReader(); - + reader.onload = (event) => { - const xml = Blockly.Xml.textToDom(event.target.result); - const workspace = Blockly.getMainWorkspace(); - Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace); + try { + const xml = Blockly.Xml.textToDom(event.target.result); + const workspace = Blockly.getMainWorkspace(); + Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, workspace); + } catch (e) { + window.alert("Invalid Project file!"); + return; + } }; - + reader.readAsText(file); - } + return; + }; const handleDownload = () => { - const imageUrl = localStorage.getItem('storedImage'); + const imageUrl = localStorage.getItem("storedImage"); if (!imageUrl) { - window.alert('No processed image found in storage!'); + window.alert("No processed image found in storage!"); return; } - const link = document.createElement('a'); + const link = document.createElement("a"); link.href = imageUrl; - link.download = 'processed_image.jpg'; - + link.download = "processed_image.jpg"; + link.click(); }; return ( <> - - ImageLab - -