fix(autocomplete): add wheel event handler for canvas zoom support

Add @wheel event listener to AutocompleteTextWidget textarea to enable canvas zoom when textarea has no scrollbar.

The onWheel handler:
- Forwards pinch-to-zoom (ctrl+wheel) to canvas
- Passes horizontal scroll to canvas
- When textarea has vertical scrollbar: lets textarea scroll
- When textarea has NO scrollbar: forwards to canvas for zoom

Behavior now matches ComfyUI built-in multiline widget.

Fixes #850
This commit is contained in:
Will Miao
2026-03-11 20:58:01 +08:00
parent ee84b30023
commit c02f603ed2
3 changed files with 100 additions and 15 deletions

View File

@@ -7,6 +7,7 @@
:spellcheck="spellcheck ?? false"
:class="['text-input', { 'vue-dom-mode': isVueDomMode }]"
@input="onInput"
@wheel="onWheel"
/>
<button
v-if="showClearButton"
@@ -82,6 +83,59 @@ const onInput = () => {
}
}
/**
* Handle mouse wheel events on the textarea.
* Forwards the event to the ComfyUI canvas for zooming when the textarea has no scrollbar,
* or handles pinch-to-zoom gestures.
*
* Logic aligns with ComfyUI's built-in multiline widget:
* src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
*/
const onWheel = (event: WheelEvent) => {
const textarea = textareaRef.value
if (!textarea) return
// Track if we have a vertical scrollbar
const canScrollY = textarea.scrollHeight > textarea.clientHeight
const deltaX = event.deltaX
const deltaY = event.deltaY
const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY)
// Access ComfyUI app from global window
const app = (window as any).app
if (!app || !app.canvas || typeof app.canvas.processMouseWheel !== 'function') {
return
}
// 1. Handle pinch-to-zoom (ctrlKey is true for pinch-to-zoom on most browsers)
if (event.ctrlKey) {
event.preventDefault()
event.stopPropagation()
app.canvas.processMouseWheel(event)
return
}
// 2. Horizontal scroll: pass to canvas (textareas usually don't scroll horizontally)
if (isHorizontal) {
event.preventDefault()
event.stopPropagation()
app.canvas.processMouseWheel(event)
return
}
// 3. Vertical scrolling:
if (canScrollY) {
// If the textarea is scrollable, let it handle the wheel event but stop propagation
// to prevent the canvas from zooming while the user is trying to scroll the text
event.stopPropagation()
} else {
// If the textarea is NOT scrollable, forward the wheel event to the canvas
// so it can trigger zoom in/out
event.preventDefault()
app.canvas.processMouseWheel(event)
}
}
// Handle external value changes (e.g., from "send lora to workflow")
const onExternalValueChange = (event: CustomEvent<{ value: string }>) => {
updateHasTextState()