Make `keyboard` binding implicit / remove ability to bind to any element

nikku commented 2 years ago

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 https://github.com/bpmn-io/diagram-js/pull/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 (https://github.com/bpmn-io/diagram-js/pull/662#issuecomment-2314722118)

Describe alternatives you've considered

Keep stuff and magic as is.

Additional context

This is a major improvement UX wise.

marstamm commented 9 months ago

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

nikku commented 8 months ago

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

barmac commented 2 months ago

Assigning to @jarekdanielak to assess in a timebox manner.

nikku commented 2 months ago

Explanatory scetch, based of discussion with @jarekdanielak:

nikku commented 2 months ago

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 commented 2 months ago

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

bpmn-io / diagram-js

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