[Query Builder] drag and drop refactor without DOM manipulations - master

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-component.scss

@@ -107,12 +107,12 @@
             @extend %filter-tree__expression-item !optional;
         }
 
-        @include e(expression-item-ghost) {
+        @include e(expression-item-drop-ghost) {
             @extend %filter-tree__expression-item-ghost !optional;
         }
 
-	    @include e(expression-item-drop-ghost) {
-		    @extend %filter-tree__expression-drop-item-ghost !optional;
+	    @include e(expression-item-keyboard-ghost) {
+		    @extend %filter-tree__expression-item-keyboard-ghost !optional;
 	    }
 
         @include e(expression-column) {

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -480,18 +480,25 @@
 
 
     %filter-tree__expression-item-ghost {
-        &.igx-chip__item {
+        .igx-chip__item {
             @include type-style('body-2');
 
             --ig-body-2-text-transform: unset;
 
             padding-inline: rem(32px);
+
+	        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
+	        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
+	        background:  transparent;
         }
-
-        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
-        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
-        background:  transparent;
     }
+
+	%filter-tree__expression-item-keyboard-ghost {
+		.igx-chip__item {
+			box-shadow: var(--ghost-shadow);
+            background: var(--ghost-background);
+		}
+	}
 
     %filter-tree__expression-column {
         padding: 0 rem(8px);

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 => {
@@ -883,7 +883,8 @@ export class QueryBuilderFunctions {
 
     public static getDropGhost(fixture: ComponentFixture<any>): Element {
         var expressionsContainer = QueryBuilderFunctions.getQueryBuilderExpressionsContainer(fixture);
-        return expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST}`);
+        return expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST}`) ??
+            expressionsContainer.querySelector(`div.${QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_KEYBOARD_GHOST}`);
     }
 
     public static getDropGhostBounds(fixture: ComponentFixture<any>): DOMRect {
@@ -910,4 +911,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,24 @@
 
     <ng-template #operandTemplate let-expressionItem>
         @if (!expressionItem.inEditMode) {
+            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){
+                <div class="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-keyboard-ghost': expressionItem === dragService.dropGhostExpression
+                  }"
                 (mouseenter)="expressionItem.hovered = true"
                 (mouseleave)="expressionItem.hovered = false"
                 (focusin)="onExpressionFocus(expressionItem)"
@@ -263,6 +273,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,53 @@ 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 {
+    /**
+     * @hidden @internal
+     */
+    public _expressionTree: IExpressionTree;
+
+    /**
+     * @hidden @internal
+     */
+    public _expressionTreeCopy: IExpressionTree;
+
     /**
      * @hidden @internal
      */
@@ -285,8 +298,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 +472,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 +487,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;
     }
@@ -519,11 +534,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 +858,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,16 +1044,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
      */
@@ -1136,8 +1152,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;
@@ -1172,7 +1188,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" });
     }
 
     /**
@@ -1312,7 +1328,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();
         }
@@ -1544,7 +1560,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)) {

projects/igniteui-angular/src/lib/query-builder/query-builder.common.ts

@@ -69,6 +69,7 @@ export const QueryBuilderSelectors = {
     FILTER_TREE_EXPRESSION_CONTEXT_MENU: IGX_FILTER_TREE + '__expression-context-menu',
     FILTER_TREE_EXPRESSION_ITEM: IGX_FILTER_TREE + '__expression-item',
     FILTER_TREE_EXPRESSION_ITEM_DROP_GHOST: IGX_FILTER_TREE + '__expression-item-drop-ghost',
+    FILTER_TREE_EXPRESSION_ITEM_KEYBOARD_GHOST: IGX_FILTER_TREE + '__expression-item-keyboard-ghost',
     FILTER_TREE_EXPRESSION_ITEM_GHOST: IGX_FILTER_TREE + '__expression-item-ghost',
     FILTER_TREE_EXPRESSION_SECTION: IGX_FILTER_TREE + '__expression-section',
 
@@ -80,10 +81,4 @@ export const QueryBuilderSelectors = {
     QUERY_BUILDER_BODY: IGX_QUERY_BUILDER + '__main',
     QUERY_BUILDER_HEADER: IGX_QUERY_BUILDER + '__header',
     QUERY_BUILDER_TREE: IGX_QUERY_BUILDER + '-tree',
-
-    VIABLE_DROP_AREA:
-        `.${IGX_FILTER_TREE}__expression-item[igxDrop]:not(.${IGX_FILTER_TREE + '__expression-item-drop-ghost'}),` + /*Condition chip*/
-        `.${IGX_FILTER_TREE}__subquery:has([igxDrop]),` + /*Chip in edit*/
-        `.${IGX_FILTER_TREE}__buttons > .igx-button[igxDrop]:first-of-type,` + /*Add Condition Button*/
-        `.${IGX_FILTER_TREE}__expression-context-menu[igxDrop]` /*AND/OR group root*/
 }