Merge pull request #498 from kdvalin/rc/2.4.0

Release Canidate 2.4.0 changes

.gitignore

@@ -14,9 +14,6 @@
 # api keys
 /src/keys
 
-# doc scripts
-GenerateDocsWindows.bat
-
 # misc
 .DS_Store
 .env*

README.md

@@ -9,11 +9,10 @@ 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 - 2.3.0 -> 2.3.1
-- Updated VR/AR buttons to be spaced out
-- Fixed bug where colorshift would always choose white for it's initial color
-- Updated autocompelete to put cursor in between parenthesis instead of after
-- Fixed a bug where a pushable entity would not be able to be pushed (`makePushable`)
+## Change Log - 2.3.1 -> 2.4.0
+- Added ability to import custom GLTF models into a scene
+- Added a keyboard shortcut information menu
+- Added a slider for setting the movement speed in a scene
 
 
 ## Acknowledgments

img/c.mtl

@@ -0,0 +1,10 @@
+# Blender MTL File: 'None'
+# Material Count: 1
+
+newmtl None
+Ns 500
+Ka 0.8 0.8 0.8
+Kd 0.8 0.8 0.8
+Ks 0.8 0.8 0.8
+d 1
+illum 2

img/c.obj

@@ -0,0 +1,40 @@
+# Blender v2.90.1 OBJ File: ''
+# www.blender.org
+mtllib c.mtl
+o Cube_Cube.001
+v -1.000000 -1.000000 1.000000
+v -0.446396 1.000000 1.000000
+v -1.000000 -1.000000 -1.000000
+v -1.000000 1.000000 -1.000000
+v 1.000000 -1.000000 1.000000
+v 0.377481 1.000000 0.032235
+v 1.000000 -1.000000 -1.000000
+v 1.000000 2.114706 -1.681411
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.625000 0.500000
+vt 0.375000 0.500000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.125000 0.500000
+vt 0.125000 0.750000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vn -0.9814 0.1358 0.1358
+vn -0.1309 -0.1309 -0.9827
+vn 0.9583 0.1865 0.2166
+vn 0.3156 0.2283 0.9210
+vn 0.0000 -1.0000 0.0000
+vn -0.2081 0.9379 0.2777
+usemtl None
+s off
+f 1/1/1 2/2/1 4/3/1 3/4/1
+f 3/4/2 4/3/2 8/5/2 7/6/2
+f 7/6/3 8/5/3 6/7/3 5/8/3
+f 5/8/4 6/7/4 2/9/4 1/10/4
+f 3/11/5 7/6/5 5/8/5 1/12/5
+f 8/5/6 4/13/6 2/14/6 6/7/6

package.json

@@ -1,6 +1,6 @@
 {
     "name": "myr",
-    "version": "2.3.1",
+    "version": "2.4.0",
     "private": false,
     "engines": {
         "node": "12.18.2"

src/actions/sceneActions.js

@@ -92,6 +92,10 @@ export function setNameDesc(payload) {
     return { type: types.SET_NAME_DESC, payload };
 }
 
+export function updateMoveSpeed(speed) {
+    return { type: types.UPDATE_MOVE_SPEED, speed };
+}
+
 export default {
     nameScene,
     loadScene,
@@ -112,5 +116,6 @@ export default {
     removeCollectionID,
     toggleDefaultLight,
     toggleCastShadow,
-    toggleLightIndicator
-};
+    toggleLightIndicator,
+    updateMoveSpeed
+};

src/components/editor/Editor.js

@@ -2,15 +2,16 @@ import React, { Component } from "react";
 import AceEditor from "react-ace";
 import "brace/mode/javascript";
 import "brace/theme/github";
+import "brace/ext/searchbox";
 import "brace/ext/language_tools";
-import customCompleter from "./customCompleter.js";
 
-import "brace/ext/searchbox";
+import customCompleter from "./customCompleter.js";
+import KeyboardShortcut from "./KeyboardShortcut.js";
+import { browserType } from "../../utils/browserType";
 
 /**
  * Editor is a React Component that creat the Ace Editor in the DOM.
  */
-
 class Editor extends Component {
     componentWillUnmount() {
         // Updates state in reducer before closing editor
@@ -52,29 +53,32 @@ class Editor extends Component {
             "esversion": 6
         }]);
     }
-
+    
     /**
      * Creates the editor in the DOM
      */
     render() {
         return (
-            <AceEditor
-                editorProps={{
-                    $blockScrolling: Infinity,
-                }}
-                height="94vh"
-                mode="javascript"
-                name="ace-editor"
-                // eslint-disable-next-line
-                ref="aceEditor"
-                theme="github"
-                value={this.props.text}
-                width="100%"
-                wrapEnabled={true}
-                enableBasicAutocompletion={false}
-                enableLiveAutocompletion={true}
-                onLoad={this.onLoad}
-            />
+            <div>
+                <AceEditor
+                    editorProps={{
+                        $blockScrolling: Infinity,
+                    }}
+                    height="90vh"
+                    mode="javascript"
+                    name="ace-editor"
+                    // eslint-disable-next-line
+                    ref="aceEditor"
+                    theme="github"
+                    value={this.props.text}
+                    width="100%"
+                    wrapEnabled={true}
+                    enableBasicAutocompletion={false}
+                    enableLiveAutocompletion={true}
+                    onLoad={this.onLoad}
+                />
+                { browserType() === "desktop" ? <KeyboardShortcut/> : null }
+            </div>
         );
     }
 }

src/components/editor/KeyboardShortcut.js

@@ -0,0 +1,161 @@
+import React from "react";
+import {
+    Button,
+    ButtonBase,
+    Icon,
+    Tooltip,
+    Popover,
+} from "@material-ui/core";
+import "../../css/KeyboardShortcut.css";
+
+const general = [
+    {
+        shortcut: ["Ctrl/⌘", "S"],
+        description: "Save scene"
+    },
+    {
+        shortcut: ["Ctrl/⌘", "Shift", "S"],
+        description: "Save scene as"
+    },
+    {
+        shortcut: ["Ctrl/⌘", "Enter"],
+        description: "Render scene"
+    },
+];
+
+const editor = [
+    {
+        shortcut: ["Ctrl/⌘", "/"],
+        description: "Comment current or selected line of code"
+    },
+    {
+        shortcut: ["Alt/Option", "Up"],
+        description: "Move current line of code up 1 line"
+    },
+    {
+        shortcut: ["Alt/Option", "Down"],
+        description: "Move current line of code down 1 line"
+    },
+    {
+        shortcut: ["Alt/⌘", "D"],
+        description: "Delete current line of code"
+    }
+];
+
+const scene = [
+    {
+        shortcut: ["W"],
+        description: "Move forwards"
+    },
+    {
+        shortcut: ["S"],
+        description: "Move backwards"
+    },
+    {
+        shortcut: ["A"],
+        description: "Move left"
+    },
+    {
+        shortcut: ["D"],
+        description: "Move right"
+    },
+    {
+        shortcut: ["Space"],
+        description: "Move up"
+    },
+    {
+        shortcut: ["Shift"],
+        description: "Move down"
+    },
+];
+
+class KeyboardShortcut extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            open: false,
+            anchorEl: null
+        };
+    }
+
+    shortcutHelper = (data) => {
+        let shortcuts = [];
+        data.shortcut.forEach((key,i)=>{
+            shortcuts.push(<kbd>{key}</kbd>);
+            if(i < data.shortcut.length-1){
+                shortcuts.push(" + ");
+            }
+        });
+        return (<p>{shortcuts} {data.description}</p>);
+    };
+
+    handleClick = (event) =>{
+        this.setState({
+            open: true,
+            anchorEl: event.target});
+    };
+
+    handleClose = () => {
+        this.setState({
+            open: false,
+            anchorEl: null});
+    };
+
+    render(){
+        return(
+            <div>
+                <Tooltip title="Keyboard Shortcut">
+                    <Button
+                        variant="contained"
+                        size="small"
+                        color="primary"
+                        onClick={this.handleClick}>
+                        <Icon className="material-icons">keyboard</Icon>
+                    </Button>
+                </Tooltip>
+                <Popover
+                    id="simple-popover"
+                    anchorEl={this.state.anchorEl}
+                    anchorOrigin={{
+                        vertical:"top",
+                        horizontal: "left",
+                    }}
+                    transformOrigin={{
+                        vertical: "bottom",
+                        hotizontal: "left"
+                    }}
+                    open={this.state.open}
+                    onClose={this.handleClose}>
+                    <div className="keyboard-shortcut">
+                        <ButtonBase
+                            style={{ position: "absolute", right: 15, top: 15 }}
+                            onClick={this.handleClose} >
+                            <Icon className="material-icons">clear</Icon>
+                        </ButtonBase >
+                        <section className="right">
+                            <p className="title">General Commands</p>
+                            {
+                                general.map(e => {return this.shortcutHelper(e);})
+                            }
+                        </section>
+                        <section className="right">
+                            <p className="title">Editor Commands</p>
+                            {
+                                editor.map(e => {return this.shortcutHelper(e);})
+                            }
+                        </section>
+                        <section className="right">
+                            <p className="title">Scene Controls</p>
+                            {
+                                scene.map(e => {return this.shortcutHelper(e);})
+                            }
+                        </section>
+                    </div>
+                    <p className="note">⌘: Command key for macOS user</p>
+                </Popover> 
+            </div>
+        );
+    }
+}
+
+export default KeyboardShortcut;

src/components/editor/customCompleter.js

@@ -1,5 +1,6 @@
 import myrReference from "../../myr/reference.js";
 import myrTextures from "../structural/Textures.js";
+import myrModels from "../structural/Models.js";
 
 export const customCompleter = {
     getCompletions: function (editor, session, pos, prefix, callback) {
@@ -40,6 +41,11 @@ export const customCompleter = {
             "group()"
         ];
 
+        let model = myrModels();
+        let Model = [...model.ModelPack.keys(),
+            "group()"
+        ];
+
         let reference = myrReference();
         let keyWords = [...reference.geometry.map(obj => obj.name + "()"),
             ...reference.transformations.map(obj => obj.name + "()"),
@@ -241,6 +247,15 @@ export const customCompleter = {
                 score: 3
             };
         }));
+
+        callback(null, Model.map(function (word) {
+            return {
+                caption: word,
+                value: word,
+                meta: "model",
+                score: 3
+            };
+        }));
     }
 };