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

329 lines
12 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';
2016-08-11 19:29:30 +02:00
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences';
2016-08-03 21:11:59 +02:00
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
2016-08-11 21:41:13 +02:00
import SplitPane from 'react-split-pane';
2016-06-24 00:29:55 +02:00
class IDEView extends React.Component {
constructor(props) {
super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
}
2016-06-24 00:29:55 +02:00
componentDidMount() {
if (this.props.params.project_id) {
const id = this.props.params.project_id;
this.props.getProject(id);
2016-08-04 01:03:01 +02:00
// if autosave is on and the user is the owner of the project
if (this.props.preferences.autosave
&& this.props.project.owner
&& this.props.project.owner.id === this.props.user.id) {
this.autosaveInterval = setInterval(this.props.saveProject, 30000);
}
2016-06-24 00:29:55 +02:00
}
this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20;
}
componentWillUpdate(nextProps) {
if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
this.consoleSize = nextProps.ide.consoleIsExpanded ? 180 : 29;
}
if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
}
2016-06-24 00:29:55 +02:00
}
componentDidUpdate(prevProps) {
// if user is the owner of the project
if (this.props.project.owner && this.props.project.owner.id === this.props.user.id) {
// if the user turns on autosave
// or the user saves the project for the first time
if (!this.autosaveInterval &&
((this.props.preferences.autosave && !prevProps.preferences.autosave) ||
(this.props.project.id && !prevProps.project.id))) {
this.autosaveInterval = setInterval(this.props.saveProject, 30000);
// if user turns off autosave preference
} else if (this.autosaveInterval && !this.props.preferences.autosave && prevProps.preferences.autosave) {
clearInterval(this.autosaveInterval);
this.autosaveInterval = null;
}
2016-06-24 00:29:55 +02:00
}
}
2016-08-04 01:03:01 +02:00
componentWillUnmount() {
clearInterval(this.autosaveInterval);
this.autosaveInterval = null;
}
_handleConsolePaneOnDragFinished() {
this.consoleSize = this.refs.consolePane.state.draggedSize;
this.refs.consolePane.setState({
resized: false,
draggedSize: undefined,
});
}
_handleSidebarPaneOnDragFinished() {
this.sidebarSize = this.refs.sidebarPane.state.draggedSize;
this.refs.sidebarPane.setState({
resized: false,
draggedSize: undefined
});
}
2016-06-24 00:29:55 +02:00
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}
fontSize={this.props.preferences.fontSize}
indentationAmount={this.props.preferences.indentationAmount}
setIndentation={this.props.setIndentation}
indentWithSpace={this.props.indentWithSpace}
indentWithTab={this.props.indentWithTab}
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
2016-08-09 22:15:28 +02:00
autosave={this.props.preferences.autosave}
setAutosave={this.props.setAutosave}
2016-08-11 20:09:59 +02:00
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
2016-06-24 00:29:55 +02:00
/>
2016-07-21 06:05:47 +02:00
<div className="editor-preview-container">
<SplitPane
split="vertical"
defaultSize={this.sidebarSize}
ref="sidebarPane"
onDragFinished={this._handleSidebarPaneOnDragFinished}
allowResize={this.props.ide.sidebarIsExpanded}
>
2016-08-11 21:41:13 +02:00
<Sidebar
2016-07-21 06:05:47 +02:00
files={this.props.files}
2016-08-11 21:41:13 +02:00
setSelectedFile={this.props.setSelectedFile}
newFile={this.props.newFile}
isExpanded={this.props.ide.sidebarIsExpanded}
expandSidebar={this.props.expandSidebar}
collapseSidebar={this.props.collapseSidebar}
showFileOptions={this.props.showFileOptions}
hideFileOptions={this.props.hideFileOptions}
deleteFile={this.props.deleteFile}
showEditFileName={this.props.showEditFileName}
hideEditFileName={this.props.hideEditFileName}
updateFileName={this.props.updateFileName}
2016-07-21 06:05:47 +02:00
/>
2016-08-11 21:41:13 +02:00
<SplitPane
split="vertical"
defaultSize={'50%'}
onChange={() => (this.refs.overlay.style.display = 'block')}
onDragFinished={() => (this.refs.overlay.style.display = 'none')}
>
<SplitPane
split="horizontal"
primary="second"
defaultSize={this.consoleSize}
minSize={29}
ref="consolePane"
onDragFinished={this._handleConsolePaneOnDragFinished}
allowResize={this.props.ide.consoleIsExpanded}
>
2016-08-11 21:41:13 +02:00
<Editor
2016-08-12 02:59:01 +02:00
lintWarning={this.props.preferences.lintWarning}
lintMessages={this.props.editorAccessibility.lintMessages}
updateLineNumber={this.props.updateLineNumber}
updateLintMessage={this.props.updateLintMessage}
clearLintMessage={this.props.clearLintMessage}
2016-08-11 21:41:13 +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}
2016-08-12 03:29:43 +02:00
files={this.props.files}
2016-08-12 02:59:01 +02:00
lintMessages={this.props.editorAccessibility.lintMessages}
lineNo={this.props.editorAccessibility.lineNo}
2016-08-11 21:41:13 +02:00
/>
<Console
consoleEvent={this.props.ide.consoleEvent}
isPlaying={this.props.ide.isPlaying}
isExpanded={this.props.ide.consoleIsExpanded}
expandConsole={this.props.expandConsole}
collapseConsole={this.props.collapseConsole}
/>
</SplitPane>
<div>
<div className="preview-frame-overlay" ref="overlay">
</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>
</SplitPane>
</SplitPane>
2016-07-21 06:05:47 +02:00
</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,
id: PropTypes.string
2016-07-21 04:18:20 +02:00
}).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({
id: PropTypes.string,
2016-07-15 17:54:47 +02:00
name: PropTypes.string.isRequired,
owner: PropTypes.shape({
username: PropTypes.string,
id: PropTypes.string
2016-07-15 17:54:47 +02:00
})
2016-06-27 21:34:58 +02:00
}).isRequired,
setProjectName: PropTypes.func.isRequired,
openPreferences: PropTypes.func.isRequired,
2016-08-11 19:29:30 +02:00
editorAccessibility: PropTypes.shape({
2016-08-11 19:24:02 +02:00
lintMessages: PropTypes.array.isRequired,
2016-08-11 21:38:32 +02:00
lineNo: PropTypes.string.isRequired
}).isRequired,
2016-08-11 19:24:02 +02:00
updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired,
updateLineNumber: 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,
2016-08-09 22:15:28 +02:00
isTabIndent: PropTypes.bool.isRequired,
2016-08-11 20:09:59 +02:00
autosave: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired
2016-06-27 21:34:58 +02:00
}).isRequired,
closePreferences: PropTypes.func.isRequired,
setFontSize: PropTypes.func.isRequired,
setIndentation: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
2016-08-09 22:15:28 +02:00
setAutosave: PropTypes.func.isRequired,
2016-08-11 20:09:59 +02:00
setLintWarning: 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-08-03 21:11:59 +02:00
showFileOptions: PropTypes.func.isRequired,
hideFileOptions: PropTypes.func.isRequired,
2016-08-03 23:10:03 +02:00
deleteFile: PropTypes.func.isRequired,
showEditFileName: PropTypes.func.isRequired,
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired
2016-06-27 21:34:58 +02:00
};
2016-06-24 00:29:55 +02:00
function mapStateToProps(state) {
return {
2016-08-03 21:11:59 +02:00
files: setSelectedFile(state.files, state.ide.selectedFile),
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,
2016-08-11 19:29:30 +02:00
editorAccessibility: state.editorAccessibility,
2016-06-24 00:29:55 +02:00
user: state.user,
project: state.project
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({},
2016-08-11 19:29:30 +02:00
EditorAccessibilityActions,
2016-06-24 00:29:55 +02:00
FileActions,
ProjectActions,
IDEActions,
PreferencesActions),
2016-06-24 00:29:55 +02:00
dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(IDEView);