Fix: Toolbox position desync #6962

DrJKL · 2025-11-26T19:35:21Z

Summary

Toggle the toolbox position check based on visibility, not just when selection changes.

┆Issue is synchronized with this Notion page by Unito

…when selection changes.

coderabbitai · 2025-11-26T19:35:35Z

📝 Walkthrough

Walkthrough

The selection toolbox position composable is refactored to control RAF-based transform synchronization via a dedicated watchEffect that reacts to visibility changes. This decouples synchronization control from the selectionChanged watcher, where the inline startSync/stopSync call is removed.

Changes

Cohort / File(s)	Summary
Synchronization control refactoring `src/composables/canvas/useSelectionToolboxPosition.ts`	Adds `watchEffect` import and introduces a visibility-driven reactive effect to manage RAF-based transform update lifecycle. Removes inline synchronization toggle from `selectionChanged` watcher, centralizing visibility-based control logic.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch drjkl/desynced-toolbox

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4b87b1f and ba1e51d.

📒 Files selected for processing (1)

src/composables/canvas/useSelectionToolboxPosition.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (14)

**/*.{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:

src/composables/canvas/useSelectionToolboxPosition.ts

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursorrules)

Use es-toolkit for utility functions

Files:

src/composables/canvas/useSelectionToolboxPosition.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

Use TypeScript for type safety

**/*.{ts,tsx}: Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue

Files:

src/composables/canvas/useSelectionToolboxPosition.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 run pnpm format before committing

Files:

src/composables/canvas/useSelectionToolboxPosition.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/composables/canvas/useSelectionToolboxPosition.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/composables/canvas/useSelectionToolboxPosition.ts

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use camelCase for variable and setting names in TypeScript/Vue files

Files:

src/composables/canvas/useSelectionToolboxPosition.ts

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,vue}: Use const settingStore = useSettingStore() and settingStore.get('Comfy.SomeSetting') to retrieve settings in TypeScript/Vue files
Use await settingStore.set('Comfy.SomeSetting', newValue) to update settings in TypeScript/Vue files
Check server capabilities using api.serverSupportsFeature('feature_name') before using enhanced features
Use api.getServerFeature('config_name', defaultValue) to retrieve server feature configuration

Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates

Files:

src/composables/canvas/useSelectionToolboxPosition.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
Use defaultsByInstallVersion property for gradual feature rollout based on version in settings configuration

Files:

src/composables/canvas/useSelectionToolboxPosition.ts

src/**/{services,composables}/**/*.{ts,tsx}