create screenshot of workspace

src/components/WorkspaceFunc.js

@@ -25,7 +25,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 
-import { faPen, faSave, faUpload, faShare } from "@fortawesome/free-solid-svg-icons";
+import { faPen, faSave, faUpload, faCamera, faShare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = (theme) => ({
@@ -61,7 +61,7 @@ class WorkspaceFunc extends Component {
       content: '',
       open: false,
       file: false,
-      saveXml: false,
+      saveFile: false,
       name: props.name
     };
   }
@@ -86,15 +86,48 @@ class WorkspaceFunc extends Component {
     saveAs(blob, fileName);
   }
 
-  createFileName = () => {
+  getSvg = () => {
-    if(this.state.name){
+    const workspace = Blockly.getMainWorkspace();
-      this.saveXmlFile();
+    var canvas = workspace.svgBlockCanvas_.cloneNode(true);
-    }
+
-    else{
+    if (canvas.children[0] !== undefined) {
-      this.setState({ file: true, saveXml: true, open: true, title: 'Blöcke speichern', content: 'Bitte gib einen Namen für die Bennenung der XML-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
+      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>`;
+      var fileName = detectWhitespacesAndReturnReadableResult(this.state.name);
+      fileName = `${fileName}.svg`
+      var blob = new Blob([xml], { type: 'image/svg+xml;base64' });
+      saveAs(blob, fileName);
     }
   }
 
+  createFileName = (filetype) => {
+    this.setState({file: filetype}, () => {
+      if(this.state.name){
+        this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg()
+      }
+      else{
+        this.setState({ saveFile: true, file: filetype, open: true, title: this.state.file === 'xml' ? 'Blöcke speichern' : 'Screenshot erstellen', content: `Bitte gib einen Namen für die Bennenung der ${this.state.file === 'xml' ? 'XML' : 'SVG'}-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.` });
+      }
+    });
+  }
+
   setFileName = (e) => {
     this.setState({name: e.target.value});
   }
@@ -152,7 +185,7 @@ class WorkspaceFunc extends Component {
       <div style={{width: 'max-content', display: 'flex'}}>
         {!this.props.solutionCheck ?
           <Tooltip title={`Name des Projekts${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{marginRight: '5px'}}>
-          <div className={this.props.classes.workspaceName} onClick={() => {this.setState({file: true, open: true, saveXml: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.'})}}>
+          <div className={this.props.classes.workspaceName} onClick={() => {this.setState({file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.'})}}>
             {this.props.name && !isWidthDown('xs', this.props.width) ? <Typography style={{margin: 'auto -3px auto 12px'}}>{this.props.name}</Typography> : null}
             <div style={{width: '40px', display: 'flex'}}>
               <FontAwesomeIcon icon={faPen} style={{height: '18px', width: '18px', margin: 'auto'}}/>
@@ -164,7 +197,7 @@ class WorkspaceFunc extends Component {
         <Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}>
           <IconButton
             className={this.props.classes.button}
-            onClick={() => this.createFileName()}
+            onClick={() => {this.createFileName('xml');}}
           >
             <FontAwesomeIcon icon={faSave} size="xs"/>
           </IconButton>
@@ -187,6 +220,14 @@ class WorkspaceFunc extends Component {
             </Tooltip>
           </label>
         </div>
+        <Tooltip title='Screenshot erstellen' arrow style={{marginRight: '5px'}}>
+          <IconButton
+            className={this.props.classes.button}
+            onClick={() => {this.createFileName('svg');}}
+          >
+            <FontAwesomeIcon icon={faCamera} size="xs" />
+          </IconButton>
+        </Tooltip>
         <Tooltip title='Workspace zurücksetzen' arrow>
           <IconButton
             className={this.props.classes.button}
@@ -201,8 +242,8 @@ class WorkspaceFunc extends Component {
             {this.state.content}
             {this.state.file ?
               <div style={{marginTop: '10px'}}>
-                <TextField autoFocus placeholder={this.state.saveXml ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
+                <TextField autoFocus placeholder={this.state.saveFile ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
-                <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveXml ? this.saveXmlFile() : this.props.workspaceName(this.state.name); this.toggleDialog();}}>Eingabe</Button>
+                <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveFile ? this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg() : this.props.workspaceName(this.state.name); this.toggleDialog();}}>Eingabe</Button>
               </div>
             : null}
           </DialogContent>