@measured/dnd
Advanced tools
Comparing version 16.6.0-canary.ebfeb3d to 16.6.0-canary.eda7e8b
@@ -224,2 +224,3 @@ import { Position } from 'css-box-model'; | ||
shouldRespectForcePress?: boolean; | ||
disableSecondaryAnimation?: boolean; | ||
} | ||
@@ -226,0 +227,0 @@ |
{ | ||
"name": "@measured/dnd", | ||
"version": "16.6.0-canary.ebfeb3d", | ||
"version": "16.6.0-canary.eda7e8b", | ||
"private": false, | ||
@@ -78,2 +78,3 @@ "description": "Beautiful and accessible drag and drop for lists with React, with iframe and CSS transform support", | ||
"css-box-model": "^1.2.1", | ||
"lru-cache": "^10.2.0", | ||
"memoize-one": "^6.0.0", | ||
@@ -106,4 +107,4 @@ "raf-schd": "^4.0.3", | ||
"@emotion/styled": "11.11.0", | ||
"@jest/environment": "29.7.0", | ||
"@measured/auto-frame-component": "0.1.0-canary.4686711", | ||
"@jest/environment": "29.7.0", | ||
"@release-it/conventional-changelog": "8.0.1", | ||
@@ -110,0 +111,0 @@ "@rollup/plugin-babel": "6.0.4", |
@@ -6,18 +6,26 @@ import { BoxModel, getBox } from 'css-box-model'; | ||
import { AutoScrollerOptions } from './auto-scroller-options-types'; | ||
import { Transform, getTransform } from '../../../view/transform'; | ||
const resetToOrigin = (box: BoxModel) => ({ | ||
width: box.marginBox.width, | ||
height: box.marginBox.height, | ||
top: 0, | ||
left: 0, | ||
right: box.marginBox.width, | ||
bottom: box.marginBox.height, | ||
center: { | ||
x: box.marginBox.width / 2, | ||
y: box.marginBox.height / 2, | ||
}, | ||
x: 0, | ||
y: 0, | ||
}); | ||
const resetToOrigin = (box: BoxModel, transform: Transform | null) => { | ||
const { scaleX = 1, scaleY = 1 } = transform?.matrix || {}; | ||
const width = box.marginBox.width / scaleX; | ||
const height = box.marginBox.height / scaleY; | ||
return { | ||
width, | ||
height, | ||
top: 0, | ||
left: 0, | ||
right: width, | ||
bottom: height, | ||
center: { | ||
x: width / 2, | ||
y: height / 2, | ||
}, | ||
x: 0, | ||
y: 0, | ||
}; | ||
}; | ||
/** | ||
@@ -54,6 +62,7 @@ * Get the scroll for a draggable inside an iframe | ||
const box = getBox(el); | ||
const transform = getTransform(iframe); | ||
const change = getScroll({ | ||
dragStartTime, | ||
container: resetToOrigin(viewportBox), // Reset to origin because we don't care about position of the iframe | ||
container: resetToOrigin(viewportBox, transform), // Reset to origin because we don't care about position of the iframe | ||
subject: draggable.client.marginBox, | ||
@@ -60,0 +69,0 @@ center: box.borderBox.center, |
@@ -35,2 +35,3 @@ import type { BoxModel, Position } from 'css-box-model'; | ||
transform: Transform | null; | ||
parents: DroppableDescriptor[]; | ||
} | ||
@@ -48,2 +49,3 @@ | ||
transform, | ||
parents, | ||
}: Args): DroppableDimension => { | ||
@@ -103,2 +105,3 @@ const frame: Scrollable | null = (() => { | ||
transform, | ||
parents, | ||
}; | ||
@@ -105,0 +108,0 @@ |
@@ -78,2 +78,49 @@ import type { Position, Rect } from 'css-box-model'; | ||
/** | ||
* normalizeFamilies | ||
* | ||
* Groups all items that share a common root `parent`, and selects the deepest item | ||
* in that group that contains the center point of the dragged item to represent | ||
* the "family". | ||
*/ | ||
function normalizeFamilies( | ||
pageBorderBox: Rect, | ||
candidates: DroppableDimension[], | ||
) { | ||
const families = candidates.reduce<Record<string, DroppableDimension[][]>>( | ||
(acc, candidate) => { | ||
const familyName = candidate.parents[0]?.id || candidate.descriptor.id; | ||
const family = acc[familyName] || []; | ||
const generation = candidate.parents.length; | ||
family[generation] = [...(family[generation] || []), candidate]; | ||
return { | ||
...acc, | ||
[familyName]: family, | ||
}; | ||
}, | ||
{}, | ||
); | ||
return Object.keys(families).map((familyName) => { | ||
const family = families[familyName].flat(); | ||
const reversedFamily = [...family].reverse(); | ||
// Get first member of family that contains the draggable | ||
const chosenMember = reversedFamily.find((member) => { | ||
return ( | ||
pageBorderBox.center.x < member.page.borderBox.right && | ||
pageBorderBox.center.x > member.page.borderBox.left && | ||
pageBorderBox.center.y > member.page.borderBox.top && | ||
pageBorderBox.center.y < member.page.borderBox.bottom | ||
); | ||
}); | ||
return chosenMember || family[0]; | ||
}); | ||
} | ||
export default function getDroppableOver({ | ||
@@ -150,3 +197,10 @@ pageBorderBox, | ||
// Multiple options returned | ||
// Select the best candidate from each group that share a common root ancestor | ||
const normalizedCandidates = normalizeFamilies(pageBorderBox, candidates); | ||
// All candidates were in the same family | ||
if (normalizedCandidates.length === 1) { | ||
return normalizedCandidates[0].descriptor.id; | ||
} | ||
// Should only occur with really large items | ||
@@ -157,4 +211,4 @@ // Going to use fallback: distance from home | ||
draggable, | ||
candidates, | ||
candidates: normalizedCandidates, | ||
}); | ||
} |
@@ -157,2 +157,3 @@ import type { BoxModel, Rect, Position } from 'css-box-model'; | ||
transform: Transform | null; | ||
parents: DroppableDescriptor[]; | ||
} | ||
@@ -159,0 +160,0 @@ export interface DraggableLocation { |
@@ -257,5 +257,6 @@ import type { Position } from 'css-box-model'; | ||
combineTargetFor?: DraggableId | null, | ||
disableSecondaryAnimation?: boolean, | ||
): MapProps | null => { | ||
return combineTargetFor | ||
? getMemoizedProps(origin, combineTargetFor, true) | ||
? getMemoizedProps(origin, combineTargetFor, !disableSecondaryAnimation) | ||
: null; | ||
@@ -271,2 +272,3 @@ }; | ||
sourceDroppable?: DroppableDimension | null, | ||
disableSecondaryAnimation?: boolean, | ||
): MapProps | null => { | ||
@@ -285,3 +287,3 @@ const visualDisplacement: Displacement | null = | ||
if (!isAfterCriticalInVirtualList) { | ||
return getFallback(combineTargetFor); | ||
return getFallback(combineTargetFor, disableSecondaryAnimation); | ||
} | ||
@@ -306,3 +308,3 @@ | ||
combineTargetFor, | ||
true, | ||
!disableSecondaryAnimation, | ||
dimension, | ||
@@ -325,3 +327,3 @@ sourceDroppable, | ||
combineTargetFor, | ||
visualDisplacement.shouldAnimate, | ||
disableSecondaryAnimation ? false : visualDisplacement.shouldAnimate, | ||
dimension, | ||
@@ -356,2 +358,3 @@ sourceDroppable, | ||
sourceDroppable, | ||
ownProps.disableSecondaryAnimation, | ||
); | ||
@@ -380,2 +383,3 @@ } | ||
sourceDroppable, | ||
ownProps.disableSecondaryAnimation, | ||
); | ||
@@ -397,7 +401,24 @@ } | ||
const selector = (state: State, ownProps: OwnProps): MapProps => | ||
draggingSelector(state, ownProps) || | ||
secondarySelector(state, ownProps) || | ||
atRest; | ||
const selector = (state: State, ownProps: OwnProps): MapProps => { | ||
// Modify atRest based on props | ||
const atRestLocal = | ||
atRest.mapped.type === 'DRAGGING' | ||
? atRest | ||
: { | ||
...atRest, | ||
mapped: { | ||
...atRest.mapped, | ||
shouldAnimateDisplacement: ownProps.disableSecondaryAnimation | ||
? false | ||
: atRest.mapped.shouldAnimateDisplacement, | ||
}, | ||
}; | ||
return ( | ||
draggingSelector(state, ownProps) || | ||
secondarySelector(state, ownProps) || | ||
atRestLocal | ||
); | ||
}; | ||
return selector; | ||
@@ -404,0 +425,0 @@ }; |
@@ -171,2 +171,3 @@ import type { Position } from 'css-box-model'; | ||
shouldRespectForcePress?: boolean; | ||
disableSecondaryAnimation?: boolean; | ||
} | ||
@@ -173,0 +174,0 @@ |
@@ -49,3 +49,3 @@ import { querySelectorAll } from '../../query-selector-all'; | ||
window.document, | ||
'iframe', | ||
'[data-rfd-iframe]', | ||
) as HTMLIFrameElement[]; | ||
@@ -52,0 +52,0 @@ |
@@ -0,1 +1,2 @@ | ||
import { LRUCache } from 'lru-cache'; | ||
import type { DraggableId, ContextId } from '../../types'; | ||
@@ -7,2 +8,7 @@ import { dragHandle as dragHandleAttr } from '../data-attributes'; | ||
const dragHandleCache = new LRUCache<string, HTMLElement>({ | ||
max: 5000, | ||
ttl: 1000, | ||
}); | ||
export default function findDragHandle( | ||
@@ -15,2 +21,8 @@ contextId: ContextId, | ||
const cachedHandle = dragHandleCache.get(selector); | ||
if (cachedHandle) { | ||
return cachedHandle; | ||
} | ||
const possible = querySelectorAllIframe(selector); | ||
@@ -41,3 +53,5 @@ | ||
dragHandleCache.set(selector, handle); | ||
return handle; | ||
} |
@@ -0,1 +1,9 @@ | ||
import { LRUCache } from 'lru-cache'; | ||
import { querySelectorAll } from '../../query-selector-all'; | ||
const iframeCache = new LRUCache<string, HTMLIFrameElement[]>({ | ||
max: 1, | ||
ttl: 1000, | ||
}); | ||
/** | ||
@@ -6,12 +14,22 @@ * querySelectorAllIframe | ||
*/ | ||
export default function querySelectorAllIframe(selector: string) { | ||
let iframes = iframeCache.get('iframes'); | ||
import { querySelectorAll } from '../../query-selector-all'; | ||
if (!iframes) { | ||
iframes = querySelectorAll(document, 'iframe') as HTMLIFrameElement[]; | ||
export default function querySelectorAllIframe(selector: string) { | ||
const iframes = querySelectorAll(document, 'iframe') as HTMLIFrameElement[]; | ||
// Quicker than running the [data-rbd-frame] query | ||
iframes = iframes.filter((iframe) => | ||
iframe.hasAttribute('data-rfd-iframe'), | ||
); | ||
iframeCache.set('iframes', iframes); | ||
} | ||
const iframePossible = iframes.reduce<HTMLElement[]>( | ||
(acc, iframe) => [ | ||
...acc, | ||
...querySelectorAll(iframe.contentWindow!.document, selector), | ||
...(iframe.contentWindow?.document | ||
? querySelectorAll(iframe.contentWindow.document, selector) | ||
: []), | ||
], | ||
@@ -18,0 +36,0 @@ [], |
@@ -17,2 +17,3 @@ import { getBox, withScroll, createBox, expand } from 'css-box-model'; | ||
import { Offset } from '../iframe/offset-types'; | ||
import { prefix } from '../data-attributes'; | ||
@@ -100,2 +101,33 @@ const getClient = ( | ||
const getParents = (ref: HTMLElement) => { | ||
const contextId = ref.getAttribute(`${prefix}-droppable-context-id`); | ||
const parentDescriptors: DroppableDescriptor[] = []; | ||
if (!contextId) return []; | ||
let currentEl: HTMLElement | null | undefined = ref; | ||
while (currentEl) { | ||
currentEl = currentEl.parentElement?.closest( | ||
`[${prefix}-droppable-context-id="${contextId}"]`, | ||
); | ||
const id = currentEl?.getAttribute(`${prefix}-droppable-id`); | ||
if (id) { | ||
parentDescriptors.push({ | ||
id, | ||
mode: 'standard', | ||
type: 'DEFAULT', | ||
}); | ||
} | ||
} | ||
// Parents need reversing | ||
parentDescriptors.reverse(); | ||
return parentDescriptors; | ||
}; | ||
export default ({ | ||
@@ -137,2 +169,4 @@ ref, | ||
const parents = getParents(ref); | ||
const dimension: DroppableDimension = getDroppableDimension({ | ||
@@ -148,2 +182,3 @@ descriptor, | ||
transform, | ||
parents, | ||
}); | ||
@@ -150,0 +185,0 @@ |
@@ -68,3 +68,5 @@ import memoizeOne from 'memoize-one'; | ||
querySelectorAll(document, `[${prefix}-iframe]`) as HTMLIFrameElement[] | ||
).map((iframe) => getHead(iframe.contentWindow!.document)), | ||
) | ||
.filter((iframe) => iframe.contentWindow?.document) | ||
.map((iframe) => getHead(iframe.contentWindow!.document)), | ||
]; | ||
@@ -71,0 +73,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1433134
41737
10
252
+ Addedlru-cache@^10.2.0
+ Addedlru-cache@10.4.3(transitive)