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

Conversation

knollengewaechs
Copy link
Contributor

@knollengewaechs knollengewaechs commented Nov 29, 2024

URL of deployed dev instance (used for testing):

Steps to test:

  • activate move tool, hover on the edge of a bounding box. when pressing ctrl, nothing should happen
  • activate bounding box tool.
    • press ctrl when not hovering a bbox edge. nothing should happen.
    • hover a bbox edge. the cursor should indicate that you can resize the bbox, and you should actually be able to do so.
    • hover a bbox edge and, without moving, press ctrl. the cursor should indicate that you can now move the bbox, and you should be able to actually move it.
      -> changed behaviour: before, you had to move the mouse before pressing ctrl had any effect on the cursor.

limitations

  • after focusing other window, it doesnt work anymore. but none of the keyboard inputs (such as space to move) do
  • I changed input.ts, which is in the libs dir. I hope this is not a problem. Right now I wouldnt know how else to solve this problem

Issues:


(Please delete unneeded items, merge only when none are left open)

@knollengewaechs knollengewaechs self-assigned this Nov 29, 2024
Copy link
Contributor

coderabbitai bot commented Nov 29, 2024

📝 Walkthrough
📝 Walkthrough

Walkthrough

The pull request introduces several changes to enhance keyboard and mouse interaction within the application. Key modifications include the addition of a keyUpBindings parameter in the InputKeyboardNoLoop class, which allows for distinct handling of key-up events. The highlightAndSetCursorOnHoveredBoundingBox function is updated to accept both mouse and keyboard events, broadening its usability. Additionally, the PlaneController component is enhanced with new functions and keyboard controls, particularly for the meta and ctrl keys, improving the cursor behavior when interacting with bounding boxes.

Changes

File Path Change Summary
frontend/javascripts/libs/input.ts Updated InputKeyboardNoLoop constructor and attach method to include keyUpBindings and separate key-up callback.
frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts Modified highlightAndSetCursorOnHoveredBoundingBox to accept `MouseEvent
frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx Added handleUpdateCursor and createKeyDownAndUpHandler functions; updated BoundingBoxKeybindings for new keyboard controls.

Assessment against linked issues

Objective Addressed Explanation
Cursor changes to "move" when ctrl is pressed in BBox tool (#8132)

Poem

🐰 In the land of keys and clicks,
A bounding box now does the tricks!
With ctrl pressed, the cursor glows,
As rabbits hop where the cursor goes.
So dance and play, let inputs flow,
In our joyful code, let magic grow! ✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc8d014 and 703f09f.

📒 Files selected for processing (1)
  • CHANGELOG.unreleased.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • CHANGELOG.unreleased.md

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@knollengewaechs knollengewaechs changed the title Update Cursor right away when Bounding Box Tool is active Update Cursor right away when Bounding Box is hovered Nov 29, 2024
@knollengewaechs knollengewaechs changed the title Update Cursor right away when Bounding Box is hovered Update Cursor right away when Bounding Box is Hovered Dec 6, 2024
@knollengewaechs knollengewaechs changed the title Update Cursor right away when Bounding Box is Hovered Update Cursor Right Away When Bounding Box Is Hovered Dec 6, 2024
@knollengewaechs knollengewaechs marked this pull request as ready for review December 6, 2024 15:10
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (1)

183-192: Consider adding type safety for mousePosition array access.

While the implementation is correct, consider adding type safety for the mousePosition array access to prevent potential runtime errors.

-    { x: mousePosition[0], y: mousePosition[1] },
+    { x: mousePosition[0] ?? 0, y: mousePosition[1] ?? 0 },
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 14737b3 and dc0f709.

📒 Files selected for processing (3)
  • frontend/javascripts/libs/input.ts (4 hunks)
  • frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts (1 hunks)
  • frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (7 hunks)
🔇 Additional comments (5)
frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts (1)

268-268: LGTM: Event type expansion enhances keyboard interaction support.

The function signature change to accept both MouseEvent and KeyboardEvent is well-implemented and necessary for supporting cursor updates on keyboard events.

frontend/javascripts/libs/input.ts (2)

87-87: LGTM: Constructor enhancement properly handles key up bindings.

The addition of the optional keyUpBindings parameter and its initialization is well-implemented, maintaining backward compatibility while adding new functionality.

Also applies to: 113-114


Line range hint 146-181: LGTM: Attach method properly handles both key down and up events.

The updated method signature and implementation correctly supports both key down and up events while maintaining existing functionality.

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (2)

208-210: LGTM: Clean implementation of key handler creation.

The function is simple, focused, and correctly implements the key handler creation.


524-528: LGTM: Proper integration of meta and ctrl key handlers.

The keyboard controls are well-structured and correctly handle both key down and up events for meta and ctrl keys.

Also applies to: 551-557

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
CHANGELOG.unreleased.md (1)

21-21: Consider documenting the known limitation

While the changelog entry accurately describes the enhancement, it would be helpful to document the known limitation where the cursor functionality stops working after focusing on another window. This helps set correct expectations for users.

Consider updating the entry like this:

-- 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)
+- Within the bounding box tool, the cursor updates immediately after pressing `ctrl`, indicating that a bounding box can be moved instead of resized. Note: The cursor functionality may need to be reactivated after switching window focus. [#8253](https://github.com/scalableminds/webknossos/pull/8253)
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between dc0f709 and cd09bd5.

📒 Files selected for processing (1)
  • CHANGELOG.unreleased.md (1 hunks)

Copy link
Contributor

@MichaelBuessemeyer MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome works and looks good 🎉

I only find a minor nitpick :)

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (1)

192-209: Consider making the cursor update logic more reusable

The cursor update logic could be made more reusable by:

  1. Extracting the mouse position check into a separate method
  2. Making the event type more generic to handle both keyboard and mouse events
-  static handleUpdateCursor = (event: KeyboardEvent) => {
+  static handleUpdateCursor = (event: KeyboardEvent | MouseEvent) => {
     const { viewModeData, temporaryConfiguration } = Store.getState();
-    const { mousePosition } = temporaryConfiguration;
-    if (mousePosition == null) return;
+    const position = BoundingBoxKeybindings.getMousePosition(temporaryConfiguration);
+    if (position == null) return;
     highlightAndSetCursorOnHoveredBoundingBox(
-      { x: mousePosition[0], y: mousePosition[1] },
+      position,
       viewModeData.plane.activeViewport,
       event,
     );
   };

+  static getMousePosition(temporaryConfiguration: any) {
+    const { mousePosition } = temporaryConfiguration;
+    return mousePosition ? { x: mousePosition[0], y: mousePosition[1] } : null;
+  }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd09bd5 and 584f05d.

📒 Files selected for processing (2)
  • CHANGELOG.unreleased.md (1 hunks)
  • frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • CHANGELOG.unreleased.md
🔇 Additional comments (4)
frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx (4)

69-69: LGTM!

The import of highlightAndSetCursorOnHoveredBoundingBox aligns with the PR objective of improving cursor behavior for bounding boxes.


187-188: LGTM!

The addition of meta and ctrl key handlers aligns with the PR objective and follows good practices.


385-385: LGTM!

The addition of keyUpControls parameter to InputKeyboardNoLoop is correctly implemented to support the new key-up bindings.

Also applies to: 419-419


Line range hint 524-557: LGTM!

The keyboard controls implementation:

  • Correctly handles both key down and up events
  • Maintains consistency with existing patterns
  • Properly integrates bounding box handlers

@knollengewaechs knollengewaechs enabled auto-merge (squash) December 16, 2024 13:11
@knollengewaechs knollengewaechs merged commit 7fce714 into master Dec 16, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cursor in Bounding Box Tool
2 participants