feat: expose css transform on validate drag function

Author: mattlewis92

projects/angular-draggable-droppable/src/lib/draggable.directive.spec.ts

@@ -66,6 +66,7 @@ describe('draggable directive', () => {
           #draggableElement
           mwlDraggable
           [dragAxis]="{x: true, y: true}"
+          [validateDrag]="validateDrag"
           (dragPointerDown)="dragPointerDown($event)"
           (dragStart)="dragStart($event)"
           (ghostElementCreated)="ghostElementCreated($event)"
@@ -961,4 +962,30 @@ describe('draggable directive', () => {
       changedTouches: [{ clientX: 10, clientY: 18 }]
     });
   });
+
+  it('should expose the css transform on the validate drag function', () => {
+    const scrollFixture = TestBed.createComponent(ScrollTestComponent);
+    scrollFixture.componentInstance.validateDrag = sinon.stub().returns(true);
+    scrollFixture.detectChanges();
+    document.body.appendChild(scrollFixture.nativeElement);
+    const draggableElement =
+      scrollFixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    triggerDomEvent('mousemove', draggableElement, { clientX: 5, clientY: 12 });
+    scrollFixture.componentInstance.scrollContainer.elementRef.nativeElement.scrollTop = 5;
+    scrollFixture.debugElement
+      .query(By.directive(DraggableScrollContainerDirective))
+      .triggerEventHandler('scroll', {});
+    triggerDomEvent('mousemove', draggableElement, { clientX: 5, clientY: 14 });
+    expect(
+      scrollFixture.componentInstance.validateDrag
+    ).to.have.been.calledWith({
+      x: 0,
+      y: 9,
+      transform: {
+        x: 0,
+        y: 4
+      }
+    });
+  });
 });

projects/angular-draggable-droppable/src/lib/draggable.directive.ts

@@ -60,7 +60,14 @@ export interface DragEndEvent extends Coordinates {
   dragCancelled: boolean;
 }
 
-export type ValidateDrag = (coordinates: Coordinates) => boolean;
+export interface ValidateDragParams extends Coordinates {
+  transform: {
+    x: number;
+    y: number;
+  };
+}
+
+export type ValidateDrag = (params: ValidateDragParams) => boolean;
 
 export interface PointerEvent {
   clientX: number;
@@ -332,7 +339,13 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             };
           }),
           filter(
-            ({ x, y }) => !this.validateDrag || this.validateDrag({ x, y })
+            ({ x, y, transformX, transformY }) =>
+              !this.validateDrag ||
+              this.validateDrag({
+                x,
+                y,
+                transform: { x: transformX, y: transformY }
+              })
           ),
           takeUntil(dragComplete$),
           share()

projects/angular-draggable-droppable/src/public_api.ts

@@ -9,5 +9,6 @@ export {
   DragStartEvent,
   DragMoveEvent,
   DragEndEvent,
-  GhostElementCreatedEvent
+  GhostElementCreatedEvent,
+  ValidateDragParams
 } from './lib/draggable.directive';