p5.js-web-editor/client/modules/IDE/pages/IDEView.js

196 lines
6.9 KiB
JavaScript
Raw Normal View History

2016-06-27 21:34:58 +02:00
import React, { PropTypes } from 'react';
2016-06-24 00:29:55 +02:00
import Editor from '../components/Editor';
import Sidebar from '../components/Sidebar';
2016-06-24 00:29:55 +02:00
import PreviewFrame from '../components/PreviewFrame';
import Toolbar from '../components/Toolbar';
import Preferences from '../components/Preferences';
import NewFileModal from '../components/NewFileModal';
2016-06-24 00:29:55 +02:00
import Nav from '../../../components/Nav';
import Console from '../components/Console';
2016-06-24 00:29:55 +02:00
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as FileActions from '../actions/files';
import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
import * as EditorHiddenActions from '../actions/editorHidden';
2016-07-12 03:54:08 +02:00
import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
2016-06-24 00:29:55 +02:00
class IDEView extends React.Component {
componentDidMount() {
if (this.props.params.project_id) {
const id = this.props.params.project_id;
this.props.getProject(id);
}
}
render() {
return (
<div className="ide">
<Nav
user={this.props.user}
createProject={this.props.createProject}
saveProject={this.props.saveProject}
2016-07-15 19:11:50 +02:00
exportProjectAsZip={this.props.exportProjectAsZip}
2016-07-15 19:36:33 +02:00
cloneProject={this.props.cloneProject}
2016-06-24 00:29:55 +02:00
/>
<Toolbar
className="Toolbar"
isPlaying={this.props.ide.isPlaying}
startSketch={this.props.startSketch}
stopSketch={this.props.stopSketch}
projectName={this.props.project.name}
setProjectName={this.props.setProjectName}
openPreferences={this.props.openPreferences}
preferencesIsVisible={this.props.ide.preferencesIsVisible}
2016-07-15 17:54:47 +02:00
owner={this.props.project.owner}
2016-06-24 00:29:55 +02:00
/>
<Preferences
isVisible={this.props.ide.preferencesIsVisible}
2016-06-24 00:29:55 +02:00
closePreferences={this.props.closePreferences}
/>
2016-07-21 06:05:47 +02:00
<div className="editor-preview-container">
<Sidebar
files={this.props.files}
selectedFile={this.props.selectedFile}
setSelectedFile={this.props.setSelectedFile}
newFile={this.props.newFile}
isExpanded={this.props.ide.sidebarIsExpanded}
expandSidebar={this.props.expandSidebar}
collapseSidebar={this.props.collapseSidebar}
/>
<div className="editor-console-container">
2016-08-06 05:08:44 +02:00
<div className="editor-linenumber" aria-live="assertive" id="editor-linenumber"></div>
2016-08-05 22:58:59 +02:00
<div className="editor-lintmessages" id="editor-lintmessages"></div>
<button className="editor-lintbutton" onClick={this.props.toggleBeep}>Beep</button>
2016-07-21 06:05:47 +02:00
<Editor
enableBeep={this.props.editorHidden.enableBeep}
2016-07-21 06:05:47 +02:00
file={this.props.selectedFile}
updateFileContent={this.props.updateFileContent}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
isTabIndent={this.props.preferences.isTabIndent}
files={this.props.files}
/>
<Console
consoleEvent={this.props.ide.consoleEvent}
isPlaying={this.props.ide.isPlaying}
isExpanded={this.props.ide.consoleIsExpanded}
expandConsole={this.props.expandConsole}
collapseConsole={this.props.collapseConsole}
2016-07-21 06:05:47 +02:00
/>
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
cssFiles={this.props.cssFiles}
files={this.props.files}
content={this.props.selectedFile.content}
head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
isPlaying={this.props.ide.isPlaying}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
/>
</div>
2016-07-21 00:37:49 +02:00
{(() => {
if (this.props.ide.modalIsVisible) {
return (
<NewFileModal
2016-07-21 04:18:20 +02:00
canUploadMedia={this.props.user.authenticated}
2016-07-21 00:37:49 +02:00
closeModal={this.props.closeNewFileModal}
/>
);
}
return '';
})()}
2016-06-24 00:29:55 +02:00
</div>
2016-06-24 00:29:55 +02:00
);
}
}
2016-06-27 21:34:58 +02:00
IDEView.propTypes = {
params: PropTypes.shape({
project_id: PropTypes.string
}),
getProject: PropTypes.func.isRequired,
2016-07-21 04:18:20 +02:00
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired
}).isRequired,
2016-06-27 21:34:58 +02:00
createProject: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,
ide: PropTypes.shape({
isPlaying: PropTypes.bool.isRequired,
2016-07-18 01:15:13 +02:00
consoleEvent: PropTypes.object,
2016-07-14 18:47:54 +02:00
modalIsVisible: PropTypes.bool.isRequired,
sidebarIsExpanded: PropTypes.bool.isRequired,
consoleIsExpanded: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired
2016-06-27 21:34:58 +02:00
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
project: PropTypes.shape({
2016-07-15 17:54:47 +02:00
name: PropTypes.string.isRequired,
owner: PropTypes.shape({
username: PropTypes.string
})
2016-06-27 21:34:58 +02:00
}).isRequired,
setProjectName: PropTypes.func.isRequired,
openPreferences: PropTypes.func.isRequired,
editorHidden: PropTypes.shape({
enableBeep: PropTypes.bool.isRequired
}).isRequired,
toggleBeep: PropTypes.func.isRequired,
2016-06-27 21:34:58 +02:00
preferences: PropTypes.shape({
2016-07-06 17:27:39 +02:00
fontSize: PropTypes.number.isRequired,
2016-07-11 04:52:48 +02:00
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired
2016-06-27 21:34:58 +02:00
}).isRequired,
closePreferences: PropTypes.func.isRequired,
files: PropTypes.array.isRequired,
2016-07-08 20:57:22 +02:00
updateFileContent: PropTypes.func.isRequired,
selectedFile: PropTypes.shape({
id: PropTypes.string.isRequired,
2016-06-27 21:34:58 +02:00
content: PropTypes.string.isRequired
}),
2016-07-11 21:22:29 +02:00
setSelectedFile: PropTypes.func.isRequired,
htmlFile: PropTypes.object.isRequired,
2016-07-12 03:54:08 +02:00
jsFiles: PropTypes.array.isRequired,
cssFiles: PropTypes.array.isRequired,
2016-07-18 01:15:13 +02:00
dispatchConsoleEvent: PropTypes.func.isRequired,
newFile: PropTypes.func.isRequired,
2016-07-14 18:47:54 +02:00
closeNewFileModal: PropTypes.func.isRequired,
expandSidebar: PropTypes.func.isRequired,
2016-07-15 19:11:50 +02:00
collapseSidebar: PropTypes.func.isRequired,
2016-07-15 19:36:33 +02:00
exportProjectAsZip: PropTypes.func.isRequired,
cloneProject: PropTypes.func.isRequired,
expandConsole: PropTypes.func.isRequired,
collapseConsole: PropTypes.func.isRequired,
2016-06-27 21:34:58 +02:00
};
2016-06-24 00:29:55 +02:00
function mapStateToProps(state) {
return {
files: state.files,
2016-07-08 20:57:22 +02:00
selectedFile: getFile(state.files, state.ide.selectedFile),
2016-07-11 21:22:29 +02:00
htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files),
2016-07-12 03:54:08 +02:00
cssFiles: getCSSFiles(state.files),
2016-06-24 00:29:55 +02:00
ide: state.ide,
preferences: state.preferences,
editorHidden: state.editorHidden,
2016-06-24 00:29:55 +02:00
user: state.user,
project: state.project
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({},
EditorHiddenActions,
2016-06-24 00:29:55 +02:00
FileActions,
ProjectActions,
IDEActions),
2016-06-24 00:29:55 +02:00
dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(IDEView);