diff --git a/src/actions/index.js b/src/actions/index.js index 149cf440..0e01716f 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -3,4 +3,5 @@ export { default as EditorActions } from './editorActions'; export { default as ProjectActions } from './projectActions'; export { default as SceneActions } from './sceneActions'; export { default as CourseActions } from './courseActions'; -export { default as ClassroomActions } from './classroomActions'; \ No newline at end of file +export { default as ClassroomActions } from './classroomActions'; +export { default as ReferenceExampleActions } from './referenceExampleActions'; \ No newline at end of file diff --git a/src/actions/referenceExampleActions.js b/src/actions/referenceExampleActions.js new file mode 100644 index 00000000..7e917040 --- /dev/null +++ b/src/actions/referenceExampleActions.js @@ -0,0 +1,47 @@ +import { render } from './editorActions'; + +import * as types from '../constants/ActionTypes'; + +const refExRef = '/apiv1/referenceExamples/'; +const header = { headers: { 'content-type': 'application/json' } }; +const problem = { + name: "Error", + type: "Unknown", + info: "An unknown error occured. Please try refreshing the page", + suggestedCourse: null, + code: "" +}; + +//Lesson Actions +export function fetchReferenceExample(funcName) { + return (dispatch) => { + fetch(refExRef + funcName, header) + .then(response => { + response.json() + .then(json => { + dispatch(loadReferenceExample(json)); + dispatch(render(json.code || "")); + }) + .catch(err => { + dispatch(loadReferenceExample(problem)); + console.error(err); + }); + }) + .catch(err => { + dispatch(loadReferenceExample(problem)); + console.error(err); + }); + }; +} + +export function loadReferenceExample(refEx) { + return { + type: types.LOAD_REF_EX, + payload: refEx + }; +} + +export default { + loadReferenceExample, + fetchReferenceExample +}; \ No newline at end of file diff --git a/src/components/CourseSelect.js b/src/components/CourseSelect.js index d547b1f2..0e2e77b2 100644 --- a/src/components/CourseSelect.js +++ b/src/components/CourseSelect.js @@ -6,7 +6,8 @@ import { CardContent, IconButton, Icon, - Modal + Modal, + Tooltip } from "@material-ui/core"; import { withStyles } from "@material-ui/core/styles"; @@ -122,6 +123,7 @@ class CourseSelectModal extends Component { const courses = [].concat(this.props.courses); return (
+ school + { @@ -305,6 +309,7 @@ class Header extends Component { handleRender = () => { try { let editor = window.ace.edit("ace-editor"); + this.props.actions.refresh(editor.getSession().getValue()); this.props.actions.render(editor.getSession().getValue(), this.props.user ? this.props.user.uid : 'anon'); } catch (error) { this.props.actions.render(this.props.text, this.props.user ? this.props.user.uid : 'anon'); @@ -343,8 +348,17 @@ class Header extends Component { * @summary - When the user clicks save it will upload the information to Firebase */ handleSave = () => { - let editor = window.ace.edit("ace-editor"); - let text = editor.getSession().getValue(); + let editor, text; + if(!this.props.viewOnly) { + //If in editor mode, gets text directly from editor + editor = window.ace.edit("ace-editor"); + text = editor.getSession().getValue(); + this.props.actions.refresh(text, this.props.user ? this.props.user.uid : 'anon'); + } else { + //Otherwise, gets text from state (should be up to date since it is refreshed on editor unmount) + text = this.props.text; + } + if (this.props.user && this.props.user.uid && text) { this.setState({ spinnerOpen: true }); let ts = Date.now(); @@ -354,6 +368,7 @@ class Header extends Component { let img = scene.components.screenshot.getCanvas('perspective').toDataURL('image/jpeg', 0.1); let path = "images/perspective/" + projectId; let imgRef = storageRef.child(path); + imgRef.putString(img, 'data_url').then((snapshot) => { // Put the new document into the scenes collection scenes.doc(projectId).set({ @@ -367,7 +382,7 @@ class Header extends Component { // If we have a new projectId reload page with it if (this.props.courseName) { this.setState({ spinnerOpen: false }); - window.open(window.origin + '/' + projectId); + //window.open(window.origin + '/' + projectId); } else if (projectId !== this.props.projectId) { window.location.href = window.origin + '/' + projectId; } else { @@ -454,6 +469,10 @@ class Header extends Component { this.setState({ classroomOpen: false }); }; + handleReferenceToggle = () => { + this.setState({ referenceOpen: !this.state.referenceOpen }); + }; + loadDrawer = () => { return ( @@ -653,11 +674,17 @@ class Header extends Component { + changeView={this.props.sceneActions.changeView} + layoutType={this.props.layoutType} + referenceOpen={this.state.referenceOpen} + handleReferenceToggle={this.handleReferenceToggle}/>
{/* */} - + - { - this.setState({ viewOnlyOnOpen: this.props.viewOnly }); - if(this.props.viewOnly) { - this.props.changeView(); - } - }} - onRequestClose={this.closeTour} /> - + : null + ); + } + + renderParams = (functionParams) => { + let returnString = "("; + for (let i = 0; i < functionParams.length; i++) { + returnString += functionParams[i]; + if (i !== functionParams.length - 1) { returnString += ", "; } + } + return returnString += ")"; + // return returnString; + } + + renderTitle = () => { + const { functionName, functionParams } = this.props.referenceExample; + return ( +

{(this.props.referenceExample && functionName) ? + ("Function: " + functionName + this.renderParams(functionParams)) + : "Loading..."} +

+ ); + } + + render() { + return ( +
+ +
{(this.props.referenceExample && this.props.referenceExample.type) ? "Type: " + this.props.referenceExample.type : "Loading..."}
+

{(this.props.referenceExample && this.props.referenceExample.info) ? this.props.referenceExample.info : "Loading..."}

+ +
+ ); + } +} + + +export default ReferenceExampleBox; diff --git a/src/components/Reference.js b/src/components/Reference.js index 6d37f158..3f5e2f9b 100644 --- a/src/components/Reference.js +++ b/src/components/Reference.js @@ -22,14 +22,11 @@ export default class Reference extends React.Component { constructor(props) { super(props); this.state = { - open: false, value: 'a', }; this.tableData = myrReference(); } - handleToggle = () => this.setState({ open: !this.state.open, value: 'a' }); - handleChange = (event, value) => { this.setState({ value }); }; @@ -39,6 +36,21 @@ export default class Reference extends React.Component { this.setState({ value: 'a' }); }; + exampleHelper = (example) => { + if (example) { + let link = '/reference/' + example; + return ( + + link + + ); + } else { + return null; + } + } + TableEx = (category) => { return ( @@ -47,6 +59,7 @@ export default class Reference extends React.Component { Name Description + Example @@ -54,6 +67,7 @@ export default class Reference extends React.Component { {row.name} {row.description} + {this.exampleHelper(row.example)} ))} @@ -77,7 +91,7 @@ export default class Reference extends React.Component { id="ref-btn" className="header-btn d-none d-md-block" aria-haspopup="true" - onClick={() => this.setState({ open: true })} + onClick={this.props.handleReferenceToggle} style={style}> help @@ -86,8 +100,8 @@ export default class Reference extends React.Component { anchor="right" id="reference-drawer" variant="persistent" - className={!this.state.open ? 'd-none' : ""} - open={this.state.open}> + className={!this.props.referenceOpen ? 'd-none' : ""} + open={this.props.referenceOpen}> open_in_new} label="OPEN IN NEW TAB" value='n' onClick={this.handleOpen} /> close} label="CLOSE" value='x' - onClick={this.handleToggle} /> + onClick={() => { + this.props.handleReferenceToggle(); + this.setState({ value: 'a' }); + }}/> {
diff --git a/src/components/ReferencePage.js b/src/components/ReferencePage.js index 30587c42..7af2a1cd 100644 --- a/src/components/ReferencePage.js +++ b/src/components/ReferencePage.js @@ -5,6 +5,7 @@ import { Tabs, Tab, Icon, + IconButton, Table, TableBody, TableHead, @@ -30,6 +31,21 @@ export default class Reference extends React.Component { this.setState({ value }); }; + exampleHelper = (example) => { + if (example) { + let link = '/reference/' + example; + return ( + + link + + ); + } else { + return null; + } + } + TableEx = (category) => { return ( @@ -38,6 +54,7 @@ export default class Reference extends React.Component { Name Description + Example @@ -45,6 +62,7 @@ export default class Reference extends React.Component { {row.name} {row.description} + {this.exampleHelper(row.example)} ))} @@ -55,52 +73,52 @@ export default class Reference extends React.Component { render() { return (
- - category} - label="GEOMETRY" - value='a' /> - bubble_chart} - label="TRANSFORMATIONS" - value='b' /> - zoom_out_map} //swap_horiz control_camera category - label="ANIMATIONS" - value='c' /> - widgets} - label="GROUPS" - value='d' /> - - {
-

Key: array - bool - number - string - group

+ + category} + label="GEOMETRY" + value='a' /> + bubble_chart} + label="TRANSFORMATIONS" + value='b' /> + zoom_out_map} //swap_horiz control_camera category + label="ANIMATIONS" + value='c' /> + widgets} + label="GROUPS" + value='d' /> + + {
+

Key: array + bool + number + string + group

+
} + {this.state.value === 'a' && +
+ {this.TableEx("geometry")} +
} + {this.state.value === 'b' && +
+ {this.TableEx("transformations")} +
} + {this.state.value === 'c' && +
+ {this.TableEx("animations")} +
} + {this.state.value === 'd' && +
+ {this.TableEx("groups")}
} - {this.state.value === 'a' && -
- {this.TableEx("geometry")} -
} - {this.state.value === 'b' && -
- {this.TableEx("transformations")} -
} - {this.state.value === 'c' && -
- {this.TableEx("animations")} -
} - {this.state.value === 'd' && -
- {this.TableEx("groups")} -
} -
+
); } } diff --git a/src/components/SceneConfigMenu.js b/src/components/SceneConfigMenu.js index f14e3e25..3afa0ce4 100644 --- a/src/components/SceneConfigMenu.js +++ b/src/components/SceneConfigMenu.js @@ -6,7 +6,8 @@ import { IconButton, Icon, Modal, - TextField + TextField, + Tooltip } from "@material-ui/core"; import QRCode from "qrcode.react"; @@ -223,11 +224,15 @@ class ConfigModal extends Component { // Toggles whether the editor is showing viewToggle = () => { let style = this.props.scene.settings.viewOnly ? btnStyle.off : btnStyle.on; + style = { ...btnStyle.base, ...style }; return ( this.props.sceneActions.changeView()} > + onClick={() => { + return this.props.sceneActions.changeView()} + } + > { !this.props.scene.settings.viewOnly ? toggle_on @@ -398,6 +403,7 @@ class ConfigModal extends Component {
{!isDisabled ?
+ settings + diff --git a/src/components/customCompleter.js b/src/components/customCompleter.js index 3a514243..569db5cd 100644 --- a/src/components/customCompleter.js +++ b/src/components/customCompleter.js @@ -48,7 +48,6 @@ export const customCompleter = { "torus()", "torusknot()", "triangle()", - "circle()", "setColor()", "setPosition()", "setXPos()", @@ -83,7 +82,25 @@ export const customCompleter = { "setLoop()", "setDuration()", "setMagnitude()", - "colorShift()" + "colorShift()", + "makeDroppable()", + "makePushable()", + "getColor()", + "getXPos()", + "getYPos()", + "getZPos()", + "getXScale()", + "getYScale()", + "getZScale()", + "getXRotation()", + "getYRotation()", + "getZRotation()", + "getRadius()", + "getPhiLength()", + "getLoop()", + "getDuration()", + "getMagnitude()", + ]; let Colors = [ diff --git a/src/components/layouts/Guided.js b/src/components/layouts/Guided.js index 3b3612c2..3e33c9c6 100644 --- a/src/components/layouts/Guided.js +++ b/src/components/layouts/Guided.js @@ -7,7 +7,7 @@ import View from '../View'; import * as layoutTypes from '../../constants/LayoutTypes.js'; -export const Guided = ({ editor, user, scene, lesson, editorActions, authActions, projectActions, projects, courseActions, courses, course, match, sceneActions }) => ( +export const Guided = ({ editor, user, scene, editorActions, authActions, projectActions, projects, courseActions, courses, course, match, sceneActions }) => (
+ />
diff --git a/src/components/layouts/Ide.js b/src/components/layouts/Ide.js index 279b2f7e..ef010aad 100644 --- a/src/components/layouts/Ide.js +++ b/src/components/layouts/Ide.js @@ -9,6 +9,7 @@ import * as layoutTypes from '../../constants/LayoutTypes.js'; export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActions, projectActions, courseActions, projects, courses, match, classroomActions, classrooms }) => (
- +
@@ -48,4 +49,4 @@ export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActi
); -export default Ide; \ No newline at end of file +export default Ide; diff --git a/src/components/layouts/ReferenceExample.js b/src/components/layouts/ReferenceExample.js new file mode 100644 index 00000000..912c79fe --- /dev/null +++ b/src/components/layouts/ReferenceExample.js @@ -0,0 +1,49 @@ +import React from 'react'; +import Editor from '../Editor'; +import Header from '../Header'; +import Footer from '../Footer'; +import RefExInfo from '../RefExInfo'; +import View from '../View'; + +import * as layoutTypes from '../../constants/LayoutTypes.js'; + +import '../../css/ReferencePage.css'; + +export const ReferenceExample = ({ editor, user, scene, referenceExample, referenceExampleActions, editorActions, authActions, projectActions, projects, courseActions, courses, match, sceneActions, classroomActions, classrooms }) => ( +
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+); + +export default ReferenceExample; \ No newline at end of file diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index 170771f9..b77cd12d 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -40,4 +40,6 @@ export const SET_NAME_DESC = 'SET_NAME_DESC'; export const SYNC_CLASSES = 'SYNC_CLASSES'; export const SYNC_CLASS = 'SYNC_CLASS'; -export const DELETE_CLASS = 'DELETE_CLASS'; \ No newline at end of file +export const DELETE_CLASS = 'DELETE_CLASS'; + +export const LOAD_REF_EX = 'LOAD_REF_EX'; \ No newline at end of file diff --git a/src/constants/LayoutTypes.js b/src/constants/LayoutTypes.js index 9fa9ab51..341f9b97 100644 --- a/src/constants/LayoutTypes.js +++ b/src/constants/LayoutTypes.js @@ -1,4 +1,5 @@ export const REFERENCE = 'REFERENCE'; export const IDE = 'IDE'; export const CLASSROOM = 'CLASSROOM'; -export const GUIDED = 'GUIDED'; \ No newline at end of file +export const GUIDED = 'GUIDED'; +export const REF_EXAMPLE = 'REF_EXAMPLE'; \ No newline at end of file diff --git a/src/containers/ReferenceExample.js b/src/containers/ReferenceExample.js new file mode 100644 index 00000000..b4b0afb6 --- /dev/null +++ b/src/containers/ReferenceExample.js @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import ReferenceExample from '../components/layouts/ReferenceExample.js'; +import * as Actions from '../actions'; + +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; + +// This makes sure we are getting what we think we should +ReferenceExample.propTypes = { + editor: PropTypes.object.isRequired, + user: PropTypes.object, + scene: PropTypes.object.isRequired, +}; + +// This makes the values accessible as props +const mapStateToProps = state => ({ + editor: state.editor, + user: state.user.user, + scene: state.scene, + projects: state.project, + courses: state.courses, + classrooms: state.classrooms, + referenceExample: state.referenceExample +}); + +// This maps dispatch actions to props +const mapDispatchToProps = dispatch => ({ + editorActions: bindActionCreators(Actions.EditorActions, dispatch), + authActions: bindActionCreators(Actions.AuthActions, dispatch), + sceneActions: bindActionCreators(Actions.SceneActions, dispatch), + projectActions: bindActionCreators(Actions.ProjectActions, dispatch), + courseActions: bindActionCreators(Actions.CourseActions, dispatch), + classroomActions: bindActionCreators(Actions.ClassroomActions, dispatch), + referenceExampleActions: bindActionCreators(Actions.ReferenceExampleActions, dispatch) +}); + +// This does the binding to the redux store +export default connect( + mapStateToProps, + mapDispatchToProps +)(ReferenceExample); diff --git a/src/css/App.css b/src/css/App.css index 8e817d18..f00ebf92 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -259,6 +259,11 @@ div.side-drawer>div { justify-content: left !important; } +.ref-ex-btn { + margin-bottom: 10px !important; + justify-content: left !important; +} + .MuiTabs-root-76 { overflow: unset !important; } @@ -311,6 +316,9 @@ span.user-name { div#reference-drawer>div { width: 67%; } +.refExample { + margin-right: 10px; +} .geometry { transform: scale(1.2); diff --git a/src/css/ReferencePage.css b/src/css/ReferencePage.css index f29863cc..06171ef3 100644 --- a/src/css/ReferencePage.css +++ b/src/css/ReferencePage.css @@ -2,4 +2,45 @@ background: #fff; min-height: 94vh; width: 100% +} + +#ref-ex { + padding: 10px !important; + background: #fff !important; +} + +.ref-ex-edit div#ace-editor { + height: 69.5vh !important; +} + +#ref-ex p { + height: 12vh; + margin: 0; + overflow: auto; +} + +#ref-ex fieldset { + height: 16vh; + margin: 0; +} + +.ref-ex-btn .material-icons { + margin: 0 .3em; +} + +a.ref-ex-btn:hover { + color: #fff; +} + +.ref-ex-btn { + margin-top: 1em !important; + margin-bottom: 10px !important; + justify-content: center !important; + padding-left: 1em !important; + width: 100% !important; + text-align: center !important; +} + +#suggested-course { + padding-right: 2em; } \ No newline at end of file diff --git a/src/myr/Myr.js b/src/myr/Myr.js index c17cb9fe..9202c5ee 100644 --- a/src/myr/Myr.js +++ b/src/myr/Myr.js @@ -96,6 +96,9 @@ class Myr { } } + + /********************* TRANSFORMATIONS *********************/ + /** * @summary - Reset the cursor to the default */ @@ -334,6 +337,9 @@ class Myr { return outerElId; } + + /********************* GEOMETRY *********************/ + // Render an Aframe Box Primitive with current Myr settings box = (params) => { let base = { @@ -597,6 +603,9 @@ class Myr { // Cube is an alias for Box cube = this.box + + /********************* ANIMATIONS *********************/ + // Animate the Aframe element which is passed as arg animate = (outerElId, magnitude = null, loop = null, duration = null) => { magnitude = magnitude != null ? magnitude : this.magnitude.spin; @@ -866,6 +875,56 @@ class Myr { return outerElId; } +/********************* GETTERS *********************/ + +getColor = () => { + return this.color; +}; +getXPos = () => { + return this.position.x; +}; +getYPos = () => { + return this.position.y; +}; +getZPos = () => { + return this.position.z; +}; +getXScale = () => { + return this.scale.x; +}; +getYScale = () => { + return this.scale.y; +}; +getZScale = () => { + return this.scale.z; +}; +getXRotation = () => { + return this.rotation.x; +}; +getYRotation = () => { + return this.rotation.y; +}; +getZRotation = () => { + return this.rotation.z; +}; +getRadius = () => { + return this.radius; +}; +getPhiLength = () => { + return this.phiLength; +}; +getLoop = () => { + return this.loop; +}; +getDuration = () => { + return this.duration; +}; +getMagnitude = () => { + return this.magnitude.general; +}; + + + // MODELS addCModel = () => { let asset = { diff --git a/src/myr/reference.js b/src/myr/reference.js index 82cd55d5..6dffc034 100644 --- a/src/myr/reference.js +++ b/src/myr/reference.js @@ -1,78 +1,96 @@ import React from 'react'; + let geometry = [ { - name: 'box()', - description: Renders a box using current internal cursor properties. Returns an element id. - }, - { - name: 'circle()', - description: Renders a circle using current internal cursor properties. Returns an element id. + name: box(), + description: Renders a box using current internal cursor properties. Returns an element id., + example: 'box' }, { - name: 'cone()', - description: Renders a cone using current internal cursor properties. Returns an element id. + name: circle(), + description: Renders a circle using current internal cursor properties. Returns an element id., + example: 'circle' }, { - name: 'cylinder()', - description: Renders a cylinder using current internal cursor properties. Returns an element id. + name: cone(), + description: Renders a cone using current internal cursor properties. Returns an element id., + example: 'cone' }, { - name: 'dodecahedron()', - description: Renders a dodecahedron using current internal cursor properties. Returns an element id. + name: cylinder(), + description: Renders a cylinder using current internal cursor properties. Returns an element id., + example: 'cylinder' }, { - name: 'icosahedron()', - description: Renders a icosahedron using current internal cursor properties. Returns an element id. + name: dodecahedron(), + description: Renders a dodecahedron using current internal cursor properties. Returns an element id., + example: 'dodecahedron' }, { - name: 'octahedron()', - description: Renders a octahedron using current internal cursor properties. Returns an element id. - }, - //should this be documented? - { - name: 'line()', - description: Renders a line using current internal cursor properties. Returns an element id. + name: icosahedron(), + description: Renders a icosahedron using current internal cursor properties. Returns an element id., + example: 'icosahedron' }, { - name: 'plane()', - description: Renders a plane using current internal cursor properties. Returns an element id. + name: octahedron(), + description: Renders a octahedron using current internal cursor properties. Returns an element id., + example: 'octahedron' }, + // This is out temporarily until better fleshed out + //{ + // name: 'line()', + // description: Renders a line using current internal cursor properties. Returns an element id. + //}, { - name: 'prism()', - description: Renders a prism using current internal cursor properties. Returns an element id. + name: plane(), + description: Renders a plane using current internal cursor properties. Returns an element id., + example: 'plane' }, { - name: 'ring()', - description: Renders a ring using current internal cursor properties. Returns an element id. + name: prism(), + description: Renders a prism using current internal cursor properties. Returns an element id., + example: 'prism' }, { - name: 'sphere()', - description: Renders a sphere using current internal cursor properties. Returns an element id. + name: ring(), + description: Renders a ring using current internal cursor properties. Returns an element id., + example: 'ring' }, { - name: 'tetrahedron()', - description: Renders a tetrahedron using current internal cursor properties. Returns an element id. + name: sphere(), + description: Renders a sphere using current internal cursor properties. Returns an element id., + example: 'sphere' }, { - name: 'text()', - description: Renders text using current internal cursor properties. Returns an element id. + name: tetrahedron(), + description: Renders a tetrahedron using current internal cursor properties. Returns an element id., + example: 'tetrahedron' }, { - name: 'torus()', - description: Renders a torus using current internal cursor properties. Returns an element id. + name: text(), + description: Renders text using current internal cursor properties. Returns an element id., + example: 'text' }, { - name: 'torusknot()', - description: Renders a torusknot using current internal cursor properties. Returns an element id. + name: torus(), + description: Renders a torus using current internal cursor properties. Returns an element id., + example: 'torus' }, { - name: 'triangle()', - description: Renders a triangle using current internal cursor properties. Returns an element id. + name: torusknot(), + description: Renders a torusknot using current internal cursor properties. Returns an element id., + example: 'torusknot' }, { - name: 'tube()', - description: Renders a tube using current internal cursor properties. Returns an element id. + name: triangle(), + description: Renders a triangle using current internal cursor properties. Returns an element id., + example: 'triangle' }, + //{ + // name: tube(), + // description: Renders a tube using current internal cursor properties. Returns an element id., + // example: 'tube' + //}, //should this be documented? // { // name: 'light()', @@ -84,156 +102,196 @@ let geometry = [ let transformations = [ { name: resetCursor(), - description: Resets the properties of the cursor to their default settings. + description: Resets the properties of the cursor to their default settings., + example: 'resetCursor' }, { name: setColor(color), - description: Changes the color of the cursor using these color codes, or HEX values. Default: 'red' + description: Changes the color of the cursor using these color codes, or HEX values. Default: 'red', + example: 'setColor' + }, + { + name: getRandomColor(), + description: Changes the color of the cursor to a random color, and returns the color. Default: 'red', + example: 'getRandomColor' }, { name: setPosition(x,y,z), - description: Sets the position of the cursor to the given coordinates. Default: (0,0,0) + description: Sets the position of the cursor to the given coordinates. Default: (0,0,0), + example: 'setPosition' }, { name: setXPos(x), - description: Changes the position of the cursor along the X axis to the given value. + description: Changes the position of the cursor along the X axis to the given value., + example: 'setXPos' }, { name: setYPos(y), - description: Changes the position of the cursor along the Y axis to the given value. + description: Changes the position of the cursor along the Y axis to the given value., + example: 'setYPos' }, { name: setZPos(z), - description: Changes the position of the cursor along the Z axis to the given value. + description: Changes the position of the cursor along the Z axis to the given value., + example: 'setZPos' }, { name: setScale(x,y,z), - description: Sets the scale of the cursor to the given ratios. Default: (1,1,1) + description: Sets the scale of the cursor to the given ratios. Default: (1,1,1), + example: 'setScale' }, { name: setXScale(x), - description: Changes the scale of the cursor in the X dimension to the given ratio. + description: Changes the scale of the cursor in the X dimension to the given ratio., + example: 'setXScale' }, { name: setYScale(y), - description: Changes the scale of the cursor in the Y dimension to the given ratio. + description: Changes the scale of the cursor in the Y dimension to the given ratio., + example: 'setYScale' }, { name: setZScale(z), - description: Changes the scale of the cursor in the Z dimension to the given ratio. + description: Changes the scale of the cursor in the Z dimension to the given ratio., + example: 'setZScale' }, { name: setRotation(x, y, z), - description: Changes the rotation of the cursor to the given angles in degrees. Default: (0,0,0) + description: Changes the rotation of the cursor to the given angles in degrees. Default: (0,0,0), + example: 'setRotation' }, { name: pitchX(x), - description: Changes the pitch (rotation about the x axis) to the given angle in degrees. + description: Changes the pitch (rotation about the x axis) to the given angle in degrees., + example: 'pitchX' }, { name: yawY(y), - description: Changes the yaw (rotation about the y axis) to the given angle in degrees. + description: Changes the yaw (rotation about the y axis) to the given angle in degrees., + example: 'yawY' }, { name: rollZ(z), - description: Changes the roll (rotation about the z axis) to the given angle in degrees. + description: Changes the roll (rotation about the z axis) to the given angle in degrees., + example: 'rollZ' }, { name: setRadius(radius), - description: Sets the radius of the cursor to the given radius. Default: 1 + description: Sets the radius of the cursor to the given radius. Default: 1, + example: 'setRadius' }, { name: setPhiLength(phiLength), - description: Sets the phi length of the cursor to the given phiLength in degrees. This changes the fraction of the circumference shown on certain shapes to be phiLength/360. Default: 360 + description: Sets the phi length of the cursor to the given phiLength in degrees. This changes the fraction of the circumference shown on certain shapes to be phiLength/360. Default: 360, + example: 'setPhiLength' }, { name: makeDroppable(element, mass), - description: Allows the element to be affected by physics, and sets the mass of the object to mass. - }, - { - name: makeUnDroppable(element), - description: Prevents the element from being affected by physics. + description: Allows the element to be affected by physics, and sets the mass of the object to mass., + example: 'makeDroppable' }, + //{ + // name: makeUnDroppable(element), + // description: Prevents the element from being affected by physics. + //}, { name: makePushable(element, mass), - description: Allows the element to be pushed using the cursor and with the given mass(default = 2). Also makes the object droppable (see above). + description: Allows the element to be pushed using the cursor and with the given mass(default = 2). Also makes the object droppable (see above)., + example: 'makePushable' }, //This function doesn't quite make sense. - { - name: makeUnPushable(element), - description: Prevents the element from being pushed by the cursor, or being affected by physics. - }, + //{ + // name: makeUnPushable(element), + // description: Prevents the element from being pushed by the cursor, but allows the element to be affected by physics. + //}, //Not quite sure about the inner workings of this one yet ]; let animations = [ { name: setLoop(loop), - description: Updates the loop attribute in the cursor. Default: true + description: Updates the loop attribute in the cursor. Default: true, + example: 'setLoop' }, { name: setDuration(duration), - description: Updates the duration attribute in the cursor in milliseconds. Default: 1000 + description: Updates the duration attribute in the cursor in milliseconds. Default: 1000, + example: 'setDuration' }, { name: setMagnitude(magnitude), - description: Updates the magnitude attribute in the cursor, in degrees and general units. Default: 1 + description: Updates the magnitude attribute in the cursor, in degrees and general units. Default: 1, + example: 'setMagnitude' }, { name: spin(element), - description: Spins the element around the y axis [magnitude] degrees. + description: Spins the element around the y axis [magnitude] degrees., + example: 'spin' }, { name: yoyo(element), - description: Bounces the element [magnitude] units in a positive direction on the y axis + description: Bounces the element [magnitude] units in a positive direction on the y axis, + example: 'yoyo' }, { name: sideToSide(element), - description: Shifts the element [magnitude] units in a negative direction on the x axis and back to the original coordinates. + description: Shifts the element [magnitude] units in a negative direction on the x axis and back to the original coordinates., + example: 'sideToSide' }, { name: goUp(element), - description: Translates the element [magnitude] units in a positive direction on the y axis. + description: Translates the element [magnitude] units in a positive direction on the y axis., + example: 'goUp' }, { name: goDown(element), - description: Translates the element [magnitude] units in a negative direction on the y axis. + description: Translates the element [magnitude] units in a negative direction on the y axis., + example: 'goDown' }, { name: goRight(element), - description: Translates the element [magnitude] units in a positive direction on the x axis. + description: Translates the element [magnitude] units in a positive direction on the x axis., + example: 'goRight' }, { name: goLeft(element), - description: Translates the element [magnitude] units in a negative direction on the x axis. + description: Translates the element [magnitude] units in a negative direction on the x axis., + example: 'goLeft' }, { name: goTowards(element), - description: Translates the element [magnitude] units in a positive direction on the z axis. + description: Translates the element [magnitude] units in a positive direction on the z axis., + example: 'goTowards' }, { name: goAway(element), - description: Translates the element [magnitude] units in a negative direction on the z axis. + description: Translates the element [magnitude] units in a negative direction on the z axis., + example: 'goAway' }, { name: grow(element), - description: Scales the element by a multiplier, the cursor's magnitude. + description: Scales the element by a multiplier, the cursor's magnitude., + example: 'grow' }, { name: shrink(element), - description: Scales the element by a 1/[magnitude] multiplier. + description: Scales the element by a 1/[magnitude] multiplier., + example: 'shrink' }, { name: fadeOut(element), - description: Modifies transparency from 1 to the cursor's magnitude, [0,1). + description: Modifies transparency from 1 to the cursor's magnitude, [0,1)., + example: 'fadeOut' }, { name: fadeIn(element), - description: Modifies transparency from 0 to the cursor's magnitude, (0,1]. + description: Modifies transparency from 0 to the cursor's magnitude, (0,1]., + example: 'fadeIn' }, { name: colorShift(element, color), - description: Shifts from the the element's current color to the given color. + description: Shifts from the the element's current color to the given color., + example: 'colorShift' }, // { @@ -293,27 +351,33 @@ let animations = [ let groups = [ { name: let myGroup = group();, - description: Creates a new empty group and stores it in the variable myGroup. + description: Creates a new empty group and stores it in the variable myGroup., + example: 'group' }, { name: myGroup.add(element ID), - description: Adds the element indicated by element ID to the group myGroup. + description: Adds the element indicated by element ID to the group myGroup., + example: 'g.add' }, { name: myGroup.remove(element ID), - description: Removes the element indicated by element ID from the group myGroup. + description: Removes the element indicated by element ID from the group myGroup., + example: 'g.remove' }, { name: myGroup.setPosition(x, y, z), - description: Sets the position of the group myGroup to the given coordinates. + description: Sets the position of the group myGroup to the given coordinates., + example: 'g.setPosition' }, { name: myGroup.setScale(x, y, z), - description: Sets the scale of the group myGroup to the given dimensions. + description: Sets the scale of the group myGroup to the given dimensions., + example: 'g.setScale' }, { name: myGroup.setRotation(x, y, z), - description: Changes the rotation of the group myGroup to the given angles (in degrees). + description: Changes the rotation of the group myGroup to the given angles (in degrees)., + example: 'g.setRotation' }, ]; diff --git a/src/reducers/index.js b/src/reducers/index.js index afb00ea8..3bf41f31 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,4 +1,4 @@ -import { createStore, combineReducers, applyMiddleware } from 'redux'; +import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import editor from './editor'; import project from './project'; @@ -6,6 +6,7 @@ import scene from './scene'; import user from './user'; import courses from './course'; import classrooms from './classes'; +import referenceExample from './referenceExample'; import thunk from 'redux-thunk'; @@ -15,12 +16,15 @@ const reducer = combineReducers({ scene, project, courses, - classrooms + classrooms, + referenceExample }); +const composeEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, traceLimit: 25 })) || compose; + const store = createStore( reducer, - applyMiddleware(thunk) + composeEnhancers(applyMiddleware(thunk)) ); export default store; diff --git a/src/reducers/referenceExample.js b/src/reducers/referenceExample.js new file mode 100644 index 00000000..1070b483 --- /dev/null +++ b/src/reducers/referenceExample.js @@ -0,0 +1,23 @@ +import * as types from '../constants/ActionTypes'; + +const initial_state = { + functionName: "", + functionParams: [], + type: "Unknown", + info: "Please wait.", + suggestedCourse: null, + suggestedCourseName: null, + code: "//Loading" +}; + +export default function referenceExample(state = initial_state, action) { + switch (action.type) { + case types.LOAD_REF_EX: + return { + ...state, + ...action.payload + }; + default: + return state; + } +} diff --git a/src/routes.js b/src/routes.js index 52b9e3b1..18bd74fb 100644 --- a/src/routes.js +++ b/src/routes.js @@ -4,6 +4,7 @@ import Ide from './containers/Ide'; import Guided from './containers/Guided'; import Classroom from './containers/Classroom'; import Reference from './containers/Reference'; +import ReferenceExample from './containers/ReferenceExample'; export default () => { return ( @@ -13,6 +14,7 @@ export default () => { +