ninegrid2 6.1012.0 → 6.1013.0

package/dist/bundle.cjs.js

@@ -121369,6 +121369,8 @@ customElements.define('nx-tab-page', nxTabPage);
 
 class nxSplitter extends HTMLElement {
 	#mode;
+	#originalPrevFlex;
+	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -121382,18 +121384,21 @@ class nxSplitter extends HTMLElement {
 	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
+		if (!prev || !next) {
+			this.#mode = this.classList.contains('h') ? "h" : "v";
+			return;
+		}
 
-		const prevRect = prev?.getBoundingClientRect();
-		const nextRect = next?.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
 
 		if (this.classList.contains('h')) {
 			this.#mode = "h";
-		}
-		else if (this.classList.contains('v')) {
+		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
-		}
-		else {
-			this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
+		} else {
+			// 형제 요소의 위치를 비교하여 모드를 감지
+			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
 
@@ -121404,7 +121409,7 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		const clickOffset = isHorizontal
+		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
 
@@ -121432,109 +121437,61 @@ class nxSplitter extends HTMLElement {
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		const dragBarOffsetParent = dragBar.offsetParent;
-
-		if (!dragBarOffsetParent) {
-			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove();
-			return;
-		}
-
-		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
+		const parentRect = parent.getBoundingClientRect();
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
-		let initialPosInOffsetParent;
+		let dragBarPosInParent;
 		if (isHorizontal) {
-			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
+			dragBarPosInParent = e.clientX - parentRect.left;
 			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPosInOffsetParent}px`;
+			dragBar.style.left = `${dragBarPosInParent}px`;
 			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
-			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
+			dragBarPosInParent = e.clientY - parentRect.top;
 			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPosInOffsetParent}px`;
+			dragBar.style.top = `${dragBarPosInParent}px`;
 			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
-		const minLimit = isHorizontal
-			? prevRect.left - dragBarOffsetParentRect.left
-			: prevRect.top - dragBarOffsetParentRect.top;
-		const maxLimit = isHorizontal
-			? nextRect.right - dragBarOffsetParentRect.left
-			: nextRect.bottom - dragBarOffsetParentRect.top;
-
+		const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+		const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			const currentPosInOffsetParent = isHorizontal
-				? clientPos - dragBarOffsetParentRect.left
-				: clientPos - dragBarOffsetParentRect.top;
-
-			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
-
+			const currentPosInParent = isHorizontal ? clientPos - parentRect.left : clientPos - parentRect.top;
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
 			if (isHorizontal) {
 				dragBar.style.left = `${clampedPos}px`;
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (upEvent) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const finalDragBarPosInOffsetParent = isHorizontal
+			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// ⭐⭐ offsetParentTotalSize 변수를 여기서 정의합니다 ⭐⭐
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
-			// prev의 시작점 (offsetParent 기준)
-			const prevStartPosInOffsetParent = isHorizontal
-				? prevRect.left - dragBarOffsetParentRect.left
-				: prevRect.top - dragBarOffsetParentRect.top;
-
-			// prev의 새로운 크기 (dragBar의 왼쪽 위치 - prev의 왼쪽 위치)
-			let finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
-
-			// next의 새로운 크기 (offsetParent의 전체 크기 - prev 크기 - 스플리터 두께)
-			// 이 방법이 전체 공간을 정확히 채우면서 오차를 마지막 패널에 몰아넣는 데 더 견고합니다.
-			const MIN_PANEL_SIZE_PX = 1;
-			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, finalPrevSize) - clickOffset;
-			let finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
-
-			// flex 속성 저장 및 복원
-			const originalPrevFlex = prev.style.flex;
-			const originalNextFlex = next.style.flex;
+			const prevStartPosInParent = isHorizontal
+				? prevRect.left - parentRect.left
+				: prevRect.top - parentRect.top;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
-			prev.style.flex = "none";
-			next.style.flex = "none";
+			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
+			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
 
-			console.log(finalPrevSize, finalNextSize, offsetParentTotalSize);
-
-			if (isHorizontal) {
-				prev.style.width = `${finalPrevSize}px`;
-				next.style.width = `${finalNextSize}px`;
-			} else {
-				prev.style.height = `${finalPrevSize}px`;
-				next.style.height = `${finalNextSize}px`;
-			}
-
-			// 작업 완료 후 원래 flex 값으로 복원
-			prev.style.flex = originalPrevFlex;
-			next.style.flex = originalNextFlex;
+			// flex 속성 사용
+			prev.style.flex = `0 0 ${newPrevSize}px`;
+			next.style.flex = `0 0 ${newNextSize}px`;
 		};
 
 		window.addEventListener("mousemove", onMove);
@@ -121549,18 +121506,17 @@ class nxSplitter extends HTMLElement {
 
 		const contents = this.innerHTML.trim();
 		const gripClass = `grip-${this.#mode}`;
-		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>`: `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
+		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>` : `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
 
 		this.innerHTML = "";
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-          <style>
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
-          </style>
-          
-          ${gripTmpl}
-       `;
+           <style>
+              @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
+              ${ninegrid.getCustomPath(this,"nxSplitter.css")}
+           </style>
+           ${gripTmpl}
+        `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 
@@ -121573,62 +121529,32 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("resize", () => this.#prepareLayout());
 	};
 
-	#isLastSplitter = () => {
-		const parent = this.parentElement;
-		if (!parent) return false;
-
-		const allSplitters = [...parent.querySelectorAll("nx-splitter")];
-		return allSplitters.at(-1) === this;
-	};
-
-	#getSiblingSizeSum = () => {
-		const parent = this.parentElement;
-		if (!parent) return 0;
-
-		const isHorizontal = this.#mode === "h";
-
-		return Array.from(parent.children).reduce((sum, el) => {
-			const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
-			return sum + size;
-		}, 0);
-	};
-
-
 	#prepareLayout = () => {
-
 		const isHorizontal = this.#mode === "h";
+		const parent = this.parentElement;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
-		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		const currentTotal = this.#getSiblingSizeSum();
-		const nextTotal = isHorizontal
-			? parent.getBoundingClientRect().width
-			: parent.getBoundingClientRect().height;
-
-		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
+		const parentRect = parent.getBoundingClientRect();
+		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const newPrevSize = nextTotal * prevSize / currentTotal;
-		const newNextSize = nextTotal * nextSize / currentTotal;
+		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
+			const rect = el.getBoundingClientRect();
+			const size = isHorizontal ? rect.width : rect.height;
+			return sum + size;
+		}, 0);
 
+		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (isHorizontal) {
-			prev.style.width = `${newPrevSize}px`;
+		// 리사이즈 시 비율 유지
+		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
+		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
 
-			if (this.#isLastSplitter()) {
-				next.style.width = `${newNextSize}px`;
-			}
-		} else {
-			prev.style.height = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.height = `${newNextSize}px`;
-			}
-		}
+		prev.style.flex = `0 0 ${newPrevSize}px`;
+		next.style.flex = `0 0 ${newNextSize}px`;
 	};
-
 }
 
 customElements.define("nx-splitter", nxSplitter);

package/dist/bundle.esm.js

@@ -121365,6 +121365,8 @@ customElements.define('nx-tab-page', nxTabPage);
 
 class nxSplitter extends HTMLElement {
 	#mode;
+	#originalPrevFlex;
+	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -121378,18 +121380,21 @@ class nxSplitter extends HTMLElement {
 	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
+		if (!prev || !next) {
+			this.#mode = this.classList.contains('h') ? "h" : "v";
+			return;
+		}
 
-		const prevRect = prev?.getBoundingClientRect();
-		const nextRect = next?.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
 
 		if (this.classList.contains('h')) {
 			this.#mode = "h";
-		}
-		else if (this.classList.contains('v')) {
+		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
-		}
-		else {
-			this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
+		} else {
+			// 형제 요소의 위치를 비교하여 모드를 감지
+			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
 
@@ -121400,7 +121405,7 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		const clickOffset = isHorizontal
+		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
 
@@ -121428,109 +121433,61 @@ class nxSplitter extends HTMLElement {
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
 
-		const dragBarOffsetParent = dragBar.offsetParent;
-
-		if (!dragBarOffsetParent) {
-			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove();
-			return;
-		}
-
-		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
+		const parentRect = parent.getBoundingClientRect();
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
-		let initialPosInOffsetParent;
+		let dragBarPosInParent;
 		if (isHorizontal) {
-			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
+			dragBarPosInParent = e.clientX - parentRect.left;
 			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPosInOffsetParent}px`;
+			dragBar.style.left = `${dragBarPosInParent}px`;
 			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
-			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
+			dragBarPosInParent = e.clientY - parentRect.top;
 			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPosInOffsetParent}px`;
+			dragBar.style.top = `${dragBarPosInParent}px`;
 			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
-		const minLimit = isHorizontal
-			? prevRect.left - dragBarOffsetParentRect.left
-			: prevRect.top - dragBarOffsetParentRect.top;
-		const maxLimit = isHorizontal
-			? nextRect.right - dragBarOffsetParentRect.left
-			: nextRect.bottom - dragBarOffsetParentRect.top;
-
+		const minLimit = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+		const maxLimit = isHorizontal ? nextRect.right - parentRect.left : nextRect.bottom - parentRect.top;
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			const currentPosInOffsetParent = isHorizontal
-				? clientPos - dragBarOffsetParentRect.left
-				: clientPos - dragBarOffsetParentRect.top;
-
-			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
-
+			const currentPosInParent = isHorizontal ? clientPos - parentRect.left : clientPos - parentRect.top;
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInParent, maxLimit));
 			if (isHorizontal) {
 				dragBar.style.left = `${clampedPos}px`;
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (upEvent) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			const finalDragBarPosInOffsetParent = isHorizontal
+			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// ⭐⭐ offsetParentTotalSize 변수를 여기서 정의합니다 ⭐⭐
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
-			// prev의 시작점 (offsetParent 기준)
-			const prevStartPosInOffsetParent = isHorizontal
-				? prevRect.left - dragBarOffsetParentRect.left
-				: prevRect.top - dragBarOffsetParentRect.top;
-
-			// prev의 새로운 크기 (dragBar의 왼쪽 위치 - prev의 왼쪽 위치)
-			let finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
-
-			// next의 새로운 크기 (offsetParent의 전체 크기 - prev 크기 - 스플리터 두께)
-			// 이 방법이 전체 공간을 정확히 채우면서 오차를 마지막 패널에 몰아넣는 데 더 견고합니다.
-			const MIN_PANEL_SIZE_PX = 1;
-			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, finalPrevSize) - clickOffset;
-			let finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
-
-			// flex 속성 저장 및 복원
-			const originalPrevFlex = prev.style.flex;
-			const originalNextFlex = next.style.flex;
+			const prevStartPosInParent = isHorizontal
+				? prevRect.left - parentRect.left
+				: prevRect.top - parentRect.top;
 
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
-			prev.style.flex = "none";
-			next.style.flex = "none";
+			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
+			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
 
-			console.log(finalPrevSize, finalNextSize, offsetParentTotalSize);
-
-			if (isHorizontal) {
-				prev.style.width = `${finalPrevSize}px`;
-				next.style.width = `${finalNextSize}px`;
-			} else {
-				prev.style.height = `${finalPrevSize}px`;
-				next.style.height = `${finalNextSize}px`;
-			}
-
-			// 작업 완료 후 원래 flex 값으로 복원
-			prev.style.flex = originalPrevFlex;
-			next.style.flex = originalNextFlex;
+			// flex 속성 사용
+			prev.style.flex = `0 0 ${newPrevSize}px`;
+			next.style.flex = `0 0 ${newNextSize}px`;
 		};
 
 		window.addEventListener("mousemove", onMove);
@@ -121545,18 +121502,17 @@ class nxSplitter extends HTMLElement {
 
 		const contents = this.innerHTML.trim();
 		const gripClass = `grip-${this.#mode}`;
-		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>`: `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
+		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>` : `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
 
 		this.innerHTML = "";
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-          <style>
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
-          </style>
-          
-          ${gripTmpl}
-       `;
+           <style>
+              @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
+              ${ninegrid.getCustomPath(this,"nxSplitter.css")}
+           </style>
+           ${gripTmpl}
+        `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 
@@ -121569,62 +121525,32 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("resize", () => this.#prepareLayout());
 	};
 
-	#isLastSplitter = () => {
-		const parent = this.parentElement;
-		if (!parent) return false;
-
-		const allSplitters = [...parent.querySelectorAll("nx-splitter")];
-		return allSplitters.at(-1) === this;
-	};
-
-	#getSiblingSizeSum = () => {
-		const parent = this.parentElement;
-		if (!parent) return 0;
-
-		const isHorizontal = this.#mode === "h";
-
-		return Array.from(parent.children).reduce((sum, el) => {
-			const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
-			return sum + size;
-		}, 0);
-	};
-
-
 	#prepareLayout = () => {
-
 		const isHorizontal = this.#mode === "h";
+		const parent = this.parentElement;
 		const prev = this.previousElementSibling;
 		const next = this.nextElementSibling;
-		const parent = this.parentElement;
 		if (!prev || !next || !parent) return;
 
-		const currentTotal = this.#getSiblingSizeSum();
-		const nextTotal = isHorizontal
-			? parent.getBoundingClientRect().width
-			: parent.getBoundingClientRect().height;
-
-		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
+		const parentRect = parent.getBoundingClientRect();
+		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const newPrevSize = nextTotal * prevSize / currentTotal;
-		const newNextSize = nextTotal * nextSize / currentTotal;
+		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
+			const rect = el.getBoundingClientRect();
+			const size = isHorizontal ? rect.width : rect.height;
+			return sum + size;
+		}, 0);
 
+		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		if (isHorizontal) {
-			prev.style.width = `${newPrevSize}px`;
+		// 리사이즈 시 비율 유지
+		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
+		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
 
-			if (this.#isLastSplitter()) {
-				next.style.width = `${newNextSize}px`;
-			}
-		} else {
-			prev.style.height = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.height = `${newNextSize}px`;
-			}
-		}
+		prev.style.flex = `0 0 ${newPrevSize}px`;
+		next.style.flex = `0 0 ${newNextSize}px`;
 	};
-
 }
 
 customElements.define("nx-splitter", nxSplitter);