[Query Builder] drag and drop refactor without DOM manipulations

projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts

@@ -865,7 +865,7 @@ export class QueryBuilderFunctions {
     }
 
     public static getChipContent(chip: Element): string {
-        if (chip.checkVisibility()) {
+        if (chip && chip.checkVisibility()) {
             let text: string = '';
 
             Array.from(chip.querySelectorAll('span')).forEach(element => {
@@ -910,4 +910,27 @@ export class QueryBuilderFunctions {
             dragDirective.onPointerUp({ pointerId: 1, pageX: X, pageY: Y });
         }
     }
+
+    public static getDropGhostAndItsSiblings(fixture: ComponentFixture<any>): [Element, string, string, string[]] {
+        const dropGhost = this.getDropGhost(fixture);
+        const newChipContents = QueryBuilderFunctions.GetChipsContentAsArray(fixture);
+        let prevElement: string, nextElement: string;
+
+        if (dropGhost) {
+            if (dropGhost.previousElementSibling?.className &&
+                dropGhost.previousElementSibling?.className?.indexOf(QueryBuilderSelectors.FILTER_TREE_SUBQUERY) !== -1) {
+                prevElement = QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling.previousElementSibling);
+            } else if (dropGhost.previousElementSibling?.previousElementSibling) {
+                prevElement = QueryBuilderFunctions.getChipContent(dropGhost.previousElementSibling);
+            }
+
+            nextElement = QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling?.nextElementSibling);
+            nextElement ??= QueryBuilderFunctions.getChipContent(dropGhost.nextElementSibling?.nextElementSibling?.nextElementSibling?.nextElementSibling);
+        }
+
+        prevElement ??= null;
+        nextElement ??= null;
+
+        return [dropGhost, prevElement, nextElement, newChipContents];
+    }
 }

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

@@ -125,14 +125,26 @@
 
     <ng-template #operandTemplate let-expressionItem>
         @if (!expressionItem.inEditMode) {
+            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){
+                <!-- TODO style properly -->
+                <div [ngClass]="'igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost'">
+                <igx-chip [data]="expressionItem">
+                    {{this.resourceStrings.igx_query_builder_drop_ghost_text}}
+                </igx-chip>
+            </div>
+            }
+            @else {
             <div
                 #dragRef
                 igxDrop
                 (enter)="dragService.onChipEnter(dragRef, expressionItem)"
                 (over)="dragService.onDivOver(dragRef, expressionItem)"
                 (leave)="dragService.onChipLeave()"
                 (dropped)="dragService.onDivDropped(expressionItem)"
-                class="igx-filter-tree__expression-item"
+                [ngClass]="{
+                    'igx-filter-tree__expression-item': true,
+                    'igx-filter-tree__expression-item-drop-ghost': expressionItem === dragService.dropGhostExpression
+                  }"
                 (mouseenter)="expressionItem.hovered = true"
                 (mouseleave)="expressionItem.hovered = false"
                 (focusin)="onExpressionFocus(expressionItem)"
@@ -263,6 +275,7 @@
                 }
             </div>
         }
+    }
         <div #editingInputsContainer class="igx-filter-tree__subquery" >
             @if (expressionItem.inEditMode) {
                 <div

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

@@ -68,40 +68,50 @@ 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
+    ]
 })
 export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
+    /**
+     * @hidden @internal
+     */
+    public _expressionTree: IExpressionTree;
+
+    /**
+     * @hidden @internal
+     */
+    public _expressionTreeCopy: IExpressionTree;
+
     /**
      * @hidden @internal
      */
@@ -285,8 +295,11 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     @ViewChild('groupContextMenuDropDown', { read: IgxDropDownComponent })
     private groupContextMenuDropDown: IgxDropDownComponent;
 
+    /**
+     * @hidden @internal
+     */
     @ViewChildren(IgxChipComponent, { read: IgxChipComponent })
-    private expressionsChips: QueryList<IgxChipComponent>;
+    public expressionsChips: QueryList<IgxChipComponent>;
 
     @ViewChild('editingInputsContainer', { read: ElementRef })
     protected set editingInputsContainer(value: ElementRef) {
@@ -456,7 +469,6 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     private _prevFocusedContainer: ElementRef;
     private _expandedExpressions: IFilteringExpression[] = [];
     private _fields: FieldType[];
-    private _expressionTree: IExpressionTree;
     private _locale;
     private _entityNewValue: EntityType;
     private _resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
@@ -472,7 +484,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /**
      * Returns if the fields combo at the root level is disabled.
      */
-     public get disableReturnFieldsChange(): boolean {
+    public get disableReturnFieldsChange(): boolean {
 
         return !this.selectedEntity || this.queryBuilder.disableReturnFieldsChange;
     }
@@ -1031,7 +1043,11 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-    public dragService: IgxQueryBuilderDragService = new IgxQueryBuilderDragService(this, this.el, this.deleteItem, this.focusChipAfterDrag);
+    public dragService: IgxQueryBuilderDragService = new IgxQueryBuilderDragService(
+        this,
+        this.el,
+        this.deleteItem,
+        this.focusChipAfterDrag);
 
     /**
      * @hidden @internal
@@ -1134,8 +1150,8 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
                 expressionItem.expression.condition.name :
                 null;
         this.searchValue.value = expressionItem.expression.searchVal instanceof Set ?
-                                    Array.from(expressionItem.expression.searchVal) :
-                                    expressionItem.expression.searchVal;
+            Array.from(expressionItem.expression.searchVal) :
+            expressionItem.expression.searchVal;
 
         expressionItem.inEditMode = true;
         this._editedExpression = expressionItem;
@@ -1170,7 +1186,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
             input?.focus();
         }
 
-        (this.editingInputs?.nativeElement.parentElement as HTMLElement)?.scrollIntoView({block: "nearest", inline: "nearest"});
+        (this.editingInputs?.nativeElement.parentElement as HTMLElement)?.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
 
     /**
@@ -1310,7 +1326,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public invokeClick(eventArgs: KeyboardEvent) {
-        if (!this.dragService.dropGhostChipNode && this.platform.isActivationKey(eventArgs)) {
+        if (!this.dragService.dropGhostExpression && this.platform.isActivationKey(eventArgs)) {
             eventArgs.preventDefault();
             (eventArgs.currentTarget as HTMLElement).click();
         }
@@ -1542,7 +1558,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
                 return groupItem;
             }
 
-            for (let i = 0 ; i < expressionTree.filteringOperands.length; i++) {
+            for (let i = 0; i < expressionTree.filteringOperands.length; i++) {
                 const expr = expressionTree.filteringOperands[i];
 
                 if (isTree(expr)) {