Vfrdtyky

I've got a nested tree (Not the tree component) of drag and drop lists.

When dragging items around in drop lists that are contained inside of another drop list - Enter / Exit events are firing for both drop lists, meaning that when an item is dropped it could either be dropped into the inner drop list or the container drop list depending where it was dropped (Note: These lists are all linked to each other)

I'm thinking at the moment that the best solution will to be suppress events firing for the container list if the drag is currently over an inner list but I'm not sure if this is the best solution or exactly how to do it at the moment.

I did manage to find a solution to this, although it's definitely hacky and involves accessing a private value with the Angular drag and drop CDK.

I use the cdkDropListEnterPredicate function to check which list it should be trying to drop into, which i assign the canDropPredicate function.

I'm also forced to get access to the pointer position via: _pointerPositionAtLastDirectionChange which isn't great as not all the values I'd like to see passed into the cdkDropListEnterPredicate get passed.

canDropPredicate(): Function {

    const me = this;

    return (drag: CdkDrag<ResourceNode>, drop: CdkDropList<ResourceNode>): boolean => {

        const fromBounds = drag.dropContainer.element.nativeElement.getBoundingClientRect();

        const toBounds = drop.element.nativeElement.getBoundingClientRect();



        if (!me.intersect(fromBounds, toBounds)) {

            return true;

        }



        // This gross but allows us to access a private field for now.

        const pointerPosition: Point = drag['_pointerPositionAtLastDirectionChange'];

        // They Intersect with each other so we need to do some calculations here.

        if (me.insideOf(fromBounds, toBounds)) {

          return !me.pointInsideOf(pointerPosition, fromBounds);

        }



        if (me.insideOf(toBounds, fromBounds) && me.pointInsideOf(pointerPosition, toBounds)) {

          return true;

        }

         return false;

    };

}



intersect(r1: DOMRect | ClientRect, r2: DOMRect | ClientRect): boolean {

    return !(r2.left > r1.right ||

        r2.right < r1.left ||

        r2.top > r1.bottom ||

        r2.bottom < r1.top);

}



insideOf(innerRect: DOMRect | ClientRect, outerRect: DOMRect | ClientRect): boolean {

    return innerRect.left >= outerRect.left &&

        innerRect.right <= outerRect.right &&

        innerRect.top >= outerRect.top &&

        innerRect.bottom <= outerRect.bottom &&

        !(

            innerRect.left === outerRect.left &&

            innerRect.right === outerRect.right &&

            innerRect.top === outerRect.top &&

            innerRect.bottom === outerRect.bottom

        );

}



pointInsideOf(position: Point, rect: DOMRect | ClientRect) {

  return position.x >= rect.left &&

        position.x <= rect.right &&

        position.y >= rect.top &&

        position.y <= rect.bottom;

}