fix: listen for modifier keys in shortcut via window

[louisch]

As noted in a previous closed PR (#7579), there is an issue right now where when behaviors such as brush-select are registered with a modifier trigger key, and my suggested solution was to change the listener for shortcut keys to a window listener.

The problem with that solution is that shortcut is also used for key-based shortcuts such as Control + = for zooming.

This new PR proposes adding an additional listener on window which listens to just modifier keys (Control, Alt, Meta, and Shift), and only uses these events to set this.recordKey inside Shortcut, which is what is used to check whether a modifier key is being held down (via the match() function).

I wasn't sure whether I should also change the existing onKeyDown method to not listen to modifier keys anymore, because that will also require changing all the tests that emit a keypress to a modifier key to use window.dispatchEvent instead of emitter.emit.

[gemini-code-assist]

Summary of Changes

Hello @louisch, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a long-standing issue where interactions requiring modifier keys (e.g., brush-select) would not function correctly if the canvas was not in focus. By implementing specific window-level event listeners solely for modifier keys, the system can now accurately track their pressed state at all times. This ensures that shortcut matching works reliably for modifier-dependent actions without disrupting other key-based shortcuts, significantly improving the user experience for interactive behaviors.

Highlights

• Modifier Key Tracking: Introduces dedicated window-level event listeners to accurately track the state of modifier keys (Control, Alt, Meta, Shift) regardless of whether the canvas is focused. This resolves an issue where behaviors triggered by modifier keys, like brush-select, would not register correctly.
• Targeted Solution: Unlike a previous attempt to use a window listener for all shortcut keys, this solution specifically targets modifier keys. This prevents interference with other key-based shortcuts (e.g., Control + = for zooming) that rely on canvas-focused events.
• Internal State Management: The new window listeners (onKeyDownWindow, onKeyUpWindow) only update the internal this.recordKey set, which is used by the match() function to determine if a shortcut combination is active. This ensures that the Shortcut utility has an up-to-date understanding of modifier key states.
• Code Structure: Adds a MODIFIER_KEYS constant and an isModifierKey helper function for clarity and maintainability. The new window event listeners are properly bound in bindEvents and unbound in destroy.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively addresses an issue with modifier key detection for shortcuts by introducing window-level event listeners. This ensures modifier key states are correctly captured even before the canvas gains focus. The implementation is clear: it adds new listeners specifically for modifier keys, updates the key state, and properly cleans up these listeners on destroy.

My review includes a couple of suggestions for minor improvements to enhance performance and code clarity.

Additionally, regarding your note in the description about onKeyDown: modifying it to ignore modifier keys would indeed be a good optimization to prevent redundant event processing. While I cannot comment directly on that part of the code as it's not in the diff, it's a valid point to consider for a follow-up to make the event handling more efficient.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.96%. Comparing base (a36b53a) to head (1388a96).

Additional details and impacted files

@@           Coverage Diff           @@
##               v5    #7604   +/-   ##
=======================================
  Coverage   94.96%   94.96%           
=======================================
  Files         188      188           
  Lines        9982     9995   +13     
  Branches     2166     2119   -47     
=======================================
+ Hits         9479     9492   +13     
+ Misses        503      465   -38     
- Partials        0       38   +38     

Flag	Coverage Δ
g6	94.96% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/g6/src/utils/shortcut.ts	98.73% <100.00%> (+0.24%)	⬆️

... and 14 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.