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

Camera Control

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

Canvas Zoom

Mouse with Scrollwheel

⌘ + Scroll Wheel

Ctrl + Scroll Wheel

Pan and Zoom via pinch

Keyboard

+ -

2 Button Mouse, no scrollwheel

+ -

Magic Mouse

⌘ + Scroll

Trackpad

Pinch

Pan

Mouse with Scrollwheel

Trackpad

Two Finger Drag

2 Button Mouse, no scrollwheel

Spacebar + Click

Pan and Zoom via pinch

Keyboard

Magic Mouse

Orbit

2 Button Mouse, no scrollwheel

Click and Drag

Touchpad

Click and Drag

Zoom to Fit

There are no rows in this table

⁠

Camera Control (hw first)

Camera Control (hw first)

Hardware

Input

Neutral 2D

Neutral 3D

⌘ / CTRL 2D

⌘ / CTRL 3D

⇧ 2D

⇧ 3D

⌥ / Alt 2D

⌥ / Alt 3D

2 button Mouse with scroll wheel

Left click

Select

Left click + drag

Selection box

Orbit

Right click

Context menu

Right click + drag

n/a

Scroll

Pan vertically

Scroll click

Scroll click + drag

Pan with drag

Trackpad

Left click

Select

Left click + drag

Right click

Context menu

Right click + drag

Scroll

Pan vertically

Scroll click

Scroll click + drag

Pan with drag

Keyboard

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.