display of the blocks as SVG in instruction-component
This commit is contained in:
Delucse
parent
5044b09701
commit
9d99c5c30b
@ -1,7 +0,0 @@
|
||||
#blocklyDiv {
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
/* border: 1px solid #4EAF47; */
|
||||
position: relative;
|
||||
}
|
||||
@ -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
65
src/components/Blockly/BlocklySvg.js
Normal 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;
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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'}}>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user