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.

Sign up for GitHub

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

[Web] Fix anchor and focal points. #2932

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

[Web] Fix anchor and focal points. #2932

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
238ede7
Refactor tracker
m-bert Jun 3, 2024
bfa63b3
Add view relative methods
m-bert Jun 3, 2024
f9cabd8
Fix rotation
m-bert Jun 3, 2024
43ed5a9
Fix comment
m-bert Jun 3, 2024
7bf99f0
Fix scale
m-bert Jun 3, 2024
49eec00
Fix comments
m-bert Jun 3, 2024
ac659ba
Mergele main
m-bert Jun 13, 2024
1693131
Use right methods
m-bert Jun 13, 2024
9bd9b8a
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Jun 28, 2024
c259aa6
Correctly calculate deviation
m-bert Jun 28, 2024
c28b1d8
Mergele main
m-bert Jul 23, 2024
8aa2320
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Sep 20, 2024
1b3cfe9
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Sep 20, 2024
600ea9c
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Sep 24, 2024
120f093
Switch back to offset
m-bert Sep 27, 2024
16e1def
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Sep 27, 2024
bda8eb1
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Sep 30, 2024
8ad7c85
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Oct 3, 2024
dbe3488
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Oct 7, 2024
21fcbf9
Almost almost
m-bert Oct 7, 2024
49216d7
Merge branch 'main' into @mbert/fix-anchor-and-focal-points
m-bert Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/web/detectors/RotationGestureDetector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,18 @@ export default class RotationGestureDetector

const [firstPointerID, secondPointerID] = this.keyPointers;

const firstPointerX: number = tracker.getLastX(firstPointerID);
const firstPointerY: number = tracker.getLastY(firstPointerID);
const secondPointerX: number = tracker.getLastX(secondPointerID);
const secondPointerY: number = tracker.getLastY(secondPointerID);
const firstPointerCoords =
tracker.getLastViewRelativeCoords(firstPointerID);
const secondPointerCoords =
tracker.getLastViewRelativeCoords(secondPointerID);
Copy link
Member

Choose a reason for hiding this comment

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

Huh, does this actually work? In my head, when you try to calculate rotation based on points in the view coordinate space you would get jitter.

When you have two pointers on a view and you rotate them by some angle and then use that angle to rotate the view, that should cancel out. Essentially, the points would be constant in the coordinates of a view, even though they are different in the coordinates of the parent.

Or does transform simply not apply to the pointer/touch events sent by the browser?


const vectorX: number = secondPointerX - firstPointerX;
const vectorY: number = secondPointerY - firstPointerY;
const vectorX: number = secondPointerCoords.x - firstPointerCoords.x;
const vectorY: number = secondPointerCoords.y - firstPointerCoords.y;

this.anchorX = (firstPointerX + secondPointerX) / 2;
this.anchorY = (firstPointerY + secondPointerY) / 2;
this.anchorX = (firstPointerCoords.x + secondPointerCoords.x) / 2;
this.anchorY = (firstPointerCoords.y + secondPointerCoords.y) / 2;

//Angle diff should be positive when rotating in clockwise direction
// Angle diff should be positive when rotating in clockwise direction
const angle: number = -Math.atan2(vectorY, vectorX);

this.rotation = Number.isNaN(this.previousAngle)
Expand Down
21 changes: 9 additions & 12 deletions src/web/detectors/ScaleGestureDetector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,15 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
? event.pointerId
: undefined;

//Determine focal point

// Determine focal point
const div: number = pointerUp ? numOfPointers - 1 : numOfPointers;

const sumX = tracker.getSumX(ignoredPointer);
const sumY = tracker.getSumY(ignoredPointer);

const focusX = sumX / div;
const focusY = sumY / div;
const coordsSum = tracker.getViewRelativeCoordsSum();

//Determine average deviation from focal point
const focusX = coordsSum.x / div;
const focusY = coordsSum.y / div;

// Determine average deviation from focal point
let devSumX = 0;
let devSumY = 0;

Expand All @@ -92,8 +89,8 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
return;
}

devSumX += Math.abs(value.lastX - focusX);
devSumY += Math.abs(value.lastY - focusY);
devSumX += Math.abs(value.abosoluteCoords.x - focusX);
devSumY += Math.abs(value.abosoluteCoords.y - focusY);
});

const devX: number = devSumX / div;
Expand All @@ -104,7 +101,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {

const span = Math.hypot(spanX, spanY);

//Begin/end events
// Begin/end events
const wasInProgress: boolean = this.inProgress;
this.focusX = focusX;
this.focusY = focusY;
Expand All @@ -129,7 +126,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
this.inProgress = this.onScaleBegin(this);
}

//Handle motion
// Handle motion
if (action !== EventTypes.MOVE) {
return true;
}
Expand Down
53 changes: 27 additions & 26 deletions src/web/handlers/GestureHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,10 +405,9 @@ export default abstract class GestureHandler implements IGestureHandler {
nativeEvent: {
numberOfPointers: this.tracker.getTrackedPointersCount(),
state: newState,
pointerInside: this.delegate.isPointerInBounds({
x: this.tracker.getLastAvgX(),
y: this.tracker.getLastAvgY(),
}),
pointerInside: this.delegate.isPointerInBounds(
this.tracker.getAbsoluteCoordsAverage()
),
...this.transformNativeEvent(),
handlerTag: this.handlerTag,
target: this.viewRef,
Expand Down Expand Up @@ -442,10 +441,10 @@ export default abstract class GestureHandler implements IGestureHandler {

all.push({
id: id,
x: element.lastX - rect.pageX,
y: element.lastY - rect.pageY,
absoluteX: element.lastX,
absoluteY: element.lastY,
x: element.abosoluteCoords.x - rect.pageX,
y: element.abosoluteCoords.y - rect.pageY,
absoluteX: element.abosoluteCoords.x,
absoluteY: element.abosoluteCoords.y,
});
});

Expand All @@ -465,10 +464,10 @@ export default abstract class GestureHandler implements IGestureHandler {

changed.push({
id: id,
x: element.lastX - rect.pageX,
y: element.lastY - rect.pageY,
absoluteX: element.lastX,
absoluteY: element.lastY,
x: element.abosoluteCoords.x - rect.pageX,
y: element.abosoluteCoords.y - rect.pageY,
absoluteX: element.abosoluteCoords.x,
absoluteY: element.abosoluteCoords.y,
});
});
}
Expand Down Expand Up @@ -534,18 +533,18 @@ export default abstract class GestureHandler implements IGestureHandler {

all.push({
id: id,
x: element.lastX - rect.pageX,
y: element.lastY - rect.pageY,
absoluteX: element.lastX,
absoluteY: element.lastY,
x: element.abosoluteCoords.x - rect.pageX,
y: element.abosoluteCoords.y - rect.pageY,
absoluteX: element.abosoluteCoords.x,
absoluteY: element.abosoluteCoords.y,
});

changed.push({
id: id,
x: element.lastX - rect.pageX,
y: element.lastY - rect.pageY,
absoluteX: element.lastX,
absoluteY: element.lastY,
x: element.abosoluteCoords.x - rect.pageX,
y: element.abosoluteCoords.y - rect.pageY,
absoluteX: element.abosoluteCoords.x,
absoluteY: element.abosoluteCoords.y,
});
});

Expand All @@ -570,12 +569,13 @@ export default abstract class GestureHandler implements IGestureHandler {
protected transformNativeEvent(): Record<string, unknown> {
// those properties are shared by most handlers and if not this method will be overriden
const rect = this.delegate.measureView();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();

return {
x: this.tracker.getLastAvgX() - rect.pageX,
y: this.tracker.getLastAvgY() - rect.pageY,
absoluteX: this.tracker.getLastAvgX(),
absoluteY: this.tracker.getLastAvgY(),
x: lastCoords.x - rect.pageX,
y: lastCoords.y - rect.pageY,
absoluteX: lastCoords.x,
absoluteY: lastCoords.y,
};
}

Expand Down Expand Up @@ -720,8 +720,9 @@ export default abstract class GestureHandler implements IGestureHandler {
}

const rect = this.delegate.measureView();
const offsetX: number = this.tracker.getLastX() - rect.pageX;
const offsetY: number = this.tracker.getLastY() - rect.pageY;
const { x, y } = this.tracker.getLastAbsoluteCoords();
const offsetX: number = x - rect.pageX;
const offsetY: number = y - rect.pageY;

if (
offsetX >= left &&
Expand Down
10 changes: 6 additions & 4 deletions src/web/handlers/NativeViewGestureHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
}

private newPointerAction(): void {
this.startX = this.tracker.getLastAvgX();
this.startY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.startX = lastCoords.x;
this.startY = lastCoords.y;

if (this.currentState !== State.UNDETERMINED) {
return;
Expand All @@ -80,8 +81,9 @@ export default class NativeViewGestureHandler extends GestureHandler {
protected onPointerMove(event: AdaptedEvent): void {
this.tracker.track(event);

const dx = this.startX - this.tracker.getLastAvgX();
const dy = this.startY - this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
const dx = this.startX - lastCoords.x;
const dy = this.startY - lastCoords.y;
const distSq = dx * dx + dy * dy;

if (distSq >= this.minDistSq) {
Expand Down
47 changes: 29 additions & 18 deletions src/web/handlers/PanGestureHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,8 +219,9 @@ export default class PanGestureHandler extends GestureHandler {
this.tracker.addToTracker(event);
super.onPointerDown(event);

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.startX = this.lastX;
this.startY = this.lastY;
Expand All @@ -239,8 +240,9 @@ export default class PanGestureHandler extends GestureHandler {
this.offsetX += this.lastX - this.startX;
this.offsetY += this.lastY - this.startY;

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.startX = this.lastX;
this.startY = this.lastY;
Expand All @@ -259,8 +261,9 @@ export default class PanGestureHandler extends GestureHandler {
protected onPointerUp(event: AdaptedEvent): void {
super.onPointerUp(event);
if (this.currentState === State.ACTIVE) {
this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;
}

this.tracker.removeFromTracker(event.pointerId);
Expand All @@ -280,8 +283,9 @@ export default class PanGestureHandler extends GestureHandler {
this.offsetX += this.lastX - this.startX;
this.offsetY += this.lastY - this.startY;

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.startX = this.lastX;
this.startY = this.lastY;
Expand All @@ -299,10 +303,13 @@ export default class PanGestureHandler extends GestureHandler {
protected onPointerMove(event: AdaptedEvent): void {
this.tracker.track(event);

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
this.velocityX = this.tracker.getVelocityX(event.pointerId);
this.velocityY = this.tracker.getVelocityY(event.pointerId);
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

const velocity = this.tracker.getVelocity(event.pointerId);
this.velocityX = velocity.x;
this.velocityY = velocity.y;

this.checkBegan();

Expand All @@ -316,10 +323,13 @@ export default class PanGestureHandler extends GestureHandler {

this.tracker.track(event);

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
this.velocityX = this.tracker.getVelocityX(event.pointerId);
this.velocityY = this.tracker.getVelocityY(event.pointerId);
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

const velocity = this.tracker.getVelocity(event.pointerId);
this.velocityX = velocity.x;
this.velocityY = velocity.y;

this.checkBegan();

Expand Down Expand Up @@ -453,8 +463,9 @@ export default class PanGestureHandler extends GestureHandler {
}, this.activateAfterLongPress);
}
} else {
this.velocityX = this.tracker.getVelocityX(event.pointerId);
this.velocityY = this.tracker.getVelocityY(event.pointerId);
const velocity = this.tracker.getVelocity(event.pointerId);
this.velocityX = velocity.x;
this.velocityY = velocity.y;
}
}

Expand Down
30 changes: 18 additions & 12 deletions src/web/handlers/TapGestureHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,19 +133,22 @@ export default class TapGestureHandler extends GestureHandler {
this.offsetX += this.lastX - this.startX;
this.offsetY += this.lastY - this.startY;

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.startX = this.tracker.getLastAvgX();
this.startY = this.tracker.getLastAvgY();
this.startX = lastCoords.x;
this.startY = lastCoords.y;

this.updateState(event);
}

protected onPointerUp(event: AdaptedEvent): void {
super.onPointerUp(event);
this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();

const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.tracker.removeFromTracker(event.pointerId);

Expand All @@ -159,8 +162,9 @@ export default class TapGestureHandler extends GestureHandler {
this.offsetX += this.lastX - this.startX;
this.offsetY += this.lastY = this.startY;

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.startX = this.lastX;
this.startY = this.lastY;
Expand All @@ -172,8 +176,9 @@ export default class TapGestureHandler extends GestureHandler {
this.trySettingPosition(event);
this.tracker.track(event);

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.updateState(event);

Expand All @@ -184,8 +189,9 @@ export default class TapGestureHandler extends GestureHandler {
this.trySettingPosition(event);
this.tracker.track(event);

this.lastX = this.tracker.getLastAvgX();
this.lastY = this.tracker.getLastAvgY();
const lastCoords = this.tracker.getAbsoluteCoordsAverage();
this.lastX = lastCoords.x;
this.lastY = lastCoords.y;

this.updateState(event);

Expand Down
8 changes: 1 addition & 7 deletions src/web/tools/GestureHandlerOrchestrator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,13 +335,7 @@ export default class GestureHandlerOrchestrator {
// TODO: Find better way to handle that issue, for example by activation order and handler cancelling

const isPointerWithinBothBounds = (pointer: number) => {
const handlerX: number = handler.getTracker().getLastX(pointer);
const handlerY: number = handler.getTracker().getLastY(pointer);

const point = {
x: handlerX,
y: handlerY,
};
const point = handler.getTracker().getLastAbsoluteCoords(pointer);

return (
handler.getDelegate().isPointerInBounds(point) &&
Expand Down
Loading
Loading