1 | import EnterLeaveCounter from './EnterLeaveCounter';
|
2 | import { isFirefox } from './BrowserDetector';
|
3 | import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset, } from './OffsetUtils';
|
4 | import { createNativeDragSource, matchNativeItemType, } from './NativeDragSources';
|
5 | import * as NativeTypes from './NativeTypes';
|
6 | import { OptionsReader } from './OptionsReader';
|
7 | export default class HTML5Backend {
|
8 | constructor(manager, globalContext) {
|
9 | this.sourcePreviewNodes = new Map();
|
10 | this.sourcePreviewNodeOptions = new Map();
|
11 | this.sourceNodes = new Map();
|
12 | this.sourceNodeOptions = new Map();
|
13 | this.dragStartSourceIds = null;
|
14 | this.dropTargetIds = [];
|
15 | this.dragEnterTargetIds = [];
|
16 | this.currentNativeSource = null;
|
17 | this.currentNativeHandle = null;
|
18 | this.currentDragSourceNode = null;
|
19 | this.altKeyPressed = false;
|
20 | this.mouseMoveTimeoutTimer = null;
|
21 | this.asyncEndDragFrameId = null;
|
22 | this.dragOverTargetIds = null;
|
23 | this.getSourceClientOffset = (sourceId) => {
|
24 | return getNodeClientOffset(this.sourceNodes.get(sourceId));
|
25 | };
|
26 | this.endDragNativeItem = () => {
|
27 | if (!this.isDraggingNativeItem()) {
|
28 | return;
|
29 | }
|
30 | this.actions.endDrag();
|
31 | this.registry.removeSource(this.currentNativeHandle);
|
32 | this.currentNativeHandle = null;
|
33 | this.currentNativeSource = null;
|
34 | };
|
35 | this.isNodeInDocument = (node) => {
|
36 |
|
37 | return this.document && this.document.body && document.body.contains(node);
|
38 | };
|
39 | this.endDragIfSourceWasRemovedFromDOM = () => {
|
40 | const node = this.currentDragSourceNode;
|
41 | if (this.isNodeInDocument(node)) {
|
42 | return;
|
43 | }
|
44 | if (this.clearCurrentDragSourceNode()) {
|
45 | this.actions.endDrag();
|
46 | }
|
47 | };
|
48 | this.handleTopDragStartCapture = () => {
|
49 | this.clearCurrentDragSourceNode();
|
50 | this.dragStartSourceIds = [];
|
51 | };
|
52 | this.handleTopDragStart = (e) => {
|
53 | if (e.defaultPrevented) {
|
54 | return;
|
55 | }
|
56 | const { dragStartSourceIds } = this;
|
57 | this.dragStartSourceIds = null;
|
58 | const clientOffset = getEventClientOffset(e);
|
59 |
|
60 | if (this.monitor.isDragging()) {
|
61 | this.actions.endDrag();
|
62 | }
|
63 |
|
64 | this.actions.beginDrag(dragStartSourceIds || [], {
|
65 | publishSource: false,
|
66 | getSourceClientOffset: this.getSourceClientOffset,
|
67 | clientOffset,
|
68 | });
|
69 | const { dataTransfer } = e;
|
70 | const nativeType = matchNativeItemType(dataTransfer);
|
71 | if (this.monitor.isDragging()) {
|
72 | if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
|
73 |
|
74 |
|
75 |
|
76 | const sourceId = this.monitor.getSourceId();
|
77 | const sourceNode = this.sourceNodes.get(sourceId);
|
78 | const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
|
79 | if (dragPreview) {
|
80 | const { anchorX, anchorY, offsetX, offsetY, } = this.getCurrentSourcePreviewNodeOptions();
|
81 | const anchorPoint = { anchorX, anchorY };
|
82 | const offsetPoint = { offsetX, offsetY };
|
83 | const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
|
84 | dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
|
85 | }
|
86 | }
|
87 | try {
|
88 |
|
89 | dataTransfer.setData('application/json', {});
|
90 | }
|
91 | catch (err) {
|
92 |
|
93 | }
|
94 |
|
95 |
|
96 | this.setCurrentDragSourceNode(e.target);
|
97 |
|
98 | const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions();
|
99 | if (!captureDraggingState) {
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | setTimeout(() => this.actions.publishDragSource(), 0);
|
106 | }
|
107 | else {
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 | this.actions.publishDragSource();
|
119 | }
|
120 | }
|
121 | else if (nativeType) {
|
122 |
|
123 | this.beginDragNativeItem(nativeType);
|
124 | }
|
125 | else if (dataTransfer &&
|
126 | !dataTransfer.types &&
|
127 | ((e.target && !e.target.hasAttribute) ||
|
128 | !e.target.hasAttribute('draggable'))) {
|
129 |
|
130 |
|
131 |
|
132 | return;
|
133 | }
|
134 | else {
|
135 |
|
136 | e.preventDefault();
|
137 | }
|
138 | };
|
139 | this.handleTopDragEndCapture = () => {
|
140 | if (this.clearCurrentDragSourceNode()) {
|
141 |
|
142 |
|
143 |
|
144 | this.actions.endDrag();
|
145 | }
|
146 | };
|
147 | this.handleTopDragEnterCapture = (e) => {
|
148 | this.dragEnterTargetIds = [];
|
149 | const isFirstEnter = this.enterLeaveCounter.enter(e.target);
|
150 | if (!isFirstEnter || this.monitor.isDragging()) {
|
151 | return;
|
152 | }
|
153 | const { dataTransfer } = e;
|
154 | const nativeType = matchNativeItemType(dataTransfer);
|
155 | if (nativeType) {
|
156 |
|
157 | this.beginDragNativeItem(nativeType, dataTransfer);
|
158 | }
|
159 | };
|
160 | this.handleTopDragEnter = (e) => {
|
161 | const { dragEnterTargetIds } = this;
|
162 | this.dragEnterTargetIds = [];
|
163 | if (!this.monitor.isDragging()) {
|
164 |
|
165 | return;
|
166 | }
|
167 | this.altKeyPressed = e.altKey;
|
168 | if (!isFirefox()) {
|
169 |
|
170 |
|
171 |
|
172 |
|
173 | this.actions.hover(dragEnterTargetIds, {
|
174 | clientOffset: getEventClientOffset(e),
|
175 | });
|
176 | }
|
177 | const canDrop = dragEnterTargetIds.some(targetId => this.monitor.canDropOnTarget(targetId));
|
178 | if (canDrop) {
|
179 |
|
180 | e.preventDefault();
|
181 | if (e.dataTransfer) {
|
182 | e.dataTransfer.dropEffect = this.getCurrentDropEffect();
|
183 | }
|
184 | }
|
185 | };
|
186 | this.handleTopDragOverCapture = () => {
|
187 | this.dragOverTargetIds = [];
|
188 | };
|
189 | this.handleTopDragOver = (e) => {
|
190 | const { dragOverTargetIds } = this;
|
191 | this.dragOverTargetIds = [];
|
192 | if (!this.monitor.isDragging()) {
|
193 |
|
194 |
|
195 | e.preventDefault();
|
196 | if (e.dataTransfer) {
|
197 | e.dataTransfer.dropEffect = 'none';
|
198 | }
|
199 | return;
|
200 | }
|
201 | this.altKeyPressed = e.altKey;
|
202 | this.actions.hover(dragOverTargetIds || [], {
|
203 | clientOffset: getEventClientOffset(e),
|
204 | });
|
205 | const canDrop = (dragOverTargetIds || []).some(targetId => this.monitor.canDropOnTarget(targetId));
|
206 | if (canDrop) {
|
207 |
|
208 | e.preventDefault();
|
209 | if (e.dataTransfer) {
|
210 | e.dataTransfer.dropEffect = this.getCurrentDropEffect();
|
211 | }
|
212 | }
|
213 | else if (this.isDraggingNativeItem()) {
|
214 |
|
215 |
|
216 | e.preventDefault();
|
217 | }
|
218 | else {
|
219 | e.preventDefault();
|
220 | if (e.dataTransfer) {
|
221 | e.dataTransfer.dropEffect = 'none';
|
222 | }
|
223 | }
|
224 | };
|
225 | this.handleTopDragLeaveCapture = (e) => {
|
226 | if (this.isDraggingNativeItem()) {
|
227 | e.preventDefault();
|
228 | }
|
229 | const isLastLeave = this.enterLeaveCounter.leave(e.target);
|
230 | if (!isLastLeave) {
|
231 | return;
|
232 | }
|
233 | if (this.isDraggingNativeItem()) {
|
234 | this.endDragNativeItem();
|
235 | }
|
236 | };
|
237 | this.handleTopDropCapture = (e) => {
|
238 | this.dropTargetIds = [];
|
239 | e.preventDefault();
|
240 | if (this.isDraggingNativeItem()) {
|
241 | this.currentNativeSource.loadDataTransfer(e.dataTransfer);
|
242 | }
|
243 | this.enterLeaveCounter.reset();
|
244 | };
|
245 | this.handleTopDrop = (e) => {
|
246 | const { dropTargetIds } = this;
|
247 | this.dropTargetIds = [];
|
248 | this.actions.hover(dropTargetIds, {
|
249 | clientOffset: getEventClientOffset(e),
|
250 | });
|
251 | this.actions.drop({ dropEffect: this.getCurrentDropEffect() });
|
252 | if (this.isDraggingNativeItem()) {
|
253 | this.endDragNativeItem();
|
254 | }
|
255 | else {
|
256 | this.endDragIfSourceWasRemovedFromDOM();
|
257 | }
|
258 | };
|
259 | this.handleSelectStart = (e) => {
|
260 | const target = e.target;
|
261 |
|
262 |
|
263 | if (typeof target.dragDrop !== 'function') {
|
264 | return;
|
265 | }
|
266 |
|
267 | if (target.tagName === 'INPUT' ||
|
268 | target.tagName === 'SELECT' ||
|
269 | target.tagName === 'TEXTAREA' ||
|
270 | target.isContentEditable) {
|
271 | return;
|
272 | }
|
273 |
|
274 |
|
275 | e.preventDefault();
|
276 | target.dragDrop();
|
277 | };
|
278 | this.options = new OptionsReader(globalContext);
|
279 | this.actions = manager.getActions();
|
280 | this.monitor = manager.getMonitor();
|
281 | this.registry = manager.getRegistry();
|
282 | this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
|
283 | }
|
284 |
|
285 | get window() {
|
286 | return this.options.window;
|
287 | }
|
288 | get document() {
|
289 | return this.options.document;
|
290 | }
|
291 | setup() {
|
292 | if (this.window === undefined) {
|
293 | return;
|
294 | }
|
295 | if (this.window.__isReactDndBackendSetUp) {
|
296 | throw new Error('Cannot have two HTML5 backends at the same time.');
|
297 | }
|
298 | this.window.__isReactDndBackendSetUp = true;
|
299 | this.addEventListeners(this.window);
|
300 | }
|
301 | teardown() {
|
302 | if (this.window === undefined) {
|
303 | return;
|
304 | }
|
305 | this.window.__isReactDndBackendSetUp = false;
|
306 | this.removeEventListeners(this.window);
|
307 | this.clearCurrentDragSourceNode();
|
308 | if (this.asyncEndDragFrameId) {
|
309 | this.window.cancelAnimationFrame(this.asyncEndDragFrameId);
|
310 | }
|
311 | }
|
312 | connectDragPreview(sourceId, node, options) {
|
313 | this.sourcePreviewNodeOptions.set(sourceId, options);
|
314 | this.sourcePreviewNodes.set(sourceId, node);
|
315 | return () => {
|
316 | this.sourcePreviewNodes.delete(sourceId);
|
317 | this.sourcePreviewNodeOptions.delete(sourceId);
|
318 | };
|
319 | }
|
320 | connectDragSource(sourceId, node, options) {
|
321 | this.sourceNodes.set(sourceId, node);
|
322 | this.sourceNodeOptions.set(sourceId, options);
|
323 | const handleDragStart = (e) => this.handleDragStart(e, sourceId);
|
324 | const handleSelectStart = (e) => this.handleSelectStart(e);
|
325 | node.setAttribute('draggable', 'true');
|
326 | node.addEventListener('dragstart', handleDragStart);
|
327 | node.addEventListener('selectstart', handleSelectStart);
|
328 | return () => {
|
329 | this.sourceNodes.delete(sourceId);
|
330 | this.sourceNodeOptions.delete(sourceId);
|
331 | node.removeEventListener('dragstart', handleDragStart);
|
332 | node.removeEventListener('selectstart', handleSelectStart);
|
333 | node.setAttribute('draggable', 'false');
|
334 | };
|
335 | }
|
336 | connectDropTarget(targetId, node) {
|
337 | const handleDragEnter = (e) => this.handleDragEnter(e, targetId);
|
338 | const handleDragOver = (e) => this.handleDragOver(e, targetId);
|
339 | const handleDrop = (e) => this.handleDrop(e, targetId);
|
340 | node.addEventListener('dragenter', handleDragEnter);
|
341 | node.addEventListener('dragover', handleDragOver);
|
342 | node.addEventListener('drop', handleDrop);
|
343 | return () => {
|
344 | node.removeEventListener('dragenter', handleDragEnter);
|
345 | node.removeEventListener('dragover', handleDragOver);
|
346 | node.removeEventListener('drop', handleDrop);
|
347 | };
|
348 | }
|
349 | addEventListeners(target) {
|
350 |
|
351 | if (!target.addEventListener) {
|
352 | return;
|
353 | }
|
354 | target.addEventListener('dragstart', this.handleTopDragStart);
|
355 | target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
|
356 | target.addEventListener('dragend', this.handleTopDragEndCapture, true);
|
357 | target.addEventListener('dragenter', this.handleTopDragEnter);
|
358 | target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
|
359 | target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
|
360 | target.addEventListener('dragover', this.handleTopDragOver);
|
361 | target.addEventListener('dragover', this.handleTopDragOverCapture, true);
|
362 | target.addEventListener('drop', this.handleTopDrop);
|
363 | target.addEventListener('drop', this.handleTopDropCapture, true);
|
364 | }
|
365 | removeEventListeners(target) {
|
366 |
|
367 | if (!target.removeEventListener) {
|
368 | return;
|
369 | }
|
370 | target.removeEventListener('dragstart', this.handleTopDragStart);
|
371 | target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
|
372 | target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
|
373 | target.removeEventListener('dragenter', this.handleTopDragEnter);
|
374 | target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
|
375 | target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
|
376 | target.removeEventListener('dragover', this.handleTopDragOver);
|
377 | target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
|
378 | target.removeEventListener('drop', this.handleTopDrop);
|
379 | target.removeEventListener('drop', this.handleTopDropCapture, true);
|
380 | }
|
381 | getCurrentSourceNodeOptions() {
|
382 | const sourceId = this.monitor.getSourceId();
|
383 | const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
|
384 | return {
|
385 | dropEffect: this.altKeyPressed ? 'copy' : 'move',
|
386 | ...(sourceNodeOptions || {}),
|
387 | };
|
388 | }
|
389 | getCurrentDropEffect() {
|
390 | if (this.isDraggingNativeItem()) {
|
391 |
|
392 | return 'copy';
|
393 | }
|
394 | return this.getCurrentSourceNodeOptions().dropEffect;
|
395 | }
|
396 | getCurrentSourcePreviewNodeOptions() {
|
397 | const sourceId = this.monitor.getSourceId();
|
398 | const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
|
399 | return {
|
400 | anchorX: 0.5,
|
401 | anchorY: 0.5,
|
402 | captureDraggingState: false,
|
403 | ...(sourcePreviewNodeOptions || {}),
|
404 | };
|
405 | }
|
406 | isDraggingNativeItem() {
|
407 | const itemType = this.monitor.getItemType();
|
408 | return Object.keys(NativeTypes).some((key) => NativeTypes[key] === itemType);
|
409 | }
|
410 | beginDragNativeItem(type, dataTransfer) {
|
411 | this.clearCurrentDragSourceNode();
|
412 | this.currentNativeSource = createNativeDragSource(type, dataTransfer);
|
413 | this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
|
414 | this.actions.beginDrag([this.currentNativeHandle]);
|
415 | }
|
416 | setCurrentDragSourceNode(node) {
|
417 | this.clearCurrentDragSourceNode();
|
418 | this.currentDragSourceNode = node;
|
419 |
|
420 |
|
421 |
|
422 |
|
423 | const MOUSE_MOVE_TIMEOUT = 1000;
|
424 |
|
425 |
|
426 |
|
427 |
|
428 |
|
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 |
|
435 |
|
436 | this.mouseMoveTimeoutTimer = setTimeout(() => {
|
437 | return (this.window &&
|
438 | this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true));
|
439 | }, MOUSE_MOVE_TIMEOUT);
|
440 | }
|
441 | clearCurrentDragSourceNode() {
|
442 | if (this.currentDragSourceNode) {
|
443 | this.currentDragSourceNode = null;
|
444 | if (this.window) {
|
445 | this.window.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
|
446 | this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
|
447 | }
|
448 | this.mouseMoveTimeoutTimer = null;
|
449 | return true;
|
450 | }
|
451 | return false;
|
452 | }
|
453 | handleDragStart(e, sourceId) {
|
454 | if (e.defaultPrevented) {
|
455 | return;
|
456 | }
|
457 | if (!this.dragStartSourceIds) {
|
458 | this.dragStartSourceIds = [];
|
459 | }
|
460 | this.dragStartSourceIds.unshift(sourceId);
|
461 | }
|
462 | handleDragEnter(e, targetId) {
|
463 | this.dragEnterTargetIds.unshift(targetId);
|
464 | }
|
465 | handleDragOver(e, targetId) {
|
466 | if (this.dragOverTargetIds === null) {
|
467 | this.dragOverTargetIds = [];
|
468 | }
|
469 | this.dragOverTargetIds.unshift(targetId);
|
470 | }
|
471 | handleDrop(e, targetId) {
|
472 | this.dropTargetIds.unshift(targetId);
|
473 | }
|
474 | }
|