[fix] Prevent drag activation during Vue node resize #7064
Conversation
Remove multi-corner resize handles in favor of bottom-right only. This simplifies the resize logic and eliminates edge cases where corner resizing caused position drift issues. - Remove resizeMath.ts and its test (no longer needed) - Simplify useNodeResize to only handle bottom-right resize - Remove position tracking from resize callback - Remove unused moveNodeTo from LGraphNode
When resizing a Vue node after selecting it, the pointer move events would incorrectly trigger drag logic, causing the node to teleport. Fix: - Add isResizingVueNodes flag to layoutStore - Set flag in useNodeResize during resize operation - Check flag in useNodePointerInteractions to skip drag activation Also adds browser test to verify resize after selection works correctly.
dosubot
bot
added
the
size:M
📝 WalkthroughWalkthroughSimplifies Vue node resizing behavior by replacing multi-corner resize handles with a single bottom-right handle. Removes the resizeMath module and associated logic, updates useNodeResize to track resize state via layoutStore flag, and adds early-exit guard in pointer interactions to prevent drag during resize. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/01/2025, 12:59:38 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/01/2025, 01:08:49 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
| import { | ||
| comfyExpect as expect, | ||
| comfyPageFixture as test | ||
| } from '../../../../fixtures/ComfyPage' |
There was a problem hiding this comment.
This makes me think we should have a path for these
| public isDraggingVueNodes = ref(false) | ||
| // Vue resizing state to prevent drag from activating during resize | ||
| public isResizingVueNodes = ref(false) |
There was a problem hiding this comment.
Maybe?
| public isDraggingVueNodes = ref(false) | |
| // Vue resizing state to prevent drag from activating during resize | |
| public isResizingVueNodes = ref(false) | |
| public readonly isDraggingVueNodes = ref(false) | |
| // Vue resizing state to prevent drag from activating during resize | |
| public readonly isResizingVueNodes = ref(false) |
|
Pushed a fix for the unit test. |
dosubot
bot
added
size:L
christian-byrne
added
needs-backport
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts (1)
1-4: Good regression coverage; consider tightening wait and fixture importThe test does a nice job asserting “no drift, size increased” for Vue node resize. Two small follow-ups:
- The
waitForTimeout(100)after selection could be a flake source; consider waiting on a concrete condition (e.g., via an assertion on selection state or a stable bounding box usingexpect.poll) instead of a fixed delay.- The deep relative import to
ComfyPageis getting noisy across tests; as already noted in another comment, centralizing this behind a test helper path/alias would improve maintainability.Also applies to: 22-23
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts (1)
93-107: Mock wiring is correct; consider a unit test for resize drag guardExtending the
layoutStoremock withisResizingVueNodesmatches the new runtime state and keeps the composable under test happy.To fully exercise the new guard logic, it would be useful to add a test that:
- Sets
layoutStore.isResizingVueNodes.value = true- Simulates
pointerdown/pointermove- Asserts that drag is not started (
isDraggingVueNodesremainsfalseand drag callbacks are not called)This would complement the E2E resize test with a small, fast unit check on the interaction composable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts(1 hunks)src/renderer/core/layout/store/layoutStore.ts(1 hunks)src/renderer/extensions/vueNodes/components/LGraphNode.vue(3 hunks)src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts(1 hunks)src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts(1 hunks)src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts(0 hunks)src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts(3 hunks)tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts(0 hunks)
💤 Files with no reviewable changes (2)
- src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts
- tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts
🧰 Additional context used
📓 Path-based instructions (21)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
browser_tests/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Playwright E2E tests can use optional tags like
@mobileand@2xwhich are respected by the Playwright configuration
Files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.tssrc/renderer/extensions/vueNodes/interactions/resize/useNodeResize.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/renderer/extensions/vueNodes/components/LGraphNode.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/renderer/extensions/vueNodes/components/LGraphNode.vue🧠 Learnings (25)
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewportsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser testsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser testsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to browser_tests/**/*.{test,spec}.ts : Playwright E2E tests can use optional tags like `mobile` and `2x` which are respected by the Playwright configurationApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser testsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Use Playwright fixtures for browser testsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.{test,spec}.{ts,tsx,js} : Unit and component tests should be located in `tests-ui/` or co-located with components as `src/components/**/*.{test,spec}.ts`; E2E tests should be in `browser_tests/`Applied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursorApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Check tests-ui/README.md for test guidelinesApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Use Vitest (with happy-dom) for unit and component tests, and Playwright for E2E testsApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebaseApplied to files:
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in testsApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocksApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlersApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.ts📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possibleApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.tssrc/renderer/core/layout/store/layoutStore.ts📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in storesApplied to files:
src/renderer/core/layout/store/layoutStore.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and positionApplied to files:
src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listenersApplied to files:
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts🧬 Code graph analysis (1)
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts (1)
src/renderer/core/layout/store/layoutStore.ts (1)
layoutStore(1469-1469)🪛 ESLint
browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
[error] 1-1: Resolve error: EACCES: permission denied, open '/isYMjsuBbu'
at Object.writeFileSync (node:fs:2409:20)
at l (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:13670)
at createFilesMatcher (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:14422)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:70:65)
at Object.resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:147:20)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:69
at setRuleContext (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-context/lib/index.js:23:20)
at fullResolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:30)
at relative (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:215:12)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:220:16)
at ExportMap.get (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/export-map.js:88:22)
at processBodyStatement (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/namespace.js:9:31)
at Program (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/namespace.js:100:21)
at ruleErrorHandler (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1173:33)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:46
at Array.forEach ()
at SourceCodeVisitor.callSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:30)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:291:18
at Array.forEach ()
at SourceCodeTraverser.traverseSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:290:10)
at runRules (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1214:12)
at #flatVerifyWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2101:4)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2189:43)
at Linter._verifyWithFlatConfigArray (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2292:15)
at Linter.verify (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1677:10)
at Linter.verifyAndFix (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2557:20)
at verifyText (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1179:45)
at readAndVerifyFile (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1320:10)(import-x/namespace)
[error] 1-1: Resolve error: EACCES: permission denied, open '/baEumUnmDt'
at Object.writeFileSync (node:fs:2409:20)
at l (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:13670)
at createFilesMatcher (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:14422)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:70:65)
at Object.resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:147:20)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:69
at setRuleContext (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-context/lib/index.js:23:20)
at fullResolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:30)
at relative (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:215:12)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:220:16)
at checkSourceValue (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/no-unresolved.js:31:34)
at checkSourceValue (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:14:9)
at checkSource (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:17:9)
at ruleErrorHandler (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1173:33)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:46
at Array.forEach ()
at SourceCodeVisitor.callSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:30)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:291:18
at Array.forEach ()
at SourceCodeTraverser.traverseSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:290:10)
at runRules (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1214:12)
at #flatVerifyWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2101:4)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2189:43)
at Linter._verifyWithFlatConfigArray (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2292:15)
at Linter.verify (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1677:10)
at Linter.verifyAndFix (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2557:20)
at verifyText (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1179:45)
at readAndVerifyFile (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1320:10)(import-x/no-unresolved)
[error] 1-1: Resolve error: EACCES: permission denied, open '/hKCOAPRcyi'
at Object.writeFileSync (node:fs:2409:20)
at l (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:13670)
at createFilesMatcher (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:14422)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:70:65)
at Object.resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:147:20)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:69
at setRuleContext (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-context/lib/index.js:23:20)
at fullResolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:30)
at relative (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:215:12)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:220:16)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/no-useless-path-segments.js:58:34
at checkSourceValue (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:14:9)
at checkSource (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:17:9)
at ruleErrorHandler (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1173:33)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:46
at Array.forEach ()
at SourceCodeVisitor.callSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:30)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:291:18
at Array.forEach ()
at SourceCodeTraverser.traverseSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:290:10)
at runRules (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1214:12)
at #flatVerifyWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2101:4)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2189:43)
at Linter._verifyWithFlatConfigArray (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2292:15)
at Linter.verify (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1677:10)
at Linter.verifyAndFix (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2557:20)
at verifyText (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1179:45)
at readAndVerifyFile (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1320:10)(import-x/no-useless-path-segments)
[error] 1-1: Resolve error: EACCES: permission denied, open '/DRttAuvXID'
at Object.writeFileSync (node:fs:2409:20)
at l (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:13670)
at createFilesMatcher (file:///home/jailuser/git/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:14422)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:70:65)
at Object.resolve (file:///home/jailuser/git/node_modules/.pnpm/[email protected][email protected]_@typescript-eslin_da4796079dab5a32abf73f9910d12370/node_modules/eslint-import-resolver-typescript/lib/index.js:147:20)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:69
at setRuleContext (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint-import-context/lib/index.js:23:20)
at fullResolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:170:30)
at relative (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:215:12)
at resolve (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/resolve.js:220:16)
at importType (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/import-type.js:126:63)
at checkImportForRelativePackage (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/no-relative-packages.js:15:38)
at file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/rules/no-relative-packages.js:59:40
at checkSourceValue (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:14:9)
at checkSource (file:///home/jailuser/git/node_modules/.pnpm/eslint-plugin-import-x@4.16.1_@typescript-eslint[email protected]_eslint@[email protected]__d4b6b79e6f12f59d34d55ebbf27dc73f/node_modules/eslint-plugin-import-x/lib/utils/module-visitor.js:17:9)
at ruleErrorHandler (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1173:33)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:46
at Array.forEach ()
at SourceCodeVisitor.callSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-visitor.js:76:30)
at /home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:291:18
at Array.forEach ()
at SourceCodeTraverser.traverseSync (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/source-code-traverser.js:290:10)
at runRules (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1214:12)
at #flatVerifyWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2101:4)
at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2189:43)
at Linter._verifyWithFlatConfigArray (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2292:15)
at Linter.verify (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:1677:10)
at Linter.verifyAndFix (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/linter/linter.js:2557:20)
at verifyText (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1179:45)
at readAndVerifyFile (/home/jailuser/git/node_modules/.pnpm/[email protected][email protected]/node_modules/eslint/lib/eslint/eslint-helpers.js:1320:10)(import-x/no-relative-packages)
[error] 4-4: Unable to resolve path to module '../../../../fixtures/ComfyPage'.
(import-x/no-unresolved)
src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
[error] 5-5: Unable to resolve path to module '@/renderer/core/layout/store/layoutStore'.
(import-x/no-unresolved)
[error] 6-6: Unable to resolve path to module '@/renderer/extensions/vueNodes/composables/useNodeSnap'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/renderer/extensions/vueNodes/composables/useShiftKeySync'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/renderer/core/layout/transform/useTransformState'.
(import-x/no-unresolved)
🔇 Additional comments (3)
src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts (1)
63-68: Drag suppression during resize is wired correctlyThe early return on
layoutStore.isResizingVueNodes.valuecleanly prevents drag activation while a Vue resize is in progress, which matches the PR goal. This looks good as long as the resize flow always clears the flag on all exit paths (see related cleanup inuseNodeResize).Please double-check that every resize termination path (including pointer cancellation/unmount) resets
layoutStore.isResizingVueNodes.valueso drag isn’t permanently disabled for nodes.src/renderer/core/layout/store/layoutStore.ts (1)
139-142: Layout store resize flag aligns with existing drag stateAdding
isResizingVueNodesalongsideisDraggingVueNodeskeeps resize/drag UI state centralized and matches how the composables consume layout state. No issues from the store side.src/renderer/extensions/vueNodes/components/LGraphNode.vue (1)
120-127: Single bottom-right resize handle and wiring look consistentThe move to a single bottom-right resize handle is cleanly integrated:
- The handle is only rendered when expanded, uses an i18n-backed ARIA label, and stops pointerdown propagation so drag logic doesn’t interfere.
handleResizePointerDownrespectsnodeData.flags?.pinnedand delegates tostartResize, which in turn coordinates with the new resize state and layout store.This matches the new resize model and the surrounding drag/resize interaction logic.
Also applies to: 262-263, 316-330
| import { layoutStore } from '@/renderer/core/layout/store/layoutStore' | ||
| import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeSnap' | ||
| import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync' | ||
|
|
||
| import type { ResizeHandleDirection } from './resizeMath' | ||
| import { createResizeSession, toCanvasDelta } from './resizeMath' | ||
| import { useTransformState } from '@/renderer/core/layout/transform/useTransformState' | ||
|
|
||
| interface ResizeCallbackPayload { | ||
| size: Size | ||
| position: Point | ||
| } |
There was a problem hiding this comment.
Resize implementation is solid, but isResizingVueNodes can get stuck true
The refactored resize flow (camera-aware deltas + snap + DOM-driven size) looks good and the new layoutStore.isResizingVueNodes flag integrates cleanly with the drag guard. However, there’s an important edge case:
layoutStore.isResizingVueNodes.valueis only reset in thepointeruphandler.- There is no handling for
pointercancelor for composable teardown. - If the pointer sequence is interrupted (e.g., OS gesture, window blur, device-specific cancel) and
pointerupnever fires, the flag can remaintrue, which will permanently block drag activation inuseNodePointerInteractionsuntil reload.
This is a user-visible correctness issue and should be guarded against.
Consider a change along these lines:
-import { ref } from 'vue'
+import { onScopeDispose, ref } from 'vue'
// ...
- const handlePointerUp = (upEvent: PointerEvent) => {
- if (isResizing.value) {
- isResizing.value = false
- layoutStore.isResizingVueNodes.value = false
- resizeStartPointer.value = null
- resizeStartSize.value = null
-
- // Stop tracking shift key state
- stopShiftSync()
-
- target.releasePointerCapture(upEvent.pointerId)
- stopMoveListen()
- stopUpListen()
- }
- }
-
- const stopMoveListen = useEventListener('pointermove', handlePointerMove)
- const stopUpListen = useEventListener('pointerup', handlePointerUp)
+ const endResize = (event: PointerEvent) => {
+ if (!isResizing.value) return
+
+ isResizing.value = false
+ layoutStore.isResizingVueNodes.value = false
+ resizeStartPointer.value = null
+ resizeStartSize.value = null
+
+ // Stop tracking shift key state
+ stopShiftSync()
+
+ try {
+ target.releasePointerCapture(event.pointerId)
+ } catch {
+ // Ignore if capture was already released
+ }
+
+ stopMoveListen()
+ stopUpListen()
+ stopCancelListen()
+ }
+
+ const stopMoveListen = useEventListener('pointermove', handlePointerMove)
+ const stopUpListen = useEventListener('pointerup', endResize)
+ const stopCancelListen = useEventListener('pointercancel', endResize)
}
+
+ // Defensive reset in case component is unmounted mid-resize
+ onScopeDispose(() => {
+ isResizing.value = false
+ layoutStore.isResizingVueNodes.value = false
+ })This keeps the happy path unchanged while ensuring the global resize flag (and local state) can’t be stranded in a “resizing” state by cancellations or unmounts.
Also applies to: 25-28, 35-64, 65-89, 96-103
🧰 Tools
🪛 ESLint
[error] 5-5: Unable to resolve path to module '@/renderer/core/layout/store/layoutStore'.
(import-x/no-unresolved)
[error] 6-6: Unable to resolve path to module '@/renderer/extensions/vueNodes/composables/useNodeSnap'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/renderer/extensions/vueNodes/composables/useShiftKeySync'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/renderer/core/layout/transform/useTransformState'.
(import-x/no-unresolved)
There was a problem hiding this comment.
I will do this later, good point though.
There was a problem hiding this comment.
@christian-byrne, sounds good! Would you like me to open a GitHub issue to track this cleanup task for the pointercancel handling and scope disposal?
🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers
There was a problem hiding this comment.
yes please make an issue
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Create a GitHub issue to track the pointercancel and scope disposal cleanup
gh issue create \
--repo Comfy-Org/ComfyUI_frontend \
--title "Handle pointercancel and scope disposal in Vue node resize" \
--body "## Description
The resize implementation in \`useNodeResize\` currently sets \`layoutStore.isResizingVueNodes\` to \`true\` during resize operations and resets it in the \`pointerup\` handler. However, if the pointer sequence is interrupted (e.g., OS gesture, window blur, device-specific cancel) and \`pointerup\` never fires, the flag can remain \`true\`, permanently blocking drag activation until reload.
## Tasks
- Add handling for \`pointercancel\` event to ensure cleanup happens even when pointer sequences are interrupted
- Add \`onScopeDispose\` hook to defensively reset the \`isResizingVueNodes\` flag if the component is unmounted mid-resize
- Ensure \`releasePointerCapture\` is wrapped in try-catch to handle cases where capture was already released
## Context
Related PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7064
Original discussion: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7064#discussion_r2575454940
Requested by: @christian-byrne" \
--assignee christian-byrne
Length of output: 57
@christian-byrne, I've created issue #7323 to track the pointercancel handling and scope disposal cleanup for the resize functionality. The issue includes the context from our discussion and has been assigned to you.
🧬 Code Graph Analysis Results
[src/renderer/extensions/vueNodes/composables/useNodeSnap.ts] (lines 12-73)
export function useNodeSnap() {
const settingStore = useSettingStore()
// Reactive snap settings
const gridSize = computed(() => settingStore.get('Comfy.SnapToGrid.GridSize'))
const alwaysSnap = computed(() => settingStore.get('pysssss.SnapToGrid'))
/**
* Determines if snap-to-grid should be applied based on shift key and settings
* @param event - The pointer event to check for shift key
* @returns true if snapping should be applied
*/
function shouldSnap(event: PointerEvent): boolean {
return event.shiftKey || alwaysSnap.value
}
/**
* Applies snap-to-grid to a position
* @param position - Position object with x, y coordinates
* @returns The snapped position as a new object
*/
function applySnapToPosition(position: { x: number; y: number }): {
x: number
y: number
} {
const size = gridSize.value
if (!size) return { ...position }
const posArray: [number, number] = [position.x, position.y]
if (snapPoint(posArray, size)) {
return { x: posArray[0], y: posArray[1] }
}
return { ...position }
}
/**
* Applies snap-to-grid to a size (width/height)
* @param size - Size object with width, height
* @returns The snapped size as a new object
*/
function applySnapToSize(size: { width: number; height: number }): {
width: number
height: number
} {
const gridSizeValue = gridSize.value
if (!gridSizeValue) return { ...size }
const sizeArray: [number, number] = [size.width, size.height]
if (snapPoint(sizeArray, gridSizeValue)) {
return { width: sizeArray[0], height: sizeArray[1] }
}
return { ...size }
}
return {
gridSize,
alwaysSnap,
shouldSnap,
applySnapToPosition,
applySnapToSize
}
}
[src/renderer/extensions/vueNodes/composables/useShiftKeySync.ts] (lines 25-107)
export function useShiftKeySync() {
const shiftKeyState = shallowRef(false)
let canvasEl: HTMLCanvasElement | null = null
/**
* Synchronizes shift key state to LiteGraph canvas by dispatching synthetic keyboard events.
*
* Only dispatches events when shift state actually changes to minimize overhead.
* Canvas reference is lazily initialized on first use.
*
* @param isShiftPressed - Current shift key state to synchronize
*/
function syncShiftState(isShiftPressed: boolean) {
if (isShiftPressed === shiftKeyState.value) return
// Lazy-initialize canvas reference on first use
if (!canvasEl) {
canvasEl = app.canvas?.canvas ?? null
if (!canvasEl) return // Canvas not ready yet
}
shiftKeyState.value = isShiftPressed
canvasEl.dispatchEvent(
new KeyboardEvent(isShiftPressed ? 'keydown' : 'keyup', {
key: 'Shift',
shiftKey: isShiftPressed,
bubbles: true
})
)
}
/**
* Tracks shift key state during drag/resize operations and synchronizes to canvas.
*
* Attaches window-level keyboard event listeners for the duration of the operation.
* Listeners are automatically cleaned up when the returned function is called.
*
* @param initialEvent - Initial pointer event containing shift key state at drag/resize start
* @returns Cleanup function that removes event listeners - must be called when operation ends
*
* @example
* ```ts
* function startDrag(event: PointerEvent) {
* const stopTracking = trackShiftKey(event)
*
* const handlePointerUp = () => {
* stopTracking() // Cleanup listeners
* }
* }
* ```
*/
function trackShiftKey(initialEvent: PointerEvent): () => void {
// Sync initial shift state
syncShiftState(initialEvent.shiftKey)
// Listen for shift key press/release during the operation
const handleKeyEvent = (e: KeyboardEvent) => {
if (e.key !== 'Shift') return
syncShiftState(e.shiftKey)
}
const stopKeydown = useEventListener(window, 'keydown', handleKeyEvent, {
passive: true
})
const stopKeyup = useEventListener(window, 'keyup', handleKeyEvent, {
passive: true
})
// Return cleanup function that stops both listeners
return () => {
stopKeydown()
stopKeyup()
}
}
// Cleanup on component unmount
tryOnScopeDispose(() => {
shiftKeyState.value = false
canvasEl = null
})
return { trackShiftKey }
}
[src/renderer/core/layout/transform/useTransformState.ts] (lines 249-251)
export const useTransformState = createSharedComposable(
useTransformStateIndividual
)
[src/renderer/core/layout/store/layoutStore.ts] (lines 1469-1469)
export const layoutStore = new LayoutStoreImpl()
🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers
## Summary - Add isResizingVueNodes flag to layoutStore - Set flag in useNodeResize during resize operation - Check flag in useNodePointerInteractions to skip drag activation Fixes a bug where resizing a Vue node after selecting it would incorrectly trigger drag logic, causing the node to teleport. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7064-fix-Prevent-drag-activation-during-Vue-node-resize-2bb6d73d365081a2ad0ad4c7be76afee) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <[email protected]>
## Summary - Add isResizingVueNodes flag to layoutStore - Set flag in useNodeResize during resize operation - Check flag in useNodePointerInteractions to skip drag activation Fixes a bug where resizing a Vue node after selecting it would incorrectly trigger drag logic, causing the node to teleport. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7064-fix-Prevent-drag-activation-during-Vue-node-resize-2bb6d73d365081a2ad0ad4c7be76afee) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <[email protected]>
## Summary - Add isResizingVueNodes flag to layoutStore - Set flag in useNodeResize during resize operation - Check flag in useNodePointerInteractions to skip drag activation Fixes a bug where resizing a Vue node after selecting it would incorrectly trigger drag logic, causing the node to teleport. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7064-fix-Prevent-drag-activation-during-Vue-node-resize-2bb6d73d365081a2ad0ad4c7be76afee) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <[email protected]>
|
@christian-byrne Successfully backported to #7069 |
|
@christian-byrne Successfully backported to #7070 |
|
@christian-byrne Successfully backported to #7071 |
github-actions
bot
removed
the
needs-backport
…size (#7069) Backport of #7064 to `core/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7069-backport-core-1-32-fix-Prevent-drag-activation-during-Vue-node-resize-2bc6d73d365081da9f38d0dd1b1ab04e) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <[email protected]> Co-authored-by: DrJKL <[email protected]>
…size (#7070) Backport of #7064 to `core/1.33` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7070-backport-core-1-33-fix-Prevent-drag-activation-during-Vue-node-resize-2bc6d73d365081d29489d1704477bca4) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <[email protected]> Co-authored-by: DrJKL <[email protected]>
…esize (#7071) Backport of #7064 to `cloud/1.33` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7071-backport-cloud-1-33-fix-Prevent-drag-activation-during-Vue-node-resize-2bc6d73d36508129b6d4ee43e79de500) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <[email protected]> Co-authored-by: DrJKL <[email protected]>
Summary
Fixes a bug where resizing a Vue node after selecting it would incorrectly trigger drag logic, causing the node to teleport.
┆Issue is synchronized with this Notion page by Unito