refactor(query-builder): change how drag service is provided

Author: teodosiah

projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts

@@ -8,23 +8,15 @@ const Z_INDEX_TO_SET = 10010; //overlay z-index is 10005
 
 /** @hidden @internal */
 @Injectable()
-export class IgxQueryBuilderDragService {
-    constructor(
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent,
-        private _queryBuilderTreeComponentElRef: ElementRef,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderTreeComponentDeleteItem: (expressionItem: ExpressionItem) => void,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderFocusChipAfterDrag: (index: number) => void,
-    ) { }
-
+export class IgxQueryBuilderDragService {    
     public dropGhostChipNode: Node;
     private sourceExpressionItem: ExpressionItem;
     private sourceElement: HTMLElement;
     private targetExpressionItem: ExpressionItem;
     private targetElement: HTMLElement;
     private dropUnder: boolean;
+    private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent;
+    private _queryBuilderTreeComponentElRef: ElementRef;
     private _ghostChipMousemoveSubscription$: Subscription;
     private _keyboardSubscription$: Subscription;
     private _keyDragOffsetIndex: number = 0;
@@ -52,6 +44,12 @@ export class IgxQueryBuilderDragService {
         return this._queryBuilderTreeComponentElRef.nativeElement.querySelector(`.${QueryBuilderSelectors.FILTER_TREE}`);
     }
 
+       
+    public register(tree: IgxQueryBuilderTreeComponent, el: ElementRef) {
+        this._queryBuilderTreeComponent = tree;
+        this._queryBuilderTreeComponentElRef = el;
+    }
+
     /** When chip is picked up for dragging
      * 
      * @param sourceDragElement The HTML element of the chip that's been dragged
@@ -173,7 +171,7 @@ export class IgxQueryBuilderDragService {
 
         this.moveDraggedChipToNewLocation(this.sourceExpressionItem, this.targetExpressionItem, this.dropUnder);
 
-        this._queryBuilderFocusChipAfterDrag(dropLocationIndex);
+        this._queryBuilderTreeComponent.focusChipAfterDrag(dropLocationIndex);
 
         this.resetDragAndDrop(true);
 
@@ -354,7 +352,7 @@ export class IgxQueryBuilderDragService {
         appendToExpressionItem.parent.children.splice(index + (dropUnder ? 1 : 0), 0, dragCopy);
 
         //Delete from old place
-        this._queryBuilderTreeComponentDeleteItem(sourceExpressionItem);
+        this._queryBuilderTreeComponent.deleteItem(sourceExpressionItem);
     }
 
     /** Reset Drag&Drop vars. Optionally the drag source vars too*/

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -99,6 +99,9 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50;
     IgxTooltipTargetDirective,
     NgClass,
     NgTemplateOutlet
+],
+providers: [
+    IgxQueryBuilderDragService
 ]
 })
 export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
@@ -519,11 +522,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     }
 
     constructor(public cdr: ChangeDetectorRef,
+        public dragService: IgxQueryBuilderDragService,
         protected platform: PlatformUtil,
-        protected el: ElementRef,
         private elRef: ElementRef,
         @Inject(LOCALE_ID) protected _localeId: string) {
         this.locale = this.locale || this._localeId;
+        this.dragService.register(this, elRef);
     }
 
     /**
@@ -840,7 +844,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    private deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
+    /**
+     * @hidden @internal
+     */
+    public deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
         if (!expressionItem.parent) {
             this.rootGroup = null;
             this.currentGroup = null;
@@ -1023,15 +1030,13 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         this.deleteItem(expressionItem);
     }
 
-    private focusChipAfterDrag = (index: number) => {
-        this._lastFocusedChipIndex = index;
-        this.focusEditedExpressionChip();
-    }
-
     /**
      * @hidden @internal
      */
-    public dragService: IgxQueryBuilderDragService = new IgxQueryBuilderDragService(this, this.el, this.deleteItem, this.focusChipAfterDrag);
+    public focusChipAfterDrag = (index: number) => {
+        this._lastFocusedChipIndex = index;
+        this.focusEditedExpressionChip();
+    }
 
     /**
      * @hidden @internal