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

start to add multiple file functionality

Browse source
This commit is contained in:
catarak 2016-07-06 15:09:05 -04:00
parent 6563d9d90b
commit e6d94a0db8
11 changed files with 103 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -1,4 +1,4 @@
export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE'; export const UPDATE_FILE = 'UPDATE_FILE';
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH'; export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
export const START_SKETCH = 'START_SKETCH'; export const START_SKETCH = 'START_SKETCH';

19
client/modules/IDE/components/Sidebar.js Normal file
View file

@ -0,0 +1,19 @@
import React, { PropTypes } from 'react';
function Sidebar(props) {
return (
<section className="sidebar">
<ul className="sidebar__file-list">
{props.files.map(file =>
<li className="sidebar__file-item">{file.name}</li>
)}
</ul>
</section>
);
}
Sidebar.propTypes = {
files: PropTypes.array.isRequired
};
export default Sidebar;

12
client/modules/IDE/pages/IDEView.js
View file

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import Editor from '../components/Editor'; import Editor from '../components/Editor';
import Sidebar from '../components/Sidebar';
import PreviewFrame from '../components/PreviewFrame'; import PreviewFrame from '../components/PreviewFrame';
import Toolbar from '../components/Toolbar'; import Toolbar from '../components/Toolbar';
import Preferences from '../components/Preferences'; import Preferences from '../components/Preferences';
@ -44,13 +45,14 @@ class IDEView extends React.Component {
decreaseFont={this.props.decreaseFont} decreaseFont={this.props.decreaseFont}
fontSize={this.props.preferences.fontSize} fontSize={this.props.preferences.fontSize}
/> />
<Sidebar files={this.props.files} />
<Editor <Editor
content={this.props.file.content} content={this.props.files[0].content}
updateFile={this.props.updateFile} updateFile={this.props.updateFile}
fontSize={this.props.preferences.fontSize} fontSize={this.props.preferences.fontSize}
/> />
<PreviewFrame <PreviewFrame
content={this.props.file.content} content={this.props.files[0].content}
head={ head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" /> <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
} }
@ -86,15 +88,13 @@ IDEView.propTypes = {
closePreferences: PropTypes.func.isRequired, closePreferences: PropTypes.func.isRequired,
increaseFont: PropTypes.func.isRequired, increaseFont: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired, decreaseFont: PropTypes.func.isRequired,
file: PropTypes.shape({ files: PropTypes.array.isRequired,
content: PropTypes.string.isRequired
}).isRequired,
updateFile: PropTypes.func.isRequired updateFile: PropTypes.func.isRequired
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
file: state.file, files: state.files,
ide: state.ide, ide: state.ide,
preferences: state.preferences, preferences: state.preferences,
user: state.user, user: state.user,

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

@ -1,50 +1,56 @@
import * as ActionTypes from '../../../constants'; import * as ActionTypes from '../../../constants';
const initialState = { const defaultSketch = `function setup() {
name: 'sketch.js',
content: `function setup() {
createCanvas(400, 400); createCanvas(400, 400);
} }
function draw() { function draw() {
background(220); background(220);
}` }`;
};
const file = (state = initialState, action) => { const defaultHTML =
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
`;
const initialState = [
{
name: 'sketch.js',
content: defaultSketch
},
{
name: 'index.html',
content: defaultHTML
}];
const files = (state = initialState, action) => {
switch (action.type) { switch (action.type) {
case ActionTypes.CHANGE_SELECTED_FILE: case ActionTypes.UPDATE_FILE:
return { return state.map(file => {
name: action.name, if (file.name !== action.name) {
content: action.content return file;
}; }
return {
name: file.name,
content: action.content
};
});
case ActionTypes.NEW_PROJECT: case ActionTypes.NEW_PROJECT:
return { return { ...action.files };
name: action.file.name,
content: action.file.content
};
case ActionTypes.SET_PROJECT: case ActionTypes.SET_PROJECT:
return { return { ...action.files };
name: action.file.name,
content: action.file.content
};
default: default:
return state; return state;
} }
}; };
export default file; export default files;
// i'll add this in when there are multiple files
// const files = (state = [], action) => {
// switch (action.type) {
// case ActionTypes.CHANGE_SELECTED_FILE:
// //find the file with the name
// //update it
// //put in into the new array of files
// default:
// return state
// }
// }
// export default files

4
client/reducers.js
View file

@ -1,5 +1,5 @@
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import file from './modules/IDE/reducers/files'; import files from './modules/IDE/reducers/files';
import ide from './modules/IDE/reducers/ide'; import ide from './modules/IDE/reducers/ide';
import preferences from './modules/IDE/reducers/preferences'; import preferences from './modules/IDE/reducers/preferences';
import project from './modules/IDE/reducers/project'; import project from './modules/IDE/reducers/project';
@ -10,7 +10,7 @@ import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
form, form,
ide, ide,
file, files,
preferences, preferences,
user, user,
project, project,

2
client/styles/abstracts/_variables.scss
View file

@ -35,6 +35,6 @@ $dark-button-background-active-color: #f10046;
$dark-button-hover-color: $white; $dark-button-hover-color: $white;
$dark-button-active-color: $white; $dark-button-active-color: $white;
$editor-border-color: #f4f4f4; $ide-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3; $editor-selected-line-color: #f3f3f3;
$input-border-color: #979797; $input-border-color: #979797;

2
client/styles/components/_editor.scss
View file

@ -1,7 +1,7 @@
.CodeMirror { .CodeMirror {
font-family: Inconsolata, monospace; font-family: Inconsolata, monospace;
height: 100%; height: 100%;
border: 1px solid $editor-border-color; border: 1px solid $ide-border-color;
} }
.CodeMirror-linenumbers { .CodeMirror-linenumbers {

13
client/styles/components/_sidebar.scss Normal file
View file

@ -0,0 +1,13 @@
.sidebar__file-list {
padding: #{4 / $base-font-size}rem #{20 / $base-font-size}rem;
border-top: 1px solid $ide-border-color;
}
.sidebar__file-item {
padding: #{4 / $base-font-size}rem 0;
color: $light-inactive-text-color;
}
.sidebar__file-item--selected {
background-color: $ide-border-color;
}

8
client/styles/layout/_ide.scss
View file

@ -6,14 +6,18 @@
} }
.editor-holder { .editor-holder {
width: 50%; flex-grow: 1;
height: 100%; height: 100%;
} }
.preview-frame { .preview-frame {
width: 50%; flex-grow: 1;
} }
.toolbar { .toolbar {
width: 100%; width: 100%;
} }
.sidebar {
width: #{140 / $base-font-size}rem;
}

1
client/styles/main.scss
View file

@ -14,6 +14,7 @@
@import 'components/signup'; @import 'components/signup';
@import 'components/login'; @import 'components/login';
@import 'components/sketch-list'; @import 'components/sketch-list';
@import 'components/sidebar';
@import 'layout/ide'; @import 'layout/ide';
@import 'layout/sketch-list'; @import 'layout/sketch-list';

14
server/models/project.js
View file

@ -9,6 +9,18 @@ draw() {
background(220); background(220);
}` }`
const defaultHTML =
`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
`
const fileSchema = new Schema({ const fileSchema = new Schema({
name: { type: String, default: 'sketch.js' }, name: { type: String, default: 'sketch.js' },
content: { type: String, default: defaultSketch } content: { type: String, default: defaultSketch }
@ -17,7 +29,7 @@ const fileSchema = new Schema({
const projectSchema = new Schema({ const projectSchema = new Schema({
name: { type: String, default: "Hello p5.js, it's the server" }, name: { type: String, default: "Hello p5.js, it's the server" },
user: { type: Schema.Types.ObjectId, ref: 'User' }, user: { type: Schema.Types.ObjectId, ref: 'User' },
file: { type: fileSchema }, files: {type: [ fileSchema ], default: [{ name: 'sketch.js', content: defaultSketch }, { name: 'index.html', content: defaultHTML }]},
_id: { type: String, default: shortid.generate } _id: { type: String, default: shortid.generate }
}, { timestamps: true }); }, { timestamps: true });