generalised BlocklyWindow

src/components/Blockly/BlocklyComponent.jsx

@@ -68,7 +68,7 @@ class BlocklyComponent extends React.Component {
 
 
         return <React.Fragment>
-            <Card ref={this.blocklyDiv} id="blocklyDiv" />
+            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}}/>
             <Toolbox toolbox={this.toolbox} />
         </React.Fragment>;
     }

src/components/Blockly/BlocklyWindow.js

@@ -28,28 +28,41 @@ class BlocklyWindow extends Component {
     });
   }
 
+  componentDidUpdate(props) {
+    if(props.initialXml !== this.props.initialXml){
+      // guarantees that the current xml-code (this.props.initialXml) is rendered
+      const workspace = Blockly.getMainWorkspace();
+      workspace.clear();
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace);
+    }
+  }
+
   render() {
+    console.log(this.props.initialXml);
     return (
       <BlocklyComponent ref={this.simpleWorkspace}
-        readOnly={false}
-        trashcan={true}
+        style={this.props.blocklyCSS}
+        readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
+        trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
         renderer='zelos'
         zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-          controls: true,
+          controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
           wheel: false,
           startScale: 0.8,
           maxScale: 3,
           minScale: 0.3,
           scaleSpeed: 1.2
         }}
-        grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
+        grid={this.props.grid !== undefined && !this.props.grid ? {} :
+          { // https://developers.google.com/blockly/guides/configure/web/grid
             spacing: 20,
             length: 1,
             colour: '#4EAF47', // senseBox-green
             snap: false
         }}
         media={'/media/'}
-        move={{ // https://developers.google.com/blockly/guides/configure/web/move
+        move={this.props.move !== undefined && !this.props.move ? {} :
+          { // https://developers.google.com/blockly/guides/configure/web/move
             scrollbars: true,
             drag: true,
             wheel: false