feat(drag-n-drop): snap bug fixed

Author: skutam

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -96,6 +96,7 @@ export interface KtdGridEnterLeaveEvent {
     grid: KtdGridComponent;
     event: PointingDeviceEvent;
     source: DragRef;
+    dragInfo: PointerEventInfo;
 }
 
 export function getDragResizeEventData(dragRef: DragRef, layout: KtdGridLayout): KtdDragResizeEvent {
@@ -551,19 +552,17 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             ).subscribe(({event, draggableItem}) => {
                 this.gridService.startDrag(event, draggableItem._dragRef, 'drag');
             }),
-
-            this.dragEntered.subscribe(({event, }) => {
-                this.startRestoreDragSequence(event);
+            this.dragEntered.subscribe(({event, dragInfo }) => {
+                this.startRestoreDragSequence(event, dragInfo);
             }),
-            this.dragExited.subscribe(() => {
-                this.pauseDragSequence();
+            this.dragExited.subscribe(({dragInfo}) => {
+                this.pauseDragSequence(dragInfo);
             }),
             this.gridService.pointerBeforeEnd$.subscribe(({dragInfo}) => {
                 if (this.drag !== null && dragInfo !== null) {
                     this.updateLayout(dragInfo);
                     this.stopDragSequence(dragInfo);
                 }
-                console.log(this.drag, dragInfo);
             }),
             this.gridService.pointerEnd$.subscribe(() => {
                 this.drag = null;
@@ -574,9 +573,13 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     /**
      * Starts the drag sequence when a drag event is triggered. It will restore paused drag sequence if it's already started.
      * @param event The event that triggered the drag sequence.
+     * @param dragInfo The drag info.
      */
-    private startRestoreDragSequence(event: PointingDeviceEvent): void {
-        const dragInfo = this.gridService.drag!;
+    private startRestoreDragSequence(event: PointingDeviceEvent, dragInfo: PointerEventInfo): void {
+        if (this.drag !== null && dragInfo.type === 'resize') {
+            return;
+        }
+
         const scrollableParent = typeof this.scrollableParent === 'string' ? document.getElementById(this.scrollableParent) : this.scrollableParent;
 
         // TODO (enhancement): consider move this 'side effect' observable inside the main drag loop.
@@ -593,12 +596,6 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 takeUntil(this.gridService.pointerEnd$),
             ).subscribe());
 
-        if (this.drag != null) {
-            this.drag.dragSubscription = this.createDragResizeLoop(scrollableParent, dragInfo);
-            this.drag.scrollSubscription = scrollSubscription;
-            return;
-        }
-
         this.drag = {
             dragSubscription: this.createDragResizeLoop(scrollableParent, dragInfo),
             scrollSubscription,
@@ -614,18 +611,17 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         };
     }
 
-    private pauseDragSequence(): void {
-        const dragInfo = this.gridService.drag!;
+    private pauseDragSequence(dragInfo: PointerEventInfo): void {
 
         // If the drag is a resize, we don't need to pause the drag sequence.
         if (dragInfo.type === 'resize') {
             return;
         }
 
         if (this.drag != null) {
+            this.destroyPlaceholder();
             this.drag.dragSubscription.unsubscribe();
             this.drag.scrollSubscription.unsubscribe();
-            this.destroyPlaceholder();
         }
     }
 
@@ -754,14 +750,11 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         );
     }
 
-    // TODO: Call this only when the drag ended, when the drag is paused do nothing.
     private stopDragSequence(dragInfo: PointerEventInfo): void {
         if (this.drag === null) {
             return;
         }
 
-        console.log('stopDragSequence');
-
         // Remove drag classes
         this.renderer.removeClass(dragInfo.dragRef.elementRef.nativeElement, 'no-transitions');
         this.renderer.removeClass(dragInfo.dragRef.elementRef.nativeElement, 'ktd-grid-item-dragging');

projects/angular-grid-layout/src/lib/grid.service.ts

@@ -32,7 +32,7 @@ export class KtdGridService {
     pointerBeforeEnd$: Observable<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}>;
     private pointerBeforeEndSubject: Subject<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}> = new Subject<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}>();
 
-    drag: PointerEventInfo | null = null;
+    private drag: PointerEventInfo | null = null;
 
     constructor(
         private ngZone: NgZone,
@@ -130,6 +130,7 @@ export class KtdGridService {
                 source: this.drag!.dragRef,
                 event: moveEvent,
                 grid: this.drag!.currentGrid,
+                dragInfo: this.drag!,
             });
         }
 
@@ -138,6 +139,7 @@ export class KtdGridService {
                 source: this.drag!.dragRef,
                 event: moveEvent,
                 grid: grid,
+                dragInfo: this.drag!,
             });
         }
 

projects/angular-grid-layout/src/lib/ktd-registry.service.ts

@@ -1,4 +1,4 @@
-import {ElementRef, Injectable, NgZone, RendererFactory2} from '@angular/core';
+import {ElementRef, Injectable, NgZone} from '@angular/core';
 import {KtdDrag} from "./directives/ktd-drag";
 import {BehaviorSubject} from "rxjs";
 import {KtdGridService} from "./grid.service";
@@ -27,11 +27,10 @@ export class KtdRegistryService<T = any> {
 
     constructor(
         private _ngZone: NgZone,
-        private rendererFactory: RendererFactory2,
     ) { }
 
     public createKtgDrag(element: ElementRef<HTMLElement>, gridService: KtdGridService, itemRef: KtdGridItemComponent | KtdDrag<any>): DragRef<T> {
-        const dragRef = new DragRef<T>(element, gridService, this._ngZone, this.rendererFactory, itemRef);
+        const dragRef = new DragRef<T>(element, gridService, this._ngZone, itemRef);
         this._dragRefItems.push(dragRef);
         this.dragRefItems$.next(this._dragRefItems);
         return dragRef;

projects/angular-grid-layout/src/lib/utils/drag-ref.ts

@@ -1,4 +1,4 @@
-import {ElementRef, NgZone, Renderer2, RendererFactory2} from "@angular/core";
+import {ElementRef, NgZone} from "@angular/core";
 import {coerceBooleanProperty} from "../coercion/boolean-property";
 import {BehaviorSubject, combineLatest, iif, merge, NEVER, Observable, of, Subject, Subscription} from "rxjs";
 import {exhaustMap, filter, map, startWith, switchMap, take, takeUntil} from "rxjs/operators";
@@ -90,13 +90,11 @@ export class DragRef<T = any> {
     private dragStartSubscription: Subscription;
 
     private readonly element: HTMLElement;
-    private readonly renderer: Renderer2;
 
     constructor(
         public elementRef: ElementRef<HTMLElement>,
         private _gridService: KtdGridService,
         private _ngZone: NgZone,
-        rendererFactory: RendererFactory2,
         private _itemRef: KtdGridItemComponent | KtdDrag<any>,
     ) {
         this.dragStart$ = this.dragStartSubject.asObservable();
@@ -105,7 +103,6 @@ export class DragRef<T = any> {
 
         this.dragStartSubscription = this._dragStart$().subscribe(this.dragStartSubject);
 
-        this.renderer = rendererFactory.createRenderer(null, null);
         this.element = this.elementRef.nativeElement as HTMLElement;
         this.initDrag();
     }
@@ -140,9 +137,6 @@ export class DragRef<T = any> {
                 let dragSubscription: Subscription | null = null;
 
                 const dragStart$ = this.dragStart$.subscribe(({event}) => {
-                    this.renderer.addClass(this.element, 'no-transitions');
-                    this.renderer.addClass(this.element, 'ktd-grid-item-dragging');
-
                     const initialX = ktdPointerClientX(event) - this.transformX;
                     const initialY = ktdPointerClientY(event) - this.transformY;
 
@@ -182,8 +176,6 @@ export class DragRef<T = any> {
                     scrollSubscription?.unsubscribe();
                     dragSubscription?.unsubscribe();
                     this.element.style.transform = `translate3d(${this.transformX}px, ${this.transformY}px, 0)`;
-                    this.renderer.removeClass(this.element, 'no-transitions');
-                    this.renderer.removeClass(this.element, 'ktd-grid-item-dragging');
                 });
 
                 this.subscriptions = [dragStart$, dragEnd$];