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

✨ strech preview canvas to full-width on demand

Browse source
This commit is contained in:
ghalestrilo 2020-06-19 17:50:21 -03:00
parent 0e66756600
commit 597cb9baf9
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -201,6 +201,12 @@ class PreviewFrame extends React.Component {
this.addLoopProtect(sketchDoc); this.addLoopProtect(sketchDoc);
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement); sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
if (this.props.forceFullWidth) {
const resizeScript = sketchDoc.createElement('style');
resizeScript.innerHTML = '.p5Canvas { width: 100% !important; height: auto !important }';
sketchDoc.head.appendChild(resizeScript);
}
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`; return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
} }
@ -331,6 +337,7 @@ class PreviewFrame extends React.Component {
if (this.props.endSketchRefresh) { if (this.props.endSketchRefresh) {
this.props.endSketchRefresh(); this.props.endSketchRefresh();
} }
// debugger; // eslint-disable-line
} else { } else {
doc.srcdoc = ''; doc.srcdoc = '';
srcDoc.set(doc, ' '); srcDoc.set(doc, ' ');
@ -384,11 +391,13 @@ PreviewFrame.propTypes = {
clearConsole: PropTypes.func.isRequired, clearConsole: PropTypes.func.isRequired,
cmController: PropTypes.shape({ cmController: PropTypes.shape({
getContent: PropTypes.func getContent: PropTypes.func
}) }),
forceFullWidth: PropTypes.bool
}; };
PreviewFrame.defaultProps = { PreviewFrame.defaultProps = {
fullView: false, fullView: false,
forceFullWidth: false,
cmController: {} cmController: {}
}; };

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

@ -1,5 +1,5 @@
/* eslint-disable */ /* eslint-disable */
import React from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
@ -53,10 +53,10 @@ const MobileSketchView = (props) => {
const { preferences, ide } = props; const { preferences, ide } = props;
// useEffect(() => { useEffect(() => {
// console.log(params); // console.log(params);
// getProject(params.project_id, params.username); // getProject(params.project_id, params.username);
// }, []); });
return ( return (
<Screen> <Screen>
@ -78,6 +78,7 @@ const MobileSketchView = (props) => {
content={selectedFile.content} content={selectedFile.content}
isPlaying isPlaying
forceFullWidth
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
previewIsRefreshing={ide.previewIsRefreshing} previewIsRefreshing={ide.previewIsRefreshing}