From e15cd5bac424ae99552d4d8d964ad012a7bc9358 Mon Sep 17 00:00:00 2001
From: defaultkavy <defaultkavy@gmail.com>
Date: Thu, 29 Aug 2024 02:46:06 +0800
Subject: [PATCH] v0.1.2 update: Update layout render when add or remove child
 from $Layout. fix: Fix $Layout compute and render with wrong height. change:
 Repository host.

---
 lib/$Layout.ts | 12 ++++++++++--
 package.json   | 10 +++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/lib/$Layout.ts b/lib/$Layout.ts
index de4e5bf..25c7730 100644
--- a/lib/$Layout.ts
+++ b/lib/$Layout.ts
@@ -18,12 +18,15 @@ export class $Layout extends $Container<HTMLElement> {
         new ResizeObserver((records) => {
             if (!this.inDOM()) return;
             this.render();
-            this.scrollCompute()
             this.dom.dispatchEvent(new Event('resize'));
         }).observe(this.dom);
         document.addEventListener('scroll', (e) => {
             if (e.target === this.root().dom) this.scrollCompute();
         })
+        new IntersectionObserver((entries) => {
+            if (!this.inDOM()) return;
+            this.render();
+        }).observe(this.dom)
     }
 
     /**
@@ -121,6 +124,7 @@ export class $Layout extends $Container<HTMLElement> {
     }
 
     render() {
+        if (!this.inDOM()) return;
         if (this._property.TYPE === 'justified') {
             const ROW_LIST = this.justifiedCompute();
             let ROW_POSITION_Y = 0;
@@ -164,8 +168,12 @@ export class $Layout extends $Container<HTMLElement> {
                 }
                 COL_POSITION_X += COL_WIDTH + this._property.GAP;
             }
-            if (COL_LIST.length) this.css({height: `${COL_LIST.sort((a, b) => b.height - a.height)[0].height}px`})
+            if (COL_LIST.length) {
+                const heightestCOL = COL_LIST.sort((a, b) => b.height - a.height)[0];
+                this.css({height: `${heightestCOL.height + heightestCOL.items.length * this._property.GAP}px`})
+            }
         }
+        this.scrollCompute();
         return this;
     }
 
diff --git a/package.json b/package.json
index e706790..074567d 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,21 @@
 {
   "name": "@elexis/layout",
   "description": "A simple justified/waterfall layout for ElexisJS",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": {
     "name": "defaultkavy",
     "email": "defaultkavy@gmail.com",
-    "url": "https://github.com/defaultkavy"
+    "url": "https://git.defaultkavy.com/defaultkavy"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elexisjs/layout.git"
+    "url": "git+https://git.defaultkavy.com/elexis/layout.git"
   },
   "module": "index.ts",
   "bugs": {
-    "url": "https://github.com/elexisjs/layout/issues"
+    "url": "https://git.defaultkavy.com/elexis/layout/issues"
   },
-  "homepage": "https://github.com/elexisjs/layout",
+  "homepage": "https://git.defaultkavy.com/elexis/layout",
   "keywords": ["web", "front-end", "lib", "fluent", "framework"],
   "license": "ISC",
   "type": "module",