From ed8443350110865d21fe6d74b875bdae53773677 Mon Sep 17 00:00:00 2001
From: Jason Kiesling <jason@learnmyr.org>
Date: Mon, 1 Jul 2019 08:48:13 -0400
Subject: [PATCH] 1.4.0 | getRandomColor() takes an array, bug fixes (#309)

- Update viewer camera to not give errors in console
- getRandomColor() can take an array and choose a random color from the array.
- Reference page doesn't have uncaught error from no editor.
- Reference page tab titles hide on small screens.
- Nested groups are supported.
---
 README.md                                  | 17 +++++---------
 package.json                               |  4 ++--
 src/components/reference/ReferencePage.js  | 25 +++++++++++++++++----
 src/components/structural/View.js          | 16 ++++++-------
 src/components/structural/header/Header.js | 26 ++++++++++++----------
 src/myr/Group.js                           |  7 ++++++
 src/myr/Myr.js                             | 22 +++++++++++-------
 src/myr/reference.js                       |  4 ++--
 src/tests/Myr.test.js                      |  7 ++++++
 9 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/README.md b/README.md
index 8cba8ea6..77da40e1 100644
--- a/README.md
+++ b/README.md
@@ -9,17 +9,12 @@ The Engaging Computing Group develops new technologies to enable learners—yout
 ## Status
 [![CircleCI](https://circleci.com/gh/engaging-computing/MYR.svg?style=shield)](https://circleci.com/gh/engaging-computing/MYR)
 
-## Change Log - 1.2.6 -> 1.3.0
-- Implemented relative cursor modification functions (increasePosition, increaseXPos, increaseYPos, increaseZPos).
-- Implemented a welcome screen to give new users information during their first visit.
-- Project view has been updated to be a tabbed modal.
-- Projects with the same name are now sorted by timestamp.
-- Reference drawer new tab and close buttons moved to corner.
-- Reference drawer has a title added.
-- There are no labels on the reference on a small screen to make it easier to read.
-- The MYR brand will direct to create a new scene.
-- "Too many errors" won't appear in the editor for long scenes.
-- Settings modal is a tabbed modal.
+## Change Log - 1.3.0 -> 1.4.0
+- Update viewer camera to not give errors in console
+- `getRandomColor()` can take an array and choose a random color from the array.
+- Reference page doesn't have uncaught error from no editor.
+- Reference page tab titles hide on small screens.
+- Nested groups are supported.
 
 ## Acknowledgments
 MYR uses [Aframe](https://aframe.io), a fantastic open source project, to render objects and effects in the three dimensional space.  
diff --git a/package.json b/package.json
index ec2fb21e..ec4ec64c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "myr",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "private": false,
     "engines": {
         "node": "10.13.0"
@@ -61,4 +61,4 @@
         "not ie <= 11",
         "not op_mini all"
     ]
-}
\ No newline at end of file
+}
diff --git a/src/components/reference/ReferencePage.js b/src/components/reference/ReferencePage.js
index daec5cd7..ec6db858 100644
--- a/src/components/reference/ReferencePage.js
+++ b/src/components/reference/ReferencePage.js
@@ -11,6 +11,7 @@ import {
     TableHead,
     TableRow,
     TableCell,
+    Hidden,
 } from "@material-ui/core";
 
 import "../../css/ReferencePage.css";
@@ -80,19 +81,35 @@ export default class Reference extends React.Component {
                     onChange={this.handleChange} >
                     <Tab
                         icon={<Icon className="material-icons geometry">category</Icon>}
-                        label="GEOMETRY"
+                        label={
+                            <Hidden xsDown>
+                                <div>GEOMETRY</div>
+                            </Hidden>
+                        }
                         value='a' />
                     <Tab
                         icon={<Icon className="material-icons color-change">bubble_chart</Icon>}
-                        label="TRANSFORMATIONS"
+                        label={
+                            <Hidden xsDown>
+                                <div>TRANSFORMATIONS</div>
+                            </Hidden>
+                        }
                         value='b' />
                     <Tab
                         icon={<Icon className="material-icons animation-ref">zoom_out_map</Icon>} //swap_horiz control_camera category
-                        label="ANIMATIONS"
+                        label={
+                            <Hidden xsDown>
+                                <div>ANIMATIONS</div>
+                            </Hidden>
+                        }
                         value='c' />
                     <Tab
                         icon={<Icon className="material-icons geometry">widgets</Icon>}
-                        label="GROUPS"
+                        label={
+                            <Hidden xsDown>
+                                <div>GROUPS</div>
+                            </Hidden>
+                        }
                         value='d' />
                 </Tabs>
                 {<div style={{ margin: 5 }}>
diff --git a/src/components/structural/View.js b/src/components/structural/View.js
index c4084896..3d1f040f 100644
--- a/src/components/structural/View.js
+++ b/src/components/structural/View.js
@@ -126,15 +126,15 @@ class View extends Component {
     checkpointCam = () => {
         return (
             <a-entity id="rig" movement-controls="controls: checkpoint" checkpoint-controls="mode: animate">
-                <a-entity camera
+                <a-camera
                     position={this.props.sceneConfig.settings.cameraPosition}
                     look-controls="pointerLockEnabled: true"
                 >
-                    <a-entity cursor
+                    <a-cursor
                         position="0 0 -1"
                         geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
                         material="color: #CCC; shader: flat;" />
-                </a-entity>
+                </a-camera>
             </a-entity>
         );
     }
@@ -143,15 +143,15 @@ class View extends Component {
         return (
             <a-entity id="rig"
                 debug={true}
-                movement-controls={this.props.sceneConfig.settings.canFly ? "fly:true" : "fly:false"}
-                position={this.props.sceneConfig.settings.cameraPosition} >
-                <a-entity camera
+                movement-controls={this.props.sceneConfig.settings.canFly ? "fly:true" : "fly:false"} >
+                <a-camera
+                    position={this.props.sceneConfig.settings.cameraPosition}
                     look-controls="pointerLockEnabled: true">
-                    <a-entity cursor
+                    <a-cursor
                         position="0 0 -1"
                         geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
                         material="color: #CCC; shader: flat;" />
-                </a-entity>
+                </a-camera>
             </a-entity>
         );
     }
diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js
index d1523812..686e6564 100644
--- a/src/components/structural/header/Header.js
+++ b/src/components/structural/header/Header.js
@@ -134,19 +134,21 @@ class Header extends Component {
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
 
         // Warn the issue before refreshing the page
-        try {
-            let editor = window.ace.edit("ace-editor");
-            editor.getSession().on("change", () => {
-                let text = editor.getSession().getValue();
-                if (this.props.text !== text) {
-                    this.setState({ editorChange: true });
-                } else {
-                    this.setState({ editorChange: false });
-                }
+        if (this.props.layoutType !== layoutTypes.REFERENCE) {
+            try {
+                let editor = window.ace.edit("ace-editor");
+                editor.getSession().on("change", () => {
+                    let text = editor.getSession().getValue();
+                    if (this.props.text !== text) {
+                        this.setState({ editorChange: true });
+                    } else {
+                        this.setState({ editorChange: false });
+                    }
 
-            });
-        } catch (err) {
-            console.error(err);
+                });
+            } catch (err) {
+                console.error(err);
+            }
         }
         window.addEventListener("beforeunload", (event) => {
             if (this.state.editorChange) {
diff --git a/src/myr/Group.js b/src/myr/Group.js
index 7029b8cd..332c87b5 100644
--- a/src/myr/Group.js
+++ b/src/myr/Group.js
@@ -7,10 +7,17 @@ class Group {
     }
 
     add = (id) => {
+        if (id instanceof Group) {
+            this.els.push(this.myr.transfer(id.id));
+        }
         this.els.push(this.myr.transfer(id));
+
     }
 
     remove = (id) => {
+        if (id instanceof Group) {
+            id = id.id;
+        }
         let index = this.getIndex(id);
         let el = this.els[index];
         delete this.els[index];
diff --git a/src/myr/Myr.js b/src/myr/Myr.js
index aa6c85ce..dec1947a 100644
--- a/src/myr/Myr.js
+++ b/src/myr/Myr.js
@@ -323,14 +323,20 @@ class Myr {
         this.color = color;
     }
 
-    getRandomColor = () => {
-        let color, i, letters;
-        letters = "0123456789ABCDEF";
-        color = "#";
-        i = 0;
-        while (i < 6) {
-            color += letters[Math.floor(Math.random() * 16)];
-            i++;
+    getRandomColor = (colors = null) => {
+        let color;
+        if (Array.isArray(colors) && colors.length !== 0) {
+            color = colors[Math.floor(Math.random() * colors.length)];
+        }
+        else {
+            let i, letters;
+            letters = "0123456789ABCDEF";
+            color = "#";
+            i = 0;
+            while (i < 6) {
+                color += letters[Math.floor(Math.random() * 16)];
+                i++;
+            }
         }
         this.color = color;
         return color;
diff --git a/src/myr/reference.js b/src/myr/reference.js
index dcd70ab2..14f22ed1 100644
--- a/src/myr/reference.js
+++ b/src/myr/reference.js
@@ -111,8 +111,8 @@ let transformations = [
         example: "setColor"
     },
     {
-        name: <span>getRandomColor()</span>,
-        description: <span>Changes the color of the cursor to a random color, and returns the color. Default: 'red'</span>,
+        name: <span>getRandomColor(<span className="array">array</span>)</span>,
+        description: <span>Changes the color of the cursor to either a completely random color or a random color from an array of colors if an array is provided, then returns that color. Default: 'red'</span>,
         example: "getRandomColor"
     },
     {
diff --git a/src/tests/Myr.test.js b/src/tests/Myr.test.js
index 843751b8..80f34661 100644
--- a/src/tests/Myr.test.js
+++ b/src/tests/Myr.test.js
@@ -40,6 +40,13 @@ describe("Updates to Myr's Model", () => {
         expect(color).not.toBeUndefined();
         expect(colorRegEx.test(color)).toBeTruthy();
     });
+
+    it("pick Random Color out of a list of colors", () => {
+        let colors = ["blue","green","red","hotpink","FF00FF","rgb(100,33,93)"];
+        let color = myr.getRandomColor(colors);
+        expect(color).not.toBeUndefined();
+        expect(colors.includes(color)).toBeTruthy();
+    });
 });
 
 describe("Component Renders", () => {