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);
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}`;
}
@ -331,6 +337,7 @@ class PreviewFrame extends React.Component {
if (this.props.endSketchRefresh) {
this.props.endSketchRefresh();
}
// debugger; // eslint-disable-line
} else {
doc.srcdoc = '';
srcDoc.set(doc, ' ');
@ -384,11 +391,13 @@ PreviewFrame.propTypes = {
clearConsole: PropTypes.func.isRequired,
cmController: PropTypes.shape({
getContent: PropTypes.func
})
}),
forceFullWidth: PropTypes.bool
};
PreviewFrame.defaultProps = {
fullView: false,
forceFullWidth: false,
cmController: {}
};

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

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