ninegrid2 6.752.0 → 6.754.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`;
@@ -121167,30 +121166,60 @@ class nxSplitter extends HTMLElement {
 		return allSplitters.at(-1) === this;
 	};
 
+	#getSiblingSizes = () => {
+		const parent = this.parentElement;
+		if (!parent) return [];
+
+		const children = Array.from(parent.children);
+		return children.map((child) => {
+			const rect = child.getBoundingClientRect();
+			return {
+				element: child,
+				width: child.offsetWidth,
+				height: child.offsetHeight,
+				rect: {
+					x: rect.x,
+					y: rect.y,
+					width: rect.width,
+					height: rect.height,
+				}
+			};
+		});
+	};
+
 	#prepareLayout = () => {
+
+
+
 		const isHorizontal = this.#mode === "h";
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
+		isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		isHorizontal
+		const siblingSize = this.#getSiblingSizes();
+		console.log(siblingSize);
+
+		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		const totalPanelSize = prevSize + nextSize;
+		isHorizontal ? next.offsetWidth : next.offsetHeight;
+		const totalPanelSize = isHorizontal ? siblingSize.width : siblingSize.height;
 
 		// 현재 비율 계산
-		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
 
-		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newPrevSize = parentSize * prevRatio;
 		const newNextSize = totalPanelSize - newPrevSize;
 
+
+
+		console.log(newPrevSize, newNextSize, prevRatio);
+
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
 			//this.style.width = `${splitterSize}px`;

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`;
@@ -121163,30 +121162,60 @@ class nxSplitter extends HTMLElement {
 		return allSplitters.at(-1) === this;
 	};
 
+	#getSiblingSizes = () => {
+		const parent = this.parentElement;
+		if (!parent) return [];
+
+		const children = Array.from(parent.children);
+		return children.map((child) => {
+			const rect = child.getBoundingClientRect();
+			return {
+				element: child,
+				width: child.offsetWidth,
+				height: child.offsetHeight,
+				rect: {
+					x: rect.x,
+					y: rect.y,
+					width: rect.width,
+					height: rect.height,
+				}
+			};
+		});
+	};
+
 	#prepareLayout = () => {
+
+
+
 		const isHorizontal = this.#mode === "h";
-		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
+		isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		isHorizontal
+		const siblingSize = this.#getSiblingSizes();
+		console.log(siblingSize);
+
+		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
 
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		const totalPanelSize = prevSize + nextSize;
+		isHorizontal ? next.offsetWidth : next.offsetHeight;
+		const totalPanelSize = isHorizontal ? siblingSize.width : siblingSize.height;
 
 		// 현재 비율 계산
-		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
+		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
 
-		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newPrevSize = parentSize * prevRatio;
 		const newNextSize = totalPanelSize - newPrevSize;
 
+
+
+		console.log(newPrevSize, newNextSize, prevRatio);
+
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
 			//this.style.width = `${splitterSize}px`;

package/dist/nx/nxSplitter.js

@@ -179,7 +179,31 @@ class nxSplitter extends HTMLElement {
 		return allSplitters.at(-1) === this;
 	};
 
+	#getSiblingSizes = () => {
+		const parent = this.parentElement;
+		if (!parent) return [];
+
+		const children = Array.from(parent.children);
+		return children.map((child) => {
+			const rect = child.getBoundingClientRect();
+			return {
+				element: child,
+				width: child.offsetWidth,
+				height: child.offsetHeight,
+				rect: {
+					x: rect.x,
+					y: rect.y,
+					width: rect.width,
+					height: rect.height,
+				}
+			};
+		});
+	};
+
 	#prepareLayout = () => {
+
+
+
 		const isHorizontal = this.#mode === "h";
 		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
@@ -187,6 +211,9 @@ class nxSplitter extends HTMLElement {
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
+		const siblingSize = this.#getSiblingSizes();
+		console.log(siblingSize);
+
 		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
@@ -194,19 +221,23 @@ class nxSplitter extends HTMLElement {
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		const totalPanelSize = prevSize + nextSize;
+		const totalPanelSize = isHorizontal ? siblingSize.width : siblingSize.height;
 
 		// 현재 비율 계산
-		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
-		const nextRatio = 1 - prevRatio;
+		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
+		//const nextRatio = 1 - prevRatio;
 
 		// 새로운 available 크기
 		const available = parentSize - splitterSize;
 
-		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newPrevSize = parentSize * prevRatio;
 		const newNextSize = totalPanelSize - newPrevSize;
 
+
+
+		console.log(newPrevSize, newNextSize, prevRatio);
+
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
 			//this.style.width = `${splitterSize}px`;

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.752.0",
+  "version": "6.754.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxSplitter.js

@@ -179,7 +179,31 @@ class nxSplitter extends HTMLElement {
 		return allSplitters.at(-1) === this;
 	};
 
+	#getSiblingSizes = () => {
+		const parent = this.parentElement;
+		if (!parent) return [];
+
+		const children = Array.from(parent.children);
+		return children.map((child) => {
+			const rect = child.getBoundingClientRect();
+			return {
+				element: child,
+				width: child.offsetWidth,
+				height: child.offsetHeight,
+				rect: {
+					x: rect.x,
+					y: rect.y,
+					width: rect.width,
+					height: rect.height,
+				}
+			};
+		});
+	};
+
 	#prepareLayout = () => {
+
+
+
 		const isHorizontal = this.#mode === "h";
 		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
@@ -187,6 +211,9 @@ class nxSplitter extends HTMLElement {
 		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
+		const siblingSize = this.#getSiblingSizes();
+		console.log(siblingSize);
+
 		const parentSize = isHorizontal
 			? parent.getBoundingClientRect().width
 			: parent.getBoundingClientRect().height;
@@ -194,19 +221,23 @@ class nxSplitter extends HTMLElement {
 		// 현재 패널 크기 측정
 		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
 		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-		const totalPanelSize = prevSize + nextSize;
+		const totalPanelSize = isHorizontal ? siblingSize.width : siblingSize.height;
 
 		// 현재 비율 계산
-		///const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
-		const prevRatio = totalPanelSize ? prevSize / (totalPanelSize + splitterSize) : 0.5;
-		const nextRatio = 1 - prevRatio;
+		const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
+		//const prevRatio = parentSize ? prevSize / parentSize : 0.5;
+		//const nextRatio = 1 - prevRatio;
 
 		// 새로운 available 크기
 		const available = parentSize - splitterSize;
 
-		const newPrevSize = (totalPanelSize + splitterSize) * prevRatio;
+		const newPrevSize = parentSize * prevRatio;
 		const newNextSize = totalPanelSize - newPrevSize;
 
+
+
+		console.log(newPrevSize, newNextSize, prevRatio);
+
 		if (isHorizontal) {
 			prev.style.width = `${newPrevSize}px`;
 			//this.style.width = `${splitterSize}px`;

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`;