From 39ed688e0afcfab58466b59a11b54a3d230e68af Mon Sep 17 00:00:00 2001 From: Paul Schupp Date: Mon, 12 Jun 2017 09:46:58 +0200 Subject: [PATCH] Forced offsets are computed in getDragPreviewOffset --- packages/react-dnd-html5-backend/src/HTML5Backend.js | 9 +++++---- packages/react-dnd-html5-backend/src/OffsetUtils.js | 11 +++++++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/react-dnd-html5-backend/src/HTML5Backend.js b/packages/react-dnd-html5-backend/src/HTML5Backend.js index e2ab6fb57a..4c4acbd0e5 100644 --- a/packages/react-dnd-html5-backend/src/HTML5Backend.js +++ b/packages/react-dnd-html5-backend/src/HTML5Backend.js @@ -316,18 +316,19 @@ export default class HTML5Backend { const dragPreview = this.sourcePreviewNodes[sourceId] || sourceNode; const { anchorX, anchorY, offsetX, offsetY } = this.getCurrentSourcePreviewNodeOptions(); const anchorPoint = { anchorX, anchorY }; + const offsetPoint = { offsetX, offsetY }; const dragPreviewOffset = getDragPreviewOffset( sourceNode, dragPreview, clientOffset, anchorPoint, + offsetPoint, ); - const forceOffsetX = offsetX === 0 || offsetX; - const forceOffsetY = offsetY === 0 || offsetY; + dataTransfer.setDragImage( dragPreview, - forceOffsetX ? offsetX : dragPreviewOffset.x, - forceOffsetY ? offsetY : dragPreviewOffset.y, + dragPreviewOffset.x, + dragPreviewOffset.y, ); } diff --git a/packages/react-dnd-html5-backend/src/OffsetUtils.js b/packages/react-dnd-html5-backend/src/OffsetUtils.js index a1e7cbdfe2..fa08ce9630 100644 --- a/packages/react-dnd-html5-backend/src/OffsetUtils.js +++ b/packages/react-dnd-html5-backend/src/OffsetUtils.js @@ -26,7 +26,7 @@ export function getEventClientOffset(e) { }; } -export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint) { +export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) { // The browsers will use the image intrinsic size under different conditions. // Firefox only cares if it's an image, but WebKit also wants it to be detached. const isImage = dragPreview.nodeName === 'IMG' && ( @@ -71,7 +71,7 @@ export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anch // Dock to the bottom offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, ]); - const x = interpolantX.interpolate(anchorX); + let x = interpolantX.interpolate(anchorX); let y = interpolantY.interpolate(anchorY); // Work around Safari 8 positioning bug @@ -80,5 +80,12 @@ export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anch y += (window.devicePixelRatio - 1) * dragPreviewHeight; } + // Force offsets if specified in the options. + const { offsetX, offsetY } = offsetPoint; + const forceOffsetX = offsetX === 0 || offsetX; + const forceOffsetY = offsetY === 0 || offsetY; + x = forceOffsetX ? offsetX : x; + y = forceOffsetY ? offsetY : y; + return { x, y }; }