ninegrid2 6.1067.0 → 6.1068.0

package/dist/bundle.cjs.js

@@ -121407,7 +121407,7 @@ class nxSplitter extends HTMLElement {
 		const isHorizontal = this.#mode === "h";
 
 		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
+		isHorizontal ? e.clientX : e.clientY;
 
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
@@ -121488,10 +121488,19 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 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 totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -121499,32 +121508,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ 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);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121537,16 +121522,12 @@ 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(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/bundle.esm.js

@@ -121403,7 +121403,7 @@ class nxSplitter extends HTMLElement {
 		const isHorizontal = this.#mode === "h";
 
 		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
+		isHorizontal ? e.clientX : e.clientY;
 
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
@@ -121484,10 +121484,19 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 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 totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -121495,32 +121504,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ 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);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121533,16 +121518,12 @@ 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(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/nx/nxSplitter.js

@@ -121,10 +121,19 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 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 totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -132,32 +141,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ 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);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -170,16 +155,12 @@ 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(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/package.json

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

package/src/nx/nxSplitter.js

@@ -121,10 +121,19 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			// ⭐⭐ 드래그 바의 최종 위치를 기준으로 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 totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -132,32 +141,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ 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);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -170,16 +155,12 @@ 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(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};