ninegrid2 6.851.0 → 6.853.0

package/dist/bundle.cjs.js

@@ -121168,153 +121168,6 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#startDrag_BAK = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//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 computedStyle = getComputedStyle(parent);
-		parseFloat(computedStyle.paddingLeft) || 0;
-		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-
-
-		let el = parent;
-		let totalPadding = 0;
-
-		while (el) {
-			console.log(el, el.parentElement, el.host);
-			if (el instanceof Element) {
-				const style = getComputedStyle(el);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.parentElement;
-			} else if (el instanceof ShadowRoot) {
-				el = el.host;
-			} else {
-				break;
-			}
-		}
-
-
-
-
-		console.log(totalPadding, e.clientX, parentRect.left);
-
-		const left = e.clientX - parentRect.left + totalPadding;
-		const top = e.clientY - parentRect.top + paddingTop;
-
-		console.log("1------", left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || 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 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") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-	#startDrag = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 
@@ -121453,6 +121306,127 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+
+		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const clickOffset = this.#mode === "h"
+			? e.clientX - splitterRect.left
+			: e.clientY - splitterRect.top;
+
+		//const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
+		Object.assign(dragBar.style, {
+			position: "absolute",
+			zIndex: "999",
+			background: "#666",
+			opacity: "0.6",
+			pointerEvents: "none"
+		});
+
+		const root = this.getRootNode({ composed: true });
+		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
+
+		//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 - (parent.offsetLeft + parent.clientLeft);
+		const top = e.clientY - (parent.offsetTop + parentRect.top);
+
+		console.log(left, top);
+
+		// 방향별 위치 설정
+		if (this.#mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.left = `${left}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.top = `${top}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// 👇 부모 노드 기준으로 삽입
+		(parent.shadowRoot || 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 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") {
+				dragBar.style.left = `${relative}px`;
+			} else {
+				dragBar.style.top = `${relative}px`;
+			}
+		};
+
+
+
+		const onUp = (e) => {
+
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
+
+			let delta = this.#mode === "h"
+				? e.clientX - prev.getBoundingClientRect().left - clickOffset
+				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
+			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
+
+			const min = 1;
+			const max = totalSize - 1;
+			delta = Math.max(min, Math.min(delta, max));
+
+
+			const prev1 = prev.style.flex;
+			const prev2 = next.style.flex;
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			// 📌 사이즈 적용
+			if (this.#mode === "h") {
+				prev.style.width = `${delta}px`;
+				next.style.width = `${totalSize - delta}px`;
+			} else {
+				prev.style.height = `${delta}px`;
+				next.style.height = `${totalSize - delta}px`;
+			}
+
+			prev.style.flex = prev1;
+			next.style.flex = prev2;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/dist/bundle.esm.js

@@ -121164,153 +121164,6 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#startDrag_BAK = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//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 computedStyle = getComputedStyle(parent);
-		parseFloat(computedStyle.paddingLeft) || 0;
-		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-
-
-		let el = parent;
-		let totalPadding = 0;
-
-		while (el) {
-			console.log(el, el.parentElement, el.host);
-			if (el instanceof Element) {
-				const style = getComputedStyle(el);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.parentElement;
-			} else if (el instanceof ShadowRoot) {
-				el = el.host;
-			} else {
-				break;
-			}
-		}
-
-
-
-
-		console.log(totalPadding, e.clientX, parentRect.left);
-
-		const left = e.clientX - parentRect.left + totalPadding;
-		const top = e.clientY - parentRect.top + paddingTop;
-
-		console.log("1------", left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || 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 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") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-	#startDrag = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 
@@ -121449,6 +121302,127 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+
+		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const clickOffset = this.#mode === "h"
+			? e.clientX - splitterRect.left
+			: e.clientY - splitterRect.top;
+
+		//const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
+		Object.assign(dragBar.style, {
+			position: "absolute",
+			zIndex: "999",
+			background: "#666",
+			opacity: "0.6",
+			pointerEvents: "none"
+		});
+
+		const root = this.getRootNode({ composed: true });
+		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
+
+		//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 - (parent.offsetLeft + parent.clientLeft);
+		const top = e.clientY - (parent.offsetTop + parentRect.top);
+
+		console.log(left, top);
+
+		// 방향별 위치 설정
+		if (this.#mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.left = `${left}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.top = `${top}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// 👇 부모 노드 기준으로 삽입
+		(parent.shadowRoot || 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 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") {
+				dragBar.style.left = `${relative}px`;
+			} else {
+				dragBar.style.top = `${relative}px`;
+			}
+		};
+
+
+
+		const onUp = (e) => {
+
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
+
+			let delta = this.#mode === "h"
+				? e.clientX - prev.getBoundingClientRect().left - clickOffset
+				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
+			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
+
+			const min = 1;
+			const max = totalSize - 1;
+			delta = Math.max(min, Math.min(delta, max));
+
+
+			const prev1 = prev.style.flex;
+			const prev2 = next.style.flex;
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			// 📌 사이즈 적용
+			if (this.#mode === "h") {
+				prev.style.width = `${delta}px`;
+				next.style.width = `${totalSize - delta}px`;
+			} else {
+				prev.style.height = `${delta}px`;
+				next.style.height = `${totalSize - delta}px`;
+			}
+
+			prev.style.flex = prev1;
+			next.style.flex = prev2;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/dist/nx/nxSplitter.js

@@ -23,153 +23,6 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#startDrag_BAK = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//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 computedStyle = getComputedStyle(parent);
-		const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-
-
-		let el = parent;
-		let totalPadding = 0;
-
-		while (el) {
-			console.log(el, el.parentElement, el.host)
-			if (el instanceof Element) {
-				const style = getComputedStyle(el);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.parentElement;
-			} else if (el instanceof ShadowRoot) {
-				el = el.host;
-			} else {
-				break;
-			}
-		}
-
-
-
-
-		console.log(totalPadding, e.clientX, parentRect.left);
-
-		const left = e.clientX - parentRect.left + totalPadding;
-		const top = e.clientY - parentRect.top + paddingTop;
-
-		console.log("1------", left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || 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 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") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-	#startDrag = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 
@@ -308,6 +161,127 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+
+		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const clickOffset = this.#mode === "h"
+			? e.clientX - splitterRect.left
+			: e.clientY - splitterRect.top;
+
+		//const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
+		Object.assign(dragBar.style, {
+			position: "absolute",
+			zIndex: "999",
+			background: "#666",
+			opacity: "0.6",
+			pointerEvents: "none"
+		});
+
+		const root = this.getRootNode({ composed: true });
+		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
+
+		//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 - (parent.offsetLeft + parent.clientLeft);
+		const top = e.clientY - (parent.offsetTop + parentRect.top);
+
+		console.log(left, top);
+
+		// 방향별 위치 설정
+		if (this.#mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.left = `${left}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.top = `${top}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// 👇 부모 노드 기준으로 삽입
+		(parent.shadowRoot || 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 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") {
+				dragBar.style.left = `${relative}px`;
+			} else {
+				dragBar.style.top = `${relative}px`;
+			}
+		};
+
+
+
+		const onUp = (e) => {
+
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
+
+			let delta = this.#mode === "h"
+				? e.clientX - prev.getBoundingClientRect().left - clickOffset
+				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
+			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
+
+			const min = 1;
+			const max = totalSize - 1;
+			delta = Math.max(min, Math.min(delta, max));
+
+
+			const prev1 = prev.style.flex;
+			const prev2 = next.style.flex;
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			// 📌 사이즈 적용
+			if (this.#mode === "h") {
+				prev.style.width = `${delta}px`;
+				next.style.width = `${totalSize - delta}px`;
+			} else {
+				prev.style.height = `${delta}px`;
+				next.style.height = `${totalSize - delta}px`;
+			}
+
+			prev.style.flex = prev1;
+			next.style.flex = prev2;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/package.json

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

package/src/nx/nxSplitter.js

@@ -23,153 +23,6 @@ class nxSplitter extends HTMLElement {
 	};
 
 	#startDrag_BAK = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//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 computedStyle = getComputedStyle(parent);
-		const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-
-
-		let el = parent;
-		let totalPadding = 0;
-
-		while (el) {
-			console.log(el, el.parentElement, el.host)
-			if (el instanceof Element) {
-				const style = getComputedStyle(el);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.parentElement;
-			} else if (el instanceof ShadowRoot) {
-				el = el.host;
-			} else {
-				break;
-			}
-		}
-
-
-
-
-		console.log(totalPadding, e.clientX, parentRect.left);
-
-		const left = e.clientX - parentRect.left + totalPadding;
-		const top = e.clientY - parentRect.top + paddingTop;
-
-		console.log("1------", left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || 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 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") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-	#startDrag = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 
@@ -308,6 +161,127 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+
+		e.preventDefault(); // 기본 drag/select 동작 제거
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const clickOffset = this.#mode === "h"
+			? e.clientX - splitterRect.left
+			: e.clientY - splitterRect.top;
+
+		//const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
+		Object.assign(dragBar.style, {
+			position: "absolute",
+			zIndex: "999",
+			background: "#666",
+			opacity: "0.6",
+			pointerEvents: "none"
+		});
+
+		const root = this.getRootNode({ composed: true });
+		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
+
+		//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 - (parent.offsetLeft + parent.clientLeft);
+		const top = e.clientY - (parent.offsetTop + parentRect.top);
+
+		console.log(left, top);
+
+		// 방향별 위치 설정
+		if (this.#mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.left = `${left}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.top = `${top}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// 👇 부모 노드 기준으로 삽입
+		(parent.shadowRoot || 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 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") {
+				dragBar.style.left = `${relative}px`;
+			} else {
+				dragBar.style.top = `${relative}px`;
+			}
+		};
+
+
+
+		const onUp = (e) => {
+
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+
+			// 기준: prev + next 너비 합계
+			const totalSize = this.#mode === "h"
+				? prev.offsetWidth + next.offsetWidth
+				: prev.offsetHeight + next.offsetHeight;
+
+			// prev 기준 상대 거리 (드래그 거리)
+
+			let delta = this.#mode === "h"
+				? e.clientX - prev.getBoundingClientRect().left - clickOffset
+				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
+			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
+
+			const min = 1;
+			const max = totalSize - 1;
+			delta = Math.max(min, Math.min(delta, max));
+
+
+			const prev1 = prev.style.flex;
+			const prev2 = next.style.flex;
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			// 📌 사이즈 적용
+			if (this.#mode === "h") {
+				prev.style.width = `${delta}px`;
+				next.style.width = `${totalSize - delta}px`;
+			} else {
+				prev.style.height = `${delta}px`;
+				next.style.height = `${totalSize - delta}px`;
+			}
+
+			prev.style.flex = prev1;
+			next.style.flex = prev2;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);