Merge branch 'master' into typed-variables

src/components/Blockly/BlocklyComponent.css

@@ -1,7 +0,0 @@
-#blocklyDiv {
-  height: 100%;
-  min-height: 500px;
-  width: 100%;
-  /* border: 1px solid #4EAF47; */
-  position: relative;
-}

src/components/Blockly/BlocklyComponent.jsx

@@ -22,7 +22,6 @@
  */
 
 import React from 'react';
-import './BlocklyComponent.css';
 
 import Blockly from 'blockly/core';
 import locale from 'blockly/msg/en';

src/components/Blockly/BlocklySvg.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+
+import * as Blockly from 'blockly/core';
+
+class BlocklySvg extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      svg: ''
+    };
+  }
+
+  componentDidMount() {
+    this.getSvg();
+  }
+
+  componentDidUpdate(props) {
+    if(props.initialXml !== this.props.initialXml){
+      this.getSvg();
+    }
+  }
+
+  getSvg = () => {
+    const workspace = Blockly.getMainWorkspace();
+    workspace.clear();
+    Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace);
+    var canvas = workspace.svgBlockCanvas_.cloneNode(true);
+
+    if (canvas.children[0] !== undefined) {
+      canvas.removeAttribute("transform");
+
+      // does not work in  react
+      // var cssContent = Blockly.Css.CONTENT.join('');
+      var cssContent = '';
+      for (var i = 0; i < document.getElementsByTagName('style').length; i++) {
+        if(/^blockly.*$/.test(document.getElementsByTagName('style')[i].id)){
+          cssContent += document.getElementsByTagName('style')[i].firstChild.data.replace(/\..* \./g, '.');
+        }
+      }
+
+      var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
+
+      var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();
+      var content = new XMLSerializer().serializeToString(canvas);
+
+      var xml = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="${bbox.width}" height="${bbox.height}" viewBox="${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}">
+                  ${css}">${content}</svg>`;
+
+      this.setState({svg: xml});
+    }
+  }
+
+  render() {
+    return (
+      <div
+        style={{display: 'flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
+        dangerouslySetInnerHTML={{ __html: this.state.svg }}
+      />
+    );
+  };
+}
+
+export default BlocklySvg;

src/components/Blockly/BlocklyWindow.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
 import * as De from './msg/de';
-import BlocklyComponent from './';
+import BlocklyComponent from './BlocklyComponent';
+import BlocklySvg from './BlocklySvg';
 import * as Blockly from 'blockly/core';
 import './blocks/index';
 import './generator/index';
@@ -25,56 +26,63 @@ class BlocklyWindow extends Component {
     this.props.clearStats();
     workspace.addChangeListener((event) => {
       this.props.onChangeWorkspace(event);
-      Blockly.Events.disableOrphans(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);
   }
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-    var initialXML = this.props.initialXml
-    if (props.initialXml !== initialXml) {
+    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 (!initialXML) initialXML = initialXml;
-      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXML), workspace);
+      if (!xml) xml = initialXml;
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
     }
     Blockly.svgResize(workspace);
   }
 
   render() {
     return (
-      <BlocklyComponent ref={this.simpleWorkspace}
-        style={this.props.blocklyCSS}
-        readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
-        trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
-        renderer='geras'
-        zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-          controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
-          wheel: false,
-          startScale: 1.0,
-          maxScale: 3,
-          minScale: 0.3,
-          scaleSpeed: 1.2
-        }}
-        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/blockly/'}
-        move={this.props.move !== undefined && !this.props.move ? {} :
-          { // https://developers.google.com/blockly/guides/configure/web/move
-            scrollbars: true,
-            drag: true,
-            wheel: false
+      <div>
+        <BlocklyComponent ref={this.simpleWorkspace}
+          style={this.props.svg ? { height: 0 } : 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: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
+            wheel: false,
+            startScale: 0.8,
+            maxScale: 3,
+            minScale: 0.3,
+            scaleSpeed: 1.2
           }}
-        initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
-      >
-
-      </BlocklyComponent >
+          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/blockly/'}
+          move={this.props.move !== undefined && !this.props.move ? {} :
+            { // https://developers.google.com/blockly/guides/configure/web/move
+              scrollbars: true,
+              drag: true,
+              wheel: false
+            }}
+          initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
+        >
+        </BlocklyComponent >
+        {this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
+      </div>
     );
   };
 }

src/components/Blockly/blocks/sensebox-display.js

@@ -251,4 +251,4 @@ Blockly.Blocks['sensebox_display_drawRectangle'] = {
         }
     },
     LOOP_TYPES: ['sensebox_display_show'],
-};
+};