schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update WorkspaceFunc.js

Browse Source
This commit is contained in:
Delucse 2020-09-27 20:57:56 +02:00
commit 8ec8409504
1 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/WorkspaceFunc.js
View File

@ -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>