feat: add validateDrop to mwlDroppable directive

[candersony]

Add a new input to DroppableDirective that allows you to restrict the drop with a new validateDrop function input. When validateDrop is defined it will allow/disallow the drop event being fired. The event target fromthe mouse move event has also been piped through from DraggableDirective to be included in ValidateDropParams

[mattlewis92]

Hey thanks for this, it's really solid work. My only remark would be to make the api a bit more flexible, other than that LGTM! Thank you! 🙌

[mattlewis92]

Can we rework the api a little bit to make it a bit more flexible. I'm thinking something like we do on the draggable directive where we let the user pass in a validateDrag function that lets them control the behavior.

So the API would be something like:

export interface ValidateDropParams {
  target: HtmlElement;
}

export type ValidateDrop = (params: ValidateDropParams) => boolean;

@Input() validateDrop: ValidateDrop;

and then this function can move into user land and you can have complete control over the behaviour in your own app:

private isTargetAllowed(target: EventTarget): boolean {
    if (!this.restrictByEventTarget) {
      return true;
    }

    const closestDroppableElement = (target as Element).closest(
      '[mwlDroppable]'
    );

    return closestDroppableElement === this.element.nativeElement;
  }

[candersony]

Great idea! I'm happy to update it.

Do you think it's worth including a generic version of isTargetAllowed as an out-the-box drop validator?

e.g.

type DropValidator = (params: ValidateDropParams) => boolean;
interface DropValidators {
  restrictByEventTarget(selector: string) => DropValidator
}

import { DropValidators } from 'angular-draggable-droppable';

<div [mwlDroppable] [validateDrop]="DropValidators.restrictByEventTarget('[mwlDroppable]')">

[mattlewis92]

Hey sorry about the late reply, I've been out on vacation. I think as the logic is pretty simple it's better to keep it in userland for now, it could always be added as a feature to the library in the future if there was a big demand for it

[candersony]

Thanks @mattlewis92, that makes sense. I actaully started making the change the other day and almost immediately thought the same thing, not worth adding it here atm.

I have updated the change to expose the suggested validateDrop input. Please review when you have some time 😄

[mattlewis92]

Awesome, thank you! One last thing, could you add the 2 new interfaces here: https://github.com/mattlewis92/angular-draggable-droppable/blob/master/projects/angular-draggable-droppable/src/public_api.ts so that they can be used from the exported package as well

[candersony]

done

[mattlewis92]

Minor nit, but there is a typo here

[candersony]

🤦

[candersony]

fixed

[mattlewis92]

and here as well

[candersony]

fixed

[mattlewis92]

Perfect, thank you!!