feat(RenderWindowInteractor): add Tap and LongTap gestures by UlysseDurand · Pull Request #3596 · Kitware/vtk-js

UlysseDurand · 2026-08-10T13:29:00Z

Context

There is a need for mobile web applications made with vtk-js to have more control interactions, especially because right click isn't available. The LongTap event can replace the right click, Tap comes along the way.

Results

Touch/pen pointers now emit dedicated TapEvent and LongTap events through the standard handledEvents mechanism, alongside the existing press/move/release events.
New configurable options allow tuning gesture detection per application.

Changes

Sources/Rendering/Core/RenderWindowInteractor/index.js
- Added Tap, and LongTap to handledEvents.
- Added gesture tracking (pointer ID, position, timers) for single touch/pen pointers, canceling gestures on multitouch or movement beyond the long-press distance.
Sources/Rendering/Core/RenderWindowInteractor/index.d.ts
- Added new events to handledEvents enum, invokeTap, invokeLongTap and the corresponding on*/*Event types, plus the new initial values/getters.
Examples/Applications/TapGestureDemo/index.js
- New demo application to try the three gestures.
New configurable values (defaults):
- recognizeTapGestures (true)
- longTapDuration (500 ms)
- longTapDistance (30 px)
Documentation and TypeScript definitions were updated to match those changes

PR and Code Checklist

semantic-release commit messages
Run npm run reformat to have correctly formatted code

Testing

Demo: run the TapGestureDemo example and tap and long-tap with a touch device or pen.
No unit tests were added: existing Pan/Pinch/Rotate gestures are not unit-tested either.
Tested example with:
- vtk.js: master
- OS: Linux
- Browser: Chrome on an Android tablet

finetjul · 2026-08-11T08:41:51Z

  'EndInteraction',
  'AnimationFrameRateUpdate',
+  'Tap',
+  'LongTap',


please add them after "Pan" events

finetjul · 2026-08-11T08:43:33Z

  'EndInteraction',
  'AnimationFrameRateUpdate',
+  'Tap',
+  'LongTap',


to move after "Pan" events

finetjul · 2026-08-11T08:46:30Z

 }

+function distanceBetweenPositions(a, b) {
+  return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y));


don't compute sqrt, it is expensive: distanceBetweenPositions --> distance2BetweenPositions.

It can be a separate commit (because you would need to consider the pinchDistance, rotateDistance and panDistance as well)

finetjul · 2026-08-11T08:47:20Z

+  let tapGestureActive = false;
+
+  function cancelTapGesture() {
+    if (longTapTimer !== null) {


longTapTimer != null to support longTapTimer=undefined

finetjul · 2026-08-11T09:04:21Z

+
+  function startLongTapTimer() {
+    if (longTapTimer !== null) {
+      clearTimeout(longTapTimer);


longTapTimer = null

finetjul · 2026-08-11T09:35:04Z

+    }
+    tapGestureActive = false;
+    tapPointerId = null;
+    if (longTapFired) {


if you delete tapObject when you fire a long tap, you wouldn't have to keep the information of "fired" or not.

finetjul · 2026-08-11T09:37:48Z

+   * Enable/Disable recognition of tap and long-press gestures.
+   * @param recognizeTapGestures
+   */
+  setRecognizeTapGestures(recognizeTapGestures: boolean): boolean;


why do you want to add Tap gesture recognition granularity ?
Or said differently, by recognizing tap gestures, do you change the behavior of regular gestures ? do you decrease performance ?

finetjul · 2026-08-11T09:39:14Z

+      longTapTimer = null;
+    }
+    tapPointerId = null;
+    tapStartPosition = null;


can't you reuse startingEventPositions ?

finetjul · 2026-08-11T09:41:47Z

  return positions;
 }

+function distanceBetweenPositions(a, b) {


you can take the opportunity in the file to call this function where the math is done manually (e.g. pinchDistance, rotateDistance and panDistance) . It can be a separate commit.

finetjul · 2026-08-11T09:50:50Z

  publicAPI.handleTouchMove = (event) => {
    const pointers = [...pointerCache.values()];
    if (model.recognizeGestures && pointers.length > 1) {
+      cancelTapGesture();


should probably have been already cancelled when a second pointer was made down.

finetjul · 2026-08-11T09:59:39Z

Can you consider writing a test ?

e.g. https://github.com/Kitware/vtk-js/pull/3595/changes#diff-ce1dbea0013f09679bf8d00604fc66d9da245c796ed66f0440467f9c123d2435R147

finetjul · 2026-08-12T16:36:38Z

+  /**
+   * @default true
+   */
+  getRecognizeTapGestures(): boolean;


Does not seem needed anymore

finetjul · 2026-08-13T06:20:05Z

+    cancelTapGesture();
+    tapObj.pointerId = pointerId;
+    tapObj.timer = setTimeout(() => {
+      cancelTapGesture();


I would call it after longTapEvent

finetjul · 2026-08-13T06:27:59Z

  let previousMouseButtons = 0;

+  // Tap / LongTap gesture tracking for touch and pen pointers.
+  let tapObj = { timer: null, pointerId: null };


tapObj -> tapInformation

finetjul · 2026-08-13T06:32:57Z

+// Tests ------------------------------------------------------------------
+
+function tapTest(container, interactor, time, distance, expected) {
+  const finalX = 100 + distance / Math.sqrt(2);


move 100 into its own variable:
const origX = 100;
const finalX = origX + distance / Math.sqrt(2);

finetjul · 2026-08-13T06:38:49Z

+
+  tapTest(container, interactor, 490, 28, ['Tap']);
+  tapTest(container, interactor, 490, 32, []);
+  tapTest(container, interactor, 510, 28, ['LongTap']);


test when adding an additional touch
test when restarting a tap (and make sure a longtap still works)

A simple test with 3 tap gestures cases is added

Remove 2 sqrt calls by comparing distances squared instead of distances originalDistance - newDistance is needed, we can't avoid using 2 sqrts for them

finetjul · 2026-08-13T15:04:26Z

@@ -1132,12 +1191,10 @@ function vtkRenderWindowInteractor(publicAPI, model) {
    // of movement it is and then deal with it.
    // calculate the distances
    const originalDistance = Math.sqrt(


I think you can work with originalDistance2, you don't need the sqrt

UlysseDurand force-pushed the feat-interactor-tap-gestures branch from 20dfa20 to af35a27 Compare August 10, 2026 14:29

UlysseDurand changed the title ~~feat(RenderWindowInteractor): add Tap, DoubleTap, LongPress gestures~~ feat(RenderWindowInteractor): add Tap and LongPress gestures Aug 10, 2026

UlysseDurand force-pushed the feat-interactor-tap-gestures branch from af35a27 to 1cd09c4 Compare August 10, 2026 14:32

UlysseDurand changed the title ~~feat(RenderWindowInteractor): add Tap and LongPress gestures~~ feat(RenderWindowInteractor): add Tap and LongTap gestures Aug 10, 2026

UlysseDurand force-pushed the feat-interactor-tap-gestures branch from 1cd09c4 to 485f201 Compare August 11, 2026 08:14

finetjul reviewed Aug 11, 2026

View reviewed changes

UlysseDurand force-pushed the feat-interactor-tap-gestures branch 2 times, most recently from 9ef22df to 0ac78f9 Compare August 12, 2026 16:09

finetjul reviewed Aug 13, 2026

View reviewed changes

UlysseDurand force-pushed the feat-interactor-tap-gestures branch from 0ac78f9 to 750c8c9 Compare August 13, 2026 13:03

UlysseDurand added 2 commits August 13, 2026 15:42

feat(RenderWindowInteractor): add Tap and LongTap gestures

8eae7c1

A simple test with 3 tap gestures cases is added

perf(gestures): reduce the number of sqrt usages

4f9e9a4

Remove 2 sqrt calls by comparing distances squared instead of distances originalDistance - newDistance is needed, we can't avoid using 2 sqrts for them

UlysseDurand force-pushed the feat-interactor-tap-gestures branch from 750c8c9 to 4f9e9a4 Compare August 13, 2026 13:55

finetjul reviewed Aug 13, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

UlysseDurand commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Results

Changes

PR and Code Checklist

Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

finetjul commented Aug 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

UlysseDurand commented Aug 10, 2026 •

edited

Loading