ninegrid2 6.1068.0 → 6.1069.0

package/dist/bundle.cjs.js

@@ -121407,7 +121407,7 @@ class nxSplitter extends HTMLElement {
 		const isHorizontal = this.#mode === "h";
 
 		// ⭐ 마우스 초기 위치 저장 ⭐
-		isHorizontal ? e.clientX : e.clientY;
+		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
 
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
@@ -121488,19 +121488,10 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 dragOffset 계산 ⭐⭐
-			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
-			const initialSplitterPos = isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top;
-			const dragOffset = finalDragBarPos - initialSplitterPos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			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);
@@ -121508,8 +121499,32 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			allChildren.length - 1;
+			const totalGapSize = 0;//gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+
+
+			// 드래그로 인한 픽셀 변화량 계산
+			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
+			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
+
+			// ⭐ 정확한 dragOffset 계산 ⭐
+			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
+			const dragOffset = finalMousePos - initialMousePos;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			console.log(prevSize, newPrevSize);
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121522,12 +121537,16 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				//console.log(newSize)
+
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			console.log(`dragOffset: ${dragOffset}`);
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
+			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/bundle.esm.js

@@ -121403,7 +121403,7 @@ class nxSplitter extends HTMLElement {
 		const isHorizontal = this.#mode === "h";
 
 		// ⭐ 마우스 초기 위치 저장 ⭐
-		isHorizontal ? e.clientX : e.clientY;
+		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
 
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
@@ -121484,19 +121484,10 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 dragOffset 계산 ⭐⭐
-			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
-			const initialSplitterPos = isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top;
-			const dragOffset = finalDragBarPos - initialSplitterPos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			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);
@@ -121504,8 +121495,32 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			allChildren.length - 1;
+			const totalGapSize = 0;//gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+
+
+			// 드래그로 인한 픽셀 변화량 계산
+			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
+			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
+
+			// ⭐ 정확한 dragOffset 계산 ⭐
+			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
+			const dragOffset = finalMousePos - initialMousePos;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			console.log(prevSize, newPrevSize);
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121518,12 +121533,16 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				//console.log(newSize)
+
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			console.log(`dragOffset: ${dragOffset}`);
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
+			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/nx/nxSplitter.js

@@ -121,19 +121,10 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 dragOffset 계산 ⭐⭐
-			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
-			const initialSplitterPos = isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top;
-			const dragOffset = finalDragBarPos - initialSplitterPos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			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);
@@ -141,8 +132,32 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = 0;//gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+
+
+			// 드래그로 인한 픽셀 변화량 계산
+			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
+			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
+
+			// ⭐ 정확한 dragOffset 계산 ⭐
+			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
+			const dragOffset = finalMousePos - initialMousePos;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			console.log(prevSize, newPrevSize);
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -155,12 +170,16 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				//console.log(newSize)
+
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			console.log(`dragOffset: ${dragOffset}`);
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
+			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/package.json

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

package/src/nx/nxSplitter.js

@@ -121,19 +121,10 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 dragOffset 계산 ⭐⭐
-			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
-			const initialSplitterPos = isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top;
-			const dragOffset = finalDragBarPos - initialSplitterPos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
+			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);
@@ -141,8 +132,32 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
-			const totalFlexSpace = totalContainerSize - totalSplitterSize;
+			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
+			const gapCount = allChildren.length - 1;
+			const totalGapSize = 0;//gapCount * 8;
+
+			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
+			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
+
+// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
+
+
+			// 드래그로 인한 픽셀 변화량 계산
+			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
+			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
+
+			// ⭐ 정확한 dragOffset 계산 ⭐
+			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
+			const dragOffset = finalMousePos - initialMousePos;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			console.log(prevSize, newPrevSize);
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -155,12 +170,16 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
+				//console.log(newSize)
+
+				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			console.log(`dragOffset: ${dragOffset}`);
+			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
+			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};