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

Merge branch 'tutorial'

Browse Source
This commit is contained in:
Delucse 2020-09-27 20:36:07 +02:00
commit 078d53e7e2
8 changed files with 115 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Blockly/BlocklyComponent.css
View File

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

1
src/components/Blockly/BlocklyComponent.jsx
View File

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

65
src/components/Blockly/BlocklySvg.js Normal file
View File

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

76
src/components/Blockly/BlocklyWindow.js
View File

@ -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';
@ -32,49 +33,52 @@ class BlocklyWindow extends Component {
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='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
}}
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 >
<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
}}
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>
);
};
}

2
src/components/Home.js
View File

@ -87,7 +87,7 @@ class Home extends Component {
</IconButton>
</Tooltip>
<TrashcanButtons />
<BlocklyWindow />
<BlocklyWindow blocklyCSS={{height: '500px'}}/>
</Grid>
{this.state.codeOn ?
<Grid item xs={12} md={6}>

5
src/components/Tutorial/Assessment.js
View File

@ -39,7 +39,10 @@ class Assessment extends Component {
<div style={{float: 'right', height: '40px'}}><WorkspaceFunc solutionCheck/></div>
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12} md={6} lg={8}>
<BlocklyWindow initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}/>
<BlocklyWindow
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
blocklyCSS={{height: '500px'}}
/>
</Grid>
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? {height: 'max-content'} : {}}>
<Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>

5
src/components/Tutorial/Builder/BlocklyExample.js
View File

@ -114,7 +114,10 @@ class BlocklyExample extends Component {
<div style={{marginTop: '10px'}}>
<Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
<Grid item xs={12}>
<BlocklyWindow initialXml={initialXml}/>
<BlocklyWindow
initialXml={initialXml}
blocklyCSS={{height: '500px'}}
/>
</Grid>
</Grid>
<Button

7
src/components/Tutorial/Instruction.js
View File

@ -27,12 +27,7 @@ class Instruction extends Component {
<Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12}>
<BlocklyWindow
trashcan={false}
readOnly={true}
zoomControls={false}
grid={false}
move={false}
blocklyCSS={{minHeight: '300px'}}
svg
initialXml={step.xml}
/>
</Grid>