chore: added multi item drag and resize info in the README.md

Also renamed path 'multi-item-handler' for 'multi-item-drag-and-resize'

Author: llorenspujol

README.md

@@ -16,12 +16,13 @@ Both cover the same necessities.
 - Draggable items
 - Resizable items
 - REDUX friendly (akita, ngrx, ngxs...)
-- Customizable Drag & Resize handles.
+- Customizable Drag & Resize handles. [Custom Handles Example](https://katoid.github.io/angular-grid-layout/custom-handles)
 - 3 modes of grid compaction: vertical, horizontal and free (exact same algorithm as [React-Grid-Layout](https://github.com/STRML/react-grid-layout))
 - Add/Remove items
 - High performance
 - Supports touch devices
-- Auto-scrolling while dragging
+- Auto-scrolling while dragging. [Scroll Example](https://katoid.github.io/angular-grid-layout/scroll-test)
+- Multi Item mode, drag and resize more than 1 item at a time. [Multi Item Drag & Resize Example](https://katoid.github.io/angular-grid-layout/multi-item-drag-and-resize)
 
 ## Compatibility
 | Version              | Compatibility           |
@@ -34,9 +35,15 @@ Both cover the same necessities.
 ## Demos
 [Playground](https://katoid.github.io/angular-grid-layout/playground) - [Stackblitz](https://stackblitz.com/edit/angular-grid-layout-playground?file=src%2Fapp%2Fplayground%2Fplayground.component.ts)
 
-[Custom handles](https://katoid.github.io/angular-grid-layout/custom-handles)
+[Custom Handles](https://katoid.github.io/angular-grid-layout/custom-handles)
 
-[Real life example](https://katoid.github.io/angular-grid-layout/real-life-example)
+[Real Life Example](https://katoid.github.io/angular-grid-layout/real-life-example)
+
+[Scroll Test](https://katoid.github.io/angular-grid-layout/scroll-test)
+
+[Row Height Fit](https://katoid.github.io/angular-grid-layout/row-height-fit)
+
+[Multi Item Drag & Resize](https://katoid.github.io/angular-grid-layout/multi-item-drag-and-resize)
 
 ## Installation
 
@@ -121,6 +128,13 @@ Here is listed the basic API of both KtdGridComponent and KtdGridItemComponent.
  * */
 @Input() height: number | null = null;
 
+/**
+ * Multiple items drag/resize
+ * A list of selected items to move (drag or resize) together as a group.
+ * The multi-selection of items is managed externally. By default, the library manages a single item, but if a set of item IDs is provided, the specified group will be handled as a unit."
+ */
+@Input()
+selectedItemsIds(): string[] | null;
 
 /**
  * Parent element that contains the scroll. If an string is provided it would search that element by id on the dom.

package-lock.json

@@ -496,7 +496,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                         this.setGridBackgroundVisible(this._backgroundConfig?.show === 'whenDragging' || this._backgroundConfig?.show === 'always');
                         // Perform drag sequence
                         let gridItemsSelected: KtdGridItemComponent[] = [gridItem];
-                        if(multipleSelection && multipleSelection.some((currItem)=>currItem.id===gridItem.id)) {
+                        if (multipleSelection && multipleSelection.some((currItem) => currItem.id === gridItem.id)) {
                             gridItemsSelected = multipleSelection
                         }
                         return this.performDragSequence$(gridItemsSelected, event, type).pipe(
@@ -533,9 +533,9 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             // Retrieve grid (parent) client rect.
             const gridElemClientRect: KtdClientRect = getMutableClientRect(this.elementRef.nativeElement as HTMLElement);
 
-            const dragElemClientRect: KtdDictionary<KtdClientRect>={};
-            const newGridItemRenderData: KtdDictionary<KtdGridItemRenderData<number>>={};
-            let draggedItemsPos: KtdDictionary<KtdGridItemRect>={};
+            const dragElemClientRect: KtdDictionary<KtdClientRect> = {};
+            const newGridItemRenderData: KtdDictionary<KtdGridItemRenderData<number>> = {};
+            let draggedItemsPos: KtdDictionary<KtdGridItemRect> = {};
 
             gridItems.forEach((gridItem)=>{
                 // Retrieve gridItem (draggedElem) client rect.

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -28,7 +28,7 @@ export const APP_ROUTES: Routes = [
         data: {title: 'Angular Grid Layout - Row Height Fit'}
     },
     {
-        path: 'multi-item-handler',
+        path: 'multi-item-drag-and-resize',
         loadComponent: () => import('./multi-item-handler/multi-item-handler.component').then(m => m.KtdMultiItemHandlerComponent),
         data: {title: 'Angular Grid Layout - Multi-Item Drag & Resize'}
     },

projects/demo-app/src/app/app-routing.routes.ts

@@ -5,5 +5,5 @@ <h2 style="margin-top: 16px">Other examples: </h2>
     <a [routerLink]="['/real-life-example']">Real life example</a>
     <a [routerLink]="['/scroll-test']">Scroll test</a>
     <a [routerLink]="['/row-height-fit']">Row Height Fit</a>
-    <a [routerLink]="['/multi-item-handler']">Multi Item Handler</a>
+    <a [routerLink]="['/multi-item-drag-and-resize']">Multi Item Drag & Resize</a>
 </div>

projects/demo-app/src/app/components/footer/footer.component.html

@@ -27,7 +27,7 @@
                         (selectionChange)="onCompactTypeChange($event)">
                         <mat-option [value]="'vertical'">vertical</mat-option>
                         <mat-option [value]="'horizontal'">horizontal</mat-option>
-                        <mat-option [value]="'none'">-</mat-option>
+                        <mat-option [value]="null">-</mat-option>
                     </mat-select>
                 </mat-form-field>
                 <mat-checkbox

projects/demo-app/src/app/multi-item-handler/multi-item-handler.component.html

@@ -8,15 +8,14 @@ import { ktdArrayRemoveItem } from '../utils';
 import { DOCUMENT, NgClass, NgFor } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { KtdFooterComponent } from '../components/footer/footer.component';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { MatChipsModule } from '@angular/material/chips';
 import { MatInputModule } from '@angular/material/input';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { ktdGetOS } from './multi-item-handler.utils';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
+import { ReactiveFormsModule } from '@angular/forms';
 
 const realLifeLayout: KtdGridLayout = [
     {id: '0', x: 0, y: 0, w: 62, h: 3},
@@ -313,23 +312,21 @@ const multiItemSeparatedDragBug = [
 
 @Component({
     standalone: true,
-    selector: 'ktd-playground',
+    selector: 'ktd-multi-item-handler',
     templateUrl: './multi-item-handler.component.html',
     styleUrls: ['./multi-item-handler.component.scss'],
     imports: [
         MatButtonModule,
         MatFormFieldModule,
+        ReactiveFormsModule,
         MatSelectModule,
         MatOptionModule,
         MatInputModule,
         MatCheckboxModule,
         NgFor,
         NgClass,
-        MatChipsModule,
-        ColorPickerModule,
         KtdGridComponent,
         KtdGridItemComponent,
-        KtdGridItemPlaceholder,
         KtdFooterComponent
     ]
 })

projects/demo-app/src/app/multi-item-handler/multi-item-handler.component.ts

@@ -122,10 +122,12 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
     }
 
     onDragEnded(event: KtdDragEnd) {
+        console.log('dragEnded', event);
         this.isDragging = false;
     }
 
     onResizeEnded(event: KtdResizeEnd) {
+        console.log('resizeEnded', event);
         this.isResizing = false;
     }