add xml code changes

package.json

@@ -19,6 +19,7 @@
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.21.0",
     "blockly": "^6.20210701.0",
+    "diff-js-xml": "^1.0.6",
     "file-saver": "^2.0.2",
     "mnemonic-id": "^3.2.7",
     "moment": "^2.28.0",

src/components/Blockly/BlocklyWindow.js

@@ -20,16 +20,18 @@ class BlocklyWindow extends Component {
 
   componentDidMount() {
     const workspace = Blockly.getMainWorkspace();
-    this.props.onChangeWorkspace({});
-    this.props.clearStats();
-    workspace.addChangeListener((event) => {
-      this.props.onChangeWorkspace(event);
-      // switch on that a block is displayed disabled or not depending on whether it is correctly connected
-      // for SVG display, a deactivated block in the display is undesirable
-      if (this.props.blockDisabled) {
-        Blockly.Events.disableOrphans(event);
-      }
-    });
+    if (!this.props.readOnly) {
+      this.props.onChangeWorkspace({});
+      this.props.clearStats();
+      workspace.addChangeListener((event) => {
+        this.props.onChangeWorkspace(event);
+        // switch on that a block is displayed disabled or not depending on whether it is correctly connected
+        // for SVG display, a deactivated block in the display is undesirable
+        if (this.props.blockDisabled) {
+          Blockly.Events.disableOrphans(event);
+        }
+      });
+    }
     Blockly.svgResize(workspace);
     const zoomToFit = new ZoomToFitControl(workspace);
     zoomToFit.init();
@@ -37,21 +39,23 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-    var xml = this.props.initialXml;
-    // if svg is true, then the update process is done in the BlocklySvg component
-    if (props.initialXml !== xml && !this.props.svg) {
-      // guarantees that the current xml-code (this.props.initialXml) is rendered
-      workspace.clear();
-      if (!xml) xml = initialXml;
-      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
-    }
-    if (props.language !== this.props.language) {
-      // change language
-      if (!xml) xml = initialXml;
-      var xmlDom = Blockly.Xml.textToDom(xml);
-      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
-      // var toolbox = workspace.getToolbox();
-      // workspace.updateToolbox(toolbox.toolboxDef_);
+    if (!this.props.readOnly) {
+      var xml = this.props.initialXml;
+      // if svg is true, then the update process is done in the BlocklySvg component
+      if (props.initialXml !== xml && !this.props.svg) {
+        // guarantees that the current xml-code (this.props.initialXml) is rendered
+        workspace.clear();
+        if (!xml) xml = initialXml;
+        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+      }
+      if (props.language !== this.props.language) {
+        // change language
+        if (!xml) xml = initialXml;
+        var xmlDom = Blockly.Xml.textToDom(xml);
+        Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+        // var toolbox = workspace.getToolbox();
+        // workspace.updateToolbox(toolbox.toolboxDef_);
+      }
     }
     Blockly.svgResize(workspace);
   }

src/components/Home.js

@@ -77,7 +77,7 @@ class Home extends Component {
 
   componentWillUnmount() {
     this.props.clearStats();
-    this.props.workspaceName(null);
+    // this.props.workspaceName(null);
   }
 
   onChange = () => {
@@ -112,10 +112,17 @@ class Home extends Component {
             </Tooltip>
             <TrashcanButtons />
             <div className='blocklyWindow'>
-              {this.props.project ?
-                < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} />
-                : < BlocklyWindow blocklyCSS={{ height: '80vH' }} />
-              }
+              {this.props.project ? (
+                  <BlocklyWindow
+                    blocklyCSS={{ height: "80vH" }}
+                    initialXml={this.props.project.xml}
+                  />
+                ) : (
+                <BlocklyWindow
+                  blocklyCSS={{ height: "80vH" }}
+                  initialXml={this.props.workspaceCode?.xml}
+                />
+              )}
             </div>
           </Grid>
           {this.state.codeOn ?
@@ -146,7 +153,8 @@ Home.propTypes = {
 
 const mapStateToProps = state => ({
   message: state.message,
-  statistics: state.general.statistics
+  statistics: state.general.statistics,
+  workspaceCode: state.workspace.code
 });
 
 

src/components/Project/ProjectHome.js

@@ -18,6 +18,11 @@ import Divider from "@material-ui/core/Divider";
 import Typography from "@material-ui/core/Typography";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import Dialog from "../Dialog";
+import Button from "@material-ui/core/Button";
+import { initialXml } from "../Blockly/initialXml";
+import {diffAsXml} from 'diff-js-xml';
+
 
 const styles = (theme) => ({
   link: {
@@ -36,6 +41,7 @@ class ProjectHome extends Component {
     type: "",
     key: "",
     message: "",
+    dialog: false,
   };
 
   componentDidMount() {
@@ -126,10 +132,43 @@ class ProjectHome extends Component {
                           overflow: "hidden",
                         }}
                       >
-                        <Link
-                          to={`/${
-                            data === "Projekte" ? "project" : "gallery"
-                          }/${project._id}`}
+                        <div
+                          onClick={async () => {
+                            const isCodeDifferent = new Promise((resolve) => {
+                              // resolve successfully when there is no existing workspace XML code
+                              if(!this.props.workspaceCode.xml) {
+                                resolve(false)
+                                return
+                              }
+
+                              // get difference of XML
+                              // TODO: check if code of project is different to workspace code
+                              diffAsXml(
+                                this.props.workspaceCode.xml,
+                                initialXml,
+                                undefined,
+                                undefined,
+                                (result) => {
+                                  resolve(result.length !== 0);
+                                }
+                              )
+                            }
+                            );
+
+                            const showDialog = await isCodeDifferent;
+
+                            if (showDialog)
+                              this.setState({
+                                dialog: true,
+                              });
+                            else {
+                              this.props.history.push(
+                                `/${
+                                  data === "Projekte" ? "project" : "gallery"
+                                }/${project._id}`
+                              );
+                            }
+                          }}
                           style={{ textDecoration: "none", color: "inherit" }}
                         >
                           <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@@ -139,6 +178,7 @@ class ProjectHome extends Component {
                           <BlocklyWindow
                             svg
                             blockDisabled
+                            readOnly
                             initialXml={project.xml}
                           />
                           <Typography
@@ -151,7 +191,7 @@ class ProjectHome extends Component {
                           >
                             {project.description}
                           </Typography>
-                        </Link>
+                        </div>
                         {this.props.user &&
                         this.props.user.email === project.creator ? (
                           <div>
@@ -206,6 +246,27 @@ class ProjectHome extends Component {
           type={this.state.type}
           key={this.state.key}
         />
+        <Dialog
+          open={this.state.dialog}
+          title="Achtung"
+          actions={
+            <React.Fragment>
+              <Button
+                onClick={() => {
+                  this.setState({ dialog: false });
+                  // TODO: navigate to project 
+                }}
+              >
+                Verwerfen
+              </Button>
+              <Button onClick={() => {}} color="primary">
+                Speichern
+              </Button>
+            </React.Fragment>
+          }
+        >
+          Möchtest du deinen bisherigen Code als Projekt speichern?
+        </Dialog>
       </div>
     );
   }
@@ -226,6 +287,7 @@ const mapStateToProps = (state) => ({
   progress: state.project.progress,
   user: state.auth.user,
   message: state.message,
+  workspaceCode: state.workspace.code,
 });
 
 export default connect(mapStateToProps, {