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.

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

Update Cursor Right Away When Bounding Box Is Hovered #8253

Merged
merged 14 commits into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
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
1 change: 1 addition & 0 deletions CHANGELOG.unreleased.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
- Datasets can now be renamed and can have duplicate names. [#8075](https://github.com/scalableminds/webknossos/pull/8075)
- Improved the default colors for skeleton trees. [#8228](https://github.com/scalableminds/webknossos/pull/8228)
- Allowed to train an AI model using differently sized bounding boxes. We recommend all bounding boxes to have equal dimensions or to have dimensions which are multiples of the smallest bounding box. [#8222](https://github.com/scalableminds/webknossos/pull/8222)
- Within the bounding box tool, the cursor updates immediately after pressing `ctrl`, indicating that a bounding box can be moved instead of resized. [#8253](https://github.com/scalableminds/webknossos/pull/8253)

### Fixed
- Fixed that listing datasets with the `api/datasets` route without compression failed due to missing permissions regarding public datasets. [#8249](https://github.com/scalableminds/webknossos/pull/8249)
Expand Down
21 changes: 15 additions & 6 deletions frontend/javascripts/libs/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export class InputKeyboardNoLoop {
supportInputElements?: boolean;
},
extendedCommands?: KeyBindingMap,
keyUpBindings?: KeyBindingMap,
) {
if (options) {
this.supportInputElements = options.supportInputElements || this.supportInputElements;
Expand All @@ -100,16 +101,17 @@ export class InputKeyboardNoLoop {
document.addEventListener("keydown", this.preventBrowserSearchbarShortcut);
this.attach(EXTENDED_COMMAND_KEYS, this.toggleExtendedMode);
// Add empty callback in extended mode to deactivate the extended mode via the same EXTENDED_COMMAND_KEYS.
this.attach(EXTENDED_COMMAND_KEYS, _.noop, true);
this.attach(EXTENDED_COMMAND_KEYS, _.noop, _.noop, true);
for (const key of Object.keys(extendedCommands)) {
const callback = extendedCommands[key];
this.attach(key, callback, true);
this.attach(key, callback, _.noop, true);
}
}

for (const key of Object.keys(initialBindings)) {
const callback = initialBindings[key];
this.attach(key, callback);
const keyUpCallback = keyUpBindings != null ? keyUpBindings[key] : _.noop;
this.attach(key, callback, keyUpCallback);
}
}

Expand Down Expand Up @@ -141,7 +143,12 @@ export class InputKeyboardNoLoop {
}
}

attach(key: KeyboardKey, callback: KeyboardHandler, isExtendedCommand: boolean = false) {
attach(
key: KeyboardKey,
keyDownCallback: KeyboardHandler,
keyUpCallback: KeyboardHandler = _.noop,
isExtendedCommand: boolean = false,
) {
const binding = [
key,
(event: KeyboardEvent) => {
Expand All @@ -163,13 +170,15 @@ export class InputKeyboardNoLoop {
}

if (!event.repeat) {
callback(event);
keyDownCallback(event);
} else {
event.preventDefault();
event.stopPropagation();
}
},
_.noop,
(event: KeyboardEvent) => {
keyUpCallback(event);
},
];
if (isExtendedCommand) {
KeyboardJS.withContext("extended", () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export function createBoundingBoxAndGetEdges(
}

export const highlightAndSetCursorOnHoveredBoundingBox = _.throttle(
(position: Point2, planeId: OrthoView, event: MouseEvent) => {
(position: Point2, planeId: OrthoView, event: MouseEvent | KeyboardEvent) => {
const hoveredEdgesInfo = getClosestHoveredBoundingBox(position, planeId);
// Access the parent element as that is where the cursor style property is set
const inputCatcher = document.getElementById(`inputcatcher_${planeId}`)?.parentElement;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import {
import { showToastWarningForLargestSegmentIdMissing } from "oxalis/view/largest_segment_id_modal";
import { getDefaultBrushSizes } from "oxalis/view/action-bar/toolbar_view";
import { userSettings } from "types/schemas/user_settings.schema";
import { highlightAndSetCursorOnHoveredBoundingBox } from "../combinations/bounding_box_handlers";

function ensureNonConflictingHandlers(
skeletonControls: Record<string, any>,
Expand Down Expand Up @@ -179,10 +180,23 @@ class VolumeKeybindings {
}
}

const handleUpdateCursor = (event: KeyboardEvent) => {
const { viewModeData, temporaryConfiguration } = Store.getState();
const { mousePosition } = temporaryConfiguration;
if (mousePosition == null) return;
highlightAndSetCursorOnHoveredBoundingBox(
{ x: mousePosition[0], y: mousePosition[1] },
viewModeData.plane.activeViewport,
event,
);
};
knollengewaechs marked this conversation as resolved.
Show resolved Hide resolved

class BoundingBoxKeybindings {
static getKeyboardControls() {
return {
c: () => Store.dispatch(addUserBoundingBoxAction()),
meta: createKeyDownAndUpHandler(),
ctrl: createKeyDownAndUpHandler(),
};
}

Expand All @@ -191,6 +205,10 @@ class BoundingBoxKeybindings {
}
}

function createKeyDownAndUpHandler() {
return (event: KeyboardEvent) => handleUpdateCursor(event);
}

function createDelayAwareMoveHandler(multiplier: number) {
// The multiplier can be used for inverting the direction as well as for
// speeding up the movement as it's done for shift+f, for example.
Expand Down Expand Up @@ -364,6 +382,7 @@ class PlaneController extends React.PureComponent<Props> {
});
const {
baseControls: notLoopedKeyboardControls,
keyUpControls,
extendedControls: extendedNotLoopedKeyboardControls,
} = this.getNotLoopedKeyboardControls();
const loopedKeyboardControls = this.getLoopedKeyboardControls();
Expand Down Expand Up @@ -397,6 +416,7 @@ class PlaneController extends React.PureComponent<Props> {
notLoopedKeyboardControls,
{},
extendedNotLoopedKeyboardControls,
keyUpControls,
);
this.storePropertyUnsubscribers.push(
listenToStoreProperty(
Expand Down Expand Up @@ -501,7 +521,11 @@ class PlaneController extends React.PureComponent<Props> {
this.props.tracing.volumes.length > 0
? VolumeKeybindings.getKeyboardControls()
: emptyDefaultHandler;
const { c: boundingBoxCHandler } = BoundingBoxKeybindings.getKeyboardControls();
const {
c: boundingBoxCHandler,
meta: boundingBoxMetaHandler,
ctrl: boundingBoxCtrlHandler,
} = BoundingBoxKeybindings.getKeyboardControls();
ensureNonConflictingHandlers(skeletonControls, volumeControls);
const extendedSkeletonControls =
this.props.tracing.skeleton != null ? SkeletonKeybindings.getExtendedKeyboardControls() : {};
Expand All @@ -524,6 +548,12 @@ class PlaneController extends React.PureComponent<Props> {
volumeCHandler,
boundingBoxCHandler,
),
ctrl: this.createToolDependentKeyboardHandler(null, null, boundingBoxCtrlHandler),
meta: this.createToolDependentKeyboardHandler(null, null, boundingBoxMetaHandler),
},
keyUpControls: {
ctrl: this.createToolDependentKeyboardHandler(null, null, boundingBoxCtrlHandler),
meta: this.createToolDependentKeyboardHandler(null, null, boundingBoxMetaHandler),
},
extendedControls,
};
Expand Down