From 597cb9baf9c217b8a843b56ae12e836c8c041b80 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 19 Jun 2020 17:50:21 -0300 Subject: [PATCH] :sparkles: strech preview canvas to full-width on demand --- client/modules/IDE/components/PreviewFrame.jsx | 11 ++++++++++- client/modules/Mobile/MobileSketchView.jsx | 7 ++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index a3f5abfb..66f45ee8 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -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 `\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: {} }; diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index a9adab25..e6d522f1 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -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 ( @@ -78,6 +78,7 @@ const MobileSketchView = (props) => { content={selectedFile.content} isPlaying + forceFullWidth isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} previewIsRefreshing={ide.previewIsRefreshing}