Comfy-Org / Comfy-Org/ComfyUI_frontend

[Vue Nodes] Touch/pen node drag still cancels after a few pixels (pointercancel) despite #13356 fix — fix landed in a template that doesn't render

Open
#17,637 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

Title: [Vue Nodes] Touch/pen node drag still cancels after a few pixels (pointercancel) despite #13356 fix — fix landed in a template that doesn't render

Body:
## Summary

With Vue Nodes 2.0 enabled, dragging a node using **touch or pen input** cancels after ~5-10px and the node "drops". Mouse input works fine. Double-click/double-tap for the node search works correctly (that fix is a runtime setting, so it applies regardless).

This was diagnosed and fixed by the reporter using an AI agent (Hermes) — details below so maintainers can verify.

## Environment

- `comfyui-frontend-package` **1.52.7**
- ComfyUI backend: recent git build (`fbed745`, Sep 6 2026)
- Browser: touch/pen device (tablet), issue reproduced in an automated Chromium touch-emulation test against the live app

## Root cause

The `touch-action: none` fix from **#13356** (PR #13356, adding `touch-none` to `LGraphNode.vue`) is compiled into a template **that is not the one actually rendering nodes**.

Two compiled node-root templates exist in the 1.52.7 bundles:

| Bundle | Template string | Has fix |
|---|---|---|
| `settingStore-CwNB8aKw.js` | `` `lg-node flex w-[350px] touch-none flex-col rounded-2xl ...` `` | ✅ yes (#13356 present) |
| `GraphView-DrI6fzMv.js` | `` `lg-node absolute isolate text-xs flex flex-col contain-layout ...` `` | ❌ no |

The **live DOM** (inspected against the running app) shows the second form:

```
class: "group/node lg-node absolute isolate text-xs flex flex-col ..."
computed touch-action: "auto" ← bug
```

With `touch-action: auto`, the browser treats the touch/pen drag as a pan gesture and fires `pointercancel` after a few pixels. The Vue-node drag handler ends the drag on pointercancel (`onPointercancel → safeDragEnd`), so the node drops.

The reason double-click still worked after the frontend update: click-vs-drag disambiguation for the canvas double-click is driven by the `Comfy.Pointer.ClickBufferTime` runtime setting (read live from the settings store on every pointer event), so it applies even when the rendered node itself lacks the touch fix.

## Reproduction

1. Enable Vue Nodes (Nodes 2.0) in ComfyUI settings
2. Ensure frontend 1.52.7
3. On a touch/pen device, press and drag any node
4. Node moves ~5-10px, then `pointercancel` fires and the drag ends

Verified via CDP touch-emulation against the live app: the drag produces `pointerdown → pointermove* → pointercancel` and drops.

## Workaround (confirmed working)

Adding the missing rule via `user.css` (`ComfyUI/user/default/user.css`) fixes it immediately, no rebuild:

```css
.lg-node { touch-action: none !important; }
```

After applying, the same automated touch-drag test produces `pointerdown → pointermove* → pointerup` with **no pointercancel** — drag works cleanly.

## Suggested fix

Apply `touch-none` (or `touch-action: none`) to the node-root template that actually renders in the GraphView path (`lg-node absolute isolate text-xs ...`), not only the one in `settingStore-CwNB8aKw.js`. Either unify the two templates or ensure both carry `touch-none`.

## AI involvement disclosure

Reported by **sanky0**. The diagnosis (bundle + DOM inspection, pointer-event tracing, touch-emulation reproduction) and the workaround above were produced with the assistance of **Hermes**, an AI agent (Nous Research) the reporter was using to fix the problem. The reporter is a ComfyUI user, not a maintainer — evidence presented as-is for verification.

_Related: #10984 (original touch issue), PR #13356 (merged fix that appears incomplete for the live template)._

Contributor guide

Open the contributing guide

Research direction

Start by comparing the node-root templates in GraphView-DrI6fzMv.js and settingStore-CwNB8aKw.js, then trace them back to the Vue source, including LGraphNode.vue. Verify the live GraphView node has touch-action: none and run the touch-emulation reproduction; done means touch or pen dragging reaches pointerup without pointercancel while mouse and double-click behavior remain intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.