ninegrid2 6.751.0 → 6.753.0

package/dist/bundle.cjs.js

@@ -120963,7 +120963,6 @@ class nxTab extends HTMLElement {
         this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
 
         const resizeObserver = new ResizeObserver(() => {
-            console.log("111");
             const activeContent = this.shadowRoot.querySelector('.tab-page.active');
             if (activeContent) {
                 this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
@@ -121168,48 +121167,51 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
-		const isHorizontal = this.#mode === "h";
 
+
+
+		const isHorizontal = this.#mode === "h";
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
-
-		// 전체 부모 사이즈 측정
-		const parentSize = isHorizontal
+		isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-		// splitter 제외한 나머지 공간
-		const available = parentSize - splitterSize;
-
-		// 현재 prev/next 실제 크기 기준으로 비율 역산
+		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
 		const totalPanelSize = prevSize + nextSize;
 
-		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const nextRatio = 1 - prevRatio;
+		// 현재 비율 계산
+		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
+
+		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newNextSize = totalPanelSize - newPrevSize;
 
-		// 비율 기반으로 pixel 크기 다시 계산
-		const newPrevSize = available * prevRatio;
-		const newNextSize = available * nextRatio;
+		console.log(newPrevSize, newNextSize);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			next.style.width = `${newNextSize}px`;
-			this.style.width = `${splitterSize}px`;
+			//this.style.width = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.width = `${newNextSize}px`;
+			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			next.style.height = `${newNextSize}px`;
-			this.style.height = `${splitterSize}px`;
+			//this.style.height = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.height = `${newNextSize}px`;
+			}
 		}
 	};
 
-
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/bundle.esm.js

@@ -120959,7 +120959,6 @@ class nxTab extends HTMLElement {
         this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right'); });
 
         const resizeObserver = new ResizeObserver(() => {
-            console.log("111");
             const activeContent = this.shadowRoot.querySelector('.tab-page.active');
             if (activeContent) {
                 this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;
@@ -121164,48 +121163,51 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
-		const isHorizontal = this.#mode === "h";
 
+
+
+		const isHorizontal = this.#mode === "h";
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
-
-		// 전체 부모 사이즈 측정
-		const parentSize = isHorizontal
+		isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-		// splitter 제외한 나머지 공간
-		const available = parentSize - splitterSize;
-
-		// 현재 prev/next 실제 크기 기준으로 비율 역산
+		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
 		const totalPanelSize = prevSize + nextSize;
 
-		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const nextRatio = 1 - prevRatio;
+		// 현재 비율 계산
+		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
+
+		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newNextSize = totalPanelSize - newPrevSize;
 
-		// 비율 기반으로 pixel 크기 다시 계산
-		const newPrevSize = available * prevRatio;
-		const newNextSize = available * nextRatio;
+		console.log(newPrevSize, newNextSize);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			next.style.width = `${newNextSize}px`;
-			this.style.width = `${splitterSize}px`;
+			//this.style.width = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.width = `${newNextSize}px`;
+			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			next.style.height = `${newNextSize}px`;
-			this.style.height = `${splitterSize}px`;
+			//this.style.height = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.height = `${newNextSize}px`;
+			}
 		}
 	};
 
-
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/nx/nxSplitter.js

@@ -180,48 +180,55 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
-		const isHorizontal = this.#mode === "h";
 
+
+
+		const isHorizontal = this.#mode === "h";
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
-
-		// 전체 부모 사이즈 측정
 		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-		// splitter 제외한 나머지 공간
-		const available = parentSize - splitterSize;
-
-		// 현재 prev/next 실제 크기 기준으로 비율 역산
+		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
 		const totalPanelSize = prevSize + nextSize;
 
-		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		// 현재 비율 계산
+		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
 		const nextRatio = 1 - prevRatio;
 
-		// 비율 기반으로 pixel 크기 다시 계산
-		const newPrevSize = available * prevRatio;
-		const newNextSize = available * nextRatio;
+		// 새로운 available 크기
+		const available = parentSize - splitterSize;
+
+		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newNextSize = totalPanelSize - newPrevSize;
+
+		console.log(newPrevSize, newNextSize);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			next.style.width = `${newNextSize}px`;
-			this.style.width = `${splitterSize}px`;
+			//this.style.width = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.width = `${newNextSize}px`;
+			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			next.style.height = `${newNextSize}px`;
-			this.style.height = `${splitterSize}px`;
+			//this.style.height = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.height = `${newNextSize}px`;
+			}
 		}
 	};
 
-
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/nx/nxTab.js

@@ -115,7 +115,6 @@ class nxTab extends HTMLElement {
         this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right') });
 
         const resizeObserver = new ResizeObserver(() => {
-            console.log("111");
             const activeContent = this.shadowRoot.querySelector('.tab-page.active');
             if (activeContent) {
                 this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.751.0",
+  "version": "6.753.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxSplitter.js

@@ -180,48 +180,55 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
-		const isHorizontal = this.#mode === "h";
 
+
+
+		const isHorizontal = this.#mode === "h";
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
-
-		// 전체 부모 사이즈 측정
 		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
-		// splitter 제외한 나머지 공간
-		const available = parentSize - splitterSize;
-
-		// 현재 prev/next 실제 크기 기준으로 비율 역산
+		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
 		const totalPanelSize = prevSize + nextSize;
 
-		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		// 현재 비율 계산
+		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
 		const nextRatio = 1 - prevRatio;
 
-		// 비율 기반으로 pixel 크기 다시 계산
-		const newPrevSize = available * prevRatio;
-		const newNextSize = available * nextRatio;
+		// 새로운 available 크기
+		const available = parentSize - splitterSize;
+
+		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newNextSize = totalPanelSize - newPrevSize;
+
+		console.log(newPrevSize, newNextSize);
 
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
-			next.style.width = `${newNextSize}px`;
-			this.style.width = `${splitterSize}px`;
+			//this.style.width = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.width = `${newNextSize}px`;
+			}
 		} else {
 			prev.style.height = `${newPrevSize}px`;
-			next.style.height = `${newNextSize}px`;
-			this.style.height = `${splitterSize}px`;
+			//this.style.height = `${splitterSize}px`;
+
+			if (this.#isLastSplitter()) {
+				next.style.height = `${newNextSize}px`;
+			}
 		}
 	};
 
-
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/src/nx/nxTab.js

@@ -115,7 +115,6 @@ class nxTab extends HTMLElement {
         this.shadowRoot.querySelectorAll('.tab-page:not(.active)').forEach(el => { el.classList.add('exit-right') });
 
         const resizeObserver = new ResizeObserver(() => {
-            console.log("111");
             const activeContent = this.shadowRoot.querySelector('.tab-page.active');
             if (activeContent) {
                 this.shadowRoot.querySelector('.tab-pages').style.height = `${activeContent.scrollHeight}px`;