Flux's Camera Controls

Camera Controls:

User Problems
People want consistant controls no matter if they’re using diagramming or PCB
Flux Problems
We need clarity on how camera controls should work in Flux
Browsers vary in terms of how they process gestures
We want camera controls to be as close to the same across platforms and browsers as possible
Feature Spec:

To work in all major browsers (Chrome, Firefox, Safari, Edge) and platforms (OSX, Windows, iOS, Android)

Camera Control
0
Search
Action
Hardware
Notes
Mac / Chrome Mouse
Mac / Safari
Mac / Firefox
Windows / Chrome
Windows/ Edge
Windows / Firefox
Windows / Edge
Linux / Firefox
Linux / Chrome
Mobile Safari
Iphone Chrome
Android Chrome
1
Canvas Zoom
Mouse with Scrollwheel
⌘ + Scroll Wheel
⌘ + Scroll Wheel
⌘ + Scroll Wheel
Ctrl + Scroll Wheel
Ctrl + Scroll Wheel
Ctrl + Scroll Wheel
Ctrl + Scroll Wheel
Ctrl + Scroll Wheel
Ctrl + Scroll Wheel
Pan and Zoom via pinch
Pan and Zoom via pinch
Pan and Zoom via pinch
2
Keyboard
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
3
2 Button Mouse, no scrollwheel
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
4
Magic Mouse
⌘ + Scroll
⌘ + Scroll
⌘ + Scroll
5
Trackpad
Pinch
Pinch
Pinch
Pinch
Pinch
Pinch
Pinch
Pinch
Pinch
6
Pan
Mouse with Scrollwheel
7
Trackpad
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
Two Finger Drag
8
2 Button Mouse, no scrollwheel
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Spacebar + Click
Pan and Zoom via pinch
Pan and Zoom via pinch
9
10
Keyboard
11
Magic Mouse
12
Orbit
2 Button Mouse, no scrollwheel
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
13
Touchpad
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
Click and Drag
14
Zoom to Fit
15
There are no rows in this table

Camera Control (hw first)
0
Search
Hardware
Input
Neutral 2D
Neutral 3D
⌘ / CTRL 2D
⌘ / CTRL 3D
⇧ 2D
⇧ 3D
⌥ / Alt 2D
⌥ / Alt 3D
1
2 button Mouse with scroll wheel
Left click
Select
Select
2
Left click + drag
Selection box
Orbit
3
Right click
Context menu
Context menu
4
Right click + drag
n/a
n/a
5
Scroll
Pan vertically
Pan vertically
6
Scroll click
7
Scroll click + drag
Pan with drag
8
Trackpad
Left click
Select
9
Left click + drag
10
Right click
Context menu
11
Right click + drag
12
Scroll
Pan vertically
13
Scroll click
14
Scroll click + drag
Pan with drag
15
Keyboard
16
17
18
19
20
21
There are no rows in this table

Actions
Pan
Zoom
Orbit
Select
Drag to select
Deep select
Context menu
Drag & drop

Hardware Capabilities
Keyboard
2 Button Mouse
2 Button Mouse + Scroll Wheel
Left click
Right click
Scroll
Click scroll wheel
Magic Mouse
2 Button Trackpad
Magic Trackpad

What input methods do we support?
UI - buttons, gizmos, etc. (this seems like less of an issue since they should work the same cross platform?)
See, your task was to track camera controls, so that’s how you’ve framed it. Mine is to ensure that all actions can be performed by users, so I want to track all those methods. UI is one way to control the camera - the Flip button and the Zoom to Fit. These actions may be duplicated by hotkeys or input devices. I’d like to know these things.
Keyboard
2 button mouse
2 button mouse with scroll wheel
Magic Mouse
Trackpad
Deprecated
Mouse:
pan via spacebar hold and left mouse click
zoom via CMD + scroll wheel (zooms to cursor position)
orbit via hold left click (orbits around cursor position)

Touch pad:
pan/zoom via pinch (zooms to cursor position)
orbit via one finger click and drag (orbits around cursor position)

Touch screen:
pan/zoom via pinch (zooms to center of pinch position (iOS Safari example))
orbit via one finger touch (orbits around cursor position)

Arrow keys:
keyboard panning disabled if anything is selected
keys
up for pan up
left for pan left
down for pan down
right for pan right
hold arrow keys for continuous pan

Zoom to fit
zooms to fit selected object(s)
when nothing is selected it zooms to fit all objects
ignores grid and other objects that are not user data

Camera flip in 2d pcb mode
Rotates camera around Y axis

Gizmo in pcb 3d mode
clicking on flat surface positions camera to look at that direction in a flat way
click on corner positions camera to corner angle
click on edge positions camera to to edge angle

Viewport position recall
CTRL + 6-9 number keys to store current position
6-9 number keys to recall position

Notes:
Chrome, Safari, and Firefox do not agree on what a pinch gesture is


Questions:


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.