Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

Commit

Permalink
Merge pull request #325 from microsoft/users/t-xunguy/typescript
Browse files Browse the repository at this point in the history 
Upgrade to latest version of Typescript
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Apr 14, 2020
2 parents 4840ad6 + 72bfc75 commit 3546119
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 205 deletions.
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
"type": "boolean",
"default": false,
"description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%",
"scope": "resource"
"scope": "resource"
}
}
},
Expand Down Expand Up @@ -286,7 +286,7 @@
"tslint-microsoft-contrib": "^6.1.0",
"tslint-react": "^3.6.0",
"tslint-react-hooks": "^2.0.0",
"typescript": "^3.3.1",
"typescript": "^3.8.3",
"typescript-react-intl": "^0.4.0",
"version-from-git": "^1.1.1",
"vsce": "^1.47.0",
Expand Down
2 changes: 1 addition & 1 deletion src/extension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ export async function activate(context: vscode.ExtensionContext) {
// base_64 strings on UNIX systems.

// added any incomplete data to beginning
let processedData = pythonProcessDataBuffer
const processedData = pythonProcessDataBuffer
.join("")
.concat(dataFromTheProcess);
pythonProcessDataBuffer = [];
Expand Down
54 changes: 23 additions & 31 deletions src/view/components/clue/ClueImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { ClueSvg, IRefObject } from "./Clue_svg";
interface EventTriggers {
onMouseUp: (event: Event, buttonKey: string) => void;
onMouseDown: (event: Event, buttonKey: string) => void;
onMouseLeave: (event: Event, buttonKey: string) => void;
onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void;
}
interface IProps {
Expand Down Expand Up @@ -42,15 +41,13 @@ export class ClueImage extends React.Component<IProps, {}> {
}
}
componentDidUpdate() {
if (this.svgRef.current) {
if (this.context === VIEW_STATE.PAUSE) {
disableAllButtons(this.svgRef.current.getButtons());
} else if (this.context === VIEW_STATE.RUNNING) {
setupAllButtons(
this.props.eventTriggers,
this.svgRef.current.getButtons()
);
}
if (this.context === VIEW_STATE.PAUSE && this.svgRef.current) {
disableAllButtons(this.svgRef.current.getButtons());
} else if (this.context === VIEW_STATE.RUNNING && this.svgRef.current) {
setupAllButtons(
this.props.eventTriggers,
this.svgRef.current.getButtons()
);
}
}
componentWillUnmount() {
Expand Down Expand Up @@ -89,24 +86,22 @@ export class ClueImage extends React.Component<IProps, {}> {
);
}
public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) {
if (this.svgRef.current) {
const button = this.svgRef.current.getButtons()[key].current;
if (button) {
button.focus();
if (isActive) {
button.children[0].setAttribute(
"class",
BUTTON_STYLING_CLASSES.KEYPRESSED
);
} else {
button.children[0].setAttribute(
"class",
BUTTON_STYLING_CLASSES.DEFAULT
);
}
button.setAttribute("pressed", `${isActive}`);
button.setAttribute("aria-pressed", `${isActive}`);
const button = this.svgRef.current?.getButtons()[key].current;
if (button) {
button.focus();
if (isActive) {
button.children[0].setAttribute(
"class",
BUTTON_STYLING_CLASSES.KEYPRESSED
);
} else {
button.children[0].setAttribute(
"class",
BUTTON_STYLING_CLASSES.DEFAULT
);
}
button.setAttribute("pressed", `${isActive}`);
button.setAttribute("aria-pressed", `${isActive}`);
}
}
}
Expand All @@ -125,9 +120,7 @@ const setupButton = (
buttonElement.onmouseup = e => {
eventTriggers.onMouseUp(e, key);
};
buttonElement.onmouseleave = e => {
eventTriggers.onMouseLeave(e, key);
};

buttonElement.onkeydown = e => {
// ensure that the keydown is enter,
// or else it may register shortcuts twice
Expand Down Expand Up @@ -155,7 +148,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => {
// to implement
ref.current.onmousedown = null;
ref.current.onmouseup = null;
ref.current.onmouseleave = null;
ref.current.onkeydown = null;
ref.current.onkeyup = null;
ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);
Expand Down
74 changes: 32 additions & 42 deletions src/view/components/clue/ClueSimulator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ import {
VIEW_STATE,
WEBVIEW_MESSAGES,
} from "../../constants";
import { ViewStateContext } from "../../context";
import "../../styles/Simulator.css";
import "../../styles/Simulator.css";
import PlayLogo from "../../svgs/play_svg";
import StopLogo from "../../svgs/stop_svg";
import { sendMessage } from "../../utils/MessageUtils";
import ActionBar from "../simulator/ActionBar";
import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
import "../../styles/Simulator.css";
import { ViewStateContext } from "../../context";

export const DEFAULT_CLUE_STATE: IClueState = {
buttons: { button_a: false, button_b: false },
Expand Down Expand Up @@ -128,7 +128,6 @@ export class ClueSimulator extends React.Component<any, IState> {
eventTriggers={{
onMouseDown: this.onMouseDown,
onMouseUp: this.onMouseUp,
onMouseLeave: this.onMouseLeave,
onKeyEvent: this.onKeyEvent,
}}
displayMessage={this.state.clue.displayMessage}
Expand Down Expand Up @@ -194,76 +193,67 @@ export class ClueSimulator extends React.Component<any, IState> {
},
});
};

protected onMouseUp = (event: Event, key: string) => {
event.preventDefault();
this.handleButtonClick(key, false);
};

protected onMouseDown = (event: Event, key: string) => {
event.preventDefault();
this.handleButtonClick(key, true);
};
protected onMouseLeave = (event: Event, key: string) => {
event.preventDefault();
console.log(`To implement onMouseLeave ${key}`);
};

protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
event.stopPropagation();
if (
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
this.context === VIEW_STATE.RUNNING
) {
this.handleButtonClick(key, active);
if (this.imageRef.current) {
if (key === BUTTONS_KEYS.BTN_A) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_A,
active
);
} else if (key === BUTTONS_KEYS.BTN_B) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_B,
active
);
} else if (key === BUTTONS_KEYS.BTN_AB) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_AB,
active
);
}
if (key === BUTTONS_KEYS.BTN_A) {
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_A,
active
);
} else if (key === BUTTONS_KEYS.BTN_B) {
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_B,
active
);
} else if (key === BUTTONS_KEYS.BTN_AB) {
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_AB,
active
);
}
} else if (
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
this.context === VIEW_STATE.RUNNING
) {
this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
if (this.imageRef.current) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_A,
active
);
}
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_A,
active
);
} else if (
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
this.context === VIEW_STATE.RUNNING
) {
this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
if (this.imageRef.current) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_B,
active
);
}
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_B,
active
);
} else if (
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
this.context === VIEW_STATE.RUNNING
) {
this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
if (this.imageRef.current) {
this.imageRef.current.updateButtonAttributes(
BUTTONS_KEYS.BTN_AB,
active
);
}
this.imageRef.current?.updateButtonAttributes(
BUTTONS_KEYS.BTN_AB,
active
);
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) {
this.togglePlayClick();
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) {
Expand Down
73 changes: 33 additions & 40 deletions src/view/components/clue/Clue_svg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
// Licensed under the MIT license.

import * as React from "react";
import { CLUE_LEDS_COLORS, CONSTANTS } from "../../constants";
import "../../styles/SimulatorSvg.css";
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
import { CONSTANTS, CLUE_LEDS_COLORS } from "../../constants";
import svg from "../cpx/Svg_utils";
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
export interface IRefObject {
[key: string]: React.RefObject<SVGRectElement>;
}
Expand Down Expand Up @@ -1124,8 +1124,8 @@ export class ClueSvg extends React.Component<IProps, {}> {
}

private updateDisplay() {
if (this.displayRef.current && this.props.displayImage) {
this.displayRef.current.setAttribute(
if (this.props.displayImage) {
this.displayRef.current?.setAttribute(
"href",
`data:image/png;base64,${this.props.displayImage}`
);
Expand All @@ -1140,52 +1140,45 @@ export class ClueSvg extends React.Component<IProps, {}> {
(255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
(255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;

if (this.ledsRefs.neopixel.current) {
this.ledsRefs.neopixel.current.setAttribute("fill", rgbColor);
}
if (this.gradientRefs.neopixel.current) {
if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
this.gradientRefs.neopixel.current.setAttribute(
"stop-opacity",
"0"
);
} else {
this.gradientRefs.neopixel.current.setAttribute(
"stop-opacity",
"1"
);
}
this.gradientRefs.neopixel.current.setAttribute(
"stop-color",
rgbColor
this.ledsRefs.neopixel.current?.setAttribute("fill", rgbColor);

if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
this.gradientRefs.neopixel.current?.setAttribute(
"stop-opacity",
"0"
);
} else {
this.gradientRefs.neopixel.current?.setAttribute(
"stop-opacity",
"1"
);
}
this.gradientRefs.neopixel.current?.setAttribute(
"stop-color",
rgbColor
);
}
private updateLeds() {
// update white led
const { isWhiteLedOn, isRedLedOn } = this.props.leds;

this.ledsRefs.whiteLeds.map(
(ledRef: React.RefObject<SVGRectElement>) => {
if (ledRef.current && this.gradientRefs.whiteLed.current) {
svg.setLed(
isWhiteLedOn,
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
ledRef.current,
this.gradientRefs.whiteLed.current
);
}
svg.setLed(
isWhiteLedOn,
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
ledRef.current,
this.gradientRefs.whiteLed.current
);
}
);
if (this.ledsRefs.redLed.current && this.gradientRefs.redLed.current) {
svg.setLed(
isRedLedOn,
CLUE_LEDS_COLORS.RED_LED_OFF,
CLUE_LEDS_COLORS.RED_LED_ON,
this.ledsRefs.redLed.current,
this.gradientRefs.redLed.current
);
}
svg.setLed(
isRedLedOn,
CLUE_LEDS_COLORS.RED_LED_OFF,
CLUE_LEDS_COLORS.RED_LED_ON,
this.ledsRefs.redLed.current,
this.gradientRefs.redLed.current
);
}
}
12 changes: 6 additions & 6 deletions src/view/components/cpx/Svg_utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@ namespace svg {
ledStatus: boolean,
offColor: string,
onColor: string,
ledElement: SVGElement,
gradientStopElement: SVGStopElement
ledElement: SVGElement | null,
gradientStopElement: SVGStopElement | null
) {
if (ledStatus) {
ledElement.setAttribute("fill", onColor);
gradientStopElement.setAttribute("stop-opacity", "1");
ledElement?.setAttribute("fill", onColor);
gradientStopElement?.setAttribute("stop-opacity", "1");
} else {
ledElement.setAttribute("fill", offColor);
gradientStopElement.setAttribute("stop-opacity", "0");
ledElement?.setAttribute("fill", offColor);
gradientStopElement?.setAttribute("stop-opacity", "0");
}
}
}
Expand Down
Loading

0 comments on commit 3546119

Please sign in to comment.