From 362fd07e1dd6fa4bc4284fa5f7ca40701c7a3261 Mon Sep 17 00:00:00 2001 From: LukeSlev Date: Sun, 8 Sep 2019 15:35:46 -0400 Subject: [PATCH 01/45] make the cpx shake --- src/requirements.txt | 1 - .../components/toolbar/MotionSensorBar.tsx | 24 ++++++++++- src/view/components/toolbar/SensorButton.tsx | 1 + src/view/styles/Simulator.css | 42 ++++++++++++++----- src/view/viewUtils.tsx | 4 +- 5 files changed, 57 insertions(+), 15 deletions(-) diff --git a/src/requirements.txt b/src/requirements.txt index b39b0bc1e..29e459465 100644 --- a/src/requirements.txt +++ b/src/requirements.txt @@ -3,4 +3,3 @@ pytest==5.0.1 applicationinsights==0.11.9 python-socketio==4.3.1 requests==2.22.0 -pywin32==224 diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx index 3dcdba145..6960c25c0 100644 --- a/src/view/components/toolbar/MotionSensorBar.tsx +++ b/src/view/components/toolbar/MotionSensorBar.tsx @@ -4,6 +4,7 @@ import * as React from "react"; import InputSlider from "./InputSlider"; import SensorButton from "./SensorButton"; +import svg from "../cpx/Svg_utils"; import { ISensorProps, @@ -138,7 +139,10 @@ class MotionSensorBar extends React.Component { ); } - private onMouseDown = () => this.handleOnclick(true, "shake"); + private onMouseDown = (event: React.PointerEvent) => { + this.updateShakePress(true, event.currentTarget.id); + this.handleOnclick(true, "shake"); + }; private onKeyUp = (event: React.KeyboardEvent) => this.onKeyEvent(event, false); @@ -146,7 +150,10 @@ class MotionSensorBar extends React.Component { private onKeyDown = (event: React.KeyboardEvent) => this.onKeyEvent(event, true); - private onMouseUp = () => this.handleOnclick(false, "shake"); + private onMouseUp = (event: React.PointerEvent) => { + this.updateShakePress(false, event.currentTarget.id); + this.handleOnclick(false, "shake"); + }; private handleOnclick = (active: boolean, type: string) => { const messageState = { [type]: active }; @@ -161,6 +168,19 @@ class MotionSensorBar extends React.Component { this.handleOnclick(active, "shake"); } } + + private updateShakePress = (shakeState: boolean, id: string): void => { + const svgElement = window.document.getElementById("cpx_svg"); + const buttonElement = window.document.getElementById(id); + const cpxSvg: SVGElement = (svgElement as unknown) as SVGElement; + + if (svgElement && cpxSvg && buttonElement) { + buttonElement.setAttribute("aria-pressed", shakeState.toString()); + shakeState + ? svg.addClass(cpxSvg, "shake-pressed") + : svg.removeClass(cpxSvg, "shake-pressed"); + } + }; } export default MotionSensorBar; diff --git a/src/view/components/toolbar/SensorButton.tsx b/src/view/components/toolbar/SensorButton.tsx index 8726cf1a4..9151a29bd 100644 --- a/src/view/components/toolbar/SensorButton.tsx +++ b/src/view/components/toolbar/SensorButton.tsx @@ -8,6 +8,7 @@ import "../../styles/SensorButton.css"; const SensorButton: React.FC = props => { return (