r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

toggling the play button toggles the sketch

Browse source
This commit is contained in:
catarak 2016-05-12 15:43:09 -04:00
parent 842ba9f367
commit 92444b3ea5
1 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
shared/components/Preview/PreviewFrame.jsx
View file

@ -4,13 +4,15 @@ import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component { class PreviewFrame extends React.Component {
componentDidMount() { componentDidMount() {
this.renderFrameContents(); if (this.props.isPlaying) {
this.renderFrameContents();
}
} }
renderFrameContents() { renderFrameContents() {
let doc = ReactDOM.findDOMNode(this).contentDocument; let doc = ReactDOM.findDOMNode(this).contentDocument;
if(doc.readyState === 'complete') { if(doc.readyState === 'complete') {
this.renderSketch(); renderSketch();
} else { } else {
setTimeout(this.renderFrameContents, 0); setTimeout(this.renderFrameContents, 0);
} }
@ -18,8 +20,7 @@ class PreviewFrame extends React.Component {
renderSketch() { renderSketch() {
let doc = ReactDOM.findDOMNode(this).contentDocument; let doc = ReactDOM.findDOMNode(this).contentDocument;
doc.write(''); this.clearPreview();
doc.close();
ReactDOM.render(this.props.head, doc.head); ReactDOM.render(this.props.head, doc.head);
let p5Script = doc.createElement('script'); let p5Script = doc.createElement('script');
p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js'); p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
@ -30,8 +31,21 @@ class PreviewFrame extends React.Component {
doc.body.appendChild(sketchScript); doc.body.appendChild(sketchScript);
} }
componentDidUpdate() { clearPreview() {
this.renderFrameContents(); 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();
}
}
} }
componentWillUnmount() { componentWillUnmount() {