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

use pointerevents if available

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

@ -46,6 +46,18 @@ namespace pxsim.micro_bit {
theme?: IBoardTheme;
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
{
@ -138,15 +150,15 @@ namespace pxsim.micro_bit {
if (state.useShake && !this.shakeButton) {
this.shakeButton = Svg.child(this.g, "circle", {cx:380, cy:100, r:16.5}) as SVGCircleElement;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp)
this.shakeButton.addEventListener("mousedown", ev => {
this.shakeButton.addEventListener(pointerEvents.down, ev => {
let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.buttonDown);
})
this.shakeButton.addEventListener("mouseleave", ev => {
this.shakeButton.addEventListener(pointerEvents.leave, ev => {
let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
})
this.shakeButton.addEventListener("mouseup", ev => {
this.shakeButton.addEventListener(pointerEvents.up, ev => {
let state = this.board;
Svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE
@ -571,7 +583,7 @@ svg.sim.grayscale {
}
}
let tiltDecayer = 0;
this.element.addEventListener("mousemove", (ev: MouseEvent) => {
this.element.addEventListener(pointerEvents.move, (ev: MouseEvent) => {
let state = this.board;
if (!state.accelerometer.isActive) return;
@ -591,7 +603,7 @@ svg.sim.grayscale {
state.accelerometer.update(x,y,z);
this.updateTilt();
}, false);
this.element.addEventListener("mouseleave", (ev: MouseEvent) => {
this.element.addEventListener(pointerEvents.leave, (ev: MouseEvent) => {
let state = this.board;
if (!state.accelerometer.isActive) return;
@ -655,17 +667,17 @@ svg.sim.grayscale {
});
})
this.pins.slice(0,3).forEach((btn, index) => {
btn.addEventListener("mousedown", ev => {
btn.addEventListener(pointerEvents.down, ev => {
let state = this.board;
state.pins[index].touched = true;
this.updatePin(state.pins[index], index);
})
btn.addEventListener("mouseleave", ev => {
btn.addEventListener(pointerEvents.leave, ev => {
let state = this.board;
state.pins[index].touched = false;
this.updatePin(state.pins[index], index);
})
btn.addEventListener("mouseup", ev => {
btn.addEventListener(pointerEvents.up, ev => {
let state = this.board;
state.pins[index].touched = false;
this.updatePin(state.pins[index], index);
@ -673,17 +685,17 @@ svg.sim.grayscale {
})
})
this.buttonsOuter.slice(0,2).forEach((btn, index) => {
btn.addEventListener("mousedown", ev => {
btn.addEventListener(pointerEvents.down, ev => {
let state = this.board;
state.buttons[index].pressed = true;
Svg.fill(this.buttons[index], this.props.theme.buttonDown);
})
btn.addEventListener("mouseleave", ev => {
btn.addEventListener(pointerEvents.leave, ev => {
let state = this.board;
state.buttons[index].pressed = false;
Svg.fill(this.buttons[index], this.props.theme.buttonUp);
})
btn.addEventListener("mouseup", ev => {
btn.addEventListener(pointerEvents.up, ev => {
let state = this.board;
state.buttons[index].pressed = false;
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.buttonsOuter[2].addEventListener("mousedown", ev => {
this.buttonsOuter[2].addEventListener(pointerEvents.down, ev => {
let state = this.board;
state.buttons[0].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[2], this.props.theme.buttonDown);
})
this.buttonsOuter[2].addEventListener("mouseleave", ev => {
this.buttonsOuter[2].addEventListener(pointerEvents.leave, ev => {
let state = this.board;
state.buttons[0].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[2], this.props.theme.virtualButtonUp);
})
this.buttonsOuter[2].addEventListener("mouseup", ev => {
this.buttonsOuter[2].addEventListener(pointerEvents.up, ev => {
let state = this.board;
state.buttons[0].pressed = false;
state.buttons[1].pressed = false;