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

Make keyboard binding implicit / remove ability to bind to any element #661

Closed
nikku opened this issue Aug 15, 2022 · 6 comments · Fixed by #662
Closed

Make keyboard binding implicit / remove ability to bind to any element #661

nikku opened this issue Aug 15, 2022 · 6 comments · Fixed by #662
Assignees
@jarekdanielak
Labels
enhancement New feature or request ux

Comments

@nikku
Copy link
Member

nikku commented Aug 15, 2022 •
edited
Loading

Is your feature request related to a problem? Please describe.

For historical reasons our users had to bind keyboard to any element on the page, may it be document, or the diagram container. With #662 we make the diagram canvas browser selectable; as such we can safely figure out if the canvas has focus and keyboard bindings shall be accounted for.

Because of that we want to remove the bind anywhere keyboard#bindTo / keyboard#bind(element) APIs.

Describe the solution you'd like

  • Keyboard can be bound and unbound, however it will always be bound to the canvas
  • Binding keyboard to a particular element is removed
  • Configuring element to be bound to via keyboard.bindTo is removed
  • Proper error messages indicate old use
  • API to focus the diagram (canvas.focus(), and potentially diagram.focus() as a proxy) exist
  • To be considered: The canvas fires focus and blur events that I can hook into to register global keyboard shortcuts
  • Once the canvas is focused, then we spend reasonable amount of effort to keep it focused / restore focus once on canvas edit operations happened (Make canvas selectable / keyboard binding implicit #662 (comment))

Describe alternatives you've considered

Keep stuff and magic as is.

Additional context

This is a major improvement UX wise.
@nikku nikku added the enhancement New feature or request label Aug 15, 2022
@nikku nikku changed the title Remove ability to bind keyboard to any element Bind keyboard implicitly / remove ability to bind to any element Aug 15, 2022
@nikku nikku changed the title Bind keyboard implicitly / remove ability to bind to any element Make keyboard binding implicit / remove ability to bind to any element Aug 15, 2022
@nikku nikku mentioned this issue Aug 15, 2022
Merged
@nikku nikku added the ready Ready to be worked on label Aug 17, 2022 — with bpmn-io-tasks
@nikku nikku self-assigned this Aug 17, 2022
@bpmn-io-tasks bpmn-io-tasks bot added in progress Currently worked on and removed ready Ready to be worked on labels Aug 18, 2022
@nikku nikku added the backlog Queued in backlog label Aug 19, 2022 — with bpmn-io-tasks
@nikku nikku removed the in progress Currently worked on label Aug 19, 2022
@nikku nikku removed their assignment Aug 19, 2022
@nikku nikku mentioned this issue Dec 4, 2022
Draft
@nikku nikku added the ready Ready to be worked on label Jan 30, 2024 — with bpmn-io-tasks
@nikku nikku removed the backlog Queued in backlog label Jan 30, 2024
@marstamm
Copy link
Contributor

@nikku , assigned to you for now to clarify what is needed to enable HTO team

@nikku
Copy link
Member Author

nikku commented Mar 1, 2024

@vsgoulart I'll not be able to follow up on this in the next days, but will revisit end of March.

@nikku nikku added backlog Queued in backlog and removed ready Ready to be worked on labels Mar 1, 2024
@barmac barmac added ready Ready to be worked on and removed backlog Queued in backlog labels Aug 27, 2024
@barmac barmac assigned jarekdanielak and unassigned nikku Aug 27, 2024
@barmac
Copy link
Member

barmac commented Aug 27, 2024

Assigning to @jarekdanielak to assess in a timebox manner.

@nikku
Copy link
Member Author

nikku commented Aug 28, 2024

Explanatory scetch, based of discussion with @jarekdanielak:

image

@nikku
Copy link
Member Author

nikku commented Aug 28, 2024

Existing ways to indicate breaking changes (APIs no longer working or changed) - https://github.com/search?q=repo%3Abpmn-io%2Fdiagram-js%20console.warn&type=code.

@nikku
Copy link
Member Author

nikku commented Aug 28, 2024

Other editors, e.g. code mirror are great examples for friendly, and accessible integration into the browser.

@jarekdanielak jarekdanielak added the in progress Currently worked on label Sep 18, 2024 — with bpmn-io-tasks
@jarekdanielak jarekdanielak removed the ready Ready to be worked on label Sep 18, 2024
@jarekdanielak jarekdanielak mentioned this issue Oct 18, 2024
Merged
17 tasks
@jarekdanielak jarekdanielak mentioned this issue Oct 18, 2024
Merged
4 tasks
@bpmn-io-tasks bpmn-io-tasks bot added needs review Review pending and removed in progress Currently worked on labels Oct 27, 2024
nikku added a commit that referenced this issue Nov 4, 2024
@nikku
feat(core): make Canvas focusable
31465fd 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
jarekdanielak pushed a commit that referenced this issue Nov 4, 2024
@nikku @jarekdanielak
feat(core): make Canvas focusable
89a0a13 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
nikku added a commit that referenced this issue Nov 4, 2024
@nikku
feat(core): make Canvas focusable
c75285b 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
nikku added a commit that referenced this issue Nov 4, 2024
@nikku
feat(core): make Canvas focusable
92cce5b 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
nikku added a commit that referenced this issue Nov 4, 2024
@nikku
feat(core): make Canvas focusable
670428a 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
jarekdanielak pushed a commit that referenced this issue Nov 4, 2024
@nikku @jarekdanielak
feat(core): make Canvas focusable
491f283 
The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.

Components that pull focus from the `Canvas` during modeling must
ensure to restore the focus (if intended), via `Canvas#restoreFocus`.

Related to #661
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Nov 4, 2024
@nikku nikku added the ux label Nov 4, 2024
@ElRaptorus ElRaptorus mentioned this issue Jan 9, 2025
Merged
@timKraeuter timKraeuter mentioned this issue Feb 1, 2025
Open
ElRaptorus added a commit to 5minds/diagram-js that referenced this issue Feb 4, 2025
@ElRaptorus
Bump to 15.2.4 (#6)
4c383e9 
# Changes 

Siehe Changelog:
https://github.com/bpmn-io/diagram-js/blob/develop/CHANGELOG.md

## 15.2.4

* `FIX`: canvas `autoFocus` must explicitly be enabled
([bpmn-io#956](bpmn-io#956))
* `FIX`: properly integrate `zoomscroll` with canvas focus
([bpmn-io#956](bpmn-io#956))
* `FIX`: properly integrate `movecanvas` with canvas focus
([bpmn-io#956](bpmn-io#956))

## 15.2.3

* `FIX`: adjust search to prioritize start of word and exact matches
([bpmn-io#953](bpmn-io#953))
* `FIX`: ignore whitespace when searching
([bpmn-io#954](bpmn-io#954))

## 15.2.2

* `FIX`: correct `Keyboard#bind` and config types
([bpmn-io#948](bpmn-io#948))

## 15.2.1

* `FIX`: limit overly permissive regex
([bpmn-io#949](bpmn-io#949))

## 15.2.0

* `FIX`: clear selection when opening search pad
([bpmn-io#947](bpmn-io#947))
* `FIX`: correct dangling selection after search pad interaction
([bpmn-io#947](bpmn-io#947))
* `CHORE`: simplify search pad pre-selection behavior
([bpmn-io#947](bpmn-io#947))

## 15.1.0

* `FEAT`: integrate `popup-menu` with `search`
([bpmn-io#932](bpmn-io#932))
* `FEAT`: recognize modern `search` tokens in `search-pad`
([bpmn-io#932](bpmn-io#932))
* `FEAT`: improve `search` types
([bpmn-io#932](bpmn-io#932))
* `FIX`: correctly handle duplicate entries and whitespace in `search`
([bpmn-io#932](bpmn-io#932))
* `FIX`: find `search` terms across all keys
([bpmn-io#932](bpmn-io#932))
* `FIX`: `search` always returns tokens for matched items
([bpmn-io#932](bpmn-io#932))

## 15.0.0

* `FEAT`: make canvas browser selectable
([bpmn-io#659](bpmn-io#659))
* `FEAT`: make keyboard binding implicit
([bpmn-io#661](bpmn-io#661))
* `FEAT`: make multi-selection outline an outline concern
([bpmn-io#944](bpmn-io#944))

### Breaking Changes

* `Keyboard` binding target can no longer be chosen. Configure keyboard
binding via the `keyboard.bind` configuration and rely on keybindings to
work if the canvas has browser focus.
([bpmn-io#661](bpmn-io#661))
* The `Canvas` is now a focusable component, that is recognized
accordingly by the browser, with all benefits for UX and interaction.
Components that pull focus from the `Canvas` during modeling must ensure
to restore the focus (if intended), via `Canvas#restoreFocus`.
([bpmn-io#661](bpmn-io#661))
* The `selection` feature does not provide visual outline by default
anymore. Use the `outline` feature to re-enable it.
([bpmn-io#944](bpmn-io#944))

## 14.11.3

* `CHORE`: simplify viewbox cloning
([bpmn-io#935](bpmn-io#935))

## 14.11.2

* `FIX`: restore search result highlight
([bpmn-io#931](bpmn-io#931))
* `FIX`: correct search result highlight not being removed
([bpmn-io#931](bpmn-io#931))
* `FIX`: do not change zoom when search openes
([bpmn-io#931](bpmn-io#931))

## 14.11.1

_Partially reverts v14.11.0._

* `FIX`: revert `search` integration into popup menu

## 14.11.0

* `FEAT`: add `search` utility
* `FEAT`: sort popup entry search results semantically
([bpmn-io#916](bpmn-io#916))

## 14.10.0

* `FEAT`: align search styling with other popups
([bpmn-io#913](bpmn-io#913))
* `CHORE`: use existing outline in search
([bpmn-io#913](bpmn-io#913))
* `FIX`: only commit search viewport changes on `ENTER`
([bpmn-io#913](bpmn-io#913))

## 14.9.0

* `CHORE`: export types compatible with `verbatimModuleSyntax`
([bpmn-io#927](bpmn-io#927),
[bpmn-io#864](bpmn-io#864))
* `CHORE`: re-compute context pad position next frame
([bpmn-io#920](bpmn-io#920))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jarekdanielak jarekdanielak

Labels
enhancement New feature or request ux
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make canvas selectable / keyboard binding implicit bpmn-io/diagram-js
4 participants
@nikku @marstamm @jarekdanielak @barmac