Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve skeleton proofreading and fix some shortcuts on MacOS #7678

Merged
merged 31 commits into from
Mar 27, 2024
Merged

Improve skeleton proofreading and fix some shortcuts on MacOS #7678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
74f4272
allow complex shortcuts for merging/deleting trees in non-legacy mode…
philippotto Mar 7, 2024
d727e4f
improve typing
philippotto Mar 7, 2024
015e56f
make node picking compatible with arbitary viewport
philippotto Mar 7, 2024
3ad32b7
use ortho-mode leftclick handler in arbitrary mode, too
philippotto Mar 7, 2024
04c8cba
update status bar for skeleton related shortcuts in arbitrary view
philippotto Mar 7, 2024
0bf8a2a
fix cyclic dependency
philippotto Mar 7, 2024
008234d
allow deleting a node and creating a tree with the keyboard in arbitr…
philippotto Mar 8, 2024
d3d33d0
Merge branch 'master' of github.com:scalableminds/webknossos into imp…
philippotto Mar 8, 2024
bdca4e7
update changelog
philippotto Mar 8, 2024
e323d88
handle metaKey as an alternative to ctrlKey to better support mac os
philippotto Mar 8, 2024
2770c10
show option instead of alt key in status bar and context menu when on…
philippotto Mar 8, 2024
df82be2
update changelog
philippotto Mar 8, 2024
26c4a5e
Apply suggestions from code review
philippotto Mar 19, 2024
92034f1
incorporate PR feedback
philippotto Mar 19, 2024
6315448
always show cursor for move tool in 3d viewport
philippotto Mar 19, 2024
3839b41
bring docs for keyboard shortcuts up to date
philippotto Mar 19, 2024
a37923b
change color of active node a bit when not in ortho mode
philippotto Mar 19, 2024
6680a97
Merge branch 'master' into improve-skeleton-proofreading
philippotto Mar 20, 2024
f551d8b
restore old camera.far code
philippotto Mar 21, 2024
0f52d6c
avoid attaching store listener when cross sections are never rendered…
philippotto Mar 21, 2024
f86fdbb
rename ctrl to ctrlOrCmd event in input.ts
philippotto Mar 25, 2024
99f0ae9
show Cmd instead of Ctrl in context menu when on OSX
philippotto Mar 25, 2024
c2feb20
write ctrl/cmd everywhere in keyboard docs
philippotto Mar 25, 2024
3277bc1
remove unused import
philippotto Mar 25, 2024
aeea5d0
remove accidental visibility code in cube.ts
philippotto Mar 26, 2024
2766297
add comment about shifted hue for node in shader
philippotto Mar 26, 2024
9923759
SHIFT -> Shift
philippotto Mar 26, 2024
56c6c42
fix bg color of navbar buttons on hover in light mode
philippotto Mar 27, 2024
ddee300
always show crosshair as cursor in arbitrary mode
philippotto Mar 27, 2024
1c52802
Merge branch 'master' of github.com:scalableminds/webknossos into imp…
philippotto Mar 27, 2024
a26dc62
Merge branch 'master' of github.com:scalableminds/webknossos into imp…
philippotto Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.unreleased.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
[Commits](https://github.com/scalableminds/webknossos/compare/24.04.0...HEAD)

### Added
- Creating and deleting edges is now possible with ctrl+(alt/shift)+leftclick in orthogonal, flight and oblique mode. Also, the flight and oblique modes allow selecting nodes with leftclick, creating new trees with 'c' and deleting the active node with 'del'. [#7678](https://github.com/scalableminds/webknossos/pull/7678)

### Changed
- Improved task list to sort tasks by project date, add option to expand all tasks at once and improve styling. [#7709](https://github.com/scalableminds/webknossos/pull/7709)
Expand All @@ -19,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
- Duplicated annotations are opened in a new browser tab. [#7724](https://github.com/scalableminds/webknossos/pull/7724)

### Fixed
- Fixed that the Command modifier on MacOS wasn't treated correctly for some shortcuts. Also, instead of the Alt key, the ⌥ key is shown as a hint in the status bar on MacOS. [#7659](https://github.com/scalableminds/webknossos/pull/7659)
- Moving from the time tracking overview to its detail view, the selected user was not preselected in the next view. [#7722](https://github.com/scalableminds/webknossos/pull/7722)

### Removed
Expand Down
82 changes: 42 additions & 40 deletions docs/keyboard_shortcuts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ A complete listing of all available keyboard & mouse shortcuts for WEBKNOSSOS ca

| Key Binding | Operation |
| ----------------------------- | ------------------------------------------- |
| CTRL / CMD + Z | Undo |
| CTRL / CMD + Y | Redo |
| CTRL / CMD + S | Save |
| I or CTRL + Mousewheel | Zoom In |
| O or CTRL + Mousewheel | Zoom Out |
| CTRL/CMD + Z | Undo |
| CTRL/CMD + Y | Redo |
| CTRL/CMD + S | Save |
| I or CTRL/CMD + Mousewheel | Zoom In |
| O or CTRL/CMD + Mousewheel | Zoom Out |
| P | Select Previous Comment |
| N | Select Next Comment |
| 3 | Toggle Segmentation Opacity |
Expand All @@ -31,7 +31,7 @@ A complete listing of all available keyboard & mouse shortcuts for WEBKNOSSOS ca
| 1 | Toggle Visibility of all Trees |
| 2 | Toggle Visibility of Inactive Trees |
| SHIFT + Mousewheel | Change Node Radius |
| CTRL + SHIFT + F | Open Tree Search (if Tree List is visible) |
| CTRL/CMD + SHIFT + F | Open Tree Search (if Tree List is visible) |
| F or Mousewheel | Move Forward by a Single Slice |
| D or Mousewheel | Move Backward by a Single Slice |

Expand All @@ -48,16 +48,18 @@ Note that skeleton-specific mouse actions are usually only available when the sk
| Right-Click Drag (3D View) | Rotate 3D View |
| Left Click | Create New Node |
| Left Click | Select Node (Mark as Active Node) under cursor |
| Left Drag | Move node under cursor |
| Right Click (on node) | Bring up the context-menu with further actions |
| Left Drag | Move node under cursor |
| Right Click (on node) | Bring up the context-menu with further actions |
| SHIFT + ALT + Left Click | Merge Two Nodes and Combine Trees |
| SHIFT + CTRL/CMD + Left Click | Delete Edge / Split Trees |
| C | Create New Tree |
| CTRL + . | Navigate to the next Node (Mark as Active)|
| CTRL + , | Navigate to previous Node (Mark as Active) |
| CTRL + Left Click / CTRL + Arrow Keys | Move the Active Node |
| Del | Delete Node / Split Trees |
| B | Mark Node as New Branchpoint |
| J | Jump To Last Branchpoint |
| S | Center Camera on Active Node |
| CTRL/CMD + . | Navigate to the next Node (Mark as Active) |
| CTRL/CMD + , | Navigate to previous Node (Mark as Active) |
| CTRL/CMD + Left Click / CTRL/CMD + Arrow Keys | Move the Active Node |
| Del | Delete Node / Split Trees |
| B | Mark Node as New Branchpoint |
| J | Jump To Last Branchpoint |
| S | Center Camera on Active Node |


Note that you can enable *Classic Controls* which will behave slightly different and more explicit for the mouse actions:
Expand All @@ -66,18 +68,16 @@ Note that you can enable *Classic Controls* which will behave slightly different
| ----------------------------- | ------------- |
| Right Click | Create New Node |
| SHIFT + Left Click | Select Node (Mark as Active Node) |
| SHIFT + Left Click | Select Node (Mark as Active Node) |
| SHIFT + ALT + Left Click | Merge Two Nodes and Combine Trees |
| SHIFT + CTRL + Left Click | Delete Edge / Split Trees |


### Flight / Oblique Mode

| Key Binding | Operation |
| ----------------------------- | ------------------------------------------ |
| Left Click | Select Node (Mark as Active Node) under cursor |
| Left Mouse Drag or Arrow Keys | Rotation |
| SPACE | Move Forward |
| CTRL + SPACE | Move Backward |
| CTRL/CMD + SPACE | Move Backward |
| I, O | Zoom In And Out |
| SHIFT + Arrow | Rotation Around Axis |
| R | Invert Direction |
Expand All @@ -86,8 +86,10 @@ Note that you can enable *Classic Controls* which will behave slightly different
| S | Center Active Node |
| F | Forward Without Recording Waypoints |
| D | Backward Without Recording Waypoints |
| Del | Delete Node / Split Trees |
| SHIFT + SPACE | Delete Active Node, Recenter Previous Node |

| SHIFT + ALT + Left Click | Merge Two Nodes and Combine Trees |
| SHIFT + CTRL/CMD + Left Click | Delete Edge / Split Trees |

## Volume Mode

Expand All @@ -96,8 +98,8 @@ Note that you can enable *Classic Controls* which will behave slightly different
| Left Mouse Drag or Arrow Keys | Move (Move Mode) / Add To Current Segment (Trace / Brush Mode) |
| Right Click | Bring up context-menu with further actions |
| SHIFT + Left Click | Select Active Segment |
| CTRL + Left Mouse Drag | Add Voxels To Current Segment while inverting the overwrite-mode (see toolbar for overwrite-mode) |
| CTRL + SHIFT + Left Mouse Drag | Remove Voxels From Segment |
| CTRL/CMD + Left Mouse Drag | Add Voxels To Current Segment while inverting the overwrite-mode (see toolbar for overwrite-mode) |
| CTRL/CMD + SHIFT + Left Mouse Drag | Remove Voxels From Segment |
| Alt + Mouse Move | Move |
| C | Create New Segment |
| SHIFT + Mousewheel or SHIFT + I, O | Change Brush Size (Brush Mode) |
Expand All @@ -108,44 +110,44 @@ Note that you can enable *Classic Controls* which won't open a context menu on r
| Key Binding | Operation |
| --------------------------------- | ----------------------------------------------------------- |
| Right Mouse Drag | Remove Voxels |
| CTRL + Right Mouse Drag | Remove Voxels while inverting the overwrite-mode (see toolbar for overwrite-mode) |
| CTRL/CMD + Right Mouse Drag | Remove Voxels while inverting the overwrite-mode (see toolbar for overwrite-mode) |

## Tool Switching Shortcuts

Note that you need to first press CTRL + K, release these keys and then press the letter that was assigned to a specific tool in order to switch to it.
CTRL + K is not needed for cyclic tool switching via W / SHIFT + W.
Note that you need to first press CTRL/CMD + K, release these keys and then press the letter that was assigned to a specific tool in order to switch to it.
CTRL/CMD + K is not needed for cyclic tool switching via W / SHIFT + W.

| Key Binding | Operation |
| --------------------------------- | --------------------------------------------------------------------------------- |
| W | Cycle Through Tools (Move / Skeleton / Trace / Brush / ...) |
| SHIFT + W | Cycle Backwards Through Tools (Move / Proofread / Bounding Box / Pick Cell / ...) |
| CTRL + K, **M** | Move Tool |
| CTRL + K, **S** | Skeleton Tool |
| CTRL + K, **B** | Brush Tool |
| CTRL + K, **E** | Brush Erase Tool |
| CTRL + K, **L** | Lasso Tool |
| CTRL + K, **R** | Lasso Erase Tool |
| CTRL + K, **P** | Segment Picker Tool |
| CTRL + K, **Q** | Quick Select Tool |
| CTRL + K, **X** | Bounding Box Tool |
| CTRL + K, **O** | Proofreading Tool |
| CTRL/CMD + K, **M** | Move Tool |
| CTRL/CMD + K, **S** | Skeleton Tool |
| CTRL/CMD + K, **B** | Brush Tool |
| CTRL/CMD + K, **E** | Brush Erase Tool |
| CTRL/CMD + K, **L** | Lasso Tool |
| CTRL/CMD + K, **R** | Lasso Erase Tool |
| CTRL/CMD + K, **P** | Segment Picker Tool |
| CTRL/CMD + K, **Q** | Quick Select Tool |
| CTRL/CMD + K, **X** | Bounding Box Tool |
| CTRL/CMD + K, **O** | Proofreading Tool |

### Brush Related Shortcuts

Note that you need to first press CTRL + K, release these keys and press the suitable number.
Note that you need to first press CTRL/CMD + K, release these keys and press the suitable number.

| Key Binding | Operation |
| --------------------------------- | --------------------------------------------------------------------------------- |
| CTRL + K, **1** | Switch to small brush |
| CTRL + K, **2** | Switch to medium sized brush |
| CTRL + K, **3** | Switch to large brush |
| CTRL/CMD + K, **1** | Switch to small brush |
| CTRL/CMD + K, **2** | Switch to medium sized brush |
| CTRL/CMD + K, **3** | Switch to large brush |

## Mesh Related Shortcuts

| Key Binding | Operation |
| ------------------------------------------------------ | ----------------------------------------------------------- |
| Shift + Click on a mesh in the 3D viewport | Move the camera to the clicked position |
| Ctrl + Click on a mesh in the 3D viewport | Unload the mesh from WEBKNOSSOS |
| CTRL/CMD + Click on a mesh in the 3D viewport | Unload the mesh from WEBKNOSSOS |

## Agglomerate File Mapping Skeleton

Expand Down
42 changes: 20 additions & 22 deletions frontend/javascripts/libs/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ import { createNanoEvents, Emitter } from "nanoevents";
// In most cases the heavy lifting is done by libraries in the background.
export const KEYBOARD_BUTTON_LOOP_INTERVAL = 1000 / constants.FPS;
const MOUSE_MOVE_DELTA_THRESHOLD = 5;
export type ModifierKeys = "alt" | "shift" | "ctrl";
export type ModifierKeys = "alt" | "shift" | "ctrlOrMeta";
type KeyboardKey = string;
type MouseButton = string;
type KeyboardHandler = (event: KeyboardEvent) => void | Promise<void>;
// Callable Object, see https://www.typescriptlang.org/docs/handbook/2/functions.html#call-signatures
type KeyboardLoopHandler = {
Expand All @@ -32,13 +33,15 @@ type KeyboardLoopHandler = {
};
type KeyboardBindingPress = [KeyboardKey, KeyboardHandler, KeyboardHandler];
type KeyboardBindingDownUp = [KeyboardKey, KeyboardHandler, KeyboardHandler];
type BindingMap<T extends (...args: Array<any>) => any> = Record<KeyboardKey, T>;
type KeyBindingMap = Record<KeyboardKey, KeyboardHandler>;
type KeyBindingLoopMap = Record<KeyboardKey, KeyboardLoopHandler>;
export type MouseBindingMap = Record<MouseButton, MouseHandler>;
type MouseButtonWhich = 1 | 2 | 3;
type MouseButtonString = "left" | "middle" | "right";
type MouseHandler =
export type MouseHandler =
| ((deltaYorX: number, modifier: ModifierKeys | null | undefined) => void)
| ((position: Point2, id: string | null | undefined, event: MouseEvent) => void)
| ((delta: Point2, position: Point2, id: string | null | undefined, event: MouseEvent) => void);
| ((position: Point2, id: string, event: MouseEvent, isTouch: boolean) => void)
| ((delta: Point2, position: Point2, id: string, event: MouseEvent) => void);
type HammerJsEvent = {
center: Point2;
pointers: Array<Record<string, any>>;
Expand Down Expand Up @@ -76,11 +79,11 @@ export class InputKeyboardNoLoop {
cancelExtendedModeTimeoutId: ReturnType<typeof setTimeout> | null = null;

constructor(
initialBindings: BindingMap<KeyboardHandler>,
initialBindings: KeyBindingMap,
options?: {
supportInputElements?: boolean;
},
extendedCommands?: BindingMap<KeyboardHandler>,
extendedCommands?: KeyBindingMap,
) {
if (options) {
this.supportInputElements = options.supportInputElements || this.supportInputElements;
Expand Down Expand Up @@ -125,7 +128,7 @@ export class InputKeyboardNoLoop {
};

preventBrowserSearchbarShortcut = (evt: KeyboardEvent) => {
if (evt.ctrlKey && evt.key === "k") {
if ((evt.ctrlKey || evt.metaKey) && evt.key === "k") {
evt.preventDefault();
evt.stopPropagation();
}
Expand Down Expand Up @@ -196,15 +199,15 @@ export class InputKeyboardNoLoop {
// It is able to handle key-presses and will continuously
// fire the attached callback.
export class InputKeyboard {
keyCallbackMap: Record<string, KeyboardLoopHandler> = {};
keyCallbackMap: KeyBindingLoopMap = {};
keyPressedCount: number = 0;
bindings: Array<KeyboardBindingDownUp> = [];
isStarted: boolean = true;
delay: number = 0;
supportInputElements: boolean = false;

constructor(
initialBindings: BindingMap<KeyboardLoopHandler>,
initialBindings: KeyBindingLoopMap,
options?: {
delay?: number;
supportInputElements?: boolean;
Expand Down Expand Up @@ -333,17 +336,12 @@ class InputMouseButton {
mouse: InputMouse;
name: MouseButtonString;
which: MouseButtonWhich;
id: string | null | undefined;
id: string;
down: boolean = false;
drag: boolean = false;
moveDelta: number = 0;

constructor(
name: MouseButtonString,
which: MouseButtonWhich,
mouse: InputMouse,
id: string | null | undefined,
) {
constructor(name: MouseButtonString, which: MouseButtonWhich, mouse: InputMouse, id: string) {
this.name = name;
this.which = which;
this.mouse = mouse;
Expand Down Expand Up @@ -399,7 +397,7 @@ export class InputMouse {
emitter: Emitter;
targetId: string;
hammerManager: typeof Hammer;
id: string | null | undefined;
id: string;
leftMouseButton: InputMouseButton;
middleMouseButton: InputMouseButton;
rightMouseButton: InputMouseButton;
Expand All @@ -416,8 +414,8 @@ export class InputMouse {

constructor(
targetId: string,
initialBindings: BindingMap<MouseHandler> = {},
id: string | null | undefined = null,
initialBindings: MouseBindingMap,
id: string,
ignoreScrollingWhileDragging: boolean = false,
) {
this.emitter = createNanoEvents();
Expand Down Expand Up @@ -640,8 +638,8 @@ export class InputMouse {
modifier = "shift";
} else if (event.altKey) {
modifier = "alt";
} else if (event.ctrlKey) {
modifier = "ctrl";
} else if (event.ctrlKey || event.metaKey) {
modifier = "ctrlOrMeta";
}

this.emitter.emit("scroll", delta, modifier);
Expand Down
Loading