render p5 sketch, live, simplest case

This commit is contained in:
catarak 2016-05-09 18:28:38 -04:00
parent e8fa62aa3d
commit 7419c855c6
4 changed files with 65 additions and 25 deletions

View file

@ -2,31 +2,20 @@ import React from 'react';
import ReactDOM from 'react-dom';
class Preview extends React.Component {
componentDidMount() {
this.renderFrameContents();
}
renderFrameContents() {
let doc = ReactDOM.findDOMNode(this).contentDocument;
if(doc.readyState === 'complete') {
ReactDOM.render(this.props.children, doc.body);
} else {
setTimeout(this.renderFrameContents, 0);
}
}
componentDidUpdate() {
this.renderFrameContents();
}
componentWillUnmount() {
React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
console.log(ReactDOM.findDOMNode(this));
}
render() {
return <iframe sandbox="allow-same-origin"></iframe>;
}
return (
<div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
<script type="text/javascript">
{this.props.content}
</script>
</div>
);
}
}
export default Preview;

View file

@ -0,0 +1,46 @@
import React from 'react';
import ReactDOM from 'react-dom';
class PreviewFrame extends React.Component {
componentDidMount() {
this.renderFrameContents();
}
renderFrameContents() {
let doc = ReactDOM.findDOMNode(this).contentDocument;
if(doc.readyState === 'complete') {
// ReactDOM.render(this.props.children, doc.body);
this.renderSketch();
} else {
setTimeout(this.renderFrameContents, 0);
}
}
renderSketch() {
let doc = ReactDOM.findDOMNode(this).contentDocument;
doc.write('');
doc.close();
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);
}
componentDidUpdate() {
this.renderFrameContents();
}
componentWillUnmount() {
React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
}
render() {
return <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
}
}
export default PreviewFrame;

View file

@ -1,5 +1,6 @@
import React from 'react';
import Editor from '../../components/Editor/Editor'
import PreviewFrame from '../../components/Preview/PreviewFrame'
import Preview from '../../components/Preview/Preview'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
@ -12,9 +13,7 @@ class App extends React.Component {
<Editor
content={this.props.file.content}
updateFile={this.props.updateFile} />
<Preview>
<h1>Hello world!</h1>
</Preview>
<PreviewFrame content={this.props.file.content} />
</div>
);
}

View file

@ -2,7 +2,13 @@ import * as ActionTypes from '../constants/constants';
const initialState = {
name: "sketch.js",
content: "setup() { } draw() { }"
content: `function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}`
}
const file = (state = initialState, action) => {