65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
class PreviewFrame extends React.Component {
|
|
|
|
componentDidMount() {
|
|
if (this.props.isPlaying) {
|
|
this.renderFrameContents();
|
|
}
|
|
}
|
|
|
|
renderFrameContents() {
|
|
let doc = ReactDOM.findDOMNode(this).contentDocument;
|
|
if(doc.readyState === 'complete') {
|
|
renderSketch();
|
|
} else {
|
|
setTimeout(this.renderFrameContents, 0);
|
|
}
|
|
}
|
|
|
|
renderSketch() {
|
|
let doc = ReactDOM.findDOMNode(this).contentDocument;
|
|
this.clearPreview();
|
|
ReactDOM.render(this.props.head, doc.head);
|
|
let p5Script = doc.createElement('script');
|
|
p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
|
|
doc.body.appendChild(p5Script);
|
|
|
|
let sketchScript = doc.createElement('script');
|
|
sketchScript.textContent = this.props.content;
|
|
doc.body.appendChild(sketchScript);
|
|
}
|
|
|
|
clearPreview() {
|
|
let doc = ReactDOM.findDOMNode(this).contentDocument;
|
|
doc.write('');
|
|
doc.close();
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
if (this.props.isPlaying != prevProps.isPlaying) {
|
|
if (this.props.isPlaying) {
|
|
this.renderSketch();
|
|
}
|
|
else {
|
|
this.clearPreview();
|
|
}
|
|
}
|
|
|
|
if (this.props.isPlaying && this.props.content != prevProps.content) {
|
|
this.renderSketch();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
|
|
}
|
|
|
|
render() {
|
|
return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms" title="sketch output"></iframe>;
|
|
}
|
|
}
|
|
|
|
export default PreviewFrame;
|