feat: add canvas interaction mode toggle (pan/selection) by breaking-brake · Pull Request #116 · breaking-brake/cc-wf-studio

breaking-brake · Nov 20, 2025

Problem

Currently, the ReactFlow canvas is always in "hand tool mode" (pan mode), making range selection unavailable without using modifier keys.

Current Behavior

Drag on canvas → Pan the canvas
❌ No intuitive way to switch to range selection mode

Expected Behavior

User can switch between pan mode and selection mode
✅ Toolbar toggle + Ctrl/Cmd key for temporary switching
✅ Visual feedback for current mode

Solution

Added a canvas interaction mode toggle UI that allows switching between pan mode and selection mode.

Features

Pan mode (default): Drag to pan canvas, Ctrl/Cmd+drag for range selection
Selection mode: Drag for range selection, Ctrl/Cmd+drag to pan
Toggle UI: Located in canvas top-left corner
Keyboard support: Ctrl/Cmd key for temporary mode inversion
Accessibility: ARIA labels, keyboard navigation (Enter/Space), tooltips
Clickable icons: Both hand and selection icons are clickable in addition to the switch

UI Design Principles

Pill-shaped panel (borderRadius: 20px) for soft visual appearance
Semi-transparent (opacity: 0.85) to avoid hiding canvas elements
Compact sizing (20% smaller icons/spacing) to minimize obstruction
Active icon highlighting with badge background for clear visual feedback

Changes

New Component

File: src/webview/src/components/InteractionModeToggle.tsx

Radix UI Switch component for mode toggle
Hand and MousePointerClick icons from Lucide React
Tooltips for user guidance
Full keyboard accessibility support

File: src/webview/src/components/WorkflowEditor.tsx

// Track Ctrl/Cmd key state for temporary mode switching
const [isModifierKeyPressed, setIsModifierKeyPressed] = useState(false);

// Calculate effective interaction mode based on base mode and modifier key
const effectiveMode = useMemo(() => {
  if (isModifierKeyPressed) {
    return interactionMode === 'pan' ? 'selection' : 'pan';
  }
  return interactionMode;
}, [interactionMode, isModifierKeyPressed]);

// ReactFlow interaction props
const panOnDrag = effectiveMode === 'pan';
const selectionOnDrag = effectiveMode === 'selection';

Added ReactFlow Panel component:

<Panel position="top-left">
  <InteractionModeToggle />
</Panel>

Store Updates

File: src/webview/src/stores/workflow-store.ts

export type InteractionMode = 'pan' | 'selection';

interface WorkflowStore {
  interactionMode: InteractionMode;
  setInteractionMode: (mode: InteractionMode) => void;
  toggleInteractionMode: () => void;
}

Internationalization

File: src/webview/src/i18n/translations/ja.ts

toolbar.interactionMode.panButton: '手のひら'
toolbar.interactionMode.rangeSelectionButton: '範囲選択'
toolbar.interactionMode.switchToPan: '手のひらモードに切り替え'
toolbar.interactionMode.switchToSelection: '範囲選択モードに切り替え'

Added translations for 5 languages: en, ja, ko, zh-CN, zh-TW

Impact

UX Improvements

✅ Users can easily switch between pan and selection modes
✅ Ctrl/Cmd key provides quick temporary mode switching
✅ Visual feedback clearly indicates current mode
✅ Compact, semi-transparent UI minimizes canvas obstruction
✅ Keyboard-only navigation fully supported

Breaking Changes

❌ None - This is a new feature addition

Side Effects

Default mode is pan (existing behavior preserved)
No impact on existing workflows or user data

Testing

Dependencies

Added packages:

@radix-ui/react-switch: ^1.2.6
@radix-ui/react-tooltip: ^1.2.8
lucide-react: ^0.554.0

Rationale: Radix UI chosen for future shadcn/ui compatibility, Lucide React for tree-shakable icons

Notes

UI positioned in canvas top-left to minimize interference with workflow editing
Semi-transparent design ensures underlying nodes remain visible
Compact sizing reduces visual footprint by ~20%
All icons and controls are fully accessible via keyboard

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Add toggle button to switch between hand tool (pan) and range selection modes on the canvas. Implement using Radix UI Toggle Group for accessibility and future shadcn/ui compatibility. ## Features - **Toggle button**: Radix UI Toggle Group with Lucide React icons - **Pan mode (default)**: Drag to pan canvas, Ctrl/Cmd+drag to select - **Selection mode**: Drag to select nodes, Ctrl/Cmd+drag to pan - **Keyboard support**: Arrow keys navigation via Radix UI - **Accessibility**: ARIA attributes auto-configured ## Technical Details - Added `lucide-react` for lightweight icons (Hand, MousePointerClick) - Added `@radix-ui/react-toggle-group` for accessible toggle UI - Added `interactionMode` state to workflow store - Configured ReactFlow `panOnDrag` and `selectionOnDrag` props - Implemented Ctrl/Cmd key handler for temporary mode switching - i18n support for 5 languages (en, ja, ko, zh-CN, zh-TW) ## UI/UX - Visual toggle with icons and labels - Active state highlighted with primary button color - Inactive state with secondary button color and reduced opacity - Tooltips for mode switching guidance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Replace toggle group buttons with a switch component for more intuitive mode switching. Add icon badge backgrounds for improved visibility across different theme colors. ## Changes - Replace `@radix-ui/react-toggle-group` with `@radix-ui/react-switch` - Remove text labels, use icons only (Hand & MousePointerClick) - Add circular badge background for active icon - Improve color contrast using badge theme variables ## UI Design - **Left**: Hand icon (pan mode) - **Center**: Switch component - **Right**: MousePointerClick icon (selection mode) - **Active state**: Badge background + high contrast color - **Inactive state**: Transparent background + disabled color ## Benefits - More compact layout - Better visual feedback - Improved accessibility with proper theme colors - Smooth transitions (150ms) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Add canvas interaction mode toggle UI to switch between pan mode and selection mode. The toggle is placed in the top-left corner of the canvas as a compact, semi-transparent pill-shaped panel. Features: - Pan mode (default): Drag to pan, Ctrl/Cmd+drag for range selection - Selection mode: Drag for range selection, Ctrl/Cmd+drag to pan - Toolbar button toggle with icons (Hand/MousePointerClick) - Keyboard support: Ctrl/Cmd key for temporary mode switching - Accessibility: ARIA labels, keyboard navigation support - Tooltips for icon explanation - Clickable icons in addition to switch UI Design: - Pill-shaped panel (borderRadius: 20px) for soft visual appearance - Semi-transparent (opacity: 0.85) to avoid hiding canvas elements - Compact sizing (20% smaller icons/spacing) to minimize obstruction - Active icon highlighted with badge background Dependencies: - @radix-ui/react-switch: ^1.2.6 - @radix-ui/react-tooltip: ^1.2.8 - lucide-react: ^0.554.0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

## [2.8.0](v2.7.4...v2.8.0) (2025-11-20) ### Features * add canvas interaction mode toggle (pan/selection) ([#116](#116)) ([6d5f4be](6d5f4be))

github-actions · Nov 20, 2025

🎉 This PR is included in version 2.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

* feat: add canvas pan/selection mode toggle with Radix UI Add toggle button to switch between hand tool (pan) and range selection modes on the canvas. Implement using Radix UI Toggle Group for accessibility and future shadcn/ui compatibility. ## Features - **Toggle button**: Radix UI Toggle Group with Lucide React icons - **Pan mode (default)**: Drag to pan canvas, Ctrl/Cmd+drag to select - **Selection mode**: Drag to select nodes, Ctrl/Cmd+drag to pan - **Keyboard support**: Arrow keys navigation via Radix UI - **Accessibility**: ARIA attributes auto-configured ## Technical Details - Added `lucide-react` for lightweight icons (Hand, MousePointerClick) - Added `@radix-ui/react-toggle-group` for accessible toggle UI - Added `interactionMode` state to workflow store - Configured ReactFlow `panOnDrag` and `selectionOnDrag` props - Implemented Ctrl/Cmd key handler for temporary mode switching - i18n support for 5 languages (en, ja, ko, zh-CN, zh-TW) ## UI/UX - Visual toggle with icons and labels - Active state highlighted with primary button color - Inactive state with secondary button color and reduced opacity - Tooltips for mode switching guidance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: replace toggle buttons with switch UI for better UX Replace toggle group buttons with a switch component for more intuitive mode switching. Add icon badge backgrounds for improved visibility across different theme colors. ## Changes - Replace `@radix-ui/react-toggle-group` with `@radix-ui/react-switch` - Remove text labels, use icons only (Hand & MousePointerClick) - Add circular badge background for active icon - Improve color contrast using badge theme variables ## UI Design - **Left**: Hand icon (pan mode) - **Center**: Switch component - **Right**: MousePointerClick icon (selection mode) - **Active state**: Badge background + high contrast color - **Inactive state**: Transparent background + disabled color ## Benefits - More compact layout - Better visual feedback - Improved accessibility with proper theme colors - Smooth transitions (150ms) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: add canvas interaction mode toggle (pan/selection) Add canvas interaction mode toggle UI to switch between pan mode and selection mode. The toggle is placed in the top-left corner of the canvas as a compact, semi-transparent pill-shaped panel. Features: - Pan mode (default): Drag to pan, Ctrl/Cmd+drag for range selection - Selection mode: Drag for range selection, Ctrl/Cmd+drag to pan - Toolbar button toggle with icons (Hand/MousePointerClick) - Keyboard support: Ctrl/Cmd key for temporary mode switching - Accessibility: ARIA labels, keyboard navigation support - Tooltips for icon explanation - Clickable icons in addition to switch UI Design: - Pill-shaped panel (borderRadius: 20px) for soft visual appearance - Semi-transparent (opacity: 0.85) to avoid hiding canvas elements - Compact sizing (20% smaller icons/spacing) to minimize obstruction - Active icon highlighted with badge background Dependencies: - @radix-ui/react-switch: ^1.2.6 - @radix-ui/react-tooltip: ^1.2.8 - lucide-react: ^0.554.0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>

## [2.8.0](v2.7.4...v2.8.0) (2025-11-20) ### Features * add canvas interaction mode toggle (pan/selection) ([#116](#116)) ([6d5f4be](6d5f4be))

breaking-brake and others added 3 commits November 20, 2025 08:54

breaking-brake merged commit 6d5f4be into main Nov 20, 2025
3 checks passed

breaking-brake mentioned this pull request Nov 20, 2025

Release: v2.8.0 #117

Merged

github-actions Bot added a commit that referenced this pull request Nov 20, 2025

chore(release): 2.8.0 [skip ci]

338968c

## [2.8.0](v2.7.4...v2.8.0) (2025-11-20) ### Features * add canvas interaction mode toggle (pan/selection) ([#116](#116)) ([6d5f4be](6d5f4be))

github-actions Bot added the released label Nov 20, 2025

breaking-brake pushed a commit that referenced this pull request Nov 23, 2025

chore(release): 2.8.0 [skip ci]

d71b8c7

## [2.8.0](v2.7.4...v2.8.0) (2025-11-20) ### Features * add canvas interaction mode toggle (pan/selection) ([#116](#116)) ([6d5f4be](6d5f4be))

breaking-brake deleted the feat/canvas-pan-selection-mode branch December 3, 2025 11:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add canvas interaction mode toggle (pan/selection)#116

feat: add canvas interaction mode toggle (pan/selection)#116
breaking-brake merged 3 commits intomainbreaking-brake/cc-wf-studio:mainfrom
feat/canvas-pan-selection-modebreaking-brake/cc-wf-studio:feat/canvas-pan-selection-modeCopy head branch name to clipboard

breaking-brake commented Nov 20, 2025

Uh oh!

Uh oh!

github-actions Bot commented Nov 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Search code, repositories, users, issues, pull requests...

Conversation

breaking-brake commented Nov 20, 2025

Problem

Current Behavior

Expected Behavior

Solution

Features

UI Design Principles

Changes

New Component

Store Updates

Internationalization

Impact

UX Improvements

Breaking Changes

Side Effects

Testing

Dependencies

Notes

Uh oh!

Uh oh!

github-actions Bot commented Nov 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant