fix: clientOffset and initialClientOffset are null in canDrag #1175 (#…

…1176)
react-dnd · Nov 27, 2018 · 8718ae5 · 8718ae5
1 parent 3a5e0d4
commit 8718ae5
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 4 deletions.
diff --git a/packages/dnd-core/src/actions/dragDrop/index.ts b/packages/dnd-core/src/actions/dragDrop/index.ts
@@ -1,4 +1,5 @@
 import { DragDropManager } from '../../interfaces'
+import createInitClientOffset from './initClientOffset'
 import createInitCoords from './initCoords'
 import createBeginDrag from './beginDrag'
 import createPublishDragSource from './publishDragSource'
@@ -12,6 +13,7 @@ export default function createDragDropActions<Context>(
 	manager: DragDropManager<Context>,
 ) {
 	return {
+		initClientOffset: createInitClientOffset(),
 		initCoords: createInitCoords(manager),
 		beginDrag: createBeginDrag(manager),
 		publishDragSource: createPublishDragSource(manager),

diff --git a/packages/dnd-core/src/actions/dragDrop/initClientOffset.ts b/packages/dnd-core/src/actions/dragDrop/initClientOffset.ts
@@ -0,0 +1,19 @@
+import {
+	Action,
+	InitClientOffsetOptions,
+	InitClientOffsetPayload,
+} from '../../interfaces'
+import { INIT_CLIENT_OFFSET } from './types'
+
+export default function createInitClientOffset() {
+	return function initClientOffset({
+		clientOffset,
+	}: InitClientOffsetOptions): Action<InitClientOffsetPayload> | undefined {
+		return {
+			type: INIT_CLIENT_OFFSET,
+			payload: {
+				clientOffset: clientOffset || null,
+			},
+		}
+	}
+}
diff --git a/packages/dnd-core/src/actions/dragDrop/initCoords.ts b/packages/dnd-core/src/actions/dragDrop/initCoords.ts
@@ -24,7 +24,14 @@ export default function createInitCoords<Context>(
 		verifyInvariants(sourceIds, monitor, registry)
 		const sourceId = getDragSourceId(sourceIds, monitor)
 		if (sourceId === null) {
-			return
+			// reset coordinates that might have been set in an "INIT_CLIENT_OFFSET" as no drag is happening
+			return {
+				type: INIT_COORDS,
+				payload: {
+					clientOffset: null,
+					sourceClientOffset: null,
+				},
+			}
 		}
 		const sourceClientOffset: XYCoord | null = determineSourceClientOffset(
 			sourceId,
@@ -46,7 +53,7 @@ function verifyInvariants(
 	monitor: DragDropMonitor,
 	registry: HandlerRegistry,
 ) {
-	invariant(!monitor.isDragging(), 'Cannot call beginDrag while dragging.')
+	invariant(!monitor.isDragging(), 'Cannot call initCoords while dragging.')
 	for (const s of sourceIds) {
 		invariant(registry.getSource(s), 'Expected sourceIds to be registered.')
 	}

diff --git a/packages/dnd-core/src/actions/dragDrop/types.ts b/packages/dnd-core/src/actions/dragDrop/types.ts
@@ -1,3 +1,4 @@
+export const INIT_CLIENT_OFFSET = 'dnd-core/INIT_CLIENT_OFFSET'
 export const INIT_COORDS = 'dnd-core/INIT_COORDS'
 export const BEGIN_DRAG = 'dnd-core/BEGIN_DRAG'
 export const PUBLISH_DRAG_SOURCE = 'dnd-core/PUBLISH_DRAG_SOURCE'

diff --git a/packages/dnd-core/src/interfaces.ts b/packages/dnd-core/src/interfaces.ts
@@ -130,8 +130,11 @@ export interface SentinelAction {
 
 export type ActionCreator<Payload> = (args: any[]) => Action<Payload>
 
-export interface InitCoordsOptions {
+export interface InitClientOffsetOptions {
 	clientOffset?: XYCoord
+}
+
+export interface InitCoordsOptions extends InitClientOffsetOptions {
 	getSourceClientOffset?: (sourceId: Identifier) => XYCoord
 }
 
@@ -141,10 +144,14 @@ export interface BeginDragOptions {
 	getSourceClientOffset?: (sourceId: Identifier) => XYCoord
 }
 
-export interface InitCoordsPayload {
+export interface InitClientOffsetPayload {
 	clientOffset: XYCoord | null
+}
+
+export interface InitCoordsPayload extends InitClientOffsetPayload {
 	sourceClientOffset: XYCoord | null
 }
+
 export interface BeginDragPayload {
 	itemType: Identifier
 	item: any
@@ -176,6 +183,7 @@ export interface SourceIdPayload {
 }
 
 export interface DragDropActions {
+	initClientOffset(options?: any): Action<InitClientOffsetPayload>
 	initCoords(sourceIds: string[], options?: any): Action<InitCoordsPayload>
 	beginDrag(sourceIds: string[], options?: any): Action<BeginDragPayload>
 	publishDragSource(): SentinelAction

diff --git a/packages/dnd-core/src/reducers/dragOffset.ts b/packages/dnd-core/src/reducers/dragOffset.ts
@@ -4,6 +4,7 @@ import {
 	HOVER,
 	END_DRAG,
 	DROP,
+	INIT_CLIENT_OFFSET,
 } from '../actions/dragDrop'
 import { XYCoord, Action } from '../interfaces'
 import { areCoordsEqual } from '../utils/equality'
@@ -29,6 +30,12 @@ export default function dragOffset(
 ) {
 	const { payload } = action
 	switch (action.type) {
+		case INIT_CLIENT_OFFSET:
+			return {
+				...state,
+				clientOffset: payload.clientOffset,
+				initialClientOffset: payload.clientOffset,
+			}
 		case INIT_COORDS:
 		case BEGIN_DRAG:
 			return {

diff --git a/packages/react-dnd-html5-backend/src/HTML5Backend.ts b/packages/react-dnd-html5-backend/src/HTML5Backend.ts
@@ -349,6 +349,11 @@ export default class HTML5Backend implements Backend {
 			this.actions.endDrag()
 		}
 
+		// initialize the client offset before any "canDrag" is called
+		this.actions.initClientOffset({
+			clientOffset,
+		})
+
 		// Fire off the initial coordinates
 		this.actions.initCoords(dragStartSourceIds || [], {
 			getSourceClientOffset: this.getSourceClientOffset,