reset Workspace with initial XML-Block

src/actions/workspaceActions.js

@@ -5,14 +5,10 @@ import * as Blockly from 'blockly/core';
 export const workspaceChange = () => (dispatch) => {
   dispatch({
     type: CHANGE_WORKSPACE
-  })
+  });
-}
+};
 
-
+export const onChangeCode = () => (dispatch, getState) => {
-export const onChangeWorkspace = (event) => (dispatch, getState) => {
-  dispatch({
-    type: CHANGE_WORKSPACE,
-  })
   const workspace = Blockly.getMainWorkspace();
   var code = getState().workspace.code;
   code.arduino = Blockly.Arduino.workspaceToCode(workspace);
@@ -22,6 +18,11 @@ export const onChangeWorkspace = (event) => (dispatch, getState) => {
     type: NEW_CODE,
     payload: code
   });
+};
+
+export const onChangeWorkspace = (event) => (dispatch, getState) => {
+  dispatch(workspaceChange());
+  dispatch(onChangeCode());
   var stats = getState().workspace.stats;
   if (event.type === Blockly.Events.BLOCK_CREATE) {
     stats.create += event.ids.length;

src/components/Blockly/BlocklyWindow.js

@@ -7,6 +7,7 @@ import BlocklyComponent from './';
 import * as Blockly from 'blockly/core';
 import './blocks/index';
 import './generator/index';
+import { initialXml } from './initialXml.js';
 
 
 
@@ -53,8 +54,7 @@ class BlocklyWindow extends Component {
           drag: true,
           wheel: false
         }}
-        initialXml={`<xml xmlns="https://developers.google.com/blockly/xml">
+        initialXml={initialXml}
-          <block type="arduino_functions" id="QWW|$jB8+*EL;}|#uA" x="27" y="16"></block></xml>`}
       >
 
       </BlocklyComponent >

src/components/Blockly/initialXml.js

@@ -0,0 +1,3 @@
+export const initialXml = `<xml xmlns="https://developers.google.com/blockly/xml">
+  <block type="arduino_functions" deletable="false" id="QWW|$jB8+*EL;}|#uA" x="27" y="16"></block></xml>`
+// Block is initial Block of the workspace and must always be a part of the workspace

src/components/Blockly/toolbox/Toolbox.js

@@ -286,9 +286,12 @@ class Toolbox extends React.Component {
                         </Value>
                     </Block>
                 </Category>
+                {/* this block is the initial block of the workspace; not necessary
+                    to display, because it can only be used once anyway
                 <Category name="Procedures" colour={getColour().procedures}>
                     <Block type="arduino_functions" />
                 </Category>
+                */}
             </xml>
         );
     };

src/components/ClearWorkspace.js

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { clearStats, workspaceChange } from '../actions/workspaceActions';
+import { clearStats, onChangeCode } from '../actions/workspaceActions';
+import { initialXml } from './Blockly/initialXml.js';
 
 import * as Blockly from 'blockly/core';
 
@@ -16,9 +17,13 @@ class ClearWorkspace extends Component {
 
   clearWorkspace = () => {
     const workspace = Blockly.getMainWorkspace();
-    workspace.clear();
+    Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y
+    // if events are disabled, then the workspace will be cleared AND the blocks are not in the trashcan
+    const xmlDom = Blockly.Xml.textToDom(initialXml)
+    Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+    Blockly.Events.enable();
     workspace.options.maxBlocks = Infinity;
-    this.props.workspaceChange();
+    this.props.onChangeCode();
     this.props.clearStats();
   }
 
@@ -34,8 +39,8 @@ class ClearWorkspace extends Component {
 
 ClearWorkspace.propTypes = {
   clearStats: PropTypes.func.isRequired,
-  workspaceChange: PropTypes.func.isRequired
+  onChangeWorkspace: PropTypes.func.isRequired
 };
 
 
-export default connect(null, { clearStats, workspaceChange })(ClearWorkspace);
+export default connect(null, { clearStats, onChangeCode })(ClearWorkspace);

src/components/WorkspaceStats.js

@@ -87,7 +87,7 @@ WorkspaceStats.propTypes = {
   change: PropTypes.number.isRequired,
   delete: PropTypes.number.isRequired,
   move: PropTypes.number.isRequired,
-  worskpaceChange: PropTypes.number.isRequired
+  workspaceChange: PropTypes.number.isRequired
 };
 
 const mapStateToProps = state => ({
@@ -95,7 +95,7 @@ const mapStateToProps = state => ({
   change: state.workspace.stats.change,
   delete: state.workspace.stats.delete,
   move: state.workspace.stats.move,
-  worskpaceChange: state.workspace.change
+  workspaceChange: state.workspace.change
 });
 
 export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(WorkspaceStats));