c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use pointerevents if available

Browse Source
This commit is contained in:
Peli de Halleux 2016-04-11 10:58:09 -07:00
parent 9daf6ad9fc
commit c2c765098d
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
sim/simsvg.ts
View File

@ -47,6 +47,18 @@ namespace pxsim.micro_bit {
disableTilt?:boolean; disableTilt?:boolean;
} }
const pointerEvents = !!(window as any).PointerEvent ? {
up: "pointerup",
down: "pointerdown",
move: "pointermove",
leave: "pointerleave"
} : {
up: "mouseup",
down: "mousedown",
move: "mousemove",
leave: "mouseleave"
};
export class MicrobitBoardSvg export class MicrobitBoardSvg
{ {
public element : SVGSVGElement; public element : SVGSVGElement;
@ -138,15 +150,15 @@ namespace pxsim.micro_bit {
if (state.useShake && !this.shakeButton) { if (state.useShake && !this.shakeButton) {
this.shakeButton = Svg.child(this.g, "circle", {cx:380, cy:100, r:16.5}) as SVGCircleElement; this.shakeButton = Svg.child(this.g, "circle", {cx:380, cy:100, r:16.5}) as SVGCircleElement;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp) Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp)
this.shakeButton.addEventListener("mousedown", ev => { this.shakeButton.addEventListener(pointerEvents.down, ev => {
let state = this.board; let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.buttonDown); Svg.fill(this.shakeButton, this.props.theme.buttonDown);
}) })
this.shakeButton.addEventListener("mouseleave", ev => { this.shakeButton.addEventListener(pointerEvents.leave, ev => {
let state = this.board; let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp); Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
}) })
this.shakeButton.addEventListener("mouseup", ev => { this.shakeButton.addEventListener(pointerEvents.up, ev => {
let state = this.board; let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp); Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE
@ -571,7 +583,7 @@ svg.sim.grayscale {
} }
} }
let tiltDecayer = 0; let tiltDecayer = 0;
this.element.addEventListener("mousemove", (ev: MouseEvent) => { this.element.addEventListener(pointerEvents.move, (ev: MouseEvent) => {
let state = this.board; let state = this.board;
if (!state.accelerometer.isActive) return; if (!state.accelerometer.isActive) return;
@ -591,7 +603,7 @@ svg.sim.grayscale {
state.accelerometer.update(x,y,z); state.accelerometer.update(x,y,z);
this.updateTilt(); this.updateTilt();
}, false); }, false);
this.element.addEventListener("mouseleave", (ev: MouseEvent) => { this.element.addEventListener(pointerEvents.leave, (ev: MouseEvent) => {
let state = this.board; let state = this.board;
if (!state.accelerometer.isActive) return; if (!state.accelerometer.isActive) return;
@ -655,17 +667,17 @@ svg.sim.grayscale {
}); });
}) })
this.pins.slice(0,3).forEach((btn, index) => { this.pins.slice(0,3).forEach((btn, index) => {
btn.addEventListener("mousedown", ev => { btn.addEventListener(pointerEvents.down, ev => {
let state = this.board; let state = this.board;
state.pins[index].touched = true; state.pins[index].touched = true;
this.updatePin(state.pins[index], index); this.updatePin(state.pins[index], index);
}) })
btn.addEventListener("mouseleave", ev => { btn.addEventListener(pointerEvents.leave, ev => {
let state = this.board; let state = this.board;
state.pins[index].touched = false; state.pins[index].touched = false;
this.updatePin(state.pins[index], index); this.updatePin(state.pins[index], index);
}) })
btn.addEventListener("mouseup", ev => { btn.addEventListener(pointerEvents.up, ev => {
let state = this.board; let state = this.board;
state.pins[index].touched = false; state.pins[index].touched = false;
this.updatePin(state.pins[index], index); this.updatePin(state.pins[index], index);
@ -673,17 +685,17 @@ svg.sim.grayscale {
}) })
}) })
this.buttonsOuter.slice(0,2).forEach((btn, index) => { this.buttonsOuter.slice(0,2).forEach((btn, index) => {
btn.addEventListener("mousedown", ev => { btn.addEventListener(pointerEvents.down, ev => {
let state = this.board; let state = this.board;
state.buttons[index].pressed = true; state.buttons[index].pressed = true;
Svg.fill(this.buttons[index], this.props.theme.buttonDown); Svg.fill(this.buttons[index], this.props.theme.buttonDown);
}) })
btn.addEventListener("mouseleave", ev => { btn.addEventListener(pointerEvents.leave, ev => {
let state = this.board; let state = this.board;
state.buttons[index].pressed = false; state.buttons[index].pressed = false;
Svg.fill(this.buttons[index], this.props.theme.buttonUp); Svg.fill(this.buttons[index], this.props.theme.buttonUp);
}) })
btn.addEventListener("mouseup", ev => { btn.addEventListener(pointerEvents.up, ev => {
let state = this.board; let state = this.board;
state.buttons[index].pressed = false; state.buttons[index].pressed = false;
Svg.fill(this.buttons[index], this.props.theme.buttonUp); Svg.fill(this.buttons[index], this.props.theme.buttonUp);
@ -691,7 +703,7 @@ svg.sim.grayscale {
this.board.bus.queue(state.buttons[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK); this.board.bus.queue(state.buttons[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK);
}) })
}) })
this.buttonsOuter[2].addEventListener("mousedown", ev => { this.buttonsOuter[2].addEventListener(pointerEvents.down, ev => {
let state = this.board; let state = this.board;
state.buttons[0].pressed = true; state.buttons[0].pressed = true;
state.buttons[1].pressed = true; state.buttons[1].pressed = true;
@ -700,7 +712,7 @@ svg.sim.grayscale {
Svg.fill(this.buttons[1], this.props.theme.buttonDown); Svg.fill(this.buttons[1], this.props.theme.buttonDown);
Svg.fill(this.buttons[2], this.props.theme.buttonDown); Svg.fill(this.buttons[2], this.props.theme.buttonDown);
}) })
this.buttonsOuter[2].addEventListener("mouseleave", ev => { this.buttonsOuter[2].addEventListener(pointerEvents.leave, ev => {
let state = this.board; let state = this.board;
state.buttons[0].pressed = false; state.buttons[0].pressed = false;
state.buttons[1].pressed = false; state.buttons[1].pressed = false;
@ -709,7 +721,7 @@ svg.sim.grayscale {
Svg.fill(this.buttons[1], this.props.theme.buttonUp); Svg.fill(this.buttons[1], this.props.theme.buttonUp);
Svg.fill(this.buttons[2], this.props.theme.virtualButtonUp); Svg.fill(this.buttons[2], this.props.theme.virtualButtonUp);
}) })
this.buttonsOuter[2].addEventListener("mouseup", ev => { this.buttonsOuter[2].addEventListener(pointerEvents.up, ev => {
let state = this.board; let state = this.board;
state.buttons[0].pressed = false; state.buttons[0].pressed = false;
state.buttons[1].pressed = false; state.buttons[1].pressed = false;