@dnd-kit/modifiers 4.0.0-next-202181324619 → 5.0.0-next-20220714748
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +36 -3
- package/dist/modifiers.cjs.development.js +6 -1
- package/dist/modifiers.cjs.development.js.map +1 -1
- package/dist/modifiers.cjs.production.min.js +1 -1
- package/dist/modifiers.cjs.production.min.js.map +1 -1
- package/dist/modifiers.esm.js +7 -2
- package/dist/modifiers.esm.js.map +1 -1
- package/dist/utilities/restrictToBoundingRect.d.ts +2 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,39 @@
|
|
|
1
1
|
# @dnd-kit/modifiers
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 5.0.0-next-20220714748
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#518](https://github.com/clauderic/dnd-kit/pull/518) [`6310227`](https://github.com/clauderic/dnd-kit/commit/63102272d0d63dae349e2e9f638277e16a7d5970) Thanks [@clauderic](https://github.com/clauderic)! - Major internal refactor of measuring and collision detection.
|
|
8
|
+
|
|
9
|
+
### Summary of changes
|
|
10
|
+
|
|
11
|
+
Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.
|
|
12
|
+
|
|
13
|
+
This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.
|
|
14
|
+
|
|
15
|
+
### Breaking changes:
|
|
16
|
+
|
|
17
|
+
- By default, `@dnd-kit` now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
|
|
18
|
+
- Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
|
|
19
|
+
- Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of <DndContext>. Refer to the <Switch> example.
|
|
20
|
+
- Reduced the number of concepts related to measuring from `ViewRect`, `LayoutRect` to just a single concept of `ClientRect`.
|
|
21
|
+
- The `ClientRect` interface no longer holds the `offsetTop` and `offsetLeft` properties. For most use-cases, you can replace `offsetTop` with `top` and `offsetLeft` with `left`.
|
|
22
|
+
- Replaced the following exports from the `@dnd-kit/core` package with `getClientRect`:
|
|
23
|
+
- `getBoundingClientRect`
|
|
24
|
+
- `getViewRect`
|
|
25
|
+
- `getLayoutRect`
|
|
26
|
+
- `getViewportLayoutRect`
|
|
27
|
+
- Removed `translatedRect` from the `SensorContext` interface. Replace usage with `collisionRect`.
|
|
28
|
+
- Removed `activeNodeClientRect` on the `DndContext` interface. Replace with `activeNodeRect`.
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- Updated dependencies [[`f3ad20d`](https://github.com/clauderic/dnd-kit/commit/f3ad20d5b2c2f2ca7b82c193c9af5eef38c5ce11), [`c6c67cb`](https://github.com/clauderic/dnd-kit/commit/c6c67cb9cbc6e61027f7bb084fd2232160037d5e), [`6310227`](https://github.com/clauderic/dnd-kit/commit/63102272d0d63dae349e2e9f638277e16a7d5970)]:
|
|
33
|
+
- @dnd-kit/core@5.0.0-next-20220714748
|
|
34
|
+
- @dnd-kit/utilities@3.1.0-next-20220714748
|
|
35
|
+
|
|
36
|
+
## 4.0.0
|
|
4
37
|
|
|
5
38
|
### Minor Changes
|
|
6
39
|
|
|
@@ -11,8 +44,8 @@
|
|
|
11
44
|
- [#437](https://github.com/clauderic/dnd-kit/pull/437) [`0e628bc`](https://github.com/clauderic/dnd-kit/commit/0e628bce53fb1a7223cdedd203cb07b6e62e5ec1) Thanks [@chestozo](https://github.com/chestozo)! - Added PointerEvent support to the `getEventCoordinates` method. This fixes testing the PointerSensor with Cypress (#436)
|
|
12
45
|
|
|
13
46
|
- Updated dependencies [[`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`aede2cc`](https://github.com/clauderic/dnd-kit/commit/aede2cc42d488435cf65f19b63ba6bb7702b3fde), [`05d6a78`](https://github.com/clauderic/dnd-kit/commit/05d6a78a17cbaacd8dffed685dfea5a6ea3d38a8), [`a32a4c5`](https://github.com/clauderic/dnd-kit/commit/a32a4c5f6228b9f03bf460b8403a38b8c3de493f), [`f96cb5d`](https://github.com/clauderic/dnd-kit/commit/f96cb5d5e45a1000104892244201a70cbe8e6553), [`dea715c`](https://github.com/clauderic/dnd-kit/commit/dea715c342b2d998a9f1562cacb5e70c77562c92), [`dbc9601`](https://github.com/clauderic/dnd-kit/commit/dbc9601c922e1d6944a63f66ee647f203abee595), [`46ec5e4`](https://github.com/clauderic/dnd-kit/commit/46ec5e4c6e3ca9fa849666f90fef426b3c465cf0), [`7006464`](https://github.com/clauderic/dnd-kit/commit/700646468683e4820269534c6352cca93bb5a987), [`0e628bc`](https://github.com/clauderic/dnd-kit/commit/0e628bce53fb1a7223cdedd203cb07b6e62e5ec1), [`c447880`](https://github.com/clauderic/dnd-kit/commit/c447880656b6bee2915d5a5f01d3ddfbd5705fa2), [`2ba6dfe`](https://github.com/clauderic/dnd-kit/commit/2ba6dfe6b080b90b13aa8d9eb07331515a0d2faa), [`8d70540`](https://github.com/clauderic/dnd-kit/commit/8d70540771d1455c326310b438a198d2516e1d04), [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`422d083`](https://github.com/clauderic/dnd-kit/commit/422d0831173a893099ba924bf7bbc465640fc15d), [`c4b21b4`](https://github.com/clauderic/dnd-kit/commit/c4b21b4ee17cba31c10928eb227848026f54222a), [`5a41340`](https://github.com/clauderic/dnd-kit/commit/5a41340e6561c3784da2a9266e1b852ba370918c), [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227), [`e2ee0dc`](https://github.com/clauderic/dnd-kit/commit/e2ee0dccb12794c419587019defddfd82ba5d297), [`1fe9b5c`](https://github.com/clauderic/dnd-kit/commit/1fe9b5c9d34237aae6ab22d54478c419d44a079a), [`1fe9b5c`](https://github.com/clauderic/dnd-kit/commit/1fe9b5c9d34237aae6ab22d54478c419d44a079a), [`1f5ca27`](https://github.com/clauderic/dnd-kit/commit/1f5ca27b17879861c2c545160c2046a747544846)]:
|
|
14
|
-
- @dnd-kit/core@4.0.0
|
|
15
|
-
- @dnd-kit/utilities@3.0.0
|
|
47
|
+
- @dnd-kit/core@4.0.0
|
|
48
|
+
- @dnd-kit/utilities@3.0.0
|
|
16
49
|
|
|
17
50
|
## 3.0.0
|
|
18
51
|
|
|
@@ -91,8 +91,13 @@ const snapCenterToCursor = ({
|
|
|
91
91
|
activeNodeRect,
|
|
92
92
|
transform
|
|
93
93
|
}) => {
|
|
94
|
-
if (activeNodeRect && activatorEvent
|
|
94
|
+
if (activeNodeRect && activatorEvent) {
|
|
95
95
|
const activatorCoordinates = utilities.getEventCoordinates(activatorEvent);
|
|
96
|
+
|
|
97
|
+
if (!activatorCoordinates) {
|
|
98
|
+
return transform;
|
|
99
|
+
}
|
|
100
|
+
|
|
96
101
|
const offsetX = activatorCoordinates.x - activeNodeRect.left;
|
|
97
102
|
const offsetY = activatorCoordinates.y - activeNodeRect.top;
|
|
98
103
|
return { ...transform,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modifiers.cjs.development.js","sources":["../src/createSnapModifier.ts","../src/restrictToHorizontalAxis.ts","../src/utilities/restrictToBoundingRect.ts","../src/restrictToParentElement.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {Modifier} from '@dnd-kit/core';\n\nexport function createSnapModifier(gridSize: number): Modifier {\n return ({transform}) => ({\n ...transform,\n x: Math.ceil(transform.x / gridSize) * gridSize,\n y: Math.ceil(transform.y / gridSize) * gridSize,\n });\n}\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToHorizontalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n y: 0,\n };\n};\n","import type {
|
|
1
|
+
{"version":3,"file":"modifiers.cjs.development.js","sources":["../src/createSnapModifier.ts","../src/restrictToHorizontalAxis.ts","../src/utilities/restrictToBoundingRect.ts","../src/restrictToParentElement.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {Modifier} from '@dnd-kit/core';\n\nexport function createSnapModifier(gridSize: number): Modifier {\n return ({transform}) => ({\n ...transform,\n x: Math.ceil(transform.x / gridSize) * gridSize,\n y: Math.ceil(transform.y / gridSize) * gridSize,\n });\n}\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToHorizontalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n y: 0,\n };\n};\n","import type {ClientRect} from '@dnd-kit/core';\nimport type {Transform} from '@dnd-kit/utilities';\n\nexport function restrictToBoundingRect(\n transform: Transform,\n rect: ClientRect,\n boundingRect: ClientRect\n): Transform {\n const value = {\n ...transform,\n };\n\n if (rect.top + transform.y <= boundingRect.top) {\n value.y = boundingRect.top - rect.top;\n } else if (\n rect.bottom + transform.y >=\n boundingRect.top + boundingRect.height\n ) {\n value.y = boundingRect.top + boundingRect.height - rect.bottom;\n }\n\n if (rect.left + transform.x <= boundingRect.left) {\n value.x = boundingRect.left - rect.left;\n } else if (\n rect.right + transform.x >=\n boundingRect.left + boundingRect.width\n ) {\n value.x = boundingRect.left + boundingRect.width - rect.right;\n }\n\n return value;\n}\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToParentElement: Modifier = ({\n transform,\n activeNodeRect,\n containerNodeRect,\n}) => {\n if (!activeNodeRect || !containerNodeRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, containerNodeRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToFirstScrollableAncestor: Modifier = ({\n transform,\n activeNodeRect,\n scrollableAncestorRects,\n}) => {\n const firstScrollableAncestorRect = scrollableAncestorRects[0];\n\n if (!activeNodeRect || !firstScrollableAncestorRect) {\n return transform;\n }\n\n return restrictToBoundingRect(\n transform,\n activeNodeRect,\n firstScrollableAncestorRect\n );\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToVerticalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n x: 0,\n };\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToWindowEdges: Modifier = ({\n transform,\n activeNodeRect,\n windowRect,\n}) => {\n if (!activeNodeRect || !windowRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, windowRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {getEventCoordinates} from '@dnd-kit/utilities';\n\nexport const snapCenterToCursor: Modifier = ({\n activatorEvent,\n activeNodeRect,\n transform,\n}) => {\n if (activeNodeRect && activatorEvent) {\n const activatorCoordinates = getEventCoordinates(activatorEvent);\n\n if (!activatorCoordinates) {\n return transform;\n }\n\n const offsetX = activatorCoordinates.x - activeNodeRect.left;\n const offsetY = activatorCoordinates.y - activeNodeRect.top;\n\n return {\n ...transform,\n x: transform.x + offsetX - activeNodeRect.width / 2,\n y: transform.y + offsetY - activeNodeRect.height / 2,\n };\n }\n\n return transform;\n};\n"],"names":["createSnapModifier","gridSize","transform","x","Math","ceil","y","restrictToHorizontalAxis","restrictToBoundingRect","rect","boundingRect","value","top","bottom","height","left","right","width","restrictToParentElement","activeNodeRect","containerNodeRect","restrictToFirstScrollableAncestor","scrollableAncestorRects","firstScrollableAncestorRect","restrictToVerticalAxis","restrictToWindowEdges","windowRect","snapCenterToCursor","activatorEvent","activatorCoordinates","getEventCoordinates","offsetX","offsetY"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@dnd-kit/utilities");function e(t,e,r){const o={...t};return e.top+t.y<=r.top?o.y=r.top-e.top:e.bottom+t.y>=r.top+r.height&&(o.y=r.top+r.height-e.bottom),e.left+t.x<=r.left?o.x=r.left-e.left:e.right+t.x>=r.left+r.width&&(o.x=r.left+r.width-e.right),o}exports.createSnapModifier=function(t){return({transform:e})=>({...e,x:Math.ceil(e.x/t)*t,y:Math.ceil(e.y/t)*t})},exports.restrictToFirstScrollableAncestor=({transform:t,activeNodeRect:r,scrollableAncestorRects:o})=>{const i=o[0];return r&&i?e(t,r,i):t},exports.restrictToHorizontalAxis=({transform:t})=>({...t,y:0}),exports.restrictToParentElement=({transform:t,activeNodeRect:r,containerNodeRect:o})=>r&&o?e(t,r,o):t,exports.restrictToVerticalAxis=({transform:t})=>({...t,x:0}),exports.restrictToWindowEdges=({transform:t,activeNodeRect:r,windowRect:o})=>r&&o?e(t,r,o):t,exports.snapCenterToCursor=({activatorEvent:e,activeNodeRect:r,transform:o})=>{if(r&&e
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@dnd-kit/utilities");function e(t,e,r){const o={...t};return e.top+t.y<=r.top?o.y=r.top-e.top:e.bottom+t.y>=r.top+r.height&&(o.y=r.top+r.height-e.bottom),e.left+t.x<=r.left?o.x=r.left-e.left:e.right+t.x>=r.left+r.width&&(o.x=r.left+r.width-e.right),o}exports.createSnapModifier=function(t){return({transform:e})=>({...e,x:Math.ceil(e.x/t)*t,y:Math.ceil(e.y/t)*t})},exports.restrictToFirstScrollableAncestor=({transform:t,activeNodeRect:r,scrollableAncestorRects:o})=>{const i=o[0];return r&&i?e(t,r,i):t},exports.restrictToHorizontalAxis=({transform:t})=>({...t,y:0}),exports.restrictToParentElement=({transform:t,activeNodeRect:r,containerNodeRect:o})=>r&&o?e(t,r,o):t,exports.restrictToVerticalAxis=({transform:t})=>({...t,x:0}),exports.restrictToWindowEdges=({transform:t,activeNodeRect:r,windowRect:o})=>r&&o?e(t,r,o):t,exports.snapCenterToCursor=({activatorEvent:e,activeNodeRect:r,transform:o})=>{if(r&&e){const i=t.getEventCoordinates(e);if(!i)return o;const s=i.x-r.left,n=i.y-r.top;return{...o,x:o.x+s-r.width/2,y:o.y+n-r.height/2}}return o};
|
|
2
2
|
//# sourceMappingURL=modifiers.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modifiers.cjs.production.min.js","sources":["../src/utilities/restrictToBoundingRect.ts","../src/createSnapModifier.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToHorizontalAxis.ts","../src/restrictToParentElement.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"modifiers.cjs.production.min.js","sources":["../src/utilities/restrictToBoundingRect.ts","../src/createSnapModifier.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToHorizontalAxis.ts","../src/restrictToParentElement.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {ClientRect} from '@dnd-kit/core';\nimport type {Transform} from '@dnd-kit/utilities';\n\nexport function restrictToBoundingRect(\n transform: Transform,\n rect: ClientRect,\n boundingRect: ClientRect\n): Transform {\n const value = {\n ...transform,\n };\n\n if (rect.top + transform.y <= boundingRect.top) {\n value.y = boundingRect.top - rect.top;\n } else if (\n rect.bottom + transform.y >=\n boundingRect.top + boundingRect.height\n ) {\n value.y = boundingRect.top + boundingRect.height - rect.bottom;\n }\n\n if (rect.left + transform.x <= boundingRect.left) {\n value.x = boundingRect.left - rect.left;\n } else if (\n rect.right + transform.x >=\n boundingRect.left + boundingRect.width\n ) {\n value.x = boundingRect.left + boundingRect.width - rect.right;\n }\n\n return value;\n}\n","import type {Modifier} from '@dnd-kit/core';\n\nexport function createSnapModifier(gridSize: number): Modifier {\n return ({transform}) => ({\n ...transform,\n x: Math.ceil(transform.x / gridSize) * gridSize,\n y: Math.ceil(transform.y / gridSize) * gridSize,\n });\n}\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToFirstScrollableAncestor: Modifier = ({\n transform,\n activeNodeRect,\n scrollableAncestorRects,\n}) => {\n const firstScrollableAncestorRect = scrollableAncestorRects[0];\n\n if (!activeNodeRect || !firstScrollableAncestorRect) {\n return transform;\n }\n\n return restrictToBoundingRect(\n transform,\n activeNodeRect,\n firstScrollableAncestorRect\n );\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToHorizontalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n y: 0,\n };\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToParentElement: Modifier = ({\n transform,\n activeNodeRect,\n containerNodeRect,\n}) => {\n if (!activeNodeRect || !containerNodeRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, containerNodeRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToVerticalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n x: 0,\n };\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToWindowEdges: Modifier = ({\n transform,\n activeNodeRect,\n windowRect,\n}) => {\n if (!activeNodeRect || !windowRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, windowRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {getEventCoordinates} from '@dnd-kit/utilities';\n\nexport const snapCenterToCursor: Modifier = ({\n activatorEvent,\n activeNodeRect,\n transform,\n}) => {\n if (activeNodeRect && activatorEvent) {\n const activatorCoordinates = getEventCoordinates(activatorEvent);\n\n if (!activatorCoordinates) {\n return transform;\n }\n\n const offsetX = activatorCoordinates.x - activeNodeRect.left;\n const offsetY = activatorCoordinates.y - activeNodeRect.top;\n\n return {\n ...transform,\n x: transform.x + offsetX - activeNodeRect.width / 2,\n y: transform.y + offsetY - activeNodeRect.height / 2,\n };\n }\n\n return transform;\n};\n"],"names":["restrictToBoundingRect","transform","rect","boundingRect","value","top","y","bottom","height","left","x","right","width","gridSize","Math","ceil","activeNodeRect","scrollableAncestorRects","firstScrollableAncestorRect","containerNodeRect","windowRect","activatorEvent","activatorCoordinates","getEventCoordinates","offsetX","offsetY"],"mappings":"iHAGgBA,EACdC,EACAC,EACAC,SAEMC,EAAQ,IACTH,UAGDC,EAAKG,IAAMJ,EAAUK,GAAKH,EAAaE,IACzCD,EAAME,EAAIH,EAAaE,IAAMH,EAAKG,IAElCH,EAAKK,OAASN,EAAUK,GACxBH,EAAaE,IAAMF,EAAaK,SAEhCJ,EAAME,EAAIH,EAAaE,IAAMF,EAAaK,OAASN,EAAKK,QAGtDL,EAAKO,KAAOR,EAAUS,GAAKP,EAAaM,KAC1CL,EAAMM,EAAIP,EAAaM,KAAOP,EAAKO,KAEnCP,EAAKS,MAAQV,EAAUS,GACvBP,EAAaM,KAAON,EAAaS,QAEjCR,EAAMM,EAAIP,EAAaM,KAAON,EAAaS,MAAQV,EAAKS,OAGnDP,sCC5B0BS,SAC1B,EAAEZ,UAAAA,UACJA,EACHS,EAAGI,KAAKC,KAAKd,EAAUS,EAAIG,GAAYA,EACvCP,EAAGQ,KAAKC,KAAKd,EAAUK,EAAIO,GAAYA,+CCHgB,EACzDZ,UAAAA,EACAe,eAAAA,EACAC,wBAAAA,YAEMC,EAA8BD,EAAwB,UAEvDD,GAAmBE,EAIjBlB,EACLC,EACAe,EACAE,GANOjB,oCCTuC,EAAEA,UAAAA,MAC3C,IACFA,EACHK,EAAG,oCCF0C,EAC/CL,UAAAA,EACAe,eAAAA,EACAG,kBAAAA,KAEKH,GAAmBG,EAIjBnB,EAAuBC,EAAWe,EAAgBG,GAHhDlB,iCCPqC,EAAEA,UAAAA,MACzC,IACFA,EACHS,EAAG,kCCDwC,EAC7CT,UAAAA,EACAe,eAAAA,EACAI,WAAAA,KAEKJ,GAAmBI,EAIjBpB,EAAuBC,EAAWe,EAAgBI,GAHhDnB,6BCPiC,EAC1CoB,eAAAA,EACAL,eAAAA,EACAf,UAAAA,SAEIe,GAAkBK,EAAgB,OAC9BC,EAAuBC,sBAAoBF,OAE5CC,SACIrB,QAGHuB,EAAUF,EAAqBZ,EAAIM,EAAeP,KAClDgB,EAAUH,EAAqBhB,EAAIU,EAAeX,UAEjD,IACFJ,EACHS,EAAGT,EAAUS,EAAIc,EAAUR,EAAeJ,MAAQ,EAClDN,EAAGL,EAAUK,EAAImB,EAAUT,EAAeR,OAAS,UAIhDP"}
|
package/dist/modifiers.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getEventCoordinates } from '@dnd-kit/utilities';
|
|
2
2
|
|
|
3
3
|
function createSnapModifier(gridSize) {
|
|
4
4
|
return ({
|
|
@@ -87,8 +87,13 @@ const snapCenterToCursor = ({
|
|
|
87
87
|
activeNodeRect,
|
|
88
88
|
transform
|
|
89
89
|
}) => {
|
|
90
|
-
if (activeNodeRect && activatorEvent
|
|
90
|
+
if (activeNodeRect && activatorEvent) {
|
|
91
91
|
const activatorCoordinates = getEventCoordinates(activatorEvent);
|
|
92
|
+
|
|
93
|
+
if (!activatorCoordinates) {
|
|
94
|
+
return transform;
|
|
95
|
+
}
|
|
96
|
+
|
|
92
97
|
const offsetX = activatorCoordinates.x - activeNodeRect.left;
|
|
93
98
|
const offsetY = activatorCoordinates.y - activeNodeRect.top;
|
|
94
99
|
return { ...transform,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modifiers.esm.js","sources":["../src/createSnapModifier.ts","../src/restrictToHorizontalAxis.ts","../src/utilities/restrictToBoundingRect.ts","../src/restrictToParentElement.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {Modifier} from '@dnd-kit/core';\n\nexport function createSnapModifier(gridSize: number): Modifier {\n return ({transform}) => ({\n ...transform,\n x: Math.ceil(transform.x / gridSize) * gridSize,\n y: Math.ceil(transform.y / gridSize) * gridSize,\n });\n}\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToHorizontalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n y: 0,\n };\n};\n","import type {
|
|
1
|
+
{"version":3,"file":"modifiers.esm.js","sources":["../src/createSnapModifier.ts","../src/restrictToHorizontalAxis.ts","../src/utilities/restrictToBoundingRect.ts","../src/restrictToParentElement.ts","../src/restrictToFirstScrollableAncestor.ts","../src/restrictToVerticalAxis.ts","../src/restrictToWindowEdges.ts","../src/snapCenterToCursor.ts"],"sourcesContent":["import type {Modifier} from '@dnd-kit/core';\n\nexport function createSnapModifier(gridSize: number): Modifier {\n return ({transform}) => ({\n ...transform,\n x: Math.ceil(transform.x / gridSize) * gridSize,\n y: Math.ceil(transform.y / gridSize) * gridSize,\n });\n}\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToHorizontalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n y: 0,\n };\n};\n","import type {ClientRect} from '@dnd-kit/core';\nimport type {Transform} from '@dnd-kit/utilities';\n\nexport function restrictToBoundingRect(\n transform: Transform,\n rect: ClientRect,\n boundingRect: ClientRect\n): Transform {\n const value = {\n ...transform,\n };\n\n if (rect.top + transform.y <= boundingRect.top) {\n value.y = boundingRect.top - rect.top;\n } else if (\n rect.bottom + transform.y >=\n boundingRect.top + boundingRect.height\n ) {\n value.y = boundingRect.top + boundingRect.height - rect.bottom;\n }\n\n if (rect.left + transform.x <= boundingRect.left) {\n value.x = boundingRect.left - rect.left;\n } else if (\n rect.right + transform.x >=\n boundingRect.left + boundingRect.width\n ) {\n value.x = boundingRect.left + boundingRect.width - rect.right;\n }\n\n return value;\n}\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToParentElement: Modifier = ({\n transform,\n activeNodeRect,\n containerNodeRect,\n}) => {\n if (!activeNodeRect || !containerNodeRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, containerNodeRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToFirstScrollableAncestor: Modifier = ({\n transform,\n activeNodeRect,\n scrollableAncestorRects,\n}) => {\n const firstScrollableAncestorRect = scrollableAncestorRects[0];\n\n if (!activeNodeRect || !firstScrollableAncestorRect) {\n return transform;\n }\n\n return restrictToBoundingRect(\n transform,\n activeNodeRect,\n firstScrollableAncestorRect\n );\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nexport const restrictToVerticalAxis: Modifier = ({transform}) => {\n return {\n ...transform,\n x: 0,\n };\n};\n","import type {Modifier} from '@dnd-kit/core';\n\nimport {restrictToBoundingRect} from './utilities';\n\nexport const restrictToWindowEdges: Modifier = ({\n transform,\n activeNodeRect,\n windowRect,\n}) => {\n if (!activeNodeRect || !windowRect) {\n return transform;\n }\n\n return restrictToBoundingRect(transform, activeNodeRect, windowRect);\n};\n","import type {Modifier} from '@dnd-kit/core';\nimport {getEventCoordinates} from '@dnd-kit/utilities';\n\nexport const snapCenterToCursor: Modifier = ({\n activatorEvent,\n activeNodeRect,\n transform,\n}) => {\n if (activeNodeRect && activatorEvent) {\n const activatorCoordinates = getEventCoordinates(activatorEvent);\n\n if (!activatorCoordinates) {\n return transform;\n }\n\n const offsetX = activatorCoordinates.x - activeNodeRect.left;\n const offsetY = activatorCoordinates.y - activeNodeRect.top;\n\n return {\n ...transform,\n x: transform.x + offsetX - activeNodeRect.width / 2,\n y: transform.y + offsetY - activeNodeRect.height / 2,\n };\n }\n\n return transform;\n};\n"],"names":["createSnapModifier","gridSize","transform","x","Math","ceil","y","restrictToHorizontalAxis","restrictToBoundingRect","rect","boundingRect","value","top","bottom","height","left","right","width","restrictToParentElement","activeNodeRect","containerNodeRect","restrictToFirstScrollableAncestor","scrollableAncestorRects","firstScrollableAncestorRect","restrictToVerticalAxis","restrictToWindowEdges","windowRect","snapCenterToCursor","activatorEvent","activatorCoordinates","getEventCoordinates","offsetX","offsetY"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ClientRect } from '@dnd-kit/core';
|
|
2
2
|
import type { Transform } from '@dnd-kit/utilities';
|
|
3
|
-
export declare function restrictToBoundingRect(transform: Transform, rect:
|
|
3
|
+
export declare function restrictToBoundingRect(transform: Transform, rect: ClientRect, boundingRect: ClientRect): Transform;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnd-kit/modifiers",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0-next-20220714748",
|
|
4
4
|
"description": "Translate modifier presets for use with `@dnd-kit` packages.",
|
|
5
5
|
"author": "Claudéric Demers",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
"dist"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@dnd-kit/utilities": "^3.
|
|
29
|
+
"@dnd-kit/utilities": "^3.1.0-next-20220714748",
|
|
30
30
|
"tslib": "^2.0.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@dnd-kit/core": "^
|
|
33
|
+
"@dnd-kit/core": "^5.0.0-next-20220714748"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@dnd-kit/core": "^
|
|
36
|
+
"@dnd-kit/core": "^5.0.0-next-20220714748"
|
|
37
37
|
},
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|