Prefer touch events to pointer events (fix android image editor)

[jwunderl]

Fixes microsoft/pxt-arcade#379

Would be good to test on chromebook and physical android device / windows with touchscreen with a target build of arcade

Issue is that the browsers were using the pointer events when they should have been using touch events.

Broken / current:

Fixed:

testing:

• chrome - mac, no touch screen
• chrome - android emulator
• firefox - mac
• safari - mac
• safari - ipad simulator
• chrome - android hardware
• [ ] chrome - touchscreen on chromebook don't have a touchscreen chromebook but should match android?
• chrome - touchscreen on windows
• edge - touchscreen on windows
• firefox - touchscreen on windows

[jwunderl]

Works on all the above except for edge; edge seems to be ignoring the stopPropogation on drag events and treating the left / right touch drags like forward / back browser buttons. (exact same behavior as current live site, except maybe a tiny bit better in that you can draw upwards and downwards)

[riknoll]

@jwunderl you probably need to call e.preventDefault()

[jwunderl]

Oops, yeah said the wrong one; that should be being called in the drag as well though:

pxt/pxtlib/sprite-editor/canvasGrid.ts

Lines 355 to 366 in dca2ad9

	private moveHandler = (ev: MouseEvent) => {
	const [col, row] = this.clientEventToCell(ev);
	if (col >= 0 && row >= 0 && col < this.image.width && row < this.image.height) {
	if (ev.buttons & 1) {
	this.gesture.handle(InputEvent.Down, col, row);
	}
	this.gesture.handle(InputEvent.Move, col, row);
	}
	ev.stopPropagation();
	ev.preventDefault();
	}