Add "Trackpad Friendly" camera control setting inspired by Blender (#431)

* Refactor: rename CADProgram to CameraSystem

* Fix buttonDownInStream always set to 0
This is problematic because the left mouse
button ID is actually 0. If no button is
pressed we should set back to undefined.

* Fix: middle mouse button ID is 1, not 3

* Add "Trackpad Friendly" camera system setting

Signed off by Frank Noirot <frank@kittycad.io>

* Allow camera configs to be lenient on first click
This commit is contained in:
Frank Noirot
2023-09-11 16:21:23 -04:00
committed by GitHub
parent 9e2a94fcd9
commit c5cb0e2fd4
6 changed files with 67 additions and 32 deletions

View File

@ -1,17 +1,19 @@
const noModifiersPressed = (e: React.MouseEvent) =>
!e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey
export type CADProgram =
export type CameraSystem =
| 'KittyCAD'
| 'OnShape'
| 'Trackpad Friendly'
| 'Solidworks'
| 'NX'
| 'Creo'
| 'AutoCAD'
export const cadPrograms: CADProgram[] = [
export const cameraSystems: CameraSystem[] = [
'KittyCAD',
'OnShape',
'Trackpad Friendly',
'Solidworks',
'NX',
'Creo',
@ -21,12 +23,14 @@ export const cadPrograms: CADProgram[] = [
interface MouseGuardHandler {
description: string
callback: (e: React.MouseEvent) => boolean
lenientDragStartButton?: number
}
interface MouseGuardZoomHandler {
description: string
dragCallback: (e: React.MouseEvent) => boolean
scrollCallback: (e: React.MouseEvent) => boolean
lenientDragStartButton?: number
}
interface MouseGuard {
@ -35,12 +39,12 @@ interface MouseGuard {
rotate: MouseGuardHandler
}
export const cameraMouseDragGuards: Record<CADProgram, MouseGuard> = {
export const cameraMouseDragGuards: Record<CameraSystem, MouseGuard> = {
KittyCAD: {
pan: {
description: 'Right click + Shift + drag or middle click + drag',
callback: (e) =>
(e.button === 3 && noModifiersPressed(e)) ||
(e.button === 1 && noModifiersPressed(e)) ||
(e.button === 2 && e.shiftKey),
},
zoom: {
@ -58,7 +62,7 @@ export const cameraMouseDragGuards: Record<CADProgram, MouseGuard> = {
description: 'Right click + Ctrl + drag or middle click + drag',
callback: (e) =>
(e.button === 2 && e.ctrlKey) ||
(e.button === 3 && noModifiersPressed(e)),
(e.button === 1 && noModifiersPressed(e)),
},
zoom: {
description: 'Scroll wheel',
@ -70,55 +74,74 @@ export const cameraMouseDragGuards: Record<CADProgram, MouseGuard> = {
callback: (e) => e.button === 2 && noModifiersPressed(e),
},
},
'Trackpad Friendly': {
pan: {
description: 'Left click + Alt + Shift + drag or middle click + drag',
callback: (e) =>
(e.button === 0 && e.altKey && e.shiftKey && !e.metaKey) ||
(e.button === 1 && noModifiersPressed(e)),
},
zoom: {
description: 'Scroll wheel or Left click + Alt + OS + drag',
dragCallback: (e) => e.button === 0 && e.altKey && e.metaKey,
scrollCallback: () => true,
},
rotate: {
description: 'Left click + Alt + drag',
callback: (e) => e.button === 0 && e.altKey && !e.shiftKey && !e.metaKey,
lenientDragStartButton: 0,
},
},
Solidworks: {
pan: {
description: 'Right click + Ctrl + drag',
callback: (e) => e.button === 2 && e.ctrlKey,
lenientDragStartButton: 2,
},
zoom: {
description: 'Scroll wheel or Middle click + Shift + drag',
dragCallback: (e) => e.button === 3 && e.shiftKey,
dragCallback: (e) => e.button === 1 && e.shiftKey,
scrollCallback: () => true,
},
rotate: {
description: 'Middle click + drag',
callback: (e) => e.button === 3 && noModifiersPressed(e),
callback: (e) => e.button === 1 && noModifiersPressed(e),
},
},
NX: {
pan: {
description: 'Middle click + Shift + drag',
callback: (e) => e.button === 3 && e.shiftKey,
callback: (e) => e.button === 1 && e.shiftKey,
},
zoom: {
description: 'Scroll wheel or Middle click + Ctrl + drag',
dragCallback: (e) => e.button === 3 && e.ctrlKey,
dragCallback: (e) => e.button === 1 && e.ctrlKey,
scrollCallback: () => true,
},
rotate: {
description: 'Middle click + drag',
callback: (e) => e.button === 3 && noModifiersPressed(e),
callback: (e) => e.button === 1 && noModifiersPressed(e),
},
},
Creo: {
pan: {
description: 'Middle click + Shift + drag',
callback: (e) => e.button === 3 && e.shiftKey,
callback: (e) => e.button === 1 && e.shiftKey,
},
zoom: {
description: 'Scroll wheel or Middle click + Ctrl + drag',
dragCallback: (e) => e.button === 3 && e.ctrlKey,
dragCallback: (e) => e.button === 1 && e.ctrlKey,
scrollCallback: () => true,
},
rotate: {
description: 'Middle click + drag',
callback: (e) => e.button === 3 && noModifiersPressed(e),
callback: (e) => e.button === 1 && noModifiersPressed(e),
},
},
AutoCAD: {
pan: {
description: 'Middle click + drag',
callback: (e) => e.button === 3 && noModifiersPressed(e),
callback: (e) => e.button === 1 && noModifiersPressed(e),
},
zoom: {
description: 'Scroll wheel',
@ -127,7 +150,7 @@ export const cameraMouseDragGuards: Record<CADProgram, MouseGuard> = {
},
rotate: {
description: 'Middle click + Shift + drag',
callback: (e) => e.button === 3 && e.shiftKey,
callback: (e) => e.button === 1 && e.shiftKey,
},
},
}