p5.js-web-editor/shared/components/Preview/PreviewFrame.jsx

65 lines
1.6 KiB
React
Raw Normal View History

2016-05-09 22:28:38 +00:00
import React from 'react';
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
2016-06-08 20:35:59 +00:00
2016-05-09 22:28:38 +00:00
componentDidMount() {
if (this.props.isPlaying) {
this.renderFrameContents();
}
2016-05-09 22:28:38 +00:00
}
renderFrameContents() {
let doc = ReactDOM.findDOMNode(this).contentDocument;
if(doc.readyState === 'complete') {
renderSketch();
2016-05-09 22:28:38 +00:00
} else {
setTimeout(this.renderFrameContents, 0);
}
}
renderSketch() {
let doc = ReactDOM.findDOMNode(this).contentDocument;
this.clearPreview();
2016-05-11 02:22:32 +00:00
ReactDOM.render(this.props.head, doc.head);
2016-05-09 22:28:38 +00:00
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();
}
2016-05-09 22:28:38 +00:00
}
componentWillUnmount() {
2016-06-10 02:15:50 +00:00
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
2016-05-09 22:28:38 +00:00
}
render() {
2016-06-08 20:35:59 +00:00
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>;
2016-05-09 22:28:38 +00:00
}
}
2016-06-08 20:35:59 +00:00
export default PreviewFrame;