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.

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

Try using a percentage based calculation for block drag scrolling velocity. #23448

Merged
merged 2 commits into from
Jun 29, 2020

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Jun 25, 2020

Description

This tries an iteration on the behavior in #23082.

See also #23446 for an alternative.

It's based on the refactor to hooks in #23444, so the diff looks bigger than it is. That PR should ideally be merged first.

How does this differ from #23082

In #23082, when the user drags more than 50px the page starts scrolling in the direction they've dragged. The speed of the scrolling is based on how far the user drags.

Because the scroll speed is calculated using pixels, if the user starts dragging a block that's already near the top of the screen upwards there's a limit to the speed that the page can scroll. On the other hand, when dragging downwards from the top, very fast scroll speeds can be unexpectedly achieved due to the amount of space a user can drag into.

This PR makes the calculation percentage based. If the user drags to the top of the page the page scrolls at the same speed as if they dragged to the bottom, regardless of where they started dragging from.

How has this been tested?

  1. Create a post with lots of blocks
  2. Try dragging blocks to an off-screen position.

Types of changes

Non-breaking enhancement

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@talldan talldan added [Type] Enhancement A suggestion for improvement. [Feature] Drag and Drop Drag and drop functionality when working with blocks labels Jun 25, 2020
@talldan talldan self-assigned this Jun 25, 2020
@github-actions
Copy link

github-actions bot commented Jun 25, 2020

Size Change: +64 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/block-editor/index.js 109 kB +64 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.37 kB 0 B
build/block-directory/style-rtl.css 941 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.6 kB 0 B
build/block-library/index.js 130 kB 0 B
build/block-library/style-rtl.css 8.04 kB 0 B
build/block-library/style.css 8.04 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 198 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.9 kB 0 B
build/compose/index.js 9.62 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.19 kB 0 B
build/edit-navigation/index.js 9.87 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.51 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.02 kB 0 B
build/edit-site/style.css 3.02 kB 0 B
build/edit-widgets/index.js 9.32 kB 0 B
build/edit-widgets/style-rtl.css 2.42 kB 0 B
build/edit-widgets/style.css 2.42 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 3.83 kB 0 B
build/editor/style.css 3.83 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.73 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 663 B 0 B
build/nux/style.css 660 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

Before:

before

After:

after

Thank you for making this PR!

The scroll while dragging enhancement is great, but it was definitely a little aggressive. This balances it out, way better. 👍 👍

@talldan talldan requested a review from gravityrail June 25, 2020 09:38
@ellatrix
Copy link
Member

Nice!

@gravityrail
Copy link
Contributor

Very nice improvement. Thanks!

@talldan talldan force-pushed the try/block-drag-scroll-percentage-based branch from 2ad9d77 to f6ab680 Compare June 26, 2020 03:22
@talldan talldan force-pushed the try/block-drag-scroll-percentage-based branch from f6ab680 to 2aba546 Compare June 26, 2020 06:01
Copy link
Contributor

@gravityrail gravityrail left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A little feedback on duplication, otherwise looks good

Comment on lines +91 to +97
const dragDistance = Math.max(
offsetDragStartPosition -
offsetDragPosition -
SCROLL_INACTIVE_DISTANCE_PX,
0
);
const distancePercentage = dragDistance / moveableDistance;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These lines appear to be duplicates of lines in the previous if-clause - is there a way to eliminate this duplication?

@ellatrix ellatrix merged commit 21e86f1 into master Jun 29, 2020
@ellatrix ellatrix deleted the try/block-drag-scroll-percentage-based branch June 29, 2020 08:42
@github-actions github-actions bot added this to the Gutenberg 8.5 milestone Jun 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants