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).

# Changes Siehe Changelog: https://github.com/bpmn-io/bpmn-js/blob/develop/CHANGELOG.md ## 18.1.2 * `FIX`: canvas `autoFocus` must explicitly be enabled ([bpmn-io/diagram-js#956](bpmn-io/diagram-js#956)) * `FIX`: properly integrate `zoomscroll` with canvas focus ([bpmn-io/diagram-js#956](bpmn-io/diagram-js#956)) * `FIX`: properly integrate `movecanvas` with canvas focus ([bpmn-io/diagram-js#956](bpmn-io/diagram-js#956)) ## 18.1.1 * `FIX`: adjust search to prioritize start of word and exact matches ([bpmn-io/diagram-js#953](bpmn-io/diagram-js#953)) * `FIX`: ignore whitespace when searching ([bpmn-io/diagram-js#954](bpmn-io/diagram-js#954)) ## 18.1.0 * `FIX`: clear selection when opening search pad ([bpmn-io/diagram-js#947](bpmn-io/diagram-js#947)) * `FIX`: correct dangling selection after search pad interaction ([bpmn-io/diagram-js#947](bpmn-io/diagram-js#947)) * `DEPS`: update to `[email protected]` ## 18.0.0 * `FEAT`: remove `outline` from `Viewer` modules ([bpmn-io#2135](bpmn-io#2135)) * `FEAT`: make `Canvas` a focusable element ([bpmn-io/diagram-js#662](bpmn-io/diagram-js#662)) * `FEAT`: implicit keyboard binding ([bpmn-io/diagram-js#662](bpmn-io/diagram-js#662)) * `FEAT`: integrate with global `search` ([bpmn-io#2235](bpmn-io#2235)) * `FEAT`: integrate `popup-menu` with `search` ([bpmn-io/diagram-js#932](bpmn-io/diagram-js#932)) * `FEAT`: recognize modern `search` tokens in `search-pad` ([bpmn-io/diagram-js#932](bpmn-io/diagram-js#932)) * `FIX`: correctly handle duplicate entries and whitespace in `search` ([bpmn-io/diagram-js#932](bpmn-io/diagram-js#932)) * `FIX`: find `search` terms across all keys ([bpmn-io/diagram-js#932](bpmn-io/diagram-js#932)) * `FIX`: `search` always returns tokens for matched items ([bpmn-io/diagram-js#932](bpmn-io/diagram-js#932)) * `FIX`: prevent crash during label adjustment ([bpmn-io#2239](bpmn-io#2239)) * `FIX`: keep existing loop characteristics when toggling through the replace menu ([bpmn-io#2251](bpmn-io#2251)) * `FIX`: prevent covering multi selection with black box in `Viewer` ([bpmn-io#2135](bpmn-io#2135)) * `FIX`: generate types for main entry ([`986e2bb`](bpmn-io@986e2bb)) * `FIX`: correct handling of group name with whitespace only ([bpmn-io#2231](bpmn-io#2231)) * `DEPS`: update to `bpmn-moddle@9` ([bpmn-io#2114](bpmn-io#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 ([bpmn-io/diagram-js#662](bpmn-io/diagram-js#662)). * 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 ([bpmn-io/diagram-js#662](bpmn-io/diagram-js#662)). ## 17.11.1 * `FIX`: handle searching elements without labels ([bpmn-io#2232](bpmn-io#2232), [bpmn-io#2234](bpmn-io#2234)) ## 17.11.0 * `FEAT`: align search styles with other popups ([bpmn-io#2187](bpmn-io#2187)) * `FEAT`: prioritize start of tokens in search results ([bpmn-io#2187](bpmn-io#2187)) * `FIX`: do not commit viewport changes on `ESC` ([bpmn-io#2189](bpmn-io#2189), [bpmn-io#2187](bpmn-io#2187)) * `DEPS`: update to `[email protected]` ## 17.10.0 * `CHORE`: correct various type hints ([bpmn-io#2228](bpmn-io#2228)) * `FIX`: pasting compensation activity without boundary event ([bpmn-io#2070](bpmn-io#2070)) * `FIX`: lane resize constraints for se and nw direction ([bpmn-io#2209](bpmn-io#2209)) * `FIX`: auto place elements vertically in sub-processes ([bpmn-io#2127](bpmn-io#2127)) * `FIX`: hide lane label during direct editing * `DEPS`: update to `[email protected]` ## 17.9.2 * `FIX`: keep direction when collapsing pools ([bpmn-io#2208](bpmn-io#2208))

# 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))

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

Merged

Bump to 18.1.2 5minds/bpmn-js#9

Merged

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