Update WorkspaceFunc.js

src/components/WorkspaceFunc.js

@@ -23,7 +23,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) => ({
@@ -59,7 +59,7 @@ class WorkspaceFunc extends Component {
       content: '',
       open: false,
       file: false,
-      saveXml: false,
+      saveFile: false,
       name: props.name,
       snackbar: false,
       key: '',
@@ -87,13 +87,47 @@ class WorkspaceFunc extends Component {
     saveAs(blob, fileName);
   }
 
-  createFileName = () => {
+  getSvg = () => {
+    const workspace = Blockly.getMainWorkspace();
+    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>`;
+      var fileName = detectWhitespacesAndReturnReadableResult(this.state.name);
+      this.props.workspaceName(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.saveXmlFile();
+        this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg()
       }
       else{
-      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\'.' });
+        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) => {
@@ -161,7 +195,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'}}/>
@@ -173,7 +207,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>
@@ -196,6 +230,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}
@@ -216,7 +258,7 @@ class WorkspaceFunc extends Component {
           {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'}}/>
-              <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveXml ? this.saveXmlFile() : this.renameWorkspace()}}>Eingabe</Button>
+              <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveFile ? this.state.file === 'xml' ? this.saveXmlFile() : this.getSvg() : this.renameWorkspace(); this.toggleDialog();}}>Eingabe</Button>
             </div>
           : null}
         </Dialog>