generalised BlocklyWindow

This commit is contained in:
Delucse 2020-09-09 13:35:35 +02:00
parent 4f34811a94
commit 2908bc464f
2 changed files with 26 additions and 13 deletions

View File

@ -68,7 +68,7 @@ class BlocklyComponent extends React.Component {
return <React.Fragment> return <React.Fragment>
<Card ref={this.blocklyDiv} id="blocklyDiv" /> <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}}/>
<Toolbox toolbox={this.toolbox} /> <Toolbox toolbox={this.toolbox} />
</React.Fragment>; </React.Fragment>;
} }

View File

@ -28,31 +28,44 @@ class BlocklyWindow extends Component {
}); });
} }
componentDidUpdate(props) {
if(props.initialXml !== this.props.initialXml){
// guarantees that the current xml-code (this.props.initialXml) is rendered
const workspace = Blockly.getMainWorkspace();
workspace.clear();
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(this.props.initialXml), workspace);
}
}
render() { render() {
console.log(this.props.initialXml);
return ( return (
<BlocklyComponent ref={this.simpleWorkspace} <BlocklyComponent ref={this.simpleWorkspace}
readOnly={false} style={this.props.blocklyCSS}
trashcan={true} readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
renderer='zelos' renderer='zelos'
zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
controls: true, controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
wheel: false, wheel: false,
startScale: 0.8, startScale: 0.8,
maxScale: 3, maxScale: 3,
minScale: 0.3, minScale: 0.3,
scaleSpeed: 1.2 scaleSpeed: 1.2
}} }}
grid={{ // https://developers.google.com/blockly/guides/configure/web/grid grid={this.props.grid !== undefined && !this.props.grid ? {} :
spacing: 20, { // https://developers.google.com/blockly/guides/configure/web/grid
length: 1, spacing: 20,
colour: '#4EAF47', // senseBox-green length: 1,
snap: false colour: '#4EAF47', // senseBox-green
snap: false
}} }}
media={'/media/'} media={'/media/'}
move={{ // https://developers.google.com/blockly/guides/configure/web/move move={this.props.move !== undefined && !this.props.move ? {} :
scrollbars: true, { // https://developers.google.com/blockly/guides/configure/web/move
drag: true, scrollbars: true,
wheel: false drag: true,
wheel: false
}} }}
initialXml={this.props.initialXml ? this.props.initialXml : initialXml} initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
> >