Add dropdown and button for sending gestures

microsoft · Mar 20, 2020 · 344f3ca · 344f3ca
1 parent d68c2c4
commit 344f3ca
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 46 deletions.
diff --git a/src/view/components/Dropdown.tsx b/src/view/components/Dropdown.tsx
@@ -2,59 +2,30 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
-
-import { CONSTANTS } from "../constants";
 import "../styles/Dropdown.css";
 
 export interface IDropdownProps {
-    label: string;
-    textOptions: string[];
-    lastChosen: string;
-    styleLabel: string;
-    width: number;
-    onBlur: (event: React.FocusEvent<HTMLSelectElement>) => void;
+    options: string[];
+    // styleLabel: string;
+    onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
-const Dropdown: React.FC<IDropdownProps> = props => {
-    const parsedPath = parsePath(props.lastChosen);
-    const defaultText =
-        props.lastChosen !== ""
-            ? CONSTANTS.CURRENTLY_RUNNING(parsedPath[1])
-            : CONSTANTS.FILES_PLACEHOLDER;
+export const Dropdown: React.FC<IDropdownProps> = props => {
     return (
         <div>
-            <select
-                id={props.label}
-                className={props.styleLabel}
-                onBlur={props.onBlur}
-            >
-                <option value="" disabled selected>
-                    {defaultText}
-                </option>
-                {renderOptions(props.textOptions)}
+            <select className="dropdown" onChange={props.onSelect}>
+                {renderOptions(props.options)}
             </select>
         </div>
     );
 };
 
 const renderOptions = (options: string[]) => {
     return options.map((name, index) => {
-        const key = `option-${index}`;
-        const parsedPath = parsePath(name);
         return (
-            <option key={key} value={name}>
-                {`${parsedPath[1]} : ${parsedPath[0]}`}
+            <option key={name} value={name}>
+                {name}
             </option>
         );
     });
 };
-
-const parsePath = (filePath: string) => {
-    const lastSlash =
-        filePath.lastIndexOf("/") !== -1
-            ? filePath.lastIndexOf("/")
-            : filePath.lastIndexOf("\\");
-    return [filePath.slice(0, lastSlash), filePath.substr(lastSlash + 1)];
-};
-
-export default Dropdown;
diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx
@@ -3,15 +3,21 @@
 
 import * as React from "react";
 import { MICROBIT_TOOLBAR_ID } from "../../components/toolbar/SensorModalUtils";
-import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
+import {
+    SENSOR_LIST,
+    VSCODE_MESSAGES_TO_WEBVIEW,
+    WEBVIEW_MESSAGES,
+} from "../../constants";
 import "../../styles/Simulator.css";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import ToolBar from "../toolbar/ToolBar";
 import { MicrobitSimulator } from "./MicrobitSimulator";
+import { sendMessage } from "../../utils/MessageUtils";
 
 // Component grouping the functionality for micro:bit functionalities
 interface IState {
     sensors: { [key: string]: number };
+    currentSelectedGesture?: string;
 }
 const DEFAULT_STATE = {
     sensors: {
@@ -21,6 +27,7 @@ const DEFAULT_STATE = {
         [SENSOR_LIST.MOTION_Y]: 0,
         [SENSOR_LIST.MOTION_Z]: 0,
     },
+    currentSelectedGesture: undefined,
 };
 
 export class Microbit extends React.Component<{}, IState> {
@@ -51,13 +58,25 @@ export class Microbit extends React.Component<{}, IState> {
                     buttonList={MICROBIT_TOOLBAR_BUTTONS}
                     onUpdateSensor={this.updateSensor}
                     sensorValues={this.state.sensors}
+                    onSelectGesture={this.updateGesture}
+                    sendGesture={this.sendGesture}
                 />
             </React.Fragment>
         );
     }
     updateSensor = (sensor: SENSOR_LIST, value: number) => {
         this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
     };
+    updateGesture = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        this.setState({ currentSelectedGesture: event.target.value });
+    };
+    sendGesture = () => {
+        if (this.state.currentSelectedGesture) {
+            sendMessage(WEBVIEW_MESSAGES.GESTURE, {
+                gesture: this.state.currentSelectedGesture,
+            });
+        }
+    };
 }
 
 const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [

diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx
@@ -270,7 +270,9 @@ export const TEMPERATURE_MODAL_CONTENT = (
 
 export const ACCELEROMETER_MODAL_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
+    sensorValues: { [key: string]: number },
+    onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    sendGesture?: () => void
 ): IModalContent => {
     const accelerometerSensorValues = {
         X_AXIS: sensorValues[SENSOR_LIST.MOTION_X],
@@ -282,6 +284,8 @@ export const ACCELEROMETER_MODAL_CONTENT = (
             <Accelerometer
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                onSelectGestures={onSelectGestures}
+                onSendGesture={sendGesture}
             />
         ),
         descriptionText: "toolbar-accelerometer-sensor.description",
@@ -342,12 +346,22 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
 export const getModalContent = (
     label: string,
     onUpdateValue: (onUpdateValue: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
+    sensorValues: { [key: string]: number },
+    onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    sendGesture?: () => void
 ) => {
     const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
         label
     );
     if (modalContentConstructor) {
+        if (label === MICROBIT_TOOLBAR_ID.ACCELEROMETER) {
+            return modalContentConstructor(
+                onUpdateValue,
+                sensorValues,
+                onSelectGestures,
+                sendGesture
+            );
+        }
         return modalContentConstructor(onUpdateValue, sensorValues);
     } else {
         return;

diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx
@@ -31,6 +31,8 @@ interface IProps extends WrappedComponentProps {
     }>;
     onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void;
     sensorValues: { [key: string]: number };
+    onSelectGesture?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    sendGesture?: () => void;
 }
 
 class ToolBar extends React.Component<IProps, IToolbarState, any> {
@@ -152,7 +154,9 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
             !getModalContent(
                 this.state.currentOpenedId,
                 this.props.onUpdateSensor,
-                this.props.sensorValues
+                this.props.sensorValues,
+                this.props.onSelectGesture,
+                this.props.sendGesture
             )
         ) {
             return null;
@@ -161,7 +165,9 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
         const content = getModalContent(
             this.state.currentOpenedId,
             this.props.onUpdateSensor,
-            this.props.sensorValues
+            this.props.sensorValues,
+            this.props.onSelectGesture,
+            this.props.sendGesture
         ) as IModalContent;
 
         const components = content

diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/motion/Accelerometer.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 import { SENSOR_LIST } from "../../../constants";
 import { ISensorProps, ISliderProps } from "../../../viewUtils";
 import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider";
+import { Dropdown } from "../../Dropdown";
+import Button from "../../Button";
+import SensorButton from "../SensorButton";
 
 const MOTION_SLIDER_PROPS_X: ISliderProps = {
     axisLabel: "X",
@@ -44,12 +47,27 @@ interface IProps {
         Z_AXIS: number;
     };
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
+    onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    onSendGesture?: () => void;
 }
+const GESTURES = ["shake", "up"];
+const GESTURE_BUTTON_MESSAGE = "Send Gesture";
+
 export const Accelerometer: React.FC<IProps> = (props: IProps) => {
     return (
         <div className="AccelerometerBar">
             <br />
             {/* Implement Gestures Here */}
+            <Dropdown options={GESTURES} onSelect={props.onSelectGestures} />
+            <SensorButton
+                label={GESTURE_BUTTON_MESSAGE}
+                onMouseDown={() => {
+                    if (props.onSendGesture) {
+                        props.onSendGesture();
+                    }
+                }}
+                type="gesture"
+            />
             <ThreeDimensionSlider
                 axisProperties={MOTION_SENSOR_PROPERTIES}
                 onUpdateValue={props.onUpdateValue}

diff --git a/src/view/constants.ts b/src/view/constants.ts
@@ -74,6 +74,7 @@ export enum WEBVIEW_MESSAGES {
     TOGGLE_PLAY_STOP = "toggle-play-stop",
     BUTTON_PRESS = "button-press",
     SENSOR_CHANGED = "sensor-changed",
+    GESTURE = "gesture",
     SLIDER_TELEMETRY = "slider-telemetry",
 }
 

diff --git a/src/view/viewUtils.tsx b/src/view/viewUtils.tsx
@@ -16,10 +16,10 @@ export interface ISliderProps {
 export interface ISensorButtonProps {
     label: string;
     type: string;
-    onMouseUp: (event: React.PointerEvent<HTMLButtonElement>) => void;
-    onMouseDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
-    onKeyUp: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onMouseUp?: (event: React.PointerEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: React.PointerEvent<HTMLButtonElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 }
 export interface ISensorProps {
     LABEL: string;