fix(core/Canvas): explicitly enable autoFocus #956

nikku · 2024-12-19T14:58:23Z

Proposed Changes

This ensures we're NOT automatically auto-focusing the canvas on any hover. Instead integrators must explicitly decide if this is desired, i.e. because the diagram is embedded as a "full page editor". We'll otherwise break embedding with existing applications, cf. bpmn-io/bpmn-js-examples#302.

Checklist

To ensure you provided everything we need to look at your PR:

Brief textual description of the changes present
Visual demo attached
Steps to try out present, i.e. using the @bpmn-io/sr tool
Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

We'll otherwise break embedding with existing applications, cf. bpmn-io/bpmn-js-examples#302.

Ensure we update focus related behaviors consistently on manual and DOM triggered interactions.

If canvas for whatever reason is not focused, then movement does not happen. Related to #662

Related to #662

nikku · 2024-12-19T18:12:51Z

Cf. bpmn-io/bpmn-js-examples#302 (comment) how this pans out in a real embedding scenario.

barmac · 2024-12-20T09:18:17Z

I think this is a great improvement which complements the keyboard binding changes. We shipped a slightly broken behavior in 15, and now fix it, so no breaking change.

This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [bpmn-js](https://redirect.github.com/bpmn-io/bpmn-js) | [`17.11.1` -> `18.1.2`](https://renovatebot.com/diffs/npm/bpmn-js/17.11.1/18.1.2) | [![age](https://developer.mend.io/api/mc/badges/age/npm/bpmn-js/18.1.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/bpmn-js/18.1.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/bpmn-js/17.11.1/18.1.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/bpmn-js/17.11.1/18.1.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- > [!WARNING] > Some dependencies could not be looked up. Check the Dependency Dashboard for more information. --- ### Release Notes <details> <summary>bpmn-io/bpmn-js (bpmn-js)</summary> ### [`v18.1.2`](https://redirect.github.com/bpmn-io/bpmn-js/blob/HEAD/CHANGELOG.md#1812) [Compare Source](https://redirect.github.com/bpmn-io/bpmn-js/compare/v18.1.1...v18.1.2) - `FIX`: canvas `autoFocus` must explicitly be enabled ([bpmn-io/diagram-js#956](https://redirect.github.com/bpmn-io/diagram-js/pull/956)) - `FIX`: properly integrate `zoomscroll` with canvas focus ([bpmn-io/diagram-js#956](https://redirect.github.com/bpmn-io/diagram-js/pull/956)) - `FIX`: properly integrate `movecanvas` with canvas focus ([bpmn-io/diagram-js#956](https://redirect.github.com/bpmn-io/diagram-js/pull/956)) ### [`v18.1.1`](https://redirect.github.com/bpmn-io/bpmn-js/blob/HEAD/CHANGELOG.md#1811) [Compare Source](https://redirect.github.com/bpmn-io/bpmn-js/compare/v18.1.0...v18.1.1) - `FIX`: adjust search to prioritize start of word and exact matches ([bpmn-io/diagram-js#953](https://redirect.github.com/bpmn-io/diagram-js/pull/953)) - `FIX`: ignore whitespace when searching ([bpmn-io/diagram-js#954](https://redirect.github.com/bpmn-io/diagram-js/pull/954)) ### [`v18.1.0`](https://redirect.github.com/bpmn-io/bpmn-js/blob/HEAD/CHANGELOG.md#1810) [Compare Source](https://redirect.github.com/bpmn-io/bpmn-js/compare/v18.0.0...v18.1.0) - `FIX`: clear selection when opening search pad ([bpmn-io/diagram-js#947](https://redirect.github.com/bpmn-io/diagram-js/pull/947)) - `FIX`: correct dangling selection after search pad interaction ([bpmn-io/diagram-js#947](https://redirect.github.com/bpmn-io/diagram-js/pull/947)) - `DEPS`: update to `[email protected]` ### [`v18.0.0`](https://redirect.github.com/bpmn-io/bpmn-js/blob/HEAD/CHANGELOG.md#1800) [Compare Source](https://redirect.github.com/bpmn-io/bpmn-js/compare/v17.11.1...v18.0.0) - `FEAT`: remove `outline` from `Viewer` modules ([#2135](https://redirect.github.com/bpmn-io/bpmn-js/issues/2135)) - `FEAT`: make `Canvas` a focusable element ([bpmn-io/diagram-js#662](https://redirect.github.com/bpmn-io/diagram-js/pull/662)) - `FEAT`: implicit keyboard binding ([bpmn-io/diagram-js#662](https://redirect.github.com/bpmn-io/diagram-js/pull/662)) - `FEAT`: integrate with global `search` ([#2235](https://redirect.github.com/bpmn-io/bpmn-js/pull/2235)) - `FEAT`: integrate `popup-menu` with `search` ([bpmn-io/diagram-js#932](https://redirect.github.com/bpmn-io/diagram-js/pull/932)) - `FEAT`: recognize modern `search` tokens in `search-pad` ([bpmn-io/diagram-js#932](https://redirect.github.com/bpmn-io/diagram-js/pull/932)) - `FIX`: correctly handle duplicate entries and whitespace in `search` ([bpmn-io/diagram-js#932](https://redirect.github.com/bpmn-io/diagram-js/pull/932)) - `FIX`: find `search` terms across all keys ([bpmn-io/diagram-js#932](https://redirect.github.com/bpmn-io/diagram-js/pull/932)) - `FIX`: `search` always returns tokens for matched items ([bpmn-io/diagram-js#932](https://redirect.github.com/bpmn-io/diagram-js/pull/932)) - `FIX`: prevent crash during label adjustment ([#2239](https://redirect.github.com/bpmn-io/bpmn-js/issues/2239)) - `FIX`: keep existing loop characteristics when toggling through the replace menu ([#2251](https://redirect.github.com/bpmn-io/bpmn-js/pull/2251)) - `FIX`: prevent covering multi selection with black box in `Viewer` ([#2135](https://redirect.github.com/bpmn-io/bpmn-js/issues/2135)) - `FIX`: generate types for main entry ([`986e2bb`](https://redirect.github.com/bpmn-io/bpmn-js/commit/986e2bb51ea301e6e0df56f3606a27424fb90179)) - `FIX`: correct handling of group name with whitespace only ([#2231](https://redirect.github.com/bpmn-io/bpmn-js/issues/2231)) - `DEPS`: update to `bpmn-moddle@9` ([#2114](https://redirect.github.com/bpmn-io/bpmn-js/pull/2114)) - `DEPS`: update to `[email protected]` - `DEPS`: update to `[email protected]` ##### Breaking Changes - Require `Node >= 20` - `Canvas` is now a focusable element and provides better support for native browser behaviors. Focus can be controlled with new `focus` and `restoreFocus` APIs. - Keyboard is now implicitly bound to canvas SVG element. Calls to `keyboard.bind` and `keyboard.bindTo` now result with a descriptive console error and have no effect. </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled because a matching PR was automerged previously. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/camunda/camunda).

fix(core/Canvas): explicitly enable autoFocus

724be04

We'll otherwise break embedding with existing applications, cf. bpmn-io/bpmn-js-examples#302.

nikku added the ux label Dec 19, 2024

bpmn-io-tasks bot added the needs review Review pending label Dec 19, 2024

bpmn-io-tasks bot assigned nikku Dec 19, 2024

chore(CHANGELOG): update

8f4c522

nikku force-pushed the optional-autofocus branch from d06b3cd to 6f8ce2e Compare December 19, 2024 15:32

nikku added 4 commits December 19, 2024 18:01

fix(core/Canvas): consistently emit canvas.focus.changed event

df3f5c0

Ensure we update focus related behaviors consistently on manual and DOM triggered interactions.

feat(core/Canvas): focus on <element.mousedown>

f8f8b68

fix(navigation/movecanvas): hook up with canvas focused state

85c06c1

If canvas for whatever reason is not focused, then movement does not happen. Related to #662

fix(navigation/zoomscroll): hook up with canvas focused state

52725d4

Related to #662

nikku force-pushed the optional-autofocus branch from 6f8ce2e to 52725d4 Compare December 19, 2024 17:40

nikku mentioned this pull request Dec 19, 2024

Create embedding example bpmn-io/bpmn-js-examples#302

Merged

4 tasks

nikku requested review from jarekdanielak and barmac December 19, 2024 18:14

barmac approved these changes Dec 20, 2024

View reviewed changes

nikku merged commit 8c07236 into develop Dec 20, 2024
12 checks passed

bpmn-io-tasks bot removed the needs review Review pending label Dec 20, 2024

nikku deleted the optional-autofocus branch December 20, 2024 09:28

nikku mentioned this pull request Dec 20, 2024

deps: update to [email protected] camunda/camunda-modeler#4773

Merged

4 tasks

This was referenced Jan 9, 2025

Bump to 15.2.4 5minds/diagram-js#6

Open

Bump to 18.1.2 5minds/bpmn-js#9

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core/Canvas): explicitly enable autoFocus #956

fix(core/Canvas): explicitly enable autoFocus #956

nikku commented Dec 19, 2024

nikku commented Dec 19, 2024

barmac commented Dec 20, 2024

fix(core/Canvas): explicitly enable autoFocus #956

fix(core/Canvas): explicitly enable autoFocus #956

Conversation

nikku commented Dec 19, 2024

Proposed Changes

Checklist

nikku commented Dec 19, 2024

barmac commented Dec 20, 2024