ninegrid2 6.970.0 → 6.972.0

package/dist/bundle.cjs.js

@@ -118111,6 +118111,7 @@ customElements.define("ng-filter-panel", ngFilterPanel);
 
 class NineGridContainer extends HTMLElement
 {
+	#created = false;
 	#colResizer;
 	#colMover;
 	#rowMover;
@@ -118591,7 +118592,9 @@ class NineGridContainer extends HTMLElement
 	};
 	
 	#initialize = () => {
-		
+
+		if (this.#created) return;
+
 		this.originFormat = this.outerHTML;
 		
 		this.uuid = ninegrid.randomUUID();	//crypto.randomUUID();
@@ -118910,6 +118913,7 @@ class NineGridContainer extends HTMLElement
 			this.addEventListener(handler.type, handler.listener);
 		} */
 
+		this.#created = true;
 	};
 	
 	#initOption = () => {
@@ -121898,7 +121902,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) {
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -121906,19 +121912,20 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
+		// 기존 자식 요소들을 미리 저장합니다.
 		const children = Array.from(this.children);
 
-		if (children.length <= 0) return;
+		if (children.length === 0) {
+			return;
+		}
 
-		console.log(children);
-		console.log(numRows, numColumns, this.getAttribute('columns'));
+		const numColumns = Number(this.getAttribute('columns') || "1");
+		const numRows = Number(this.getAttribute('rows') || "1");
 
-		this.innerHTML = '';
+		// 기존 자식 노드를 안전하게 제거합니다.
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
 
 		// CSS Grid 컨테이너 스타일 설정
 		let gridColumns = '';
@@ -121944,8 +121951,6 @@ class NxLayout extends HTMLElement {
 		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
 		// 자식 요소를 다시 추가하고 스플리터 삽입
 		const renderedLayout = [];
 		let childIndex = 0;
@@ -121953,12 +121958,7 @@ class NxLayout extends HTMLElement {
 		for (let row = 0; row < numRows; row++) {
 			for (let col = 0; col < numColumns; col++) {
 
-				console.log(row, col, childIndex);
-
 				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
 					const childWrapper = document.createElement('div');
 					childWrapper.style.width = '100%';
 					childWrapper.style.height = '100%';

package/dist/bundle.esm.js

@@ -118107,6 +118107,7 @@ customElements.define("ng-filter-panel", ngFilterPanel);
 
 class NineGridContainer extends HTMLElement
 {
+	#created = false;
 	#colResizer;
 	#colMover;
 	#rowMover;
@@ -118587,7 +118588,9 @@ class NineGridContainer extends HTMLElement
 	};
 	
 	#initialize = () => {
-		
+
+		if (this.#created) return;
+
 		this.originFormat = this.outerHTML;
 		
 		this.uuid = ninegrid.randomUUID();	//crypto.randomUUID();
@@ -118906,6 +118909,7 @@ class NineGridContainer extends HTMLElement
 			this.addEventListener(handler.type, handler.listener);
 		} */
 
+		this.#created = true;
 	};
 	
 	#initOption = () => {
@@ -121894,7 +121898,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) {
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -121902,19 +121908,20 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
+		// 기존 자식 요소들을 미리 저장합니다.
 		const children = Array.from(this.children);
 
-		if (children.length <= 0) return;
+		if (children.length === 0) {
+			return;
+		}
 
-		console.log(children);
-		console.log(numRows, numColumns, this.getAttribute('columns'));
+		const numColumns = Number(this.getAttribute('columns') || "1");
+		const numRows = Number(this.getAttribute('rows') || "1");
 
-		this.innerHTML = '';
+		// 기존 자식 노드를 안전하게 제거합니다.
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
 
 		// CSS Grid 컨테이너 스타일 설정
 		let gridColumns = '';
@@ -121940,8 +121947,6 @@ class NxLayout extends HTMLElement {
 		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
 		// 자식 요소를 다시 추가하고 스플리터 삽입
 		const renderedLayout = [];
 		let childIndex = 0;
@@ -121949,12 +121954,7 @@ class NxLayout extends HTMLElement {
 		for (let row = 0; row < numRows; row++) {
 			for (let col = 0; col < numColumns; col++) {
 
-				console.log(row, col, childIndex);
-
 				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
 					const childWrapper = document.createElement('div');
 					childWrapper.style.width = '100%';
 					childWrapper.style.height = '100%';

package/dist/etc/ninegridContainer.js

@@ -22,6 +22,7 @@ import { ngFiltering } from "../utils/ngFiltering.js";
 
 export class NineGridContainer extends HTMLElement
 {
+	#created = false;
 	#colResizer;
 	#colMover;
 	#rowMover;
@@ -505,7 +506,9 @@ export class NineGridContainer extends HTMLElement
 	};
 	
 	#initialize = () => {
-		
+
+		if (this.#created) return;
+
 		this.originFormat = this.outerHTML;
 		
 		this.uuid = ninegrid.randomUUID();	//crypto.randomUUID();
@@ -827,6 +830,7 @@ export class NineGridContainer extends HTMLElement
 			this.addEventListener(handler.type, handler.listener);
 		} */
 
+		this.#created = true;
 	};
 	
 	#initOption = () => {

package/dist/nx/nxLayout.js

@@ -7,7 +7,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) {
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -15,19 +17,20 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
+		// 기존 자식 요소들을 미리 저장합니다.
 		const children = Array.from(this.children);
 
-		if (children.length <= 0) return;
+		if (children.length === 0) {
+			return;
+		}
 
-		console.log(children);
-		console.log(numRows, numColumns, this.getAttribute('columns'));
+		const numColumns = Number(this.getAttribute('columns') || "1");
+		const numRows = Number(this.getAttribute('rows') || "1");
 
-		this.innerHTML = '';
+		// 기존 자식 노드를 안전하게 제거합니다.
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
 
 		// CSS Grid 컨테이너 스타일 설정
 		let gridColumns = '';
@@ -53,8 +56,6 @@ class NxLayout extends HTMLElement {
 		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
 		// 자식 요소를 다시 추가하고 스플리터 삽입
 		const renderedLayout = [];
 		let childIndex = 0;
@@ -62,12 +63,7 @@ class NxLayout extends HTMLElement {
 		for (let row = 0; row < numRows; row++) {
 			for (let col = 0; col < numColumns; col++) {
 
-				console.log(row, col, childIndex);
-
 				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
 					const childWrapper = document.createElement('div');
 					childWrapper.style.width = '100%';
 					childWrapper.style.height = '100%';
@@ -95,4 +91,4 @@ class NxLayout extends HTMLElement {
 }
 
 // 커스텀 엘리먼트를 등록
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);

package/package.json

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

package/src/etc/ninegridContainer.js

@@ -22,6 +22,7 @@ import { ngFiltering } from "../utils/ngFiltering.js";
 
 export class NineGridContainer extends HTMLElement
 {
+	#created = false;
 	#colResizer;
 	#colMover;
 	#rowMover;
@@ -505,7 +506,9 @@ export class NineGridContainer extends HTMLElement
 	};
 	
 	#initialize = () => {
-		
+
+		if (this.#created) return;
+
 		this.originFormat = this.outerHTML;
 		
 		this.uuid = ninegrid.randomUUID();	//crypto.randomUUID();
@@ -827,6 +830,7 @@ export class NineGridContainer extends HTMLElement
 			this.addEventListener(handler.type, handler.listener);
 		} */
 
+		this.#created = true;
 	};
 	
 	#initOption = () => {

package/src/nx/nxLayout.js

@@ -7,7 +7,9 @@ class NxLayout extends HTMLElement {
 
 	attributeChangedCallback(name, oldValue, newValue) {
 		// 속성이 변경되면 레이아웃을 다시 렌더링합니다.
-		//this.#render();
+		if (oldValue !== newValue) {
+			this.#render();
+		}
 	}
 
 	static get observedAttributes() {
@@ -15,19 +17,20 @@ class NxLayout extends HTMLElement {
 	}
 
 	#render() {
-		// 이전 콘텐츠를 모두 제거합니다.
-		console.log("====================");
-
-		const numColumns = Number(this.getAttribute('columns') || "1");
-		const numRows = Number(this.getAttribute('rows') || "1");
+		// 기존 자식 요소들을 미리 저장합니다.
 		const children = Array.from(this.children);
 
-		if (children.length <= 0) return;
+		if (children.length === 0) {
+			return;
+		}
 
-		console.log(children);
-		console.log(numRows, numColumns, this.getAttribute('columns'));
+		const numColumns = Number(this.getAttribute('columns') || "1");
+		const numRows = Number(this.getAttribute('rows') || "1");
 
-		this.innerHTML = '';
+		// 기존 자식 노드를 안전하게 제거합니다.
+		while (this.firstChild) {
+			this.removeChild(this.firstChild);
+		}
 
 		// CSS Grid 컨테이너 스타일 설정
 		let gridColumns = '';
@@ -53,8 +56,6 @@ class NxLayout extends HTMLElement {
 		this.style.gridTemplateColumns = gridColumns.trim();
 		this.style.gridTemplateRows = gridRows.trim();
 
-
-
 		// 자식 요소를 다시 추가하고 스플리터 삽입
 		const renderedLayout = [];
 		let childIndex = 0;
@@ -62,12 +63,7 @@ class NxLayout extends HTMLElement {
 		for (let row = 0; row < numRows; row++) {
 			for (let col = 0; col < numColumns; col++) {
 
-				console.log(row, col, childIndex);
-
 				if (children[childIndex]) {
-
-					console.log(children[childIndex]);
-
 					const childWrapper = document.createElement('div');
 					childWrapper.style.width = '100%';
 					childWrapper.style.height = '100%';
@@ -95,4 +91,4 @@ class NxLayout extends HTMLElement {
 }
 
 // 커스텀 엘리먼트를 등록
-customElements.define('nx-layout', NxLayout);
+customElements.define('nx-layout', NxLayout);