Skip to content

Commit 2625683

Browse files
manoldonevmanoldonev
authored
feat: add ability to pass touch event thru parent view (#6204)
* feat: enhance hit-testing support * refactor(android): update passthroughParent logic as per reqs * refactor: move isPassthroughParentEnabled to LayoutBase * Update view-common.ts * refactor: touchListener logic * refactor: renames * added ui test page
1 parent 86be5b6 commit 2625683

10 files changed

Lines changed: 85 additions & 21 deletions

File tree

‎apps/app/ui-tests-app/layouts/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function loadExamples() {
2121
examples.set("pgrid", "layouts-percent/grid");
2222
examples.set("pstack", "layouts-percent/stack");
2323
examples.set("pwrap", "layouts-percent/wrap");
24+
examples.set("passThroughParent", "layouts/passThroughParent");
2425
examples.set("stacklayout-6059", "layouts/stacklayout-6059");
2526

2627
return examples;

‎apps/app/ui-tests-app/layouts/passThroughParent.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function onOuterWrapLayoutTap() {
2+
console.log("on outer wrap layout tap");
3+
}
4+
5+
export function onStackLayoutThrowTap() {
6+
throw new Error("Should not tap layout with IsPassThroughParentEnabled=true");
7+
}
8+
9+
export function onUserInteractionDisabledTap() {
10+
throw new Error("Should not tap button with IsUserInteractionEnabled=false");
11+
}
12+
13+
export function onDisabledThrowTap() {
14+
throw new Error("Should not tap button with IsEnabled=false");
15+
}
16+
17+
export function onTap() {
18+
console.log("on button tap");
19+
}

‎apps/app/ui-tests-app/layouts/passThroughParent.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page" actionBarHidden="true" xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<WrapLayout tap="onOuterWrapLayoutTap" backgroundColor="#bed3f4">
4+
5+
<StackLayout tap="onStackLayoutThrowTap" backgroundColor="#f3f9db" height="200" isPassThroughParentEnabled="true">
6+
<Label text="isPassThroughParentEnabled='true'" isUserInteractionEnabled="false" />
7+
<Button isUserInteractionEnabled="false" tap="onUserInteractionDisabledThrowTap" text="isUserInteractionEnabled='false'"></Button>
8+
<Button isEnabled="false" tap="onDisabledThrowTap" text="isEnabled='false'"></Button>
9+
<Button tap="onTap" text="TAP"></Button>
10+
</StackLayout>
11+
12+
<StackLayout tap="onStackLayoutThrowTap" style.margin="20" height="300" width="300" backgroundColor="#f5edf7" isPassThroughParentEnabled="true">
13+
<Label text="isPassThroughParentEnabled='true'" isUserInteractionEnabled="false" />
14+
<StackLayout tap="onStackLayoutThrowTap" backgroundColor="#f3f9db" height="200" isPassThroughParentEnabled="true">
15+
<Label text="isPassThroughParentEnabled='true'" isUserInteractionEnabled="false" />
16+
<Button isUserInteractionEnabled="false" tap="onUserInteractionDisabledThrowTap" text="isUserInteractionEnabled='false'"></Button>
17+
<Button isEnabled="false" tap="onDisabledThrowTap" text="isEnabled='false'"></Button>
18+
<Button tap="onTap" text="TAP"></Button>
19+
</StackLayout>
20+
</StackLayout>
21+
22+
</WrapLayout>
23+
24+
</Page>

‎tns-core-modules/ui/core/view/view-common.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1021,4 +1021,4 @@ export const isEnabledProperty = new Property<ViewCommon, boolean>({
10211021
isEnabledProperty.register(ViewCommon);
10221022

10231023
export const isUserInteractionEnabledProperty = new Property<ViewCommon, boolean>({ name: "isUserInteractionEnabled", defaultValue: true, valueConverter: booleanConverter });
1024-
isUserInteractionEnabledProperty.register(ViewCommon);
1024+
isUserInteractionEnabledProperty.register(ViewCommon);

‎tns-core-modules/ui/core/view/view.android.ts‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -357,15 +357,20 @@ export class View extends ViewCommon {
357357
}
358358

359359
private setOnTouchListener() {
360-
if (this.nativeViewProtected && this.hasGestureObservers()) {
361-
this.touchListenerIsSet = true;
362-
if (this.nativeViewProtected.setClickable) {
363-
this.nativeViewProtected.setClickable(true);
364-
}
360+
if (!this.nativeViewProtected || !this.hasGestureObservers()) {
361+
return;
362+
}
363+
364+
// do not set noop listener that handles the event (disabled listener) if IsUserInteractionEnabled is
365+
// false as we might need the ability for the event to pass through to a parent view
366+
initializeTouchListener();
367+
this.touchListener = this.touchListener || new TouchListener(this);
368+
this.nativeViewProtected.setOnTouchListener(this.touchListener);
369+
370+
this.touchListenerIsSet = true;
365371

366-
initializeTouchListener();
367-
this.touchListener = this.touchListener || new TouchListener(this);
368-
this.nativeViewProtected.setOnTouchListener(this.touchListener);
372+
if (this.nativeViewProtected.setClickable) {
373+
this.nativeViewProtected.setClickable(this.isUserInteractionEnabled);
369374
}
370375
}
371376

@@ -605,15 +610,8 @@ export class View extends ViewCommon {
605610
}
606611

607612
[isUserInteractionEnabledProperty.setNative](value: boolean) {
608-
if (!value) {
609-
initializeDisabledListener();
610-
// User interaction is disabled -- we stop it and we do not care whether someone wants to listen for gestures.
611-
this.nativeViewProtected.setOnTouchListener(disableUserInteractionListener);
612-
} else {
613-
this.setOnTouchListener();
614-
if (!this.touchListenerIsSet) {
615-
this.nativeViewProtected.setOnTouchListener(null);
616-
}
613+
if (this.nativeViewProtected.setClickable) {
614+
this.nativeViewProtected.setClickable(value);
617615
}
618616
}
619617

‎tns-core-modules/ui/core/view/view.ios.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Definitions.
1+
// Definitions.
22
import { Point, View as ViewDefinition, dip } from ".";
33
import { ViewBase } from "../view-base";
44

‎tns-core-modules/ui/layouts/layout-base-common.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
106106
}
107107

108108
public clipToBounds: boolean;
109+
public isPassThroughParentEnabled: boolean;
109110

110111
public _childIndexToNativeChildIndex(index?: number): number {
111112
if (index === undefined) {
@@ -151,3 +152,6 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
151152

152153
export const clipToBoundsProperty = new Property<LayoutBaseCommon, boolean>({ name: "clipToBounds", defaultValue: true, valueConverter: booleanConverter });
153154
clipToBoundsProperty.register(LayoutBaseCommon);
155+
156+
export const isPassThroughParentEnabledProperty = new Property<LayoutBaseCommon, boolean>({ name: "isPassThroughParentEnabled", defaultValue: false, valueConverter: booleanConverter });
157+
isPassThroughParentEnabledProperty.register(LayoutBaseCommon);

‎tns-core-modules/ui/layouts/layout-base.android.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
LayoutBaseCommon, clipToBoundsProperty,
2+
LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty,
33
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length
44
} from "./layout-base-common";
55

@@ -25,6 +25,10 @@ export class LayoutBase extends LayoutBaseCommon {
2525
console.warn(`clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative`);
2626
}
2727

28+
[isPassThroughParentEnabledProperty.setNative](value: boolean) {
29+
(<any>this.nativeViewProtected).setPassThroughParent(value);
30+
}
31+
2832
[paddingTopProperty.getDefault](): Length {
2933
return { value: this._defaultPaddingTop, unit: "px" };
3034
}

‎tns-core-modules/ui/layouts/layout-base.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,14 @@ export class LayoutBase extends CustomLayoutView {
9696
* Gets or sets a value indicating whether to clip the content of this layout.
9797
*/
9898
clipToBounds: boolean;
99+
100+
/**
101+
* Gets or sets a value indicating whether touch event should pass through to a parent view of the
102+
* layout container in case an interactive child view did not handle it.
103+
* Default value of this property is false. This does not affect the appearance of the view.
104+
*/
105+
isPassThroughParentEnabled: boolean;
99106
}
100107

101108
export const clipToBoundsProperty: Property<LayoutBase, boolean>;
109+
export const isPassThroughParentEnabledProperty: Property<LayoutBase, boolean>;

‎tns-core-modules/ui/layouts/layout-base.ios.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { LayoutBaseCommon, clipToBoundsProperty, View } from "./layout-base-common";
1+
import {
2+
LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty, View
3+
} from "./layout-base-common";
24

35
export * from "./layout-base-common";
46

@@ -34,4 +36,8 @@ export class LayoutBase extends LayoutBaseCommon {
3436
[clipToBoundsProperty.setNative](value: boolean) {
3537
this._setNativeClipToBounds();
3638
}
39+
40+
[isPassThroughParentEnabledProperty.setNative](value: boolean) {
41+
(<any>this.nativeViewProtected).setPassThroughParent(value);
42+
}
3743
}

0 commit comments

Comments
 (0)