An optional Pragmatic drag and drop package that enables automatic scrolling during a drag operation
An optional Pragmatic drag and drop package that enables automatic scrolling during a drag operation. This package works with any configuration of scrollable entities, and you can change the configuration of your scrollable entities in any way you like during a drag.
atlassian
beaa6ee463aa8 -
Internal changes to how border radius is applied.#164244
65021fc0267e2 -
The cleanup functions returned by the following utilities now only work on the first call. This
was done to prevent unexpected side effects of calling a cleanup function multiple times.
@atlaskit/pragmatic-drag-and-drop/adapter/elementdraggabledropTargetForElementsmonitorForElements@atlaskit/pragmatic-drag-and-drop/adapter/text-selectiondropTargetForTextSelectionmonitorForTextSelection@atlaskit/pragmatic-drag-and-drop/adapter/externaldropTargetForExternalmonitorForExternal@atlaskit/pragmatic-drag-and-drop-auto-scroll/elementautoScrollForElementsautoScrollWindowForElements@atlaskit/pragmatic-drag-and-drop-auto-scroll/externalautoScrollForExternalautoScrollWindowForExternal@atlaskit/pragmatic-drag-and-drop-auto-scroll/text-selectionautoScrollForTextSelectionautoScrollWindowForTextSelectionUpdated dependencies
4ca6346256c8a -
Minor increase of time dampening duration. After lots of explorations, we have increased the value
to make it easier for people to avoid the impacts of rapid scroll speed spikes when lifting or
entering into a high scroll speed area.#170839
1534389dcb75b -
In order to improve clarity, we have renamed the from*Edge (eg fromTopEdge) argument
properties to for*Edge (eg forTopEdge) for the overflow scroller. If you are not using
overflow scrolling, there is nothing you need to do.
- fromTopEdge
+ forTopEdge
- fromRightEdge
+ forRightEdge
- fromBottomEdge
+ forBottomEdge
- fromLeftEdge
+ forLeftEdgeconst unbind = unsafeOverflowAutoScrollForElements({
element,
getOverflow: () => ({
- fromTopEdge: {
+ forTopEdge: {
top: 6000,
right: 6000,
left: 6000,
},
- fromRightEdge: {
+ forRightEdge: {
top: 6000,
right: 6000,
bottom: 6000,
},
- fromBottomEdge: {
+ forBottomEdge: {
right: 6000,
bottom: 6000,
left: 6000,
},
- fromLeftEdge: {
+ forLeftEdge: {
top: 6000,
left: 6000,
bottom: 6000,
},
}),
});We thought that for* more accurately represented what was being provided, as these are the
overflow definitions for a defined edge.
We have also improved the types for for*Edge so that you do not need to provide redundant cross
axis information if you only want to overflow scroll on the main axis.
const unbind = unsafeOverflowAutoScrollForElements({
element,
getOverflow: () => ({
forTopEdge: {
top: 100,
+ // no longer need to pass `0` for the cross axis if you don't need it
- right: 0,
- left: 0,
},
forRightEdge: {
right: 100,
- top: 0,
- bottom: 0,
},
forBottomEdge: {
bottom: 100,
- right: 0,
- left: 0,
},
forLeftEdge: {
left: 100,
- top: 0,
- bottom: 0,
},
}),
});When declaring overflow scrolling for an edge, you cannot provide how deep the scrolling should occur into the element (that is defined by the "over element" overflow scroller). Providing redundant information for an edge will now also give a type error rather than providing no feedback.
const unbind = unsafeOverflowAutoScrollForElements({
element,
getOverflow: () => ({
forTopEdge: {
top: 100,
bottom: 30, // ❌ now a type error
},
forRightEdge: {
right: 100,
left: 10, // ❌ now a type error
},
forBottomEdge: {
bottom: 100,
top: 200, // ❌ now a type error
},
forLeftEdge: {
left: 100,
right: 20, // ❌ now a type error
},
}),
});#116572
98c65e7ff719c -
🍯 Introducing "the honey pot fix" which is an improved workaround for a
painful browser bug.
Background
The browser bug causes the browser to think the users pointer is continually depressed at the point that the user started a drag. This could lead to incorrect events being triggered, and incorrect styles being applied to elements that the user is not currently over during a drag.
Outcomes
MouseEvents (eg "mouseenter" and "mouseleave") during a
drag (which is a violation of the
drag and drop specification):hover or :active styles during a drag. Previously consumers
would need to disable these style rules during a drag to prevent these styles being applied.#95426
a58266bf88e6 -
Adding axis locking functionality
+ // `getAllowedAxis` added to element, text selection and external auto scrollers
autoScrollForElements({
element: myElement,
+ getAllowedAxis: (args: ElementGetFeedbackArgs<DragType>) => 'horizontal' | 'vertical' | 'all',
});
autoScrollWindowForElements({
+ getAllowedAxis: (args: WindowGetFeedbackArgs<DragType>) => 'horizontal' | 'vertical' | 'all',
});
unsafeOverflowAutoScrollForElements({
+ getAllowedAxis?: (args: ElementGetFeedbackArgs<DragType>) => AllowedAxis;
})
1.2.0is deprecated onnpmand should not be used. Shortly after release we decided to change this API
#94103
4e3fb63eb288 -
Added axis locking functionality.
autoScrollForElements({
element: myElement,
getConfiguration: () => ({
maxScrollSpeed: 'fast' | 'standard',
+ allowedAxis: 'horizontal' | 'vertical' | 'all',
}),
})#94454
4b40eb010074 -
Exposing the unsafe overflow auto scroller for external drags
(unsafeOverflowAutoScrollForExternal()). This already existed, but it was not exposed publicly
🤦♂️.
import {unsafeOverflowAutoScrollForElements from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
import {unsafeOverflowAutoScrollForTextSelection} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/text-selection';
+ import {unsafeOverflowAutoScrollForExternal} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/external';35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.077694db987fc -
Public release of Pragmatic drag and drop documentation#83702
4d9e25ab4eaa -
Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent
description to various consumers, and so they are consistently formed amongst each other.
package.json descriptionREADME.md8d4e99057fe0 -
Upgrade Typescript from 4.9.5 to 5.4.2#70616
42e57ea65fee -
This is our first major release (1.0) for all Pragmatic drag and drop packages.
For a detailed explanation of these changes, and how to upgrade (automatically) to 1.0 please
see our
1.0 upgrade guide
#57337
4ad3fa749a5c -
Adding the ability to increase the maximum automatic scroll speed.
autoScrollForElements({
element: myElement,
+ getConfiguration: () => ({maxScrollSpeed: 'fast' | 'standard'}),
})getConfiguration() is a new optional argument be used with all auto scrolling registration
functions:
autoScrollForElementsautoScrollWindowForElementsautoScrollForFilesautoScrollWindowForFilesunsafeOverflowForElementsunsafeOverflowForFilesautoScrollForElements({
element: myElement,
getConfiguration: () => ({ maxScrollSpeed : 'fast' })
}),We recommend using the default "standard" max scroll speed for most experiences. However, on
some larger experiences, a faster max scroll speed ("fast") can feel better.
66d9475437e - Internal
refactoring to improve clarity and safety#42668
0a4e3f44ba3 - We have
landed a few fixes for "overflow scrolling"
canScroll() => false would incorrectly opt out of "overflow
scrolling" for younger registrations.20a91012629 - First
public release of this package. Please refer to documentation for usage and API information.a6d9f3bb566 - Adding
optional overflow scrolling API. API information shared directly with Trello7803a90e9c6 - This
change makes it so that distance dampening is based on the size of the hitbox and not the
container. Now that we clamp the size of the hitbox, our distance dampening needs to be based on
the size of the hitbox, and not the container.5c643ce004d - Limiting
the max size of auto scrolling hitboxes. This prevents large elements having giant auto scroll
hitboxes693af8c5775 - Early
release of our new optional drag and drop package for Pragmatic drag and drop. Package release is
only for early integration with Trello.