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

Merge branch 'bugfix/680-preview-dimensions' of https://github.com/bendman/p5.js-web-editor into bendman-bugfix/680-preview-dimensions

Browse source
This commit is contained in:
Cassie Tarakajian 2018-10-17 15:27:57 -04:00
commit 474c843e8a
4 changed files with 52 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
client/modules/IDE/pages/IDEView.jsx
View file

@ -369,41 +369,43 @@ class IDEView extends React.Component {
<header className="preview-frame__header"> <header className="preview-frame__header">
<h2 className="preview-frame__title">Preview</h2> <h2 className="preview-frame__title">Preview</h2>
</header> </header>
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}> <div className="preview-frame__content">
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
</div>
<div>
{(
(
(this.props.preferences.textOutput ||
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) &&
this.props.ide.isPlaying
) ||
this.props.ide.isAccessibleOutputPlaying
)
}
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}
files={this.props.files}
content={this.props.selectedFile.content}
isPlaying={this.props.ide.isPlaying}
isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
autorefresh={this.props.preferences.autorefresh}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
endSketchRefresh={this.props.endSketchRefresh}
stopSketch={this.props.stopSketch}
setBlobUrl={this.props.setBlobUrl}
expandConsole={this.props.expandConsole}
/>
</div> </div>
<div>
{(
(
(this.props.preferences.textOutput ||
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) &&
this.props.ide.isPlaying
) ||
this.props.ide.isAccessibleOutputPlaying
)
}
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}
files={this.props.files}
content={this.props.selectedFile.content}
isPlaying={this.props.ide.isPlaying}
isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
autorefresh={this.props.preferences.autorefresh}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
endSketchRefresh={this.props.endSketchRefresh}
stopSketch={this.props.stopSketch}
setBlobUrl={this.props.setBlobUrl}
expandConsole={this.props.expandConsole}
/>
</div> </div>
</SplitPane> </SplitPane>
</SplitPane> </SplitPane>

3
client/modules/IDE/reducers/files.js
View file

@ -31,6 +31,9 @@ const defaultCSS =
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
canvas {
display: block;
}
`; `;
const initialState = () => { const initialState = () => {

10
client/styles/components/_preview-frame.scss
View file

@ -5,6 +5,11 @@
border-width: 0; border-width: 0;
} }
.preview-frame-holder {
display: flex;
flex-direction: column;
height: 100%;
}
.preview-frame-overlay { .preview-frame-overlay {
height: 100%; height: 100%;
@ -37,3 +42,8 @@
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
font-weight: normal; font-weight: normal;
} }
.preview-frame__content {
position: relative;
flex: 1 1 0;
}

3
server/scripts/examples.js
View file

@ -28,6 +28,9 @@ const defaultCSS =
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
canvas {
display: block;
}
`; `;
const clientId = process.env.GITHUB_ID; const clientId = process.env.GITHUB_ID;