Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(android): fire touch events synchronously #12340

Merged
merged 4 commits into from Dec 15, 2020

Conversation

jquick-axway
Copy link
Contributor

@jquick-axway jquick-axway commented Dec 12, 2020

JIRA:
https://jira.appcelerator.org/browse/TIMOB-28286

Summary:
Modified touchstart, touchmove, touchend, and touchcancel events to fire immediately/synchronously like iOS. Needed to implement drag-and-drop interface so it won't look jumpy/laggy.


Test 1:

  1. Build and run the below on Android.
  2. Drag one of the squares onscreen.
  3. Verify the square drags smoothly under your finger.
function createDragSquare(top, left, color) {
	var view = Ti.UI.createView({
		touchEnabled: true,
		backgroundColor: color,
		center: { x: left + 50, y: top + 50 },
		width: 100,
		height: 100,
	});
	view.addEventListener("touchmove", function(event) {
		view.center = view.convertPointToView({ x: event.x, y: event.y }, window);
		event.cancelBubble = true;
	});
	return view;
}

var window = Ti.UI.createWindow({ backgroundColor: "white" });
window.add(createDragSquare(40, 40, "red"));
window.add(createDragSquare(120, 120, "green"));
window.add(createDragSquare(200, 200, "blue"));
window.open();

Test 2:
(Verifies touch events bubbled to parent.)

  1. Build and run the below on Android.
  2. Drag the blue square onscreen
  3. Verify the blue square drags smoothly under your finger.
  4. Drag your finger on the white background.
  5. Verify a green square drags smoothly under you finger.
const window = Ti.UI.createWindow({ backgroundColor: "white" });
const view1 = Ti.UI.createView({
	backgroundColor: "blue",
	width: 150,
	height: 150,
});
window.add(view1);
const view2 = Ti.UI.createView({
	visible: false,
	backgroundColor: "green",
	width: 150,
	height: 150,
});
window.add(view2);
function onTouch(e) {
	if (e.source == view1) {
		view1.center = view1.convertPointToView({ x: e.x, y: e.y }, window);
	} else if (e.source == window) {
		switch (e.type) {
			case "touchstart":
				view2.visible = true;
			case "touchmove":
				view2.center = { x: e.x, y: e.y };
				break;
			default:
				view2.visible = false;
		}
	}
}
window.add(Ti.UI.createLabel({
	text: "Drag Square",
	bottom: "30dp",
	color: "black",
	touchEnabled: false,
}));
window.addEventListener("touchstart", onTouch);
window.addEventListener("touchmove", onTouch);
window.addEventListener("touchend", onTouch);
window.addEventListener("touchcancel", onTouch);
window.open();

@build
Copy link
Contributor

build commented Dec 12, 2020

Messages
📖

💾 Here's the generated SDK zipfile.

📖 ✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖

✅ All tests are passing
Nice one! All 12842 tests are passing.
(There are 897 skipped tests not included in that total)

Generated by 🚫 dangerJS against 2e9229e

Copy link
Contributor

@garymathews garymathews left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR: PASS

@ssjsamir ssjsamir self-requested a review December 15, 2020 15:17
Copy link
Contributor

@ssjsamir ssjsamir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FR Passed, tested using the two test cases mentioned above.

Test Environment

MacOS Big Sur: 11.1 Beta 1
Xcode: 12.2 Beta
Java Version: 1.8.0_242
Android NDK: 21.3.6528147
Node.js: 12.18.1
""NPM":"5.0.0","CLI":"8.1.1""
N3xus 5X API 29 (emulator) 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants