Merge pull request #180 from engaging-computing/dev

Reference comes from the right, dependency update, color shift animation, animations use the cursor, scene config doesn't lose work, and tour can highlight editor

LICENSE

@@ -1,6 +1,12 @@
 MIT License
 
-Copyright (c) 2018 Chris Berns
+Copyright (c) 2019 - Engaging Computing Group, University of Massachusetts, Lowell, MA
+
+University of Massachusetts Lowell
+Engaging Computing Group, Department of Computer Science
+DAN-408
+1 University Ave.
+Lowell, MA 01854
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/actions/sceneActions.js

@@ -75,7 +75,6 @@ export function setDesc(payload) {
 }
 
 export function setNameDesc(payload) {
-  console.log(payload)
   return { type: types.SET_NAME_DESC, payload };
 }
 

src/components/Header.js

@@ -651,14 +651,17 @@ class Header extends Component {
               <Icon className="material-icons">perm_media</Icon>
             </IconButton>
           </Tooltip>
-          <MyrTour />
+          <MyrTour 
+            viewOnly={this.props.scene.settings.viewOnly}
+            changeView={this.props.sceneActions.changeView}/>
         </div>
         <div className="col-3 d-flex justify-content-end">
           {/* <Classroom classrooms={this.props.classrooms} classroomActions={this.props.classroomActions} user={this.props.user} /> */}
           <Reference layoutType={this.props.layoutType} />
           <SceneConfigMenu
             scene={this.props.scene}
             sceneActions={this.props.sceneActions}
+            handleRender={this.handleRender}
             handleSave={this.handleSave}
             handleSaveClose={this.handleSaveClose}
             layoutType={this.props.layoutType} />

src/components/MyrTour.js

@@ -3,15 +3,19 @@ import Tour from 'reactour';
 import { Button } from '@material-ui/core';
 
 class MyrTour extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
-      isTourOpen: false
+      isTourOpen: false,
+      viewOnlyOnOpen: this.props.viewOnly
     };
   }
 
   closeTour = () => {
     this.setState({ isTourOpen: false });
+    if (this.state.viewOnlyOnOpen) {
+      this.props.changeView();
+    }
   }
 
   render() {
@@ -20,7 +24,13 @@ class MyrTour extends Component {
         <Tour
           steps={steps}
           maskClassName="mask"
-          isOpen={this.state.isTourOpen}
+          isOpen={this.state.isTourOpen}  
+          onAfterOpen={()=>{
+            this.setState({ viewOnlyOnOpen: this.props.viewOnly });
+            if(this.props.viewOnly) {
+              this.props.changeView();
+            }
+          }}
           onRequestClose={this.closeTour} />
         <Button
           style={{ color: "#fff", fontSize: "66%" }}
@@ -38,7 +48,9 @@ const steps = [
   {
     selector: '#ace-editor',
     content: 'This is the editor. You can create 3D scenes using JavaScript ' +
-      'and a special set of instructions or functions to MYR.',
+      'and a special set of instructions or functions to MYR.\n The editor can be ' + 
+      'toggled on and off by opening the settings menu in the top right and ' + 
+      'clicking the "View Editor" switch.'
   },
   {
     selector: '#play-btn',

src/components/Reference.js

@@ -83,7 +83,7 @@ export default class Reference extends React.Component {
           </IconButton>
         </Tooltip>
         <Drawer
-          anchor="left"
+          anchor="right"
           id="reference-drawer"
           variant="persistent"
           className={!this.state.open ? 'd-none' : ""}

src/components/SceneConfigMenu.js

@@ -263,7 +263,10 @@ class ConfigModal extends Component {
     return (
       <ButtonBase
         style={style}
-        onClick={() => this.props.sceneActions.toggleCoordSky()} >
+        onClick={() => {
+          this.props.handleRender();
+          this.props.sceneActions.toggleCoordSky();
+        }} >
         {
           this.props.scene.settings.showCoordHelper
             ? <Icon className="material-icons">toggle_on</Icon>
@@ -281,7 +284,10 @@ class ConfigModal extends Component {
     return (
       <ButtonBase
         style={style}
-        onClick={() => this.props.sceneActions.toggleFloor()} >
+        onClick={() => {
+          this.props.handleRender();
+          this.props.sceneActions.toggleFloor();
+        }} >
         {
           this.props.scene.settings.showFloor
             ? <Icon className="material-icons">toggle_on</Icon>
@@ -360,7 +366,10 @@ class ConfigModal extends Component {
     return (
       <ButtonBase
         style={btnStyle.base}
-        onClick={this.handleSkyColorClick}>
+        onClick={() => {
+          this.props.handleRender();
+          this.handleSkyColorClick();
+        }}>
         <Icon className="material-icons">color_lens</Icon>
         Edit Sky Color
       </ButtonBase>
@@ -371,7 +380,10 @@ class ConfigModal extends Component {
     return (
       <ButtonBase
         style={btnStyle.base}
-        onClick={this.handleFloorColorClick}>
+        onClick={() => {
+          this.props.handleRender();
+          this.handleFloorColorClick();
+        }}>
         <Icon className="material-icons">color_lens</Icon>
         Edit Floor Color
       </ButtonBase>

src/components/customCompleter.js

@@ -79,7 +79,11 @@ export const customCompleter = {
             "fadeIn()",
             "group()",
             "getRandomColor()",
-            "setPhiLength()"
+            "setPhiLength()",
+            "setLoop()",
+            "setDuration()",
+            "setMagnitude()",
+            "colorShift()"
         ];
 
         let Colors = [

src/css/App.css

@@ -309,7 +309,7 @@ span.user-name {
 }
 
 div#reference-drawer>div {
-    width: 80%;
+    width: 67%;
 }
 
 .geometry {