ninegrid2 6.699.0 → 6.701.0

package/dist/bundle.cjs.js

@@ -121131,38 +121131,35 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const parentRect = parent.getBoundingClientRect();
 			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const parentSize = this.#mode === "h" ? parent.clientWidth : parent.clientHeight;
 
 			const prev = this.previousElementSibling;
 			const next = this.nextElementSibling;
 			if (!prev || !next) return;
 
 			const prevRect = prev.getBoundingClientRect();
+			const nextOffset = this.#mode === "h" ? next.offsetLeft : next.offsetTop;
 
-			// ✅ 상대 위치 계산: prev 기준으로 얼마나 움직였는지
+			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
 			const delta = this.#mode === "h"
 				? e.clientX - prevRect.left
 				: e.clientY - prevRect.top;
 
-			console.log(e.clientX, prevRect.left, delta);
-
+			// 📌 각 패널에 크기 반영
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-
-				// next 너비는 전체 - prev의 offset - delta - splitter
-				next.style.width = `${parentRect.width - prevRect.left - delta - splitterSize}px`;
+				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentRect.height - prevRect.top - delta - splitterSize}px`;
+				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
 			}
-
-			console.log(e.clientX, prevRect.left, delta, prev.style.width);
 		};
 
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/dist/bundle.esm.js

@@ -121127,38 +121127,35 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const parentRect = parent.getBoundingClientRect();
 			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const parentSize = this.#mode === "h" ? parent.clientWidth : parent.clientHeight;
 
 			const prev = this.previousElementSibling;
 			const next = this.nextElementSibling;
 			if (!prev || !next) return;
 
 			const prevRect = prev.getBoundingClientRect();
+			const nextOffset = this.#mode === "h" ? next.offsetLeft : next.offsetTop;
 
-			// ✅ 상대 위치 계산: prev 기준으로 얼마나 움직였는지
+			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
 			const delta = this.#mode === "h"
 				? e.clientX - prevRect.left
 				: e.clientY - prevRect.top;
 
-			console.log(e.clientX, prevRect.left, delta);
-
+			// 📌 각 패널에 크기 반영
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-
-				// next 너비는 전체 - prev의 offset - delta - splitter
-				next.style.width = `${parentRect.width - prevRect.left - delta - splitterSize}px`;
+				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentRect.height - prevRect.top - delta - splitterSize}px`;
+				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
 			}
-
-			console.log(e.clientX, prevRect.left, delta, prev.style.width);
 		};
 
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/dist/nx/nxSplitter.js

@@ -116,38 +116,35 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const parentRect = parent.getBoundingClientRect();
 			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const parentSize = this.#mode === "h" ? parent.clientWidth : parent.clientHeight;
 
 			const prev = this.previousElementSibling;
 			const next = this.nextElementSibling;
 			if (!prev || !next) return;
 
 			const prevRect = prev.getBoundingClientRect();
+			const nextOffset = this.#mode === "h" ? next.offsetLeft : next.offsetTop;
 
-			// ✅ 상대 위치 계산: prev 기준으로 얼마나 움직였는지
+			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
 			const delta = this.#mode === "h"
 				? e.clientX - prevRect.left
 				: e.clientY - prevRect.top;
 
-			console.log(e.clientX, prevRect.left, delta);
-
+			// 📌 각 패널에 크기 반영
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-
-				// next 너비는 전체 - prev의 offset - delta - splitter
-				next.style.width = `${parentRect.width - prevRect.left - delta - splitterSize}px`;
+				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentRect.height - prevRect.top - delta - splitterSize}px`;
+				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
 			}
-
-			console.log(e.clientX, prevRect.left, delta, prev.style.width);
 		};
 
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/package.json

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

package/src/nx/nxSplitter.js

@@ -116,38 +116,35 @@ class nxSplitter extends HTMLElement {
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const parentRect = parent.getBoundingClientRect();
 			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
+			const parentSize = this.#mode === "h" ? parent.clientWidth : parent.clientHeight;
 
 			const prev = this.previousElementSibling;
 			const next = this.nextElementSibling;
 			if (!prev || !next) return;
 
 			const prevRect = prev.getBoundingClientRect();
+			const nextOffset = this.#mode === "h" ? next.offsetLeft : next.offsetTop;
 
-			// ✅ 상대 위치 계산: prev 기준으로 얼마나 움직였는지
+			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
 			const delta = this.#mode === "h"
 				? e.clientX - prevRect.left
 				: e.clientY - prevRect.top;
 
-			console.log(e.clientX, prevRect.left, delta);
-
+			// 📌 각 패널에 크기 반영
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-
-				// next 너비는 전체 - prev의 offset - delta - splitter
-				next.style.width = `${parentRect.width - prevRect.left - delta - splitterSize}px`;
+				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentRect.height - prevRect.top - delta - splitterSize}px`;
+				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
 			}
-
-			console.log(e.clientX, prevRect.left, delta, prev.style.width);
 		};
 
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};