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

Add support for touch-based graph navigation and selection #11056

Merged
merged 17 commits into from
Sep 20, 2024

Conversation

Frizi
Copy link
Contributor

@Frizi Frizi commented Sep 11, 2024

Pull Request Description

Fixes #9493

Tested on windows desktop (standard mouse), macbook touchpad and iphone, which should behave similarily to windows touchscreen devices.

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

  • The documentation has been updated, if necessary.
  • Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
  • All code follows the
    Scala,
    Java,
    TypeScript,
    and
    Rust
    style guides. In case you are using a language not listed above, follow the Rust style guide.
  • Unit tests have been written where possible.

Copy link
Contributor

@farmaazon farmaazon left a comment

Choose a reason for hiding this comment

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

I think navigator needs some tests, as the logic there looks quite complex, and dragging/pinching won't be tested routinely.

As it's a bit of PR, we can make it in a separate one, or even as a separate task. Otherwise, I see mostly naming issues.

app/gui2/src/components/GraphEditor/GraphNode.vue Outdated Show resolved Hide resolved
app/gui2/src/composables/navigator.ts Outdated Show resolved Hide resolved
app/gui2/src/composables/navigator.ts Show resolved Hide resolved
app/gui2/src/composables/navigator.ts Outdated Show resolved Hide resolved
Comment on lines 110 to 140
if (!holdDragStarted && (isTouch || (state.buttons & PointerButtonMask.Auxiliary) != 0)) {
if (
longpressTimer != null &&
Vec2.FromTuple(state.movement).length() > LONGPRESS_MAX_SLIDE
) {
clearTimeout(longpressTimer)
longpressTimer = null
}
scrollTo(center.value.addScaled(Vec2.FromTuple(state.delta), -1 / scale.value))
state.event.stopImmediatePropagation()
} else if (!isTouch && (state.buttons & PointerButtonMask.Secondary) != 0) {
const prevScale = scale.value
updateScale((oldValue) => oldValue * Math.exp(-state.delta[1] / 100))
scrollTo(
center.value
.sub(gesturePivot)
.scale(prevScale / scale.value)
.add(gesturePivot),
)
} else if (
state.tap ||
holdDragStarted ||
(!isTouch && (state.buttons & PointerButtonMask.Main) != 0)
) {
callHoldDragListeners({
...state,
first: holdDragStarted === false,
dragging: state.dragging || !state.last,
})
holdDragStarted = true
}
Copy link
Contributor

Choose a reason for hiding this comment

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

If possible, I would put each branch into its own named function. Or, if it's not practical, at least the conditions should be assigned to variables named like isScrolling, 'isZooming' etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The condition do depend on the order in the if-else chain. I think refactoring each individual handler case to a separate function makes it very clear what's happening though.

app/gui2/src/composables/navigator.ts Outdated Show resolved Hide resolved
holdDragStarted ||
(!isTouch && (state.buttons & PointerButtonMask.Main) != 0)
) {
callHoldDragListeners({
Copy link
Contributor

Choose a reason for hiding this comment

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

This "holdDrag" is not always "hold drag" - sometimes it's just mouse-clik movement.

(Oh, well, one could interpret it as both "drag after hold" and "drag with button hold" ;) but then it requires docs somewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added docs to the "add hold drag listener" exported function, which exactly points out those conditions.

Copy link
Contributor

@somebody1234 somebody1234 left a comment

Choose a reason for hiding this comment

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

approving dashboard change (removing @ts-expect-error)

@Frizi Frizi added the CI: Ready to merge This PR is eligible for automatic merge label Sep 20, 2024
@mergify mergify bot merged commit c996707 into develop Sep 20, 2024
36 of 37 checks passed
@mergify mergify bot deleted the wip/frizi/touch-pinch-zoom branch September 20, 2024 16:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CI: Ready to merge This PR is eligible for automatic merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pinch to zoom doesn't work on windows touchscreen
3 participants