ninegrid2 6.990.0 → 6.992.0

package/dist/bundle.cjs.js

@@ -121901,8 +121901,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+		if (oldValue !== newValue) {
 			this.#render();
 		}
 	}
@@ -121915,64 +121914,55 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("11111");
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
+		// 메인 컨테이너의 CSS Grid 템플릿 설정
+		let gridRows = '';
+		for (let i = 0; i < numRows; i++) {
+			gridRows += '1fr ';
+			if (i < numRows - 1) {
+				gridRows += '8px '; // 세로 스플리터 높이
+			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
+		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
-			rowWrapper.style.height = '100%';
 
+			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
+					const panel = children[childIndex];
+					panel.style.gridRow = `${gridRowOffset}`;
+					panel.style.gridColumn = `${col * 2 + 1}`;
+					this.appendChild(panel);
 					childIndex++;
 				}
 
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
+					splitter.style.gridRow = `${gridRowOffset}`;
+					splitter.style.gridColumn = `${col * 2 + 2}`;
+					this.appendChild(splitter);
 				}
 			}
 
-			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
-			}
+			gridRowOffset += 2; // 다음 행으로 이동
 		}
 	}
 }

package/dist/bundle.esm.js

@@ -121897,8 +121897,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+		if (oldValue !== newValue) {
 			this.#render();
 		}
 	}
@@ -121911,64 +121910,55 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("11111");
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
+		// 메인 컨테이너의 CSS Grid 템플릿 설정
+		let gridRows = '';
+		for (let i = 0; i < numRows; i++) {
+			gridRows += '1fr ';
+			if (i < numRows - 1) {
+				gridRows += '8px '; // 세로 스플리터 높이
+			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
+		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
-
-			let columnTemplate = '';
-			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
-				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
-				}
-			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
-			rowWrapper.style.height = '100%';
 
+			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
+					const panel = children[childIndex];
+					panel.style.gridRow = `${gridRowOffset}`;
+					panel.style.gridColumn = `${col * 2 + 1}`;
+					this.appendChild(panel);
 					childIndex++;
 				}
 
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
+					splitter.style.gridRow = `${gridRowOffset}`;
+					splitter.style.gridColumn = `${col * 2 + 2}`;
+					this.appendChild(splitter);
 				}
 			}
 
-			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
-			}
+			gridRowOffset += 2; // 다음 행으로 이동
 		}
 	}
 }

package/dist/nx/nxLayout.js

@@ -6,8 +6,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+		if (oldValue !== newValue) {
 			this.#render();
 		}
 	}
@@ -20,66 +19,66 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("11111")
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
+		// 메인 컨테이너의 CSS Grid 템플릿 설정
+		let gridRows = '';
+		for (let i = 0; i < numRows; i++) {
+			gridRows += '1fr ';
+			if (i < numRows - 1) {
+				gridRows += '8px '; // 세로 스플리터 높이
+			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
+		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
 
-			let columnTemplate = '';
+			// 가로 스플리터와 패널을 위한 그리드 템플릿을 생성
+			let gridColumns = '';
 			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
+				gridColumns += '1fr ';
 				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
+					gridColumns += '8px '; // 가로 스플리터 너비
 				}
 			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
-			rowWrapper.style.height = '100%';
 
+			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
+					const panel = children[childIndex];
+					panel.style.gridRow = `${gridRowOffset}`;
+					panel.style.gridColumn = `${col * 2 + 1}`;
+					this.appendChild(panel);
 					childIndex++;
 				}
 
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
+					splitter.style.gridRow = `${gridRowOffset}`;
+					splitter.style.gridColumn = `${col * 2 + 2}`;
+					this.appendChild(splitter);
 				}
 			}
 
-			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
-			}
+			gridRowOffset += 2; // 다음 행으로 이동
 		}
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);

package/package.json

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

package/src/nx/nxLayout.js

@@ -6,8 +6,7 @@ class NxLayout extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
-		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		if (oldValue !== newValue) { // 값 변경이 있을 때만 실행하는 것이 효율적
+		if (oldValue !== newValue) {
 			this.#render();
 		}
 	}
@@ -20,66 +19,66 @@ class NxLayout extends HTMLElement {
 		const children = Array.from(this.children);
 		if (children.length === 0) return;
 
+		// 기존 자식 노드를 모두 제거하여 초기화
 		while (this.firstChild) {
 			this.removeChild(this.firstChild);
 		}
 
-		console.log("11111")
-
 		const columnsLayout = (this.getAttribute('columns') || '1').split(',').map(Number);
 		const numRows = columnsLayout.length;
 
-		let gridTemplate = '';
-		for (const numCols of columnsLayout) {
-			gridTemplate += `1fr `; // 행의 높이
+		// 메인 컨테이너의 CSS Grid 템플릿 설정
+		let gridRows = '';
+		for (let i = 0; i < numRows; i++) {
+			gridRows += '1fr ';
+			if (i < numRows - 1) {
+				gridRows += '8px '; // 세로 스플리터 높이
+			}
 		}
 
 		this.style.display = 'grid';
 		this.style.width = '100%';
 		this.style.height = '100%';
-		this.style.gridTemplateRows = gridTemplate.trim();
+		this.style.gridTemplateRows = gridRows.trim();
+		this.style.gridTemplateColumns = '1fr'; // 메인 그리드는 하나의 열만 갖도록 설정
 
 		let childIndex = 0;
+		let gridRowOffset = 1;
 
 		for (let row = 0; row < numRows; row++) {
 			const numColumns = columnsLayout[row];
-			const rowWrapper = document.createElement('div');
-			rowWrapper.style.display = 'grid';
 
-			let columnTemplate = '';
+			// 가로 스플리터와 패널을 위한 그리드 템플릿을 생성
+			let gridColumns = '';
 			for (let i = 0; i < numColumns; i++) {
-				columnTemplate += '1fr ';
+				gridColumns += '1fr ';
 				if (i < numColumns - 1) {
-					columnTemplate += '8px ';
+					gridColumns += '8px '; // 가로 스플리터 너비
 				}
 			}
-			rowWrapper.style.gridTemplateColumns = columnTemplate.trim();
-			rowWrapper.style.height = '100%';
 
+			// 각 행의 패널과 가로 스플리터를 직접 배치
 			for (let col = 0; col < numColumns; col++) {
 				if (children[childIndex]) {
-					// 불필요한 래퍼(wrapper)를 제거하고 원본 자식 요소를 직접 추가
-					rowWrapper.appendChild(children[childIndex]);
+					const panel = children[childIndex];
+					panel.style.gridRow = `${gridRowOffset}`;
+					panel.style.gridColumn = `${col * 2 + 1}`;
+					this.appendChild(panel);
 					childIndex++;
 				}
 
 				if (col < numColumns - 1) {
 					const splitter = document.createElement('nx-splitter');
 					splitter.setAttribute('direction', 'horizontal');
-					rowWrapper.appendChild(splitter);
+					splitter.style.gridRow = `${gridRowOffset}`;
+					splitter.style.gridColumn = `${col * 2 + 2}`;
+					this.appendChild(splitter);
 				}
 			}
 
-			this.appendChild(rowWrapper);
-
-			if (row < numRows - 1) {
-				const splitter = document.createElement('nx-splitter');
-				splitter.setAttribute('direction', 'vertical');
-				splitter.style.gridColumn = `1 / -1`;
-				this.appendChild(splitter);
-			}
+			gridRowOffset += 2; // 다음 행으로 이동
 		}
 	}
 }
 
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);