ninegrid2 6.680.0 → 6.683.0

package/dist/bundle.cjs.js

@@ -121082,7 +121082,15 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const parent = this.getRootNode().host || this.parentElement;
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+
+		if (!parent || !prev || !next) return;
+
 		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
 		const left = e.clientX - parentRect.left;
 		const top = e.clientY - parentRect.top;
 
@@ -121102,17 +121110,19 @@ class nxSplitter extends HTMLElement {
 		// 👇 부모 노드 기준으로 삽입
 		parent.appendChild(dragBar);
 
+		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
+		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
+
 		const onMove = e => {
-			const rect = parent.getBoundingClientRect();
+			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
+			const position = Math.max(min, Math.min(clientPos, max));
+
+			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
 
 			if (this.#mode === "h") {
-				let left = e.clientX - rect.left;
-				left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
-				dragBar.style.left = `${left}px`;
+				dragBar.style.left = `${relative}px`;
 			} else {
-				let top = e.clientY - rect.top;
-				top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
-				dragBar.style.top = `${top}px`;
+				dragBar.style.top = `${relative}px`;
 			}
 		};
 
@@ -121129,15 +121139,10 @@ class nxSplitter extends HTMLElement {
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
-			// 형제 요소들
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-
-			if (!prev || !next) return;
-
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
 				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
+				//next.style.width = `100%`;
 			} else {
 				prev.style.height = `${position}px`;
 				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;

package/dist/bundle.esm.js

@@ -121078,7 +121078,15 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const parent = this.getRootNode().host || this.parentElement;
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+
+		if (!parent || !prev || !next) return;
+
 		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
 		const left = e.clientX - parentRect.left;
 		const top = e.clientY - parentRect.top;
 
@@ -121098,17 +121106,19 @@ class nxSplitter extends HTMLElement {
 		// 👇 부모 노드 기준으로 삽입
 		parent.appendChild(dragBar);
 
+		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
+		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
+
 		const onMove = e => {
-			const rect = parent.getBoundingClientRect();
+			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
+			const position = Math.max(min, Math.min(clientPos, max));
+
+			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
 
 			if (this.#mode === "h") {
-				let left = e.clientX - rect.left;
-				left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
-				dragBar.style.left = `${left}px`;
+				dragBar.style.left = `${relative}px`;
 			} else {
-				let top = e.clientY - rect.top;
-				top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
-				dragBar.style.top = `${top}px`;
+				dragBar.style.top = `${relative}px`;
 			}
 		};
 
@@ -121125,15 +121135,10 @@ class nxSplitter extends HTMLElement {
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
-			// 형제 요소들
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-
-			if (!prev || !next) return;
-
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
 				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
+				//next.style.width = `100%`;
 			} else {
 				prev.style.height = `${position}px`;
 				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;

package/dist/nx/nxSplitter.js

@@ -37,7 +37,15 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const parent = this.getRootNode().host || this.parentElement;
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+
+		if (!parent || !prev || !next) return;
+
 		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
 		const left = e.clientX - parentRect.left;
 		const top = e.clientY - parentRect.top;
 
@@ -57,17 +65,19 @@ class nxSplitter extends HTMLElement {
 		// 👇 부모 노드 기준으로 삽입
 		parent.appendChild(dragBar);
 
+		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
+		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
+
 		const onMove = e => {
-			const rect = parent.getBoundingClientRect();
+			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
+			const position = Math.max(min, Math.min(clientPos, max));
+
+			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
 
 			if (this.#mode === "h") {
-				let left = e.clientX - rect.left;
-				left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
-				dragBar.style.left = `${left}px`;
+				dragBar.style.left = `${relative}px`;
 			} else {
-				let top = e.clientY - rect.top;
-				top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
-				dragBar.style.top = `${top}px`;
+				dragBar.style.top = `${relative}px`;
 			}
 		};
 
@@ -84,15 +94,10 @@ class nxSplitter extends HTMLElement {
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
-			// 형제 요소들
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-
-			if (!prev || !next) return;
-
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
 				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
+				//next.style.width = `100%`;
 			} else {
 				prev.style.height = `${position}px`;
 				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;

package/package.json

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

package/src/nx/nxSplitter.js

@@ -37,7 +37,15 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const parent = this.getRootNode().host || this.parentElement;
+		const prev = this.previousElementSibling;
+		const next = this.nextElementSibling;
+
+		if (!parent || !prev || !next) return;
+
 		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
 		const left = e.clientX - parentRect.left;
 		const top = e.clientY - parentRect.top;
 
@@ -57,17 +65,19 @@ class nxSplitter extends HTMLElement {
 		// 👇 부모 노드 기준으로 삽입
 		parent.appendChild(dragBar);
 
+		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
+		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
+
 		const onMove = e => {
-			const rect = parent.getBoundingClientRect();
+			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
+			const position = Math.max(min, Math.min(clientPos, max));
+
+			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
 
 			if (this.#mode === "h") {
-				let left = e.clientX - rect.left;
-				left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
-				dragBar.style.left = `${left}px`;
+				dragBar.style.left = `${relative}px`;
 			} else {
-				let top = e.clientY - rect.top;
-				top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
-				dragBar.style.top = `${top}px`;
+				dragBar.style.top = `${relative}px`;
 			}
 		};
 
@@ -84,15 +94,10 @@ class nxSplitter extends HTMLElement {
 				? e.clientX - parentRect.left
 				: e.clientY - parentRect.top;
 
-			// 형제 요소들
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-
-			if (!prev || !next) return;
-
 			if (this.#mode === "h") {
 				prev.style.width = `${position}px`;
 				next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
+				//next.style.width = `100%`;
 			} else {
 				prev.style.height = `${position}px`;
 				next.style.height = `${parentRect.height - position - this.offsetHeight}px`;