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

✨ render sketch

Browse source
This commit is contained in:
ghalestrilo 2020-06-19 15:24:09 -03:00
parent d00506a70e
commit a11bc44634
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -29,10 +29,17 @@ class PreviewFrame extends React.Component {
} }
componentDidMount() { componentDidMount() {
console.log(`componentDidMount: ${this.props.isPlaying}`);
window.addEventListener('message', this.handleConsoleEvent); window.addEventListener('message', this.handleConsoleEvent);
// TODO: maybe encapsulate this into a function (together with code from componentDidUpdate)
if (this.props.isPlaying && this.props.previewIsRefreshing) {
this.renderSketch();
}
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
console.log(`componentDidUpdate: ${this.props.isPlaying}`);
// if sketch starts or stops playing, want to rerender // if sketch starts or stops playing, want to rerender
if (this.props.isPlaying !== prevProps.isPlaying) { if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch(); this.renderSketch();

3
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -1,3 +1,4 @@
/* eslint-disable */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
@ -66,7 +67,7 @@ const IDEViewMobile = (props) => {
<Link <Link
to="/mobile/preview" to="/mobile/preview"
onClick={() => { onClick={() => {
alert('starting sketch'); // alert('starting sketch');
startSketch(); startSketch();
}} }}
> >

10
client/modules/Mobile/MobileSketchView.jsx
View file

@ -13,6 +13,8 @@ import * as PreferencesActions from '../IDE/actions/preferences';
import * as ConsoleActions from '../IDE/actions/console'; import * as ConsoleActions from '../IDE/actions/console';
import * as FilesActions from '../IDE/actions/files'; import * as FilesActions from '../IDE/actions/files';
import FullView from '../IDE/pages/FullView';
import { getHTMLFile } from '../IDE/reducers/files'; import { getHTMLFile } from '../IDE/reducers/files';
@ -71,15 +73,17 @@ const MobileSketchView = (props) => {
<Content> <Content>
<h1>Hello</h1> <h1>Hello</h1>
<section className="preview-frame-holder"> <section className="preview-frame-holder">
<PreviewFrame <PreviewFrame
htmlFile={htmlFile} htmlFile={htmlFile}
files={files} files={files}
fullView head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
content={selectedFile.content} content={selectedFile.content}
isPlaying={ide.isPlaying} fullView
isPlaying
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
previewIsRefreshing={ide.previewIsRefreshing} previewIsRefreshing={ide.previewIsRefreshing}