ninegrid2 6.1054.0 → 6.1056.0

package/dist/bundle.cjs.js

@@ -121484,7 +121484,26 @@ class nxSplitter extends HTMLElement {
 
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-			const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
+
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+
+			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
+			const totalSplitterSize = allChildren.reduce((sum, child) => {
+				if (child.tagName.toLowerCase() === 'nx-splitter') {
+					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
+				}
+				return sum;
+			}, 0);
+
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+			console.log(totalContainerSize, totalSplitterSize, totalGapSize, totalFlexSpace);
 
 			// 드래그로 인한 픽셀 변화량 계산
 			const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
@@ -121496,22 +121515,8 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = prevSize + dragOffset;
 			const newNextSize = nextSize - dragOffset;
 
-			// 모든 패널의 총 픽셀 크기 합계 계산
-			allPanels.reduce((sum, panel) => {
-				return sum + (isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-			}, 0);
-
-			// 전체 스플리터의 총 픽셀 크기 합계 계산
-			const totalSplitterSize = allSplitters.reduce((sum, splitter) => {
-				return sum + (isHorizontal ? splitter.getBoundingClientRect().width : splitter.getBoundingClientRect().height);
-			}, 0);
-
-			// Flexbox 컨테이너의 전체 유효 공간 계산
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
-
 			let flexSum = 0;
-			allPanels.forEach((panel, index) => {
+			allPanels.forEach(panel => {
 				let newSize;
 				if (panel === prev) {
 					newSize = newPrevSize;
@@ -121521,12 +121526,13 @@ class nxSplitter extends HTMLElement {
 					newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
 				}
 
-				// 새로운 FlexBasis 계산
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
 			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};

package/dist/bundle.esm.js

@@ -121480,7 +121480,26 @@ class nxSplitter extends HTMLElement {
 
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-			const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
+
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+
+			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
+			const totalSplitterSize = allChildren.reduce((sum, child) => {
+				if (child.tagName.toLowerCase() === 'nx-splitter') {
+					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
+				}
+				return sum;
+			}, 0);
+
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+			console.log(totalContainerSize, totalSplitterSize, totalGapSize, totalFlexSpace);
 
 			// 드래그로 인한 픽셀 변화량 계산
 			const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
@@ -121492,22 +121511,8 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = prevSize + dragOffset;
 			const newNextSize = nextSize - dragOffset;
 
-			// 모든 패널의 총 픽셀 크기 합계 계산
-			allPanels.reduce((sum, panel) => {
-				return sum + (isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-			}, 0);
-
-			// 전체 스플리터의 총 픽셀 크기 합계 계산
-			const totalSplitterSize = allSplitters.reduce((sum, splitter) => {
-				return sum + (isHorizontal ? splitter.getBoundingClientRect().width : splitter.getBoundingClientRect().height);
-			}, 0);
-
-			// Flexbox 컨테이너의 전체 유효 공간 계산
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
-
 			let flexSum = 0;
-			allPanels.forEach((panel, index) => {
+			allPanels.forEach(panel => {
 				let newSize;
 				if (panel === prev) {
 					newSize = newPrevSize;
@@ -121517,12 +121522,13 @@ class nxSplitter extends HTMLElement {
 					newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
 				}
 
-				// 새로운 FlexBasis 계산
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
 			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};

package/dist/nx/nxSplitter.js

@@ -117,7 +117,26 @@ class nxSplitter extends HTMLElement {
 
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-			const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
+
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+
+			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
+			const totalSplitterSize = allChildren.reduce((sum, child) => {
+				if (child.tagName.toLowerCase() === 'nx-splitter') {
+					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
+				}
+				return sum;
+			}, 0);
+
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+			console.log(totalContainerSize, totalSplitterSize, totalGapSize, totalFlexSpace);
 
 			// 드래그로 인한 픽셀 변화량 계산
 			const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
@@ -129,22 +148,8 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = prevSize + dragOffset;
 			const newNextSize = nextSize - dragOffset;
 
-			// 모든 패널의 총 픽셀 크기 합계 계산
-			const totalPanelSize = allPanels.reduce((sum, panel) => {
-				return sum + (isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-			}, 0);
-
-			// 전체 스플리터의 총 픽셀 크기 합계 계산
-			const totalSplitterSize = allSplitters.reduce((sum, splitter) => {
-				return sum + (isHorizontal ? splitter.getBoundingClientRect().width : splitter.getBoundingClientRect().height);
-			}, 0);
-
-			// Flexbox 컨테이너의 전체 유효 공간 계산
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
-
 			let flexSum = 0;
-			allPanels.forEach((panel, index) => {
+			allPanels.forEach(panel => {
 				let newSize;
 				if (panel === prev) {
 					newSize = newPrevSize;
@@ -154,12 +159,13 @@ class nxSplitter extends HTMLElement {
 					newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
 				}
 
-				// 새로운 FlexBasis 계산
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
 			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};

package/package.json

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

package/src/nx/nxSplitter.js

@@ -117,7 +117,26 @@ class nxSplitter extends HTMLElement {
 
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-			const allSplitters = allChildren.filter(el => el.tagName.toLowerCase() === 'nx-splitter');
+
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+
+			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
+			const totalSplitterSize = allChildren.reduce((sum, child) => {
+				if (child.tagName.toLowerCase() === 'nx-splitter') {
+					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
+				}
+				return sum;
+			}, 0);
+
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+			console.log(totalContainerSize, totalSplitterSize, totalGapSize, totalFlexSpace);
 
 			// 드래그로 인한 픽셀 변화량 계산
 			const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
@@ -129,22 +148,8 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = prevSize + dragOffset;
 			const newNextSize = nextSize - dragOffset;
 
-			// 모든 패널의 총 픽셀 크기 합계 계산
-			const totalPanelSize = allPanels.reduce((sum, panel) => {
-				return sum + (isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-			}, 0);
-
-			// 전체 스플리터의 총 픽셀 크기 합계 계산
-			const totalSplitterSize = allSplitters.reduce((sum, splitter) => {
-				return sum + (isHorizontal ? splitter.getBoundingClientRect().width : splitter.getBoundingClientRect().height);
-			}, 0);
-
-			// Flexbox 컨테이너의 전체 유효 공간 계산
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
-
 			let flexSum = 0;
-			allPanels.forEach((panel, index) => {
+			allPanels.forEach(panel => {
 				let newSize;
 				if (panel === prev) {
 					newSize = newPrevSize;
@@ -154,12 +159,13 @@ class nxSplitter extends HTMLElement {
 					newSize = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
 				}
 
-				// 새로운 FlexBasis 계산
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
 			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};