fix(editor): Implement canvas zoom UX improvements #7376

elsmr · 2023-10-06T18:47:12Z

Fix pinch-to-zoom
Support command + scroll to zoom
Improve accuracy of zooming (scroll more = zoom more)
Zoom limits
Zoom relative to mouse position

github-actions · 2023-10-06T18:47:27Z

Great PR! Please pay attention to the following items before merging:

Files matching packages/**:

If fixing bug, added test to cover scenario.
If addressing forum or Github issue, added link to description.

Files matching packages/**/*.ts:

Added unit tests to cover new or updated functionality.

Files matching cypress/e2e/**:

Avoided chaining commands more than two or three times (to avoid flakiness because only last one will be retried).
Spoofed endpoints that are not critical for the test (to avoid flakiness).
Picked most efficient path to start the test (for example skipped account setup and starting at /workflow/new for a canvas test).
Avoided adding waits on time (use request intercepts instead).
Ensured each spec does not depend on any another spec to pass.

Make sure to check off this list before asking for review.

codecov · 2023-10-06T19:10:23Z

Codecov Report

Attention: 66 lines in your changes are missing coverage. Please review.

Comparison is base (fbcd1d4) 33.40% compared to head (ec9af1f) 33.41%.
Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7376   +/-   ##
=======================================
  Coverage   33.40%   33.41%           
=======================================
  Files        3389     3389           
  Lines      206627   206654   +27     
  Branches    22307    22308    +1     
=======================================
+ Hits        69032    69055   +23     
- Misses     136477   136481    +4     
  Partials     1118     1118

Files	Coverage Δ
packages/editor-ui/src/Interface.ts	`100.00% <100.00%> (ø)`
.../editor-ui/src/composables/useCanvasMouseSelect.ts	`6.33% <25.00%> (-1.76%)`	⬇️
packages/editor-ui/src/utils/canvasUtils.ts	`40.80% <40.00%> (+10.97%)`	⬆️
packages/editor-ui/src/stores/canvas.store.ts	`14.93% <23.40%> (+1.67%)`	⬆️

... and 3 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

mieky

You made my day @elsmr! This already makes things magnitudes better 💯

Apart from clamping the maximum zoom level a bit more, the only major thing I would still like to address is to try and make targeted pinch-zooming a bit easier to use, by focusing on the zoom start position.

What I mean by this is:

In Miro, you can pretty carelessly pinch-zoom to an edge of a sticky note, and it adjusts the zoom center to compensate for the offset:

Screen.Recording.2023-10-07.at.8.23.02.mov

For comparison, when doing this in our editor, you tend to lose track of the object you were zooming in on:

Screen.Recording.2023-10-07.at.8.23.32.mov

This can be "validated" by cmd-zooming with the mouse scrollwheel: if you scroll the wheel a bit slower and try holding the pointer on the top of the targeted element as it gets closer, you won't drift as far.

packages/editor-ui/src/utils/canvasUtils.ts

cypress/e2e/12-canvas.cy.ts

elsmr · 2023-10-09T17:33:10Z

@mieky good find, It was already kind of zooming towards the mouse position, but the math was off because I was not taking into account opened sidebars, top bars etc. Works the same as in your Miro screen recording now 🎉!

mieky

I love it! Such a difference it makes. Had a cursory glance at the code – not really familiar with the details of our canvas code but looks well thought out. Also nice job getting rid of an extra dependency while at it.

Kudos for such a noticeable improvement, Elias! 🚀

cypress · 2023-10-10T08:47:16Z

1 flaky test on run #2448 ↗︎

0	251	0	0	1

Details:

🌳 node-839-improve-zoom-ux 🖥️ browsers:node18.12.0-chrome107 🤖 elsmr 🗃️ e2e/...
Project: n8n	Commit: `ec9af1ffd3`
Status: Passed	Duration: 09:27 💡
Started: Oct 10, 2023 8:37 AM	Ended: Oct 10, 2023 8:47 AM

cypress/e2e/24-ndv-paired-item.cy.ts • 1 flaky test

View Output Video

Test		Artifacts
NDV > resolves expression with default item when input node is not parent, while still pairing items		`Output` `Screenshots` `Video`

Review all test suite changes for PR #7376 ↗︎

github-actions · 2023-10-10T08:47:21Z

✅ All Cypress E2E specs passed

* master: (42 commits) fix(editor): Make workflow history button available only for dev builds (#7392) refactor: Upgrade to pnpm 8.9 (no-changelog) (#7393) ci: Identify NPM releases as `stable` (no-changelog) fix(editor): Implement canvas zoom UX improvements (#7376) feat(core): Switch binary filesystem mode to nested path structure (#7307) fix(editor): Fix completions for `.json` on quoted node name in Code node (#7382) fix(Notion Node): Handle empty values correctly for Notion selects + multi selects (#7383) feat(editor): Make PDF and Audio binary-data viewable in the UI (#7367) fix(Google Sheets Node): Fix "Maximum call stack size exceeded" error on too many rows (#7384) refactor(core): Refactor nodes loading (no-changelog) (#7283) fix(core): Add an option to enable postgres ssl with default certs (#6889) feat(editor): Workflow history [WIP]- Add restore and clone into new workflow actions (no-changelog) (#7359) fix(HTML Node): Update property fields to not use expressions on drag (#7379) fix: Add role check for upgrade path (#7374) fix(editor): Remove excess margin below run data editor (#7372) fix(Google Drive Trigger Node): Add Shared Drives support (#7369) feat(core): Add Job Summary to Worker response (#7360) feat(Execute Workflow Node): Run once for each item mode (#7289) refactor(core): Move `copyInputItems` to node helpers (no-changelog) (#7299) refactor(core): Create controller for binary data (no-changelog) (#7363) ... # Conflicts: # cypress/e2e/5-ndv.cy.ts

@Version

# [1.11.0](https://github.com/n8n-io/n8n/compare/n8n@1.10.0...n8n@1.11.0) (2023-10-11) ### Bug Fixes * **core:** Add an option to enable postgres ssl with default certs ([#6889](#6889)) ([789e1e7](789e1e7)) * **core:** Fix error on missing paired item data ([#7399](#7399)) ([47e8953](47e8953)) * **core:** Missing pairing info ([#7326](#7326)) ([e2c3c7a](e2c3c7a)) * **core:** Prevent object deletion request on no prefix match ([#7366](#7366)) ([63e11e4](63e11e4)) * **editor:** Fix completions for `.json` on quoted node name in Code node ([#7382](#7382)) ([86e7ec7](86e7ec7)) * **editor:** Implement canvas zoom UX improvements ([#7376](#7376)) ([7e06b31](7e06b31)) * **editor:** Make workflow history button available only for dev builds ([#7392](#7392)) ([7ed466d](7ed466d)) * **editor:** Remove excess margin below run data editor ([#7372](#7372)) ([3fa2764](3fa2764)) * **editor:** Sanitize HTML binary-data before rendering in the UI ([#7400](#7400)) ([2b075bf](2b075bf)) * **editor:** Use display option's @Version specifier ([#7351](#7351)) ([afbf0c3](afbf0c3)) * **Google BigQuery Node:** Location default to jobReference ([#7354](#7354)) ([97bb703](97bb703)) * **Google Drive Trigger Node:** Add Shared Drives support ([#7369](#7369)) ([3e7a4d3](3e7a4d3)) * **Google Sheets Node:** Fix "Maximum call stack size exceeded" error on too many rows ([#7384](#7384)) ([732b15a](732b15a)) * **HTML Node:** Update property fields to not use expressions on drag ([#7379](#7379)) ([77643e5](77643e5)) * **Notion Node:** Handle empty values correctly for Notion selects + multi selects ([#7383](#7383)) ([fbcd1d4](fbcd1d4)) * **Set Node:** Increase search priority ([#7358](#7358)) ([e5ad1e7](e5ad1e7)) * **Webhook Node:** Backward compatible form-data parsing for non-array files ([#7385](#7385)) ([6479eb1](6479eb1)) ### Features * **core:** Add Job Summary to Worker response ([#7360](#7360)) ([b8608ce](b8608ce)) * **core:** Integrate object store as binary data manager ([#7253](#7253)) ([1a661e6](1a661e6)) * **core:** Switch binary filesystem mode to nested path structure ([#7307](#7307)) ([0847623](0847623)) * **editor:** Make PDF and Audio binary-data viewable in the UI ([#7367](#7367)) ([8187be1](8187be1)) * **editor:** Support autologin for upgrade path ([#7316](#7316)) ([1dfa052](1dfa052)) * **Execute Workflow Node:** Run once for each item mode ([#7289](#7289)) ([c8c14ca](c8c14ca)) * **Item Lists Node:** Split merge binary data ([#7297](#7297)) ([965db8f](965db8f)) * **Loop Over Items (Split in Batches) Node:** Automatically add a loop + rename ([#7228](#7228)) ([7b773cc](7b773cc)) * **Notion Node:** Fetch child blocks recursively ([#7304](#7304)) ([193181a](193181a)) Co-authored-by: netroy <netroy@users.noreply.github.com>

janober · 2023-10-11T13:57:12Z

Got released with n8n@1.11.0

@Version

# [1.11.0](https://github.com/n8n-io/n8n/compare/n8n@1.10.0...n8n@1.11.0) (2023-10-11) ### Bug Fixes * **core:** Add an option to enable postgres ssl with default certs ([#6889](#6889)) ([789e1e7](789e1e7)) * **core:** Fix error on missing paired item data ([#7399](#7399)) ([47e8953](47e8953)) * **core:** Missing pairing info ([#7326](#7326)) ([e2c3c7a](e2c3c7a)) * **core:** Prevent object deletion request on no prefix match ([#7366](#7366)) ([63e11e4](63e11e4)) * **editor:** Fix completions for `.json` on quoted node name in Code node ([#7382](#7382)) ([86e7ec7](86e7ec7)) * **editor:** Implement canvas zoom UX improvements ([#7376](#7376)) ([7e06b31](7e06b31)) * **editor:** Make workflow history button available only for dev builds ([#7392](#7392)) ([7ed466d](7ed466d)) * **editor:** Remove excess margin below run data editor ([#7372](#7372)) ([3fa2764](3fa2764)) * **editor:** Sanitize HTML binary-data before rendering in the UI ([#7400](#7400)) ([2b075bf](2b075bf)) * **editor:** Use display option's @Version specifier ([#7351](#7351)) ([afbf0c3](afbf0c3)) * **Google BigQuery Node:** Location default to jobReference ([#7354](#7354)) ([97bb703](97bb703)) * **Google Drive Trigger Node:** Add Shared Drives support ([#7369](#7369)) ([3e7a4d3](3e7a4d3)) * **Google Sheets Node:** Fix "Maximum call stack size exceeded" error on too many rows ([#7384](#7384)) ([732b15a](732b15a)) * **HTML Node:** Update property fields to not use expressions on drag ([#7379](#7379)) ([77643e5](77643e5)) * **Notion Node:** Handle empty values correctly for Notion selects + multi selects ([#7383](#7383)) ([fbcd1d4](fbcd1d4)) * **Set Node:** Increase search priority ([#7358](#7358)) ([e5ad1e7](e5ad1e7)) * **Webhook Node:** Backward compatible form-data parsing for non-array files ([#7385](#7385)) ([6479eb1](6479eb1)) ### Features * **core:** Add Job Summary to Worker response ([#7360](#7360)) ([b8608ce](b8608ce)) * **core:** Integrate object store as binary data manager ([#7253](#7253)) ([1a661e6](1a661e6)) * **core:** Switch binary filesystem mode to nested path structure ([#7307](#7307)) ([0847623](0847623)) * **editor:** Make PDF and Audio binary-data viewable in the UI ([#7367](#7367)) ([8187be1](8187be1)) * **editor:** Support autologin for upgrade path ([#7316](#7316)) ([1dfa052](1dfa052)) * **Execute Workflow Node:** Run once for each item mode ([#7289](#7289)) ([c8c14ca](c8c14ca)) * **Item Lists Node:** Split merge binary data ([#7297](#7297)) ([965db8f](965db8f)) * **Loop Over Items (Split in Batches) Node:** Automatically add a loop + rename ([#7228](#7228)) ([7b773cc](7b773cc)) * **Notion Node:** Fetch child blocks recursively ([#7304](#7304)) ([193181a](193181a)) Co-authored-by: netroy <netroy@users.noreply.github.com>

Implement canvas zoom UX improvments

67852f5

n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Oct 6, 2023

mieky reviewed Oct 7, 2023

View reviewed changes

packages/editor-ui/src/utils/canvasUtils.ts Outdated Show resolved Hide resolved

tomi reviewed Oct 7, 2023

View reviewed changes

cypress/e2e/12-canvas.cy.ts Outdated Show resolved Hide resolved

Calculate zoom origin based on sidebar and other UI elements

a1ab20e

elsmr changed the title ~~Implement canvas zoom UX improvements~~ fix(Zoom UX): Implement canvas zoom UX improvements Oct 9, 2023

elsmr added 2 commits October 10, 2023 08:52

Remove unused imports

db25548

Merge branch 'master' into node-839-improve-zoom-ux

ec9af1f

elsmr changed the title ~~fix(Zoom UX): Implement canvas zoom UX improvements~~ fix(editor): Implement canvas zoom UX improvements Oct 10, 2023

mieky approved these changes Oct 10, 2023

View reviewed changes

elsmr merged commit 7e06b31 into master Oct 10, 2023
54 of 56 checks passed

elsmr deleted the node-839-improve-zoom-ux branch October 10, 2023 09:08

github-actions bot mentioned this pull request Oct 11, 2023

🚀 Release 1.11.0 #7402

Merged

janober added the Released label Oct 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(editor): Implement canvas zoom UX improvements #7376

fix(editor): Implement canvas zoom UX improvements #7376

elsmr commented Oct 6, 2023

github-actions bot commented Oct 6, 2023

codecov bot commented Oct 6, 2023 •

edited

Loading

mieky left a comment

elsmr commented Oct 9, 2023

mieky left a comment

cypress bot commented Oct 10, 2023

github-actions bot commented Oct 10, 2023

janober commented Oct 11, 2023

fix(editor): Implement canvas zoom UX improvements #7376

fix(editor): Implement canvas zoom UX improvements #7376

Conversation

elsmr commented Oct 6, 2023

github-actions bot commented Oct 6, 2023

codecov bot commented Oct 6, 2023 • edited Loading

Codecov Report

mieky left a comment

Choose a reason for hiding this comment

elsmr commented Oct 9, 2023

mieky left a comment

Choose a reason for hiding this comment

cypress bot commented Oct 10, 2023

1 flaky test on run #2448 ↗︎

Review all test suite changes for PR #7376 ↗︎

github-actions bot commented Oct 10, 2023

janober commented Oct 11, 2023

codecov bot commented Oct 6, 2023 •

edited

Loading