Ability to navigate/scroll the workflow canvas with sliding two fingers (#14804)

**Issue**: https://github.com/twentyhq/core-team-issues/issues/1587

### Changes Made
- Modified scroll event handling to detect and limit two-finger scroll
gestures to the workflow canvas component
- Improved user experience by preventing accidental navigation or
zooming outside the intended canvas area

---------

Co-authored-by: Twill <agent@twill.ai>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Willy Douhard 2025-10-06 13:44:23 +02:00 committed by GitHub
parent 6b463736cc
commit 6c4ae1ae33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 1 deletions

24
.mcp.json Normal file
View file

@ -0,0 +1,24 @@
{
"mcpServers": {
"postgres": {
"type": "stdio",
"command": "uv",
"args": ["run", "postgres-mcp", "--access-mode=unrestricted"],
"env": {
"DATABASE_URI": "${PG_DATABASE_URL}"
}
},
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["@playwright/mcp@latest", "--no-sandbox", "--headless"],
"env": {}
},
"context7": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"],
"env": {}
}
}
}

View file

@ -29,6 +29,9 @@ npx nx run twenty-server:test:integration:with-db-reset # Integration tests wit
# Storybook
npx nx storybook:build twenty-front # Build Storybook
npx nx storybook:serve-and-test:static twenty-front # Run Storybook tests
When testing the UI end to end, click on "Continue with Email" and use the prefilled credentials.
```
### Code Quality
@ -122,6 +125,8 @@ packages/
## Development Workflow
IMPORTANT: Use Context7 for code generation, setup or configuration steps, or library/API documentation. Automatically use the Context7 MCP tools to resolve library IDs and get library docs without waiting for explicit requests.
### Before Making Changes
1. Always run linting and type checking after code changes
2. Test changes with relevant test suites

View file

@ -496,10 +496,11 @@ export const WorkflowDiagramCanvasBase = ({
nodesDraggable={nodesDraggable}
edgesFocusable={isDefined(onDeleteEdge)}
panOnDrag={workflowDiagramPanOnDrag}
panOnScroll={true}
onPaneContextMenu={onPaneContextMenu}
nodesConnectable={nodesConnectable}
paneClickDistance={10} // Fix small unwanted user dragging does not select node
preventScrolling={false}
preventScrolling={true}
connectionLineComponent={WorkflowDiagramConnection}
connectionRadius={0}
>