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

Commit 44daa13

Browse files
committed
Freeze buttons on svg
1 parent da18aa7 commit 44daa13

File tree

5 files changed

+39
-14
lines changed

5 files changed

+39
-14
lines changed

package-lock.json

Lines changed: 0 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,6 @@
313313
"svg-inline-react": "^3.1.0",
314314
"ts-jest": "^25.0.0",
315315
"util": "^0.12.1",
316-
"vscode-debugprotocol": "^1.28.0",
317316
"vscode-extension-telemetry": "^0.1.1",
318317
"vscode-nls": "^4.1.0"
319318
},

src/view/components/microbit/MicrobitImage.tsx

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33

44
import * as React from "react";
55
import "../../styles/Microbit.css";
6-
import { MicrobitSvg } from "./Microbit_svg";
6+
import { MicrobitSvg, IRefObject } from "./Microbit_svg";
7+
import { ViewStateContext } from "../../context";
8+
import { VIEW_STATE } from "../../constants";
79

810
interface EventTriggers {
911
onMouseUp: (event: Event, buttonKey: string) => void;
@@ -15,6 +17,11 @@ interface IProps {
1517
leds: number[][];
1618
}
1719

20+
const BUTTON_CLASSNAME = {
21+
ACTIVE: "sim-button-outer",
22+
DEACTIVATED: "sim-button-deactivated",
23+
};
24+
1825
// Displays the SVG and call necessary svg modification.
1926
export class MicrobitImage extends React.Component<IProps, {}> {
2027
private svgRef: React.RefObject<MicrobitSvg> = React.createRef();
@@ -31,17 +38,28 @@ export class MicrobitImage extends React.Component<IProps, {}> {
3138
componentDidUpdate() {
3239
if (this.svgRef.current) {
3340
updateAllLeds(this.props.leds, this.svgRef.current.getLeds());
41+
if (this.context === VIEW_STATE.PAUSE) {
42+
disableAllButtons(this.svgRef.current.getButtons());
43+
} else if (this.context === VIEW_STATE.RUNNING) {
44+
setupAllButtons(
45+
this.props.eventTriggers,
46+
this.svgRef.current.getButtons()
47+
);
48+
}
3449
}
3550
}
3651
render() {
3752
return <MicrobitSvg ref={this.svgRef} />;
3853
}
3954
}
55+
56+
MicrobitImage.contextType = ViewStateContext;
4057
const setupButton = (
41-
buttonElement: HTMLElement,
58+
buttonElement: SVGRectElement,
4259
eventTriggers: EventTriggers,
4360
key: string
4461
) => {
62+
buttonElement.setAttribute("class", BUTTON_CLASSNAME.ACTIVE);
4563
buttonElement.onmousedown = e => {
4664
eventTriggers.onMouseDown(e, key);
4765
};
@@ -51,14 +69,30 @@ const setupButton = (
5169
buttonElement.onmouseleave = e => {
5270
eventTriggers.onMouseLeave(e, key);
5371
};
72+
console.log("buttons should be enabled");
5473
};
55-
const setupAllButtons = (eventTriggers: EventTriggers, buttonRefs: Object) => {
74+
const setupAllButtons = (
75+
eventTriggers: EventTriggers,
76+
buttonRefs: IRefObject
77+
) => {
5678
for (const [key, ref] of Object.entries(buttonRefs)) {
5779
if (ref.current) {
5880
setupButton(ref.current, eventTriggers, key);
5981
}
6082
}
6183
};
84+
const disableAllButtons = (buttonRefs: IRefObject) => {
85+
for (const [key, ref] of Object.entries(buttonRefs)) {
86+
if (ref.current) {
87+
// to implement
88+
ref.current.onmousedown = null;
89+
ref.current.onmouseup = null;
90+
ref.current.onmouseleave = null;
91+
ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);
92+
console.log("buttons should be disabled");
93+
}
94+
}
95+
};
6296
const updateAllLeds = (
6397
leds: number[][],
6498
ledRefs: Array<Array<React.RefObject<SVGRectElement>>>

src/view/components/microbit/Microbit_svg.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// Adapted from : https://makecode.microbit.org/#editor
55

66
import * as React from "react";
7-
interface IRefObject {
7+
export interface IRefObject {
88
[key: string]: React.RefObject<SVGRectElement>;
99
}
1010
/* tslint:disable */

src/view/styles/Microbit.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ svg.sim.grayscale {
2222
.sim-button:active {
2323
fill: orange;
2424
}
25+
2526
.sim-board,
2627
.sim-display,
2728
sim-button {
@@ -146,10 +147,6 @@ sim-button {
146147
.sim-pin:focus,
147148
.sim-thermometer:focus,
148149
.sim-shake:focus,
149-
.sim-light-level-button:focus {
150-
stroke: #4d90fe;
151-
stroke-width: 5px !important;
152-
}
153150
.no-drag,
154151
.sim-text,
155152
.sim-text-pin {

0 commit comments

Comments
 (0)