Merge pull request #492 from Jlu18/keyboard-shortcut

Keyboard Shortcut

Author: kdvalin

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 a scene"
+    },
+    {
+        shortcut: ["Ctrl/⌘", "Shift", "S"],
+        description: "Pop up a save tab"
+    },
+    {
+        shortcut: ["Ctrl/⌘", "Enter"],
+        description: "Render a scene"
+    },
+];
+
+const editor = [
+    {
+        shortcut: ["Ctrl/⌘", "/"],
+        description: "Comment current or selected line of code"
+    },
+    {
+        shortcut: ["Alt/Option", "Up"],
+        description: "Move a code up"
+    },
+    {
+        shortcut: ["Alt/Option", "Down"],
+        description: "Move a code down"
+    },
+    {
+        shortcut: ["Alt/⌘", "D"],
+        description: "Delete a line of code"
+    }
+];
+
+const scene = [
+    {
+        shortcut: ["W"],
+        description: "Move forward"
+    },
+    {
+        shortcut: ["A"],
+        description: "Slide left"
+    },
+    {
+        shortcut: ["S"],
+        description: "Move backward"
+    },
+    {
+        shortcut: ["D"],
+        description: "Slide 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 Command</p>
+                            {
+                                general.map(e => {return this.shortcutHelper(e);})
+                            }
+                        </section>
+                        <section className="right">
+                            <p className="title">Editor Command</p>
+                            {
+                                editor.map(e => {return this.shortcutHelper(e);})
+                            }
+                        </section>
+                        <section className="right">
+                            <p className="title">Scene Command</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/css/KeyboardShortcut.css

@@ -0,0 +1,21 @@
+.keyboard-shortcut {
+    width:auto;
+}
+
+.title {
+    font-size:large
+}
+
+.shortcut {
+    font-size:xx-small
+}
+
+.right {
+    float: left;
+    width: 300px;
+    padding: 10px;
+}
+
+.note {
+    margin-left: 1%;
+}