ninegrid2 6.701.0 → 6.702.0

package/dist/bundle.cjs.js

@@ -121126,33 +121126,36 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+
+
 		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
+			window.removeEventListener("mouseup", onDrop);
 			dragBar.remove();
 
-			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;
+			this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 
-			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
 			const delta = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
+				? e.clientX - prev.getBoundingClientRect().left
+				: e.clientY - prev.getBoundingClientRect().top;
 
-			// 📌 각 패널에 크기 반영
+			// 📌 사이즈 적용
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.width = `${totalSize - delta}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.height = `${totalSize - delta}px`;
 			}
 		};
 
@@ -121160,6 +121163,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/dist/bundle.esm.js

@@ -121122,33 +121122,36 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+
+
 		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
+			window.removeEventListener("mouseup", onDrop);
 			dragBar.remove();
 
-			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;
+			this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 
-			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
 			const delta = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
+				? e.clientX - prev.getBoundingClientRect().left
+				: e.clientY - prev.getBoundingClientRect().top;
 
-			// 📌 각 패널에 크기 반영
+			// 📌 사이즈 적용
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.width = `${totalSize - delta}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.height = `${totalSize - delta}px`;
 			}
 		};
 
@@ -121156,6 +121159,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/dist/nx/nxSplitter.js

@@ -82,62 +82,35 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp1 = (e) => {
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-			const parentRect = parent.getBoundingClientRect();
-			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
-
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			if (!prev || !next) return;
-
-			const prevRect = prev.getBoundingClientRect();
-
-			// 📌 드래그 위치에서 prev 시작 위치를 뺀 상대 위치 (prev 기준)
-			const position = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
-
-			// prev 시작 위치 기준으로 상대 크기 설정
-			if (this.#mode === "h") {
-				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - (prevRect.left - parentRect.left) - position - splitterSize}px`;
-			} else {
-				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - (prevRect.top - parentRect.top) - position - splitterSize}px`;
-			}
-		};
 
 		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
+			window.removeEventListener("mouseup", onDrop);
 			dragBar.remove();
 
-			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;
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 
-			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
 			const delta = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
+				? e.clientX - prev.getBoundingClientRect().left
+				: e.clientY - prev.getBoundingClientRect().top;
 
-			// 📌 각 패널에 크기 반영
+			// 📌 사이즈 적용
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.width = `${totalSize - delta}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.height = `${totalSize - delta}px`;
 			}
 		};
 
@@ -145,6 +118,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};

package/package.json

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

package/src/nx/nxSplitter.js

@@ -82,62 +82,35 @@ class nxSplitter extends HTMLElement {
 		};
 
 
-		const onUp1 = (e) => {
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-			const parentRect = parent.getBoundingClientRect();
-			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
-
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			if (!prev || !next) return;
-
-			const prevRect = prev.getBoundingClientRect();
-
-			// 📌 드래그 위치에서 prev 시작 위치를 뺀 상대 위치 (prev 기준)
-			const position = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
-
-			// prev 시작 위치 기준으로 상대 크기 설정
-			if (this.#mode === "h") {
-				prev.style.width = `${position}px`;
-				next.style.width = `${parentRect.width - (prevRect.left - parentRect.left) - position - splitterSize}px`;
-			} else {
-				prev.style.height = `${position}px`;
-				next.style.height = `${parentRect.height - (prevRect.top - parentRect.top) - position - splitterSize}px`;
-			}
-		};
 
 		const onUp = (e) => {
 			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
+			window.removeEventListener("mouseup", onDrop);
 			dragBar.remove();
 
-			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;
+			const splitterSize = this.#mode === "h" ? this.offsetWidth : this.offsetHeight;
 
-			// 📌 사용자의 드래그 위치 기준으로 prev 상대 거리 계산
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
 			const delta = this.#mode === "h"
-				? e.clientX - prevRect.left
-				: e.clientY - prevRect.top;
+				? e.clientX - prev.getBoundingClientRect().left
+				: e.clientY - prev.getBoundingClientRect().top;
 
-			// 📌 각 패널에 크기 반영
+			// 📌 사이즈 적용
 			if (this.#mode === "h") {
 				prev.style.width = `${delta}px`;
-				next.style.width = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.width = `${totalSize - delta}px`;
 			} else {
 				prev.style.height = `${delta}px`;
-				next.style.height = `${parentSize - nextOffset - splitterSize}px`;
+				next.style.height = `${totalSize - delta}px`;
 			}
 		};
 
@@ -145,6 +118,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		window.addEventListener("mousemove", onMove);
 		window.addEventListener("mouseup", onUp);
 	};