diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts index d2dc3f5736d..9866fa83f00 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts @@ -1,6 +1,6 @@ import { filter, fromEvent, sampleTime, Subscription, tap } from 'rxjs'; import { IgxQueryBuilderTreeComponent } from './query-builder-tree.component'; -import { ElementRef, Inject, Injectable } from '@angular/core'; +import { ElementRef, Injectable } from '@angular/core'; import { ExpressionGroupItem, ExpressionItem, QueryBuilderSelectors } from './query-builder.common'; const DEFAULT_SET_Z_INDEX_DELAY = 10; @@ -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*/ diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts index 59c38798d0f..563460d0dd2 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts @@ -68,38 +68,41 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50; templateUrl: './query-builder-tree.component.html', host: { 'class': 'igx-query-builder-tree' }, imports: [ - DatePipe, - FormsModule, - IgxButtonDirective, - IgxCheckboxComponent, - IgxChipComponent, - IgxComboComponent, - IgxComboHeaderDirective, - IgxDatePickerComponent, - IgxDateTimeEditorDirective, - IgxDialogComponent, - IgxDragIgnoreDirective, - IgxDropDirective, - IgxDropDownComponent, - IgxDropDownItemComponent, - IgxDropDownItemNavigationDirective, - IgxFieldFormatterPipe, - IgxIconButtonDirective, - IgxIconComponent, - IgxInputDirective, - IgxInputGroupComponent, - IgxOverlayOutletDirective, - IgxPickerClearComponent, - IgxPickerToggleComponent, - IgxPrefixDirective, - IgxSelectComponent, - IgxSelectItemComponent, - IgxTimePickerComponent, - IgxTooltipDirective, - IgxTooltipTargetDirective, - NgClass, - NgTemplateOutlet -] + DatePipe, + FormsModule, + IgxButtonDirective, + IgxCheckboxComponent, + IgxChipComponent, + IgxComboComponent, + IgxComboHeaderDirective, + IgxDatePickerComponent, + IgxDateTimeEditorDirective, + IgxDialogComponent, + IgxDragIgnoreDirective, + IgxDropDirective, + IgxDropDownComponent, + IgxDropDownItemComponent, + IgxDropDownItemNavigationDirective, + IgxFieldFormatterPipe, + IgxIconButtonDirective, + IgxIconComponent, + IgxInputDirective, + IgxInputGroupComponent, + IgxOverlayOutletDirective, + IgxPickerClearComponent, + IgxPickerToggleComponent, + IgxPrefixDirective, + IgxSelectComponent, + IgxSelectItemComponent, + IgxTimePickerComponent, + IgxTooltipDirective, + 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); } /** @@ -842,7 +846,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; @@ -1025,15 +1032,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