ninegrid2 6.742.0 → 6.745.0

package/dist/bundle.cjs.js

@@ -121168,10 +121168,9 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isHorizontal = this.#mode === "h";
 
-
-
-		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
@@ -121179,27 +121178,27 @@ class nxSplitter extends HTMLElement {
 		if (!prev || !next || !parent) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const total = this.#mode === "h" ? parentRect.width : parentRect.height;
-		const available = total - splitterSize;
-		const eachSize = available / 2;
+		const totalSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (this.#mode === "h") {
-			prev.style.width = `${eachSize}px`;
+		// splitter 자체 포함한 전체 영역에서 prev/next 비율 계산
+		const splitterRatio = splitterSize / totalSize;
+		const eachRatio = (1 - splitterRatio) / 2;
+
+		if (isHorizontal) {
+			prev.style.width = `${eachRatio * 100}%`;
 
-			// ✔ 정확하게 마지막 splitter일 때만 next 조정
 			if (this.#isLastSplitter()) {
-				next.style.width = `${eachSize}px`;
-				//next.style.width = "100%";
+				next.style.width = `${eachRatio * 100}%`;
 			}
 		} else {
-			prev.style.height = `${eachSize}px`;
+			prev.style.height = `${eachRatio * 100}%`;
 
 			if (this.#isLastSplitter()) {
-				next.style.height = `${eachSize}px`;
-				//next.style.height = "100%";
+				next.style.height = `${eachRatio * 100}%`;
 			}
 		}
 	};
+
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/bundle.esm.js

@@ -121164,10 +121164,9 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isHorizontal = this.#mode === "h";
 
-
-
-		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
@@ -121175,27 +121174,27 @@ class nxSplitter extends HTMLElement {
 		if (!prev || !next || !parent) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const total = this.#mode === "h" ? parentRect.width : parentRect.height;
-		const available = total - splitterSize;
-		const eachSize = available / 2;
+		const totalSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (this.#mode === "h") {
-			prev.style.width = `${eachSize}px`;
+		// splitter 자체 포함한 전체 영역에서 prev/next 비율 계산
+		const splitterRatio = splitterSize / totalSize;
+		const eachRatio = (1 - splitterRatio) / 2;
+
+		if (isHorizontal) {
+			prev.style.width = `${eachRatio * 100}%`;
 
-			// ✔ 정확하게 마지막 splitter일 때만 next 조정
 			if (this.#isLastSplitter()) {
-				next.style.width = `${eachSize}px`;
-				//next.style.width = "100%";
+				next.style.width = `${eachRatio * 100}%`;
 			}
 		} else {
-			prev.style.height = `${eachSize}px`;
+			prev.style.height = `${eachRatio * 100}%`;
 
 			if (this.#isLastSplitter()) {
-				next.style.height = `${eachSize}px`;
-				//next.style.height = "100%";
+				next.style.height = `${eachRatio * 100}%`;
 			}
 		}
 	};
+
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/nx/nxSplitter.js

@@ -180,10 +180,9 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isHorizontal = this.#mode === "h";
 
-
-
-		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
@@ -191,27 +190,27 @@ class nxSplitter extends HTMLElement {
 		if (!prev || !next || !parent) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const total = this.#mode === "h" ? parentRect.width : parentRect.height;
-		const available = total - splitterSize;
-		const eachSize = available / 2;
+		const totalSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (this.#mode === "h") {
-			prev.style.width = `${eachSize}px`;
+		// splitter 자체 포함한 전체 영역에서 prev/next 비율 계산
+		const splitterRatio = splitterSize / totalSize;
+		const eachRatio = (1 - splitterRatio) / 2;
+
+		if (isHorizontal) {
+			prev.style.width = `${eachRatio * 100}%`;
 
-			// ✔ 정확하게 마지막 splitter일 때만 next 조정
 			if (this.#isLastSplitter()) {
-				next.style.width = `${eachSize}px`;
-				//next.style.width = "100%";
+				next.style.width = `${eachRatio * 100}%`;
 			}
 		} else {
-			prev.style.height = `${eachSize}px`;
+			prev.style.height = `${eachRatio * 100}%`;
 
 			if (this.#isLastSplitter()) {
-				next.style.height = `${eachSize}px`;
-				//next.style.height = "100%";
+				next.style.height = `${eachRatio * 100}%`;
 			}
 		}
 	};
+
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/package.json

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

package/src/nx/nxSplitter.js

@@ -180,10 +180,9 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#prepareLayout = () => {
+		const isHorizontal = this.#mode === "h";
 
-
-
-		const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+		const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
 		const parent = this.parentElement;
@@ -191,27 +190,27 @@ class nxSplitter extends HTMLElement {
 		if (!prev || !next || !parent) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const total = this.#mode === "h" ? parentRect.width : parentRect.height;
-		const available = total - splitterSize;
-		const eachSize = available / 2;
+		const totalSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (this.#mode === "h") {
-			prev.style.width = `${eachSize}px`;
+		// splitter 자체 포함한 전체 영역에서 prev/next 비율 계산
+		const splitterRatio = splitterSize / totalSize;
+		const eachRatio = (1 - splitterRatio) / 2;
+
+		if (isHorizontal) {
+			prev.style.width = `${eachRatio * 100}%`;
 
-			// ✔ 정확하게 마지막 splitter일 때만 next 조정
 			if (this.#isLastSplitter()) {
-				next.style.width = `${eachSize}px`;
-				//next.style.width = "100%";
+				next.style.width = `${eachRatio * 100}%`;
 			}
 		} else {
-			prev.style.height = `${eachSize}px`;
+			prev.style.height = `${eachRatio * 100}%`;
 
 			if (this.#isLastSplitter()) {
-				next.style.height = `${eachSize}px`;
-				//next.style.height = "100%";
+				next.style.height = `${eachRatio * 100}%`;
 			}
 		}
 	};
+
 }
 
 customElements.define("nx-splitter", nxSplitter);