From 1d4d61f25aee2d8740146a2e04f6ea245f0b9cab Mon Sep 17 00:00:00 2001 From: Xuan-Nam Kevin Nguyen Date: Sat, 18 Jan 2020 16:43:44 -0800 Subject: [PATCH 01/18] extract cpx in one single container --- src/view/App.tsx | 6 ++---- src/view/container/device/device.tsx | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/view/container/device/device.tsx diff --git a/src/view/App.tsx b/src/view/App.tsx index b3d3737cb..f8eb3b14e 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -3,8 +3,7 @@ "use strict"; import * as React from "react"; -import Simulator from "./components/Simulator"; -import ToolBar from "./components/toolbar/ToolBar"; +import Device from "./container/device/device" import "./App.css"; class App extends React.Component { @@ -12,8 +11,7 @@ class App extends React.Component { return (
- - +
); diff --git a/src/view/container/device/device.tsx b/src/view/container/device/device.tsx new file mode 100644 index 000000000..3f99a4001 --- /dev/null +++ b/src/view/container/device/device.tsx @@ -0,0 +1,15 @@ +import Simulator from "../../components/Simulator"; +import ToolBar from "../../components/toolbar/ToolBar"; +import * as React from "react"; + +class Device extends React.Component{ + render(){ + return( +
+ + +
+ ) + } +} +export default Device; \ No newline at end of file From 3f20963eed664a68eb5c1dec745c51fcbb628ee2 Mon Sep 17 00:00:00 2001 From: Xuan-Nam Kevin Nguyen Date: Sat, 18 Jan 2020 17:16:54 -0800 Subject: [PATCH 02/18] rename sensorModalUtils and device files to be consistent --- src/view/App.tsx | 2 +- .../toolbar/{sensorModalUtils.tsx => SensorModalUtils.tsx} | 0 src/view/components/toolbar/ToolBar.tsx | 2 +- src/view/container/device/{device.tsx => Device.tsx} | 0 src/view/svgs/toolbar_svg.tsx | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/view/components/toolbar/{sensorModalUtils.tsx => SensorModalUtils.tsx} (100%) rename src/view/container/device/{device.tsx => Device.tsx} (100%) diff --git a/src/view/App.tsx b/src/view/App.tsx index f8eb3b14e..6b3a906c2 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -3,7 +3,7 @@ "use strict"; import * as React from "react"; -import Device from "./container/device/device" +import Device from "./container/device/Device" import "./App.css"; class App extends React.Component { diff --git a/src/view/components/toolbar/sensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx similarity index 100% rename from src/view/components/toolbar/sensorModalUtils.tsx rename to src/view/components/toolbar/SensorModalUtils.tsx diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 860d2f75c..263cb2041 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -9,7 +9,7 @@ import { DEFAULT_MODAL_CONTENT, IModalContent, TOOLBAR_ICON_ID -} from "./sensorModalUtils"; +} from "./SensorModalUtils"; import { FormattedMessage, injectIntl } from "react-intl"; interface IToolbarState { diff --git a/src/view/container/device/device.tsx b/src/view/container/device/Device.tsx similarity index 100% rename from src/view/container/device/device.tsx rename to src/view/container/device/Device.tsx diff --git a/src/view/svgs/toolbar_svg.tsx b/src/view/svgs/toolbar_svg.tsx index d763724ad..482260990 100644 --- a/src/view/svgs/toolbar_svg.tsx +++ b/src/view/svgs/toolbar_svg.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { TOOLBAR_ICON_LABEL } from "../components/toolbar/sensorModalUtils"; +import { TOOLBAR_ICON_LABEL } from "../components/toolbar/SensorModalUtils"; import "../styles/Button.css"; export const LEFT_EDGE_SVG = ( From 7cf055911deeea166146b2af4c52524345a98702 Mon Sep 17 00:00:00 2001 From: Xuan-Nam Kevin Nguyen Date: Sun, 19 Jan 2020 14:44:42 -0800 Subject: [PATCH 03/18] change file name of cpx to CpxImage --- src/view/components/cpx/{Cpx.tsx => CpxImage.tsx} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/view/components/cpx/{Cpx.tsx => CpxImage.tsx} (99%) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/CpxImage.tsx similarity index 99% rename from src/view/components/cpx/Cpx.tsx rename to src/view/components/cpx/CpxImage.tsx index 845ab3654..71baf6ecd 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/CpxImage.tsx @@ -23,7 +23,7 @@ interface IProps { let firstTime = true; // Functional Component render -const Cpx: React.FC = props => { +const CpxImage: React.FC = props => { const svgElement = window.document.getElementById("cpx_svg"); if (svgElement) { @@ -386,4 +386,4 @@ export const updatePinTouch = (pinState: boolean, id: string): void => { } }; -export default Cpx; +export default CpxImage; From 81a4ae8f53905d854118dc5873fcbefb0aee769a Mon Sep 17 00:00:00 2001 From: Xuan-Nam Kevin Nguyen Date: Sun, 19 Jan 2020 15:00:01 -0800 Subject: [PATCH 04/18] extract the action components from simulator into a reusable component --- src/view/components/Simulator.tsx | 33 +++++-------------- src/view/components/simulator/ActionBar.tsx | 36 +++++++++++++++++++++ 2 files changed, 44 insertions(+), 25 deletions(-) create mode 100644 src/view/components/simulator/ActionBar.tsx diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx index 29e25e5e5..973138104 100644 --- a/src/view/components/Simulator.tsx +++ b/src/view/components/Simulator.tsx @@ -3,13 +3,13 @@ import * as React from "react"; import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; -import Cpx, { updateSwitch, updatePinTouch } from "./cpx/Cpx"; -import Button from "./Button"; -import Dropdown from "./Dropdown"; -import { CONSTANTS } from "../constants"; +import CpxImage, { updateSwitch, updatePinTouch } from "./cpx/CpxImage"; import PlayLogo from "../svgs/play_svg"; import StopLogo from "../svgs/stop_svg"; -import RefreshLogo from "../svgs/refresh_svg"; +import Dropdown from "./Dropdown"; +import { CONSTANTS } from "../constants"; +import ActionBar from "./simulator/ActionBar" + import "../styles/Simulator.css"; @@ -141,7 +141,7 @@ class Simulator extends React.Component { } render() { - const image = this.state.play_button ? StopLogo : PlayLogo; + const playStopImage = this.state.play_button ? StopLogo : PlayLogo; return (
@@ -155,7 +155,7 @@ class Simulator extends React.Component { />
- { onMouseLeave={this.onMouseLeave} />
-
-
+
); } diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx new file mode 100644 index 000000000..d92a4d710 --- /dev/null +++ b/src/view/components/simulator/ActionBar.tsx @@ -0,0 +1,36 @@ + +import RefreshLogo from "../../svgs/refresh_svg"; +import Button from "../Button"; +import * as React from "react"; +import {CONSTANTS} from "../../constants" +interface IProps{ + onTogglePlay: (event: React.MouseEvent) => void, + onToggleRefresh: (event: React.MouseEvent) => void, + playStopImage:JSX.Element +} +class ActionBar extends React.Component{ + render(){ + const {onTogglePlay,onToggleRefresh,playStopImage}=this.props; + return( +
+
+ ) + } +} +export default ActionBar \ No newline at end of file From 45c86aa93496c500429cd01a80cabfe9d6c5447d Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 19 Jan 2020 15:32:26 -0800 Subject: [PATCH 05/18] Add licensing to files --- src/view/components/simulator/ActionBar.tsx | 6 ++++-- src/view/container/device/Device.tsx | 7 +++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx index d92a4d710..4cf60ecd1 100644 --- a/src/view/components/simulator/ActionBar.tsx +++ b/src/view/components/simulator/ActionBar.tsx @@ -1,3 +1,5 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. import RefreshLogo from "../../svgs/refresh_svg"; import Button from "../Button"; @@ -8,8 +10,8 @@ interface IProps{ onToggleRefresh: (event: React.MouseEvent) => void, playStopImage:JSX.Element } -class ActionBar extends React.Component{ - render(){ +class ActionBar extends React.Component{ + public render(){ const {onTogglePlay,onToggleRefresh,playStopImage}=this.props; return(
diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index 3f99a4001..14fa7fed1 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -1,11 +1,14 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + import Simulator from "../../components/Simulator"; import ToolBar from "../../components/toolbar/ToolBar"; import * as React from "react"; -class Device extends React.Component{ +class Device extends React.Component{ render(){ return( -
+
From ff2adb5138ef051736c29b49c27a0fe93e293827 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 19 Jan 2020 15:45:26 -0800 Subject: [PATCH 06/18] Remove hardcoded buttons to add horizontal margin --- src/view/components/toolbar/ToolBar.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 263cb2041..8984703db 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -34,14 +34,6 @@ class ToolBar extends React.Component {
-
{this.getIconModal()}
From 27049c520ab70b4e3eb562112e58f13125b6634c Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 19 Jan 2020 15:54:39 -0800 Subject: [PATCH 07/18] Add padding to the toolbar --- src/view/styles/ToolBar.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index 89e6c1d9f..c54bdec52 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -9,12 +9,19 @@ margin-bottom: 50px; } -.toolbar, +.toolbar{ + box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); + border-color: var(--vscode-highContrastButtonBorderOverride-color); + border-width: 1px; + border-style: solid; +} .toolbar-icon { box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); border-color: var(--vscode-highContrastButtonBorderOverride-color); border-width: 1px; border-style: solid; + padding-right: 8px; + padding-left: 8px; } .tag, From a2b19be27a1d82d2b1f6922747f71c9a921abe11 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 20 Jan 2020 11:47:44 -0800 Subject: [PATCH 08/18] Make the toolbar reusable by passing necessary button props to it --- src/view/components/toolbar/ToolBar.tsx | 144 ++++-------------------- src/view/container/device/Device.tsx | 54 ++++++++- 2 files changed, 71 insertions(+), 127 deletions(-) diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 8984703db..8e4172d53 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -17,9 +17,15 @@ interface IToolbarState { showModal: boolean; } +// interface IProps { +// buttonList: [{ +// label: any, +// image: any +// }] +// } + class ToolBar extends React.Component { private readonly TOOLBAR_BUTTON_WIDTH: number = 32; - private readonly TOOLBAR_EDGE_WIDTH: number = 8; constructor(props: any) { super(props); @@ -30,131 +36,25 @@ class ToolBar extends React.Component { } render() { + const { buttonList } = this.props return (
-
{this.getIconModal()}
diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index 14fa7fed1..a3000bd22 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -4,13 +4,57 @@ import Simulator from "../../components/Simulator"; import ToolBar from "../../components/toolbar/ToolBar"; import * as React from "react"; +import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; +import { + TOOLBAR_ICON_ID +} from "../../components/toolbar/SensorModalUtils"; -class Device extends React.Component{ - render(){ - return( +const CPX_TOOLBAR_BUTTONS: any = [{ + label: TOOLBAR_ICON_ID.SWITCH, + image: TOOLBAR_SVG.SLIDER_SWITCH_SVG +}, { + label: TOOLBAR_ICON_ID.PUSH_BUTTON, + image: TOOLBAR_SVG.PUSH_BUTTON_SVG +}, +{ + label: TOOLBAR_ICON_ID.RED_LED, + image: TOOLBAR_SVG.RED_LED_SVG +}, { + label: TOOLBAR_ICON_ID.SOUND, + image: TOOLBAR_SVG.SOUND_SVG +} + , { + label: TOOLBAR_ICON_ID.TEMPERATURE, + image: TOOLBAR_SVG.TEMPERATURE_SVG +}, { + label: TOOLBAR_ICON_ID.LIGHT, + image: TOOLBAR_SVG.LIGHT_SVG +} + , { + label: TOOLBAR_ICON_ID.NEO_PIXEL, + image: TOOLBAR_SVG.NEO_PIXEL_SVG +}, { + label: TOOLBAR_ICON_ID.SPEAKER, + image: TOOLBAR_SVG.SPEAKER_SVG +}, { + label: TOOLBAR_ICON_ID.MOTION, + image: TOOLBAR_SVG.MOTION_SVG +}, { + label: TOOLBAR_ICON_ID.IR, + image: TOOLBAR_SVG.IR_SVG +}, { + label: TOOLBAR_ICON_ID.GPIO, + image: TOOLBAR_SVG.GPIO_SVG +} + + +] +class Device extends React.Component { + render() { + return (
- - + +
) } From bf02d2659cb1a35b322c7dacc21c25bd7ec5d09c Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 20 Jan 2020 14:45:13 -0800 Subject: [PATCH 09/18] Add typing to the props of toolbar component --- src/view/components/toolbar/ToolBar.tsx | 46 ++++++++++++------------- src/view/container/device/Device.tsx | 4 +-- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 8e4172d53..00ddfc7ef 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -2,32 +2,30 @@ // Licensed under the MIT license. import * as React from "react"; import Button from "../Button"; -import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import "../../styles/ToolBar.css"; import { LABEL_TO_MODAL_CONTENT, DEFAULT_MODAL_CONTENT, IModalContent, - TOOLBAR_ICON_ID } from "./SensorModalUtils"; -import { FormattedMessage, injectIntl } from "react-intl"; +import { FormattedMessage, injectIntl, WrappedComponentProps } from "react-intl"; interface IToolbarState { currentOpenedId: string; showModal: boolean; } -// interface IProps { -// buttonList: [{ -// label: any, -// image: any -// }] -// } +interface IProps extends WrappedComponentProps { + buttonList: Array<{ + label: any, + image: any + }> +} -class ToolBar extends React.Component { +class ToolBar extends React.Component { private readonly TOOLBAR_BUTTON_WIDTH: number = 32; - constructor(props: any) { + constructor(props: IProps) { super(props); this.state = { currentOpenedId: "", @@ -41,19 +39,19 @@ class ToolBar extends React.Component {
- {buttonList.map((currrentButton: any,index:number) => { - return( -
{this.getIconModal()} diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index a3000bd22..4f69f0ba3 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -9,7 +9,7 @@ import { TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; -const CPX_TOOLBAR_BUTTONS: any = [{ +const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{ label: TOOLBAR_ICON_ID.SWITCH, image: TOOLBAR_SVG.SLIDER_SWITCH_SVG }, { @@ -54,7 +54,7 @@ class Device extends React.Component { return (
- +
) } From 68cfbc72041e96efee076af62b34e388a344d9d6 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 08:52:25 -0800 Subject: [PATCH 10/18] Lint toolbar file according to tsconfig --- src/view/components/toolbar/ToolBar.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 00ddfc7ef..c009a4d8b 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -33,7 +33,7 @@ class ToolBar extends React.Component { }; } - render() { + public render() { const { buttonList } = this.props return (
@@ -115,25 +115,25 @@ class ToolBar extends React.Component { ) as IModalContent; const component = content - ? content["component"] + ? content.component : DEFAULT_MODAL_CONTENT.component; return (
- - {content["tagInput"]} - {content["tagOutput"]} + + {content.tagInput} + {content.tagOutput}

- +

- +
From 43ff8b2736c972570bc8f55fad088c1ad6831198 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 14:06:23 -0800 Subject: [PATCH 11/18] Update tslint rules for import consistency and disable member-access rule --- tslint.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tslint.json b/tslint.json index 3529d6acb..446cbd4fb 100644 --- a/tslint.json +++ b/tslint.json @@ -20,7 +20,10 @@ "triple-equals": true, "object-literal-sort-keys": true, "react-hooks-nesting": "error", - "ordered-imports": false + "ordered-imports": true, + "import-name":false, + "member-access":false, + "no-console":false }, "defaultSeverity": "warning" } From f260ce8be895d2f06c9d48036681e72f1d181bd9 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 14:07:02 -0800 Subject: [PATCH 12/18] Refactor css property of toolbar --- src/view/components/simulator/ActionBar.tsx | 8 ++++++-- src/view/styles/ToolBar.css | 3 +-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx index 4cf60ecd1..01e776b32 100644 --- a/src/view/components/simulator/ActionBar.tsx +++ b/src/view/components/simulator/ActionBar.tsx @@ -1,15 +1,19 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import RefreshLogo from "../../svgs/refresh_svg"; -import Button from "../Button"; import * as React from "react"; import {CONSTANTS} from "../../constants" +import RefreshLogo from "../../svgs/refresh_svg"; +import Button from "../Button"; + interface IProps{ onTogglePlay: (event: React.MouseEvent) => void, onToggleRefresh: (event: React.MouseEvent) => void, playStopImage:JSX.Element } + +// Component including the actions done on the Simulator (play/stop, refresh) + class ActionBar extends React.Component{ public render(){ const {onTogglePlay,onToggleRefresh,playStopImage}=this.props; diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index c54bdec52..e913f4832 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -20,8 +20,7 @@ border-color: var(--vscode-highContrastButtonBorderOverride-color); border-width: 1px; border-style: solid; - padding-right: 8px; - padding-left: 8px; + padding: 0px 8px 0px 8px; } .tag, From 86624f389351d29372c28a368f79219f7e89423c Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 14:11:52 -0800 Subject: [PATCH 13/18] Update imports with tslint consistency --- src/constants.ts | 4 ++-- src/deviceContext.ts | 4 ++-- src/extension.ts | 22 +++++++++---------- src/extension_utils/dependencyChecker.ts | 4 ++-- src/extension_utils/utils.ts | 14 ++++++------ src/serialMonitor.ts | 4 ++-- src/serialPortControl.ts | 2 +- src/simulatorDebugConfigurationProvider.ts | 6 ++--- src/telemetry/getPackageInfo.ts | 2 +- src/test/suite/index.ts | 4 ++-- src/usbDetector.ts | 6 ++--- src/view/App.tsx | 2 +- src/view/components/Simulator.tsx | 8 +++---- src/view/components/cpx/CpxImage.tsx | 6 ++--- src/view/components/cpx/Cpx_svg_style.tsx | 16 +++++++------- .../components/toolbar/LightSensorBar.tsx | 2 +- .../components/toolbar/MotionSensorBar.tsx | 8 +++---- src/view/components/toolbar/SensorButton.tsx | 2 +- .../components/toolbar/SensorModalUtils.tsx | 8 +++---- .../toolbar/TemperatureSensorBar.tsx | 4 ++-- src/view/components/toolbar/ToolBar.tsx | 6 ++--- src/view/container/device/Device.tsx | 6 ++--- src/view/index.tsx | 2 +- 23 files changed, 71 insertions(+), 71 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index 692d13f55..88b2ca8ec 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,9 +1,9 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import * as nls from "vscode-nls"; import * as path from "path"; import { MessageItem } from "vscode"; +import * as nls from "vscode-nls"; // Debugger Server export const SERVER_INFO = { @@ -281,7 +281,7 @@ export enum TelemetryEventName { SIMULATOR_BUTTON_AB = "SIMULATOR.BUTTON.AB", SIMULATOR_SWITCH = "SIMULATOR.SWITCH", - //Sensors + // Sensors SIMULATOR_TEMPERATURE_SENSOR = "SIMULATOR.TEMPERATURE", SIMULATOR_LIGHT_SENSOR = " SIMULATOR.LIGHT", SIMULATOR_MOTION_SENSOR = "SIMULATOR.MOTION", diff --git a/src/deviceContext.ts b/src/deviceContext.ts index ebcb25814..35374cb83 100644 --- a/src/deviceContext.ts +++ b/src/deviceContext.ts @@ -5,10 +5,10 @@ import * as fs from "fs"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; -import { CPXWorkspace } from "./cpxWorkspace"; import CONSTANTS, { CPX_CONFIG_FILE } from "./constants"; +import { CPXWorkspace } from "./cpxWorkspace"; +import * as utils from "./extension_utils/utils"; export class DeviceContext implements vscode.Disposable { public static getInstance(): DeviceContext { diff --git a/src/extension.ts b/src/extension.ts index 0a523c3f8..a1b06b033 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -5,23 +5,23 @@ import * as cp from "child_process"; import * as fs from "fs"; import * as open from "open"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; import { CONFIG, CONSTANTS, CPX_CONFIG_FILE, DialogResponses, + SERVER_INFO, TelemetryEventName, - WebviewMessages, - SERVER_INFO + WebviewMessages } from "./constants"; import { CPXWorkspace } from "./cpxWorkspace"; -import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider"; +import { DebuggerCommunicationServer } from "./debuggerCommunicationServer"; +import * as utils from "./extension_utils/utils"; import { SerialMonitor } from "./serialMonitor"; +import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider"; import TelemetryAI from "./telemetry/telemetryAI"; import { UsbDetector } from "./usbDetector"; -import { DebuggerCommunicationServer } from "./debuggerCommunicationServer"; let currentFileAbsPath: string = ""; let currentTextDocument: vscode.TextDocument; @@ -830,13 +830,13 @@ const updateCurrentFileIfPython = async ( }; const handleButtonPressTelemetry = (buttonState: any) => { - if (buttonState["button_a"] && buttonState["button_b"]) { + if (buttonState.button_a && buttonState.button_b) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_AB); - } else if (buttonState["button_a"]) { + } else if (buttonState.button_a) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_A); - } else if (buttonState["button_b"]) { + } else if (buttonState.button_b) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_B); - } else if (buttonState["switch"]) { + } else if (buttonState.switch) { telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_SWITCH); } }; @@ -872,9 +872,9 @@ const handleSensorTelemetry = (sensor: string) => { }; const checkForTelemetry = (sensorState: any) => { - if (sensorState["shake"]) { + if (sensorState.shake) { handleSensorTelemetry("shake"); - } else if (sensorState["touch"]) { + } else if (sensorState.touch) { handleSensorTelemetry("touch"); } }; diff --git a/src/extension_utils/dependencyChecker.ts b/src/extension_utils/dependencyChecker.ts index 4881dc8e8..0dfe59667 100644 --- a/src/extension_utils/dependencyChecker.ts +++ b/src/extension_utils/dependencyChecker.ts @@ -1,8 +1,8 @@ -import { CONSTANTS } from "../constants"; import * as cp from "child_process"; -import * as os from "os"; import * as compareVersions from 'compare-versions'; +import * as os from "os"; import * as util from "util"; +import { CONSTANTS } from "../constants"; const exec = util.promisify(cp.exec); interface IPayloadResponse { diff --git a/src/extension_utils/utils.ts b/src/extension_utils/utils.ts index 546bb8538..017a74c75 100644 --- a/src/extension_utils/utils.ts +++ b/src/extension_utils/utils.ts @@ -1,23 +1,23 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. +import * as cp from "child_process"; import * as fs from "fs"; -import * as path from "path"; import * as os from "os"; -import { DependencyChecker } from "./dependencyChecker"; -import { DeviceContext } from "../deviceContext"; +import * as path from "path"; +import * as util from "util"; import * as vscode from "vscode"; import { CONFIG, CONSTANTS, CPX_CONFIG_FILE, DialogResponses, - USER_CODE_NAMES, - SERVER_INFO + SERVER_INFO, + USER_CODE_NAMES } from "../constants"; import { CPXWorkspace } from "../cpxWorkspace"; -import * as cp from "child_process"; -import * as util from "util"; +import { DeviceContext } from "../deviceContext"; +import { DependencyChecker } from "./dependencyChecker"; const exec = util.promisify(cp.exec); // tslint:disable-next-line: export-name diff --git a/src/serialMonitor.ts b/src/serialMonitor.ts index a022ddb1b..6cb687d39 100644 --- a/src/serialMonitor.ts +++ b/src/serialMonitor.ts @@ -4,10 +4,10 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. import * as vscode from "vscode"; +import CONSTANTS, { DialogResponses, STATUS_BAR_PRIORITY } from "./constants"; +import { DeviceContext } from "./deviceContext"; import { outChannel } from "./extension"; import { logToOutputChannel } from "./extension_utils/utils"; -import { DeviceContext } from "./deviceContext"; -import CONSTANTS, { STATUS_BAR_PRIORITY, DialogResponses } from "./constants"; import { SerialPortControl } from "./serialPortControl"; export interface ISerialPortDetail { diff --git a/src/serialPortControl.ts b/src/serialPortControl.ts index 0b3eb3912..dc76bd0b0 100644 --- a/src/serialPortControl.ts +++ b/src/serialPortControl.ts @@ -3,9 +3,9 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. -import { CONSTANTS } from "./constants"; import * as os from "os"; import { OutputChannel } from "vscode"; +import { CONSTANTS } from "./constants"; import { logToOutputChannel } from "./extension_utils/utils"; interface ISerialPortDetail { diff --git a/src/simulatorDebugConfigurationProvider.ts b/src/simulatorDebugConfigurationProvider.ts index 50c7f02c4..e1f028a8f 100644 --- a/src/simulatorDebugConfigurationProvider.ts +++ b/src/simulatorDebugConfigurationProvider.ts @@ -2,11 +2,11 @@ // Licensed under the MIT license. import * as vscode from "vscode"; +import { CONSTANTS, DialogResponses } from "./constants"; import { - validCodeFileName, - getServerPortConfig + getServerPortConfig, + validCodeFileName } from "./extension_utils/utils"; -import { CONSTANTS, DialogResponses } from "./constants"; let shouldShowInvalidFileNamePopup: boolean = true; diff --git a/src/telemetry/getPackageInfo.ts b/src/telemetry/getPackageInfo.ts index cb9b52dea..e38d5c2ca 100644 --- a/src/telemetry/getPackageInfo.ts +++ b/src/telemetry/getPackageInfo.ts @@ -1,6 +1,6 @@ -import * as vscode from 'vscode'; import * as fs from 'fs' import * as path from 'path'; +import * as vscode from 'vscode'; export interface IPackageJson { name?: string; diff --git a/src/test/suite/index.ts b/src/test/suite/index.ts index 6d50df1c3..61aac7d28 100644 --- a/src/test/suite/index.ts +++ b/src/test/suite/index.ts @@ -10,9 +10,9 @@ // to report the results back to the caller. When the tests are finished, return // a possible error to the callback or null if none. -import * as path from 'path'; -import * as Mocha from 'mocha'; import * as glob from 'glob'; +import * as Mocha from 'mocha'; +import * as path from 'path'; // tslint:disable-next-line: export-name export function run(): Promise { diff --git a/src/usbDetector.ts b/src/usbDetector.ts index 44989781e..e4df1200f 100644 --- a/src/usbDetector.ts +++ b/src/usbDetector.ts @@ -3,13 +3,13 @@ // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes. -import * as os from "os"; import * as fs from "fs"; +import * as os from "os"; import * as path from "path"; -import * as utils from "./extension_utils/utils"; import * as vscode from "vscode"; -import { SerialMonitor } from "./serialMonitor"; import { CONFIG_KEYS } from "./constants"; +import * as utils from "./extension_utils/utils"; +import { SerialMonitor } from "./serialMonitor"; export class UsbDetector { public static getInstance(): UsbDetector { diff --git a/src/view/App.tsx b/src/view/App.tsx index 6b3a906c2..e59eb8ed5 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -3,8 +3,8 @@ "use strict"; import * as React from "react"; -import Device from "./container/device/Device" import "./App.css"; +import Device from "./container/device/Device" class App extends React.Component { render() { diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx index 973138104..87baa716c 100644 --- a/src/view/components/Simulator.tsx +++ b/src/view/components/Simulator.tsx @@ -2,12 +2,12 @@ // Licensed under the MIT license. import * as React from "react"; -import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; -import CpxImage, { updateSwitch, updatePinTouch } from "./cpx/CpxImage"; +import { CONSTANTS } from "../constants"; import PlayLogo from "../svgs/play_svg"; import StopLogo from "../svgs/stop_svg"; +import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; +import CpxImage, { updatePinTouch, updateSwitch } from "./cpx/CpxImage"; import Dropdown from "./Dropdown"; -import { CONSTANTS } from "../constants"; import ActionBar from "./simulator/ActionBar" @@ -351,7 +351,7 @@ class Simulator extends React.Component { private handleTouchPinClick(pin: HTMLElement, active: boolean): any { let cpxState = this.state.cpx; const pinIndex = parseInt(pin.id.charAt(pin.id.length - 1)) - 1; - let pinState = cpxState.touch; + const pinState = cpxState.touch; pinState[pinIndex] = active; cpxState = { ...cpxState, touch: pinState }; this.setState({ ...this.state, ...cpxState }); diff --git a/src/view/components/cpx/CpxImage.tsx b/src/view/components/cpx/CpxImage.tsx index 71baf6ecd..7f7a1137c 100644 --- a/src/view/components/cpx/CpxImage.tsx +++ b/src/view/components/cpx/CpxImage.tsx @@ -2,11 +2,11 @@ // Licensed under the MIT license. import * as React from "react"; +import CONSTANTS from "../../constants"; +import accessibility from "./Accessibility_utils"; import CPX_SVG from "./Cpx_svg"; import * as SvgStyle from "./Cpx_svg_style"; -import CONSTANTS from "../../constants"; import svg from "./Svg_utils"; -import accessibility from "./Accessibility_utils"; interface IProps { pixels: number[][]; @@ -79,7 +79,7 @@ const makeButton = ( }; const initSvgStyle = (svgElement: HTMLElement, brightness: number): void => { - let style: SVGStyleElement = svg.child( + const style: SVGStyleElement = svg.child( svgElement, "style", {} diff --git a/src/view/components/cpx/Cpx_svg_style.tsx b/src/view/components/cpx/Cpx_svg_style.tsx index f0fb41f9d..0ceb6d7e5 100644 --- a/src/view/components/cpx/Cpx_svg_style.tsx +++ b/src/view/components/cpx/Cpx_svg_style.tsx @@ -26,15 +26,15 @@ export const POWER_LED_OFF: string = "#FFFFFF"; export function rgbToHsl( rgb: [number, number, number] ): [number, number, number] { - let [r, g, b] = rgb; - let [r$, g$, b$] = [r / 255, g / 255, b / 255]; - let cMin = Math.min(r$, g$, b$); - let cMax = Math.max(r$, g$, b$); - let cDelta = cMax - cMin; + const [r, g, b] = rgb; + const [r$, g$, b$] = [r / 255, g / 255, b / 255]; + const cMin = Math.min(r$, g$, b$); + const cMax = Math.max(r$, g$, b$); + const cDelta = cMax - cMin; let h: number = 0, s: number, l: number; - let maxAndMin = cMax + cMin; + const maxAndMin = cMax + cMin; // Luminosity l = (maxAndMin / 2) * 100; @@ -57,8 +57,8 @@ export function rgbToHsl( } // Saturation - if (l > 50) s = 100 * (cDelta / (2 - maxAndMin)); - else s = 100 * (cDelta / maxAndMin); + if (l > 50) { s = 100 * (cDelta / (2 - maxAndMin)); } + else { s = 100 * (cDelta / maxAndMin); } } return [Math.floor(h), Math.floor(s), Math.floor(l)]; diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx index 5ff52c64a..2b0e8cdb8 100644 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ b/src/view/components/toolbar/LightSensorBar.tsx @@ -2,9 +2,9 @@ // Licensed under the MIT license. import * as React from "react"; -import InputSlider from "./InputSlider"; import "../../styles/LightSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; +import InputSlider from "./InputSlider"; const LIGHT_SLIDER_PROPS: ISliderProps = { maxValue: 255, diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx index 3dcdba145..d103a0450 100644 --- a/src/view/components/toolbar/MotionSensorBar.tsx +++ b/src/view/components/toolbar/MotionSensorBar.tsx @@ -5,15 +5,15 @@ import * as React from "react"; import InputSlider from "./InputSlider"; import SensorButton from "./SensorButton"; +import { CONSTANTS } from "../../constants"; +import "../../styles/MotionSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX, - Z_SLIDER_INDEX, - Y_SLIDER_INDEX + Y_SLIDER_INDEX, + Z_SLIDER_INDEX } from "../../viewUtils"; -import "../../styles/MotionSensorBar.css"; -import { CONSTANTS } from "../../constants"; interface vscode { postMessage(message: any): void; diff --git a/src/view/components/toolbar/SensorButton.tsx b/src/view/components/toolbar/SensorButton.tsx index 8726cf1a4..6b79cd1be 100644 --- a/src/view/components/toolbar/SensorButton.tsx +++ b/src/view/components/toolbar/SensorButton.tsx @@ -2,8 +2,8 @@ // Licensed under the MIT license. import * as React from "react"; -import { ISensorButtonProps } from "../../viewUtils"; import "../../styles/SensorButton.css"; +import { ISensorButtonProps } from "../../viewUtils"; const SensorButton: React.FC = props => { return ( diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index cb4c60665..c10d6b8c0 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -1,12 +1,12 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import LightSensorBar from "./LightSensorBar"; -import TemperatureSensorBar from "./TemperatureSensorBar"; -import MotionSensorBar from "./MotionSensorBar"; import * as React from "react"; +import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg"; import { TAG_INPUT_SVG } from "../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../svgs/tag_output_svg"; -import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg"; +import LightSensorBar from "./LightSensorBar"; +import MotionSensorBar from "./MotionSensorBar"; +import TemperatureSensorBar from "./TemperatureSensorBar"; export const TRY_IT_MAKE_CODE = (
diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx index d5ca66a1f..db4687ee4 100644 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ b/src/view/components/toolbar/TemperatureSensorBar.tsx @@ -2,9 +2,9 @@ // Licensed under the MIT license. import * as React from "react"; -import InputSlider from "./InputSlider"; -import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import "../../styles/TemperatureSensorBar.css"; +import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; +import InputSlider from "./InputSlider"; const TEMPERATURE_SLIDER_PROPS: ISliderProps = { axisLabel: " ", diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index c009a4d8b..0e755506c 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -1,14 +1,14 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. import * as React from "react"; -import Button from "../Button"; +import { FormattedMessage, injectIntl, WrappedComponentProps } from "react-intl"; import "../../styles/ToolBar.css"; +import Button from "../Button"; import { - LABEL_TO_MODAL_CONTENT, DEFAULT_MODAL_CONTENT, IModalContent, + LABEL_TO_MODAL_CONTENT, } from "./SensorModalUtils"; -import { FormattedMessage, injectIntl, WrappedComponentProps } from "react-intl"; interface IToolbarState { currentOpenedId: string; diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index 4f69f0ba3..437f435d4 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -1,13 +1,13 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. -import Simulator from "../../components/Simulator"; -import ToolBar from "../../components/toolbar/ToolBar"; import * as React from "react"; -import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; +import Simulator from "../../components/Simulator"; import { TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; +import ToolBar from "../../components/toolbar/ToolBar"; +import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{ label: TOOLBAR_ICON_ID.SWITCH, diff --git a/src/view/index.tsx b/src/view/index.tsx index d5a969aa8..7bac57e1e 100644 --- a/src/view/index.tsx +++ b/src/view/index.tsx @@ -3,8 +3,8 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import App from "./App"; import { IntlProvider } from "react-intl"; +import App from "./App"; import "./index.css"; From b5f590b3020ba65bac3c32d8170bda83a3114e5e Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 14:12:30 -0800 Subject: [PATCH 14/18] Disable rule for implicit jsx boolean value --- tslint.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tslint.json b/tslint.json index 446cbd4fb..5d5a3f741 100644 --- a/tslint.json +++ b/tslint.json @@ -23,7 +23,8 @@ "ordered-imports": true, "import-name":false, "member-access":false, - "no-console":false + "no-console":false, + "jsx-boolean-value":false }, "defaultSeverity": "warning" } From 5d06eed4456a4a84783419aeecbc622f5b24efbb Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 14:19:49 -0800 Subject: [PATCH 15/18] Add description for device container --- src/view/container/device/Device.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index 437f435d4..fa224496a 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -10,45 +10,45 @@ import ToolBar from "../../components/toolbar/ToolBar"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{ + image: TOOLBAR_SVG.SLIDER_SWITCH_SVG, label: TOOLBAR_ICON_ID.SWITCH, - image: TOOLBAR_SVG.SLIDER_SWITCH_SVG }, { + image: TOOLBAR_SVG.PUSH_BUTTON_SVG, label: TOOLBAR_ICON_ID.PUSH_BUTTON, - image: TOOLBAR_SVG.PUSH_BUTTON_SVG }, { + image: TOOLBAR_SVG.RED_LED_SVG, label: TOOLBAR_ICON_ID.RED_LED, - image: TOOLBAR_SVG.RED_LED_SVG }, { + image: TOOLBAR_SVG.SOUND_SVG, label: TOOLBAR_ICON_ID.SOUND, - image: TOOLBAR_SVG.SOUND_SVG } , { + image: TOOLBAR_SVG.TEMPERATURE_SVG, label: TOOLBAR_ICON_ID.TEMPERATURE, - image: TOOLBAR_SVG.TEMPERATURE_SVG }, { + image: TOOLBAR_SVG.LIGHT_SVG, label: TOOLBAR_ICON_ID.LIGHT, - image: TOOLBAR_SVG.LIGHT_SVG } , { + image: TOOLBAR_SVG.NEO_PIXEL_SVG, label: TOOLBAR_ICON_ID.NEO_PIXEL, - image: TOOLBAR_SVG.NEO_PIXEL_SVG }, { + image: TOOLBAR_SVG.SPEAKER_SVG, label: TOOLBAR_ICON_ID.SPEAKER, - image: TOOLBAR_SVG.SPEAKER_SVG }, { + image: TOOLBAR_SVG.MOTION_SVG, label: TOOLBAR_ICON_ID.MOTION, - image: TOOLBAR_SVG.MOTION_SVG }, { + image: TOOLBAR_SVG.IR_SVG, label: TOOLBAR_ICON_ID.IR, - image: TOOLBAR_SVG.IR_SVG }, { + image: TOOLBAR_SVG.GPIO_SVG, label: TOOLBAR_ICON_ID.GPIO, - image: TOOLBAR_SVG.GPIO_SVG -} +}] +// Container to switch between multiple devices -] class Device extends React.Component { render() { return ( From f78653ed188922388e776eb8b3157d4144727df1 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 16:22:31 -0800 Subject: [PATCH 16/18] Fix single line props for more clarity --- src/view/components/Dropdown.tsx | 1 + src/view/components/Simulator.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/view/components/Dropdown.tsx b/src/view/components/Dropdown.tsx index d84c09cf3..44832c137 100644 --- a/src/view/components/Dropdown.tsx +++ b/src/view/components/Dropdown.tsx @@ -2,6 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; + import { CONSTANTS } from "../constants"; import "../styles/Dropdown.css"; diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx index 87baa716c..7077d6e8f 100644 --- a/src/view/components/Simulator.tsx +++ b/src/view/components/Simulator.tsx @@ -167,7 +167,10 @@ class Simulator extends React.Component { onMouseLeave={this.onMouseLeave} />
- +
); } From a3b6e3132db36d86f88aa3308027ba835e68847a Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 21 Jan 2020 16:44:01 -0800 Subject: [PATCH 17/18] Add space after colon in actionbar --- src/view/components/simulator/ActionBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx index 01e776b32..35b181277 100644 --- a/src/view/components/simulator/ActionBar.tsx +++ b/src/view/components/simulator/ActionBar.tsx @@ -9,7 +9,7 @@ import Button from "../Button"; interface IProps{ onTogglePlay: (event: React.MouseEvent) => void, onToggleRefresh: (event: React.MouseEvent) => void, - playStopImage:JSX.Element + playStopImage: JSX.Element } // Component including the actions done on the Simulator (play/stop, refresh) From 5ddb8229da2c9d455fa8fb9b01b3c238cae015a2 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Wed, 22 Jan 2020 10:55:00 -0800 Subject: [PATCH 18/18] Linting and adding spaces for cleaner code --- src/view/components/Simulator.tsx | 4 +- src/view/components/cpx/Cpx_svg_style.tsx | 65 +++++++++++------------ src/view/container/device/Device.tsx | 27 +++++----- src/view/styles/ToolBar.css | 1 + 4 files changed, 46 insertions(+), 51 deletions(-) diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx index 7077d6e8f..ca3f11aa1 100644 --- a/src/view/components/Simulator.tsx +++ b/src/view/components/Simulator.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { CONSTANTS } from "../constants"; +import "../styles/Simulator.css"; import PlayLogo from "../svgs/play_svg"; import StopLogo from "../svgs/stop_svg"; import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style"; @@ -10,9 +11,6 @@ import CpxImage, { updatePinTouch, updateSwitch } from "./cpx/CpxImage"; import Dropdown from "./Dropdown"; import ActionBar from "./simulator/ActionBar" - -import "../styles/Simulator.css"; - interface ICpxState { pixels: number[][]; brightness: number; diff --git a/src/view/components/cpx/Cpx_svg_style.tsx b/src/view/components/cpx/Cpx_svg_style.tsx index 0ceb6d7e5..4be0439c7 100644 --- a/src/view/components/cpx/Cpx_svg_style.tsx +++ b/src/view/components/cpx/Cpx_svg_style.tsx @@ -24,44 +24,43 @@ export const POWER_LED_OFF: string = "#FFFFFF"; // Adapted from : https://github.com/microsoft/pxt/blob/master/pxtsim/simlib.ts export function rgbToHsl( - rgb: [number, number, number] + rgb: [number, number, number] ): [number, number, number] { - const [r, g, b] = rgb; - const [r$, g$, b$] = [r / 255, g / 255, b / 255]; - const cMin = Math.min(r$, g$, b$); - const cMax = Math.max(r$, g$, b$); - const cDelta = cMax - cMin; - let h: number = 0, - s: number, - l: number; - const maxAndMin = cMax + cMin; + const [r, g, b] = rgb; + const [r$, g$, b$] = [r / 255, g / 255, b / 255]; + const cMin = Math.min(r$, g$, b$); + const cMax = Math.max(r$, g$, b$); + const cDelta = cMax - cMin; + let h: number = 0, + s: number, + l: number; + const maxAndMin = cMax + cMin; - // Luminosity - l = (maxAndMin / 2) * 100; + // Luminosity + l = (maxAndMin / 2) * 100; - if (cDelta === 0) { - s = 0; - h = 0; - } else { - // Hue - switch (cMax) { - case r$: - h = 60 * (((g$ - b$) / cDelta) % 6); - break; - case g$: - h = 60 * ((b$ - r$) / cDelta + 2); - break; - case b$: - h = 60 * ((r$ - g$) / cDelta + 4); - break; - } + if (cDelta === 0) { + s = 0; + h = 0; + } else { + // Hue + switch (cMax) { + case r$: + h = 60 * (((g$ - b$) / cDelta) % 6); + break; + case g$: + h = 60 * ((b$ - r$) / cDelta + 2); + break; + case b$: + h = 60 * ((r$ - g$) / cDelta + 4); + break; + } - // Saturation - if (l > 50) { s = 100 * (cDelta / (2 - maxAndMin)); } - else { s = 100 * (cDelta / maxAndMin); } - } + // Saturation + l > 50 ? s = 100 * (cDelta / (2 - maxAndMin)) : s = 100 * (cDelta / maxAndMin); + } - return [Math.floor(h), Math.floor(s), Math.floor(l)]; + return [Math.floor(h), Math.floor(s), Math.floor(l)]; } export const SVG_STYLE = ` diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index fa224496a..7b88550b1 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -12,37 +12,34 @@ import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; const CPX_TOOLBAR_BUTTONS: Array<{ label: any, image: any }> = [{ image: TOOLBAR_SVG.SLIDER_SWITCH_SVG, label: TOOLBAR_ICON_ID.SWITCH, -}, { +},{ image: TOOLBAR_SVG.PUSH_BUTTON_SVG, label: TOOLBAR_ICON_ID.PUSH_BUTTON, -}, -{ +},{ image: TOOLBAR_SVG.RED_LED_SVG, label: TOOLBAR_ICON_ID.RED_LED, -}, { +},{ image: TOOLBAR_SVG.SOUND_SVG, label: TOOLBAR_ICON_ID.SOUND, -} - , { - image: TOOLBAR_SVG.TEMPERATURE_SVG, +},{ + image: TOOLBAR_SVG.TEMPERATURE_SVG, label: TOOLBAR_ICON_ID.TEMPERATURE, -}, { +},{ image: TOOLBAR_SVG.LIGHT_SVG, label: TOOLBAR_ICON_ID.LIGHT, -} - , { - image: TOOLBAR_SVG.NEO_PIXEL_SVG, +},{ + image: TOOLBAR_SVG.NEO_PIXEL_SVG, label: TOOLBAR_ICON_ID.NEO_PIXEL, -}, { +},{ image: TOOLBAR_SVG.SPEAKER_SVG, label: TOOLBAR_ICON_ID.SPEAKER, -}, { +},{ image: TOOLBAR_SVG.MOTION_SVG, label: TOOLBAR_ICON_ID.MOTION, -}, { +},{ image: TOOLBAR_SVG.IR_SVG, label: TOOLBAR_ICON_ID.IR, -}, { +},{ image: TOOLBAR_SVG.GPIO_SVG, label: TOOLBAR_ICON_ID.GPIO, }] diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index e913f4832..c9087130e 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -15,6 +15,7 @@ border-width: 1px; border-style: solid; } + .toolbar-icon { box-shadow: 0px 0px 20px rgba(0, 0, 0, 30%); border-color: var(--vscode-highContrastButtonBorderOverride-color);