From 7c3bc7a1f7b498b4d37cf3f779ffaf32907f7fc0 Mon Sep 17 00:00:00 2001
From: llorenspujol <llorenspujol1@gmail.com>
Date: Sun, 2 Jul 2023 19:02:07 +0200
Subject: [PATCH] feat: enabled support for having static grid items (WIP)

---
 .../src/lib/grid-item/grid-item.component.ts  |   1 +
 .../src/lib/grid.component.ts                 |   1 +
 .../src/lib/grid.definitions.ts               |   1 +
 .../src/lib/utils/grid.utils.ts               |   2 +-
 .../src/lib/utils/react-grid-layout.utils.ts  |   2 +-
 .../tests/react-grid-layout-utils.spec.ts     | 128 ++++++++++++++++++
 .../app/playground/playground.component.html  |  10 +-
 .../app/playground/playground.component.scss  |  12 +-
 .../app/playground/playground.component.ts    |   3 +-
 9 files changed, 153 insertions(+), 7 deletions(-)

diff --git a/projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts b/projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts
index 6b60929..61e3363 100644
--- a/projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts
+++ b/projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts
@@ -34,6 +34,7 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
     @Input() minH?: number;
     @Input() maxW?: number;
     @Input() maxH?: number;
+    @Input() static?: boolean; // TODO: This property should overwrite the layout one's, right now does nothing.
 
     /** CSS transition style. Note that for more performance is preferable only make transition on transform property. */
     @Input() transition: string = 'transform 500ms ease, width 500ms ease, height 500ms ease';
diff --git a/projects/angular-grid-layout/src/lib/grid.component.ts b/projects/angular-grid-layout/src/lib/grid.component.ts
index dd35bd2..f09f16d 100644
--- a/projects/angular-grid-layout/src/lib/grid.component.ts
+++ b/projects/angular-grid-layout/src/lib/grid.component.ts
@@ -626,6 +626,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                                     minH: item.minH,
                                     maxW: item.maxW,
                                     maxH: item.maxH,
+                                    static: item.static,
                                 })) as KtdGridLayout);
                             } else {
                                 // TODO: Need we really to emit if there is no layout change but drag started and ended?
diff --git a/projects/angular-grid-layout/src/lib/grid.definitions.ts b/projects/angular-grid-layout/src/lib/grid.definitions.ts
index 12e976b..eebd7c3 100644
--- a/projects/angular-grid-layout/src/lib/grid.definitions.ts
+++ b/projects/angular-grid-layout/src/lib/grid.definitions.ts
@@ -12,6 +12,7 @@ export interface KtdGridLayoutItem {
     minH?: number;
     maxW?: number;
     maxH?: number;
+    static?: boolean;
 }
 
 export type KtdGridCompactType = CompactType;
diff --git a/projects/angular-grid-layout/src/lib/utils/grid.utils.ts b/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
index e91e4aa..4e0551b 100644
--- a/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
+++ b/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
@@ -28,7 +28,7 @@ export function ktdGetGridItemRowHeight(layout: KtdGridLayout, gridHeight: numbe
 export function ktdGridCompact(layout: KtdGridLayout, compactType: KtdGridCompactType, cols: number): KtdGridLayout {
     return compact(layout, compactType, cols)
         // Prune react-grid-layout compact extra properties.
-        .map(item => ({ id: item.id, x: item.x, y: item.y, w: item.w, h: item.h, minW: item.minW, minH: item.minH, maxW: item.maxW, maxH: item.maxH }));
+        .map(item => ({ id: item.id, x: item.x, y: item.y, w: item.w, h: item.h, minW: item.minW, minH: item.minH, maxW: item.maxW, maxH: item.maxH, static: item.static }));
 }
 
 function screenXToGridX(screenXPos: number, cols: number, width: number, gap: number): number {
diff --git a/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts b/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
index ae6ebc0..812c53d 100644
--- a/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
+++ b/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
@@ -524,7 +524,7 @@ export function moveElementAwayFromCollision(
                 : itemToMove.y,
             w: itemToMove.w,
             h: itemToMove.h,
-            id: '-1',
+            id: itemToMove.id, // Important to test more deeply this change. It seems to fix many visual bugs with static grid items, but it is surprising that react-grid-layout has '-1'.
         };
 
         // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
diff --git a/projects/angular-grid-layout/src/lib/utils/tests/react-grid-layout-utils.spec.ts b/projects/angular-grid-layout/src/lib/utils/tests/react-grid-layout-utils.spec.ts
index 7b9f425..3c266c6 100644
--- a/projects/angular-grid-layout/src/lib/utils/tests/react-grid-layout-utils.spec.ts
+++ b/projects/angular-grid-layout/src/lib/utils/tests/react-grid-layout-utils.spec.ts
@@ -356,6 +356,134 @@ describe('compact vertical', () => {
         ]);
     });
 
+    it('Move element with static items', () => {
+        const layout = [
+            {id: '1', x: 0, y: 6, w: 3, h: 3, moved: false},
+            {id: '2', x: 0, y: 3, w: 3, h: 3, moved: false, static: true}
+        ];
+        const layoutItem = {...layout[0]};
+        expect(
+            moveElement(
+                layout,
+                layoutItem,
+                0,
+                1, // x, y
+                true, // isUserAction,
+                false, // preventCollision
+                'vertical',
+                2 // compactType, cols
+            )
+        ).toEqual([
+            {id: '1', x: 0, y: 6, w: 3, h: 3, moved: false},
+            {id: '2', x: 0, y: 3, w: 3, h: 3, moved: false, static: true}
+        ]);
+    });
+
+    it('Move element with static items, example 2', () => {
+        const layout = [
+            {
+                'w': 2,
+                'h': 3,
+                'x': 5,
+                'y': 6,
+                'id': '0',
+                'moved': false,
+                'static': false
+            },
+            {
+                'w': 2,
+                'h': 3,
+                'x': 5,
+                'y': 3,
+                'id': '4',
+                'moved': false,
+                'static': true
+            }
+
+        ];
+        const layoutItem = {...layout[0]};
+        expect(
+            moveElement(
+                layout,
+                layoutItem,
+                5, // x
+                3, // y
+                true, // isUserAction,
+                false, // preventCollision
+                'vertical',
+                2 // compactType, cols
+            )
+        ).toEqual([
+            {id: '0', x: 5, y: 6, w: 2, h: 3, moved: false, static: false},
+            {id: '4', x: 5, y: 3, w: 2, h: 3, moved: false, static: true}
+        ]);
+    });
+
+    it('Should not move the layout item to the bottom of the static one\'s', () => {
+        const layout = [
+            {w: 2, h: 3, x: 5, y: 0, id: '0', moved: false, static: false},
+            {w: 2, h: 8, x: 3, y: 0, id: '2', moved: false, static: false},
+            {w: 2, h: 3, x: 5, y: 3, id: '4', moved: false, static: true}
+        ]
+        const layoutItem = {...layout[0]};
+
+        expect(
+            moveElement(
+                layout,
+                layoutItem,
+                5, // x
+                1, // y
+                true, // isUserAction,
+                false, // preventCollision
+                'vertical',
+                12 // compactType, cols
+            )
+        ).toEqual([
+            {id: '0', x: 5, y: 0, w: 2, h: 3, moved: false, static: false},
+            {id: '2', x: 3, y: 0, w: 2, h: 8, moved: false, static: false},
+            {id: '4', x: 5, y: 3, w: 2, h: 3, moved: false, static: true}
+        ]);
+    });
+
+    it('Should move the element on the bottom of the static element without changing the position of the element that is on top', () => {
+        const layout = [
+            {w: 2, h: 3, x: 5, y: 0, id: '0', moved: false, static: false},
+            {w: 2, h: 8, x: 3, y: 0, id: '2', moved: false, static: false},
+            {w: 2, h: 3, x: 5, y: 3, id: '4', moved: false, static: true}
+        ]
+        const layoutItem = layout[0];
+
+        expect(
+            moveElement(
+                layout,
+                layoutItem,
+                4, // x
+                0, // y
+                true, // isUserAction,
+                false, // preventCollision
+                'vertical',
+                12 // compactType, cols
+            )
+        ).toEqual([
+            {id: '0', x: 5, y: 0, w: 2, h: 3, moved: false, static: false},
+            {id: '2', x: 3, y: 0, w: 2, h: 8, moved: false, static: false},
+            {id: '4', x: 5, y: 3, w: 2, h: 3, moved: false, static: true}
+        ]);
+    });
+
+    it('Should compact correctly if there is a static item', () => {
+        const layout = [
+            {x: 0, y: 0, w: 3, h: 3, id: '1'},
+            {x: 0, y: 3, w: 3, h: 3, id: '2', static: true},
+        ];
+
+        expect(compact(layout, 'vertical', 10)).toEqual([
+            {x: 0, y: 0, w: 3, h: 3, id: '1', moved: false, static: false},
+            {x: 0, y: 3, w: 3, h: 3, id: '2', moved: false, static: true},
+        ]);
+    });
+
+
     it('Clones layout items (does not modify input)', () => {
         const layout = [
             {x: 0, y: 0, w: 2, h: 5, id: '1'},
diff --git a/projects/demo-app/src/app/playground/playground.component.html b/projects/demo-app/src/app/playground/playground.component.html
index c102a6d..670253b 100644
--- a/projects/demo-app/src/app/playground/playground.component.html
+++ b/projects/demo-app/src/app/playground/playground.component.html
@@ -174,9 +174,13 @@
                            [id]="item.id"
                            [transition]="currentTransition"
                            [dragStartThreshold]="dragStartThreshold"
-                           [draggable]="!disableDrag"
-                           [resizable]="!disableResize">
-                <div class="grid-item-content">{{item.id}}</div>
+                           [draggable]="!disableDrag && !item.static"
+                           [resizable]="!disableResize && !item.static"
+                           [class.grid-item-static]="item.static">
+                <div class="grid-item-content">
+                    <span *ngIf="item.static" style="position: absolute; left: 6px; top: 6px;">STATIC</span>
+                    <span>{{item.id}}</span>
+                </div>
                 <div class="grid-item-remove-handle"
                      *ngIf="!disableRemove"
                      (mousedown)="stopEventPropagation($event)"
diff --git a/projects/demo-app/src/app/playground/playground.component.scss b/projects/demo-app/src/app/playground/playground.component.scss
index c629d6d..5b33305 100644
--- a/projects/demo-app/src/app/playground/playground.component.scss
+++ b/projects/demo-app/src/app/playground/playground.component.scss
@@ -53,9 +53,15 @@
         }
     }
 
+    .grid-item-static {
+        .grid-item-content {
+            background-color: #fdc3ba;
+        }
+    }
+
     .grid-item-content {
         box-sizing: border-box;
-        background: #ccc;
+        background-color: #ccc;
         border: 1px solid;
         width: 100%;
         height: 100%;
@@ -88,6 +94,10 @@
     ktd-grid-item {
         cursor: grab;
 
+        &.grid-item-static {
+            cursor: not-allowed;
+        }
+
         &.ktd-grid-item-dragging {
             cursor: grabbing;
         }
diff --git a/projects/demo-app/src/app/playground/playground.component.ts b/projects/demo-app/src/app/playground/playground.component.ts
index 10067ad..5f9358f 100644
--- a/projects/demo-app/src/app/playground/playground.component.ts
+++ b/projects/demo-app/src/app/playground/playground.component.ts
@@ -203,11 +203,12 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
                 w: 2,
                 h: y,
                 id: i.toString()
-                // static: Math.random() < 0.05
             });
         }
         this.layout = ktdGridCompact(layout, this.compactType, this.cols);
         console.log('generateLayout', this.layout);
+        // Set static items afterwards compaction to avoid collisions between them.
+        this.layout = this.layout.map(item => (item.id === '1' || item.id === '4') ? {...item, static: true} : item)
     }
 
     /** Adds a grid item to the layout */