fix: various errors when clicking fast on draggable elements (fixes k…

…utlugsahin#72)
ovos · Jun 29, 2021 · 5c21845 · 5c21845
1 parent a496ad7
commit 5c21845
Show file tree

Hide file tree

Showing 4 changed files with 1,115 additions and 12 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -6,6 +6,7 @@ export const defaultGrabHandleClass = 'smooth-dnd-default-grap-handle';
 export const animationClass = 'animated';
 export const translationValue = '__smooth_dnd_draggable_translation_value';
 export const visibilityValue = '__smooth_dnd_draggable_visibility_value';
+export const isDraggingValue = '__smooth_dnd_draggable_is_dragging';
 export const ghostClass = 'smooth-dnd-ghost';
 
 export const containerClass = 'smooth-dnd-container';

diff --git a/src/container.ts b/src/container.ts
@@ -1,4 +1,4 @@
-import { animationClass, containerClass, containerInstance, dropPlaceholderFlexContainerClass, dropPlaceholderInnerClass, dropPlaceholderWrapperClass, stretcherElementClass, stretcherElementInstance, translationValue, wrapperClass, dropPlaceholderDefaultClass } from './constants';
+import { animationClass, containerClass, containerInstance, dropPlaceholderFlexContainerClass, dropPlaceholderInnerClass, dropPlaceholderWrapperClass, stretcherElementClass, stretcherElementInstance, translationValue, wrapperClass, dropPlaceholderDefaultClass, isDraggingValue } from './constants';
 import { defaultOptions } from './defaults';
 import { domDropHandler } from './dropHandlers';
 import { ContainerOptions, SmoothDnD, SmoothDnDCreator, DropPlaceholderOptions } from './exportTypes';
@@ -740,8 +740,12 @@ function Container(element: HTMLElement): (options?: ContainerOptions) => IConta
         }
         lastDraggableInfo = null;       
         dragHandler = getDragHandler(props);
-        dropHandler(draggableInfo, dragResult!);
-        dragResult = null;
+        if (dragResult) {
+          dropHandler(draggableInfo, dragResult!);
+          dragResult = null;
+        }
+
+        (draggableInfo.element as ElementX)[isDraggingValue] = false;
       },
       fireRemoveElement() {
         // will be called when container is disposed while dragging so ignore addedIndex

diff --git a/src/mediator.ts b/src/mediator.ts
@@ -158,9 +158,11 @@ function getDraggableInfo(draggableElement: HTMLElement): DraggableInfo {
 
 function handleDropAnimation(callback: Function) {
   function endDrop() {
-    Utils.removeClass(ghostInfo.ghost, 'animated');
-    ghostInfo!.ghost.style.transitionDuration = null!;
-    getGhostParent().removeChild(ghostInfo.ghost);
+    if (ghostInfo) {
+      Utils.removeClass(ghostInfo.ghost, 'animated');
+      ghostInfo!.ghost.style.transitionDuration = null!;
+      getGhostParent().removeChild(ghostInfo.ghost);
+    }
     callback();
   }
 
@@ -504,11 +506,14 @@ function getPointerEvent(e: TouchEvent & MouseEvent): MouseEvent & TouchEvent {
 
 function handleDragImmediate(draggableInfo: DraggableInfo, dragListeningContainers: IContainer[]) {
   let containerBoxChanged = false;
-  dragListeningContainers.forEach((p: IContainer) => {
-    const dragResult = p.handleDrag(draggableInfo)!;
-    containerBoxChanged = !!dragResult.containerBoxChanged || false;
-    dragResult.containerBoxChanged = false;
-  });
+
+  if (dragListeningContainers) {
+    dragListeningContainers.forEach((p: IContainer) => {
+      const dragResult = p.handleDrag(draggableInfo)!;
+      containerBoxChanged = !!dragResult.containerBoxChanged || false;
+      dragResult.containerBoxChanged = false;
+    });
+  }
 
   if (containerBoxChanged) {
     containerBoxChanged = false;
@@ -566,12 +571,13 @@ function fireOnDragStartEnd(isStart: boolean) {
 }
 
 function initiateDrag(position: MousePosition, cursor: string) {
-  if (grabbedElement !== null) {
+  if (grabbedElement !== null && !grabbedElement[constants.isDraggingValue]) {
     isDragging = true;
     const container = (containers.filter(p => grabbedElement!.parentElement === p.element)[0]) as IContainer;
     container.setDraggables();
     sourceContainerLockAxis = container.getOptions().lockAxis ? container.getOptions().lockAxis!.toLowerCase() as Axis : null;
 
+    grabbedElement[constants.isDraggingValue] = true;
     draggableInfo = getDraggableInfo(grabbedElement);
     ghostInfo = getGhostElement(
       grabbedElement,