ninegrid2 6.1018.0 → 6.1020.0

package/dist/bundle.cjs.js

@@ -121470,6 +121470,7 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
@@ -121479,19 +121480,48 @@ class nxSplitter extends HTMLElement {
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+			const parent = this.parentElement;
+			const parentRect = parent.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			const isHorizontal = this.#mode === "h";
+
+			const prevRect = prev.getBoundingClientRect();
+			const nextRect = next.getBoundingClientRect();
 
-			const prevStartPosInParent = isHorizontal
-				? prevRect.left - parentRect.left
-				: prevRect.top - parentRect.top;
+			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
+			// 새로 계산된 prev, next 패널의 픽셀 크기
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
-			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
+			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
+
+			const totalInitialSize = Array.from(parent.children)
+				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
+				.reduce((sum, el) => {
+					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+					return sum + size;
+				}, 0);
+
+			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
-			// flex 속성 사용
-			prev.style.flex = `0 0 ${newPrevSize}px`;
-			next.style.flex = `0 0 ${newNextSize}px`;
+			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
+			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+			allPanels.length;
+
+			allPanels.forEach(panel => {
+				const panelRect = panel.getBoundingClientRect();
+				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
+
+				let newSize = currentSize;
+				if (panel === prev) newSize = newPrevSize;
+				if (panel === next) newSize = newNextSize;
+
+				const newFlexBasis = newSize / newTotalSize;
+				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+			});
 		};
 
 		window.addEventListener("mousemove", onMove);

package/dist/bundle.esm.js

@@ -121466,6 +121466,7 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
@@ -121475,19 +121476,48 @@ class nxSplitter extends HTMLElement {
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+			const parent = this.parentElement;
+			const parentRect = parent.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			const isHorizontal = this.#mode === "h";
+
+			const prevRect = prev.getBoundingClientRect();
+			const nextRect = next.getBoundingClientRect();
 
-			const prevStartPosInParent = isHorizontal
-				? prevRect.left - parentRect.left
-				: prevRect.top - parentRect.top;
+			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
+			// 새로 계산된 prev, next 패널의 픽셀 크기
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
-			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
+			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
+
+			const totalInitialSize = Array.from(parent.children)
+				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
+				.reduce((sum, el) => {
+					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+					return sum + size;
+				}, 0);
+
+			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
-			// flex 속성 사용
-			prev.style.flex = `0 0 ${newPrevSize}px`;
-			next.style.flex = `0 0 ${newNextSize}px`;
+			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
+			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+			allPanels.length;
+
+			allPanels.forEach(panel => {
+				const panelRect = panel.getBoundingClientRect();
+				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
+
+				let newSize = currentSize;
+				if (panel === prev) newSize = newPrevSize;
+				if (panel === next) newSize = newNextSize;
+
+				const newFlexBasis = newSize / newTotalSize;
+				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+			});
 		};
 
 		window.addEventListener("mousemove", onMove);

package/dist/nx/nxSplitter.js

@@ -103,6 +103,7 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
@@ -112,19 +113,48 @@ class nxSplitter extends HTMLElement {
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+			const parent = this.parentElement;
+			const parentRect = parent.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			const isHorizontal = this.#mode === "h";
+
+			const prevRect = prev.getBoundingClientRect();
+			const nextRect = next.getBoundingClientRect();
 
-			const prevStartPosInParent = isHorizontal
-				? prevRect.left - parentRect.left
-				: prevRect.top - parentRect.top;
+			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
+			// 새로 계산된 prev, next 패널의 픽셀 크기
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
-			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
+			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
+
+			const totalInitialSize = Array.from(parent.children)
+				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
+				.reduce((sum, el) => {
+					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+					return sum + size;
+				}, 0);
+
+			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+
+			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
+			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+			const newTotalFlex = allPanels.length;
+
+			allPanels.forEach(panel => {
+				const panelRect = panel.getBoundingClientRect();
+				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
+
+				let newSize = currentSize;
+				if (panel === prev) newSize = newPrevSize;
+				if (panel === next) newSize = newNextSize;
 
-			// flex 속성 사용
-			prev.style.flex = `0 0 ${newPrevSize}px`;
-			next.style.flex = `0 0 ${newNextSize}px`;
+				const newFlexBasis = newSize / newTotalSize;
+				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+			});
 		};
 
 		window.addEventListener("mousemove", onMove);

package/package.json

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

package/src/nx/nxSplitter.js

@@ -103,6 +103,7 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
+		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
@@ -112,19 +113,48 @@ class nxSplitter extends HTMLElement {
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
+			const parent = this.parentElement;
+			const parentRect = parent.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
+			const prev = this.previousElementSibling;
+			const next = this.nextElementSibling;
+			const isHorizontal = this.#mode === "h";
+
+			const prevRect = prev.getBoundingClientRect();
+			const nextRect = next.getBoundingClientRect();
 
-			const prevStartPosInParent = isHorizontal
-				? prevRect.left - parentRect.left
-				: prevRect.top - parentRect.top;
+			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
+			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
 
+			// 새로 계산된 prev, next 패널의 픽셀 크기
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
-			const newNextSize = parentTotalSize - newPrevSize - splitterThickness;
+			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
+
+			const totalInitialSize = Array.from(parent.children)
+				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
+				.reduce((sum, el) => {
+					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+					return sum + size;
+				}, 0);
+
+			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+
+			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
+			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+			const newTotalFlex = allPanels.length;
+
+			allPanels.forEach(panel => {
+				const panelRect = panel.getBoundingClientRect();
+				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
+
+				let newSize = currentSize;
+				if (panel === prev) newSize = newPrevSize;
+				if (panel === next) newSize = newNextSize;
 
-			// flex 속성 사용
-			prev.style.flex = `0 0 ${newPrevSize}px`;
-			next.style.flex = `0 0 ${newNextSize}px`;
+				const newFlexBasis = newSize / newTotalSize;
+				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
+			});
 		};
 
 		window.addEventListener("mousemove", onMove);