p5.js-web-editor/client/modules/IDE/reducers/files.js

261 lines
6.8 KiB
JavaScript
Raw Normal View History

import objectID from 'bson-objectid';
import * as ActionTypes from '../../../constants';
2016-05-05 23:48:26 +02:00
2020-09-28 11:12:08 +02:00
const defaultSketch = `// liveUpdate
2016-05-10 00:28:38 +02:00
2020-09-28 11:12:08 +02:00
function drawMask(detection) {
stroke('red')
strokeWeight(2)
rect(detection.x, detection.y, detection.width, detection.height)
}`;
const defaultHTML =
2016-07-12 03:54:08 +02:00
`<!DOCTYPE html>
2020-09-28 11:12:08 +02:00
<html>
<head>
2020-09-28 11:12:08 +02:00
<script src="/assets/p5.js"></script>
<script src="/assets/ml5.js"></script>
2020-09-28 12:05:16 +02:00
<script src="/previewScripts.js"></script>
2020-09-28 11:12:08 +02:00
<script src="/assets/webcam.js"></script>
2016-07-12 03:54:08 +02:00
<link rel="stylesheet" type="text/css" href="style.css">
2017-10-30 20:36:09 +01:00
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
Remove accessibility CSS; Auto focus (#583) * Change accessibility example links * added library to iframe * changed preview to add accessible elements to iframe * add library only when accesible output is seleceted * focus on iframe when plaing * css * deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library * deleted comments * fix package * Moved CSS to library and removed section from file.js (#2) * Remove gitmodule (#509) * remove git modules * removed submodule and replaced interceptor for library * removed submodule and replaced interceptor for library (#510) * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * Fixes #508 (#539) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * Fixes #508 (#545) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * moved accessible output css * removed css, added aria-label, preliminary cdn update * removed section from iframe * updated cdn * add autofocus; remove CSS
2018-03-01 19:28:43 +01:00
</body>
</html>
`;
2016-07-12 03:54:08 +02:00
const defaultCSS =
`html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
width: 100% !important;
height: auto !important;
}
2016-07-12 03:54:08 +02:00
`;
2016-07-08 20:57:22 +02:00
const initialState = () => {
const a = objectID().toHexString();
const b = objectID().toHexString();
const c = objectID().toHexString();
2016-08-24 19:09:48 +02:00
const r = objectID().toHexString();
return [
{
name: 'root',
2016-08-24 19:09:48 +02:00
id: r,
_id: r,
children: [b, a, c],
fileType: 'folder',
content: ''
},
{
name: 'sketch.js',
content: defaultSketch,
2016-08-24 19:09:48 +02:00
id: a,
_id: a,
isSelectedFile: true,
fileType: 'file',
children: []
},
{
name: 'index.html',
content: defaultHTML,
2016-08-24 19:09:48 +02:00
id: b,
_id: b,
fileType: 'file',
children: []
},
{
name: 'style.css',
content: defaultCSS,
2016-08-24 19:09:48 +02:00
id: c,
_id: c,
fileType: 'file',
children: []
}];
};
function getAllDescendantIds(state, nodeId) {
return state.find(file => file.id === nodeId).children
2018-05-05 02:22:39 +02:00
.reduce((acc, childId) => (
[...acc, childId, ...getAllDescendantIds(state, childId)]
), []);
}
2016-09-03 00:11:27 +02:00
function deleteChild(state, parentId, id) {
const newState = state.map((file) => {
if (file.id === parentId) {
const newFile = Object.assign({}, file);
newFile.children = newFile.children.filter(child => child !== id);
return newFile;
}
return file;
});
return newState;
}
function deleteMany(state, ids) {
const newState = [...state];
ids.forEach((id) => {
let fileIndex;
newState.find((file, index) => {
if (file.id === id) {
fileIndex = index;
}
return file.id === id;
});
newState.splice(fileIndex, 1);
});
return newState;
}
function sortedChildrenId(state, children) {
const childrenArray = state.filter(file => children.includes(file.id));
childrenArray.sort((a, b) => (a.name > b.name ? 1 : -1));
return childrenArray.map(child => child.id);
}
2020-08-04 18:24:45 +02:00
function updateParent(state, action) {
return state.map((file) => {
if (file.id === action.parentId) {
const newFile = Object.assign({}, file);
newFile.children = [...newFile.children, action.id];
return newFile;
}
return file;
});
}
function renameFile(state, action) {
return state.map((file) => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { name: action.name });
});
}
const files = (state, action) => {
if (state === undefined) {
state = initialState(); // eslint-disable-line
}
2016-06-24 00:29:55 +02:00
switch (action.type) {
case ActionTypes.UPDATE_FILE_CONTENT:
return state.map((file) => {
if (file.id !== action.id) {
return file;
}
2020-09-21 12:22:19 +02:00
return Object.assign({}, file, { content: action.content, changed: true });
});
2020-09-21 12:22:19 +02:00
case ActionTypes.SET_UNSAVED_CHANGES:
if (action.value) {
// ignore.
return state;
}
return state.map((file) => {
if (file.changed) {
return Object.assign({}, file, { changed: false });
}
return file;
});
// return Object.assign({}, state, { unsavedChanges: action.value });
case ActionTypes.SET_BLOB_URL:
return state.map((file) => {
if (file.id !== action.id) {
return file;
}
return Object.assign({}, file, { blobURL: action.blobURL });
});
2016-06-24 00:29:55 +02:00
case ActionTypes.NEW_PROJECT:
return [...action.files];
2016-06-29 18:52:16 +02:00
case ActionTypes.SET_PROJECT:
return [...action.files];
case ActionTypes.RESET_PROJECT:
2016-08-24 21:36:37 +02:00
return initialState();
2016-08-24 01:40:47 +02:00
case ActionTypes.CREATE_FILE: // eslint-disable-line
2018-05-05 02:22:39 +02:00
{
const newState = [
2020-08-04 18:24:45 +02:00
...updateParent(state, action),
2018-05-05 02:22:39 +02:00
{
name: action.name,
id: action.id,
_id: action._id,
content: action.content,
url: action.url,
children: action.children,
2020-09-21 12:22:19 +02:00
fileType: action.fileType || 'file',
changed: false,
}];
return newState.map((file) => {
if (file.id === action.parentId) {
file.children = sortedChildrenId(newState, file.children);
}
return file;
});
2018-05-05 02:22:39 +02:00
}
2016-08-03 21:11:59 +02:00
case ActionTypes.UPDATE_FILE_NAME:
{
const newState = renameFile(state, action);
return newState.map((file) => {
if (file.children.includes(action.id)) {
file.children = sortedChildrenId(newState, file.children);
}
return file;
});
}
2016-08-03 21:11:59 +02:00
case ActionTypes.DELETE_FILE:
2018-05-05 02:22:39 +02:00
{
const newState = deleteMany(state, [action.id, ...getAllDescendantIds(state, action.id)]);
return deleteChild(newState, action.parentId, action.id);
// const newState = state.map((file) => {
// if (file.id === action.parentId) {
// const newChildren = file.children.filter(child => child !== action.id);
// return { ...file, children: newChildren };
// }
// return file;
// });
// return newState.filter(file => file.id !== action.id);
}
2016-08-24 19:09:48 +02:00
case ActionTypes.SET_SELECTED_FILE:
return state.map((file) => {
2016-08-24 19:09:48 +02:00
if (file.id === action.selectedFile) {
return Object.assign({}, file, { isSelectedFile: true });
2016-08-24 19:09:48 +02:00
}
return Object.assign({}, file, { isSelectedFile: false });
2016-08-24 19:09:48 +02:00
});
case ActionTypes.SHOW_FOLDER_CHILDREN:
return state.map((file) => {
if (file.id === action.id) {
return Object.assign({}, file, { isFolderClosed: false });
}
return file;
});
case ActionTypes.HIDE_FOLDER_CHILDREN:
return state.map((file) => {
if (file.id === action.id) {
return Object.assign({}, file, { isFolderClosed: true });
}
return file;
});
2016-06-24 00:29:55 +02:00
default:
2020-08-04 20:16:25 +02:00
return state.map((file) => {
2020-08-04 21:02:02 +02:00
file.children = sortedChildrenId(state, file.children);
2020-08-04 20:16:25 +02:00
return file;
});
2016-06-24 00:29:55 +02:00
}
};
2016-05-05 23:48:26 +02:00
export const getHTMLFile = state => state.filter(file => file.name.match(/.*\.html$/i))[0];
export const getJSFiles = state => state.filter(file => file.name.match(/.*\.js$/i));
export const getCSSFiles = state => state.filter(file => file.name.match(/.*\.css$/i));
export const getLinkedFiles = state => state.filter(file => file.url);
2016-07-08 20:57:22 +02:00
export default files;