board shadow compare before draw

Geeksltd · Apr 26, 2024 · 34be677 · 34be677
1 parent c1ba499
commit 34be677
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 28 deletions.
diff --git a/dist/bundle-built.js b/dist/bundle-built.js
@@ -37924,6 +37924,7 @@ define('app/masonryGrid',["require", "exports", "jquery"], function (require, ex
     Object.defineProperty(exports, "__esModule", { value: true });
     class MasonryGrid {
         constructor(options) {
+            this.lastSchematic = [[]];
             this.options = options;
             this.initialize();
         }
@@ -37963,32 +37964,55 @@ define('app/masonryGrid',["require", "exports", "jquery"], function (require, ex
                 const parentWidth = this.parent.clientWidth;
                 const columnCount = Math.max(parentWidth / this.options.minColumnWidth, 1);
                 const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
+                const newSchematic = this.generateSchematic(columnCount);
+                if (this.lastSchematic) {
+                    if (this.areEqualSchematics(this.lastSchematic, newSchematic))
+                        return;
+                    else
+                        this.lastSchematic = newSchematic;
+                }
+                else {
+                    this.lastSchematic = newSchematic;
+                }
                 this.items.forEach(item => {
                     if (item.parentElement != this.parent)
                         this.parent.appendChild(item);
                 });
-                // this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
                 this.parent.querySelectorAll(".column").forEach(element => {
                     element.remove();
                 });
-                for (let i = 1; i <= columnCount; i++) {
+                for (let i = 0; i < columnCount; i++) {
                     this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
                 }
-                var result = [];
-                for (let i = 1; i <= columnCount; i++) {
-                    result.push({ index: i - 1, height: 0 });
+                for (let c = 0; c < this.lastSchematic.length; c++) {
+                    const column = this.parent.querySelectorAll(".column")[c];
+                    for (let i = 0; i < this.lastSchematic[c].length; i++) {
+                        column.appendChild(this.items[this.lastSchematic[c][i]]);
+                    }
                 }
-                this.items.forEach(item => {
-                    result.sort((a, b) => a.height - b.height);
-                    const index = result[0].index;
-                    const div = this.parent.querySelectorAll(".column")[index];
-                    div.appendChild(item);
-                    result[0].height += item.clientHeight;
-                });
                 newItems.forEach(item => this.resizeObserver.observe(item));
                 this.resizeId = undefined;
             }.bind(this), 500);
         }
+        areEqualSchematics(a, b) {
+            return JSON.stringify(a) === JSON.stringify(b);
+        }
+        generateSchematic(columnCount) {
+            var result = [];
+            var schematic = [];
+            for (let i = 0; i < columnCount; i++) {
+                result.push({ index: i, height: 0 });
+                schematic.push([]);
+            }
+            for (let i = 0; i < this.items.length; i++) {
+                const item = this.items[i];
+                result.sort((a, b) => a.height - b.height);
+                const index = result[0].index;
+                result[0].height += item.clientHeight;
+                schematic[index].push(i);
+            }
+            return schematic;
+        }
     }
     exports.default = MasonryGrid;
 });

diff --git a/dist/bundle-built.min.js b/dist/bundle-built.min.js
diff --git a/dist/types/hub/masonryGrid.d.ts b/dist/types/hub/masonryGrid.d.ts
@@ -11,8 +11,11 @@ export default class MasonryGrid {
     items: NodeListOf<Element>;
     resizeObserver: ResizeObserver;
     resizeId: number | undefined;
+    lastSchematic: Array<Array<number>>;
     constructor(options: any);
     private initialize;
     setMinColumnWidth(w: number): void;
     drawGrid(): void;
+    areEqualSchematics(a: any, b: any): boolean;
+    generateSchematic(columnCount: any): any[];
 }
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "url": "git://github.com/Geeksltd/Olive.Microservices.HubJs.git"
   },
   "author": "Geeks Ltd",
-  "version": "4.2.63",
+  "version": "4.2.64",
   "license": "GPL-3.0",
   "private": false,
   "files": [

diff --git a/src/masonryGrid.ts b/src/masonryGrid.ts
@@ -12,6 +12,7 @@ export default class MasonryGrid {
     items: NodeListOf<Element>;
     resizeObserver: ResizeObserver;
     resizeId: number | undefined;
+    lastSchematic: Array<Array<number>> = [[]];
 
     constructor(options) {
         this.options = options;
@@ -60,36 +61,63 @@ export default class MasonryGrid {
 
             const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
 
+            const newSchematic = this.generateSchematic(columnCount);
+            if (this.lastSchematic) {
+                if (this.areEqualSchematics(this.lastSchematic, newSchematic))
+                    return;
+                else
+                    this.lastSchematic = newSchematic;
+            } else {
+                this.lastSchematic = newSchematic;
+            }
+
             this.items.forEach(item => {
                 if (item.parentElement != this.parent)
                     this.parent.appendChild(item);
             });
 
-            // this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
-
             this.parent.querySelectorAll(".column").forEach(element => {
                 element.remove();
             });
 
-            for (let i = 1; i <= columnCount; i++) {
+            for (let i = 0; i < columnCount; i++) {
                 this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
             }
 
-            var result = [];
-            for (let i = 1; i <= columnCount; i++) {
-                result.push({ index: i - 1, height: 0 });
+            for (let c = 0; c < this.lastSchematic.length; c++) {
+                const column = this.parent.querySelectorAll(".column")[c]
+                for (let i = 0; i < this.lastSchematic[c].length; i++) {
+                    column.appendChild(this.items[this.lastSchematic[c][i]]);
+                }
             }
 
-            this.items.forEach(item => {
-                result.sort((a, b) => a.height - b.height);
-                const index = result[0].index;
-                const div = this.parent.querySelectorAll(".column")[index]
-                div.appendChild(item);
-                result[0].height += item.clientHeight;
-            });
-
             newItems.forEach(item => this.resizeObserver.observe(item));
             this.resizeId = undefined;
         }.bind(this), 500);
     }
+
+    areEqualSchematics(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+
+    generateSchematic(columnCount) {
+
+        var result = [];
+        var schematic = [];
+
+        for (let i = 0; i < columnCount; i++) {
+            result.push({ index: i, height: 0 });
+            schematic.push([]);
+        }
+
+        for (let i = 0; i < this.items.length; i++) {
+            const item = this.items[i];
+            result.sort((a, b) => a.height - b.height);
+            const index = result[0].index;
+            result[0].height += item.clientHeight;
+            schematic[index].push(i);
+        }
+
+        return schematic;
+    }
 }