ninegrid2 6.1087.0 → 6.1088.0

package/dist/bundle.cjs.js

@@ -121492,8 +121492,6 @@ class nxSplitter extends HTMLElement {
 			const gapCount = allChildren.length > 1 ? allChildren.length - 1 : 0;
 			const totalGapSize = gapCount * gapSize;
 
-			console.log(totalGapSize);
-
 			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
 			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
 
@@ -121513,8 +121511,6 @@ class nxSplitter extends HTMLElement {
 				newNextSize = 0;
 			}
 
-			console.log(prevSize, nextSize, newPrevSize, newNextSize);
-
 			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
@@ -121956,6 +121952,40 @@ class NxLayout extends HTMLElement {
 
 customElements.define('nx-layout', NxLayout);
 
+class nxPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+            <div class="wrapper">
+                <div class="head">${caption}</div>
+                <div class="body">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.querySelector(".body").appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel", nxPanel);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/bundle.esm.js

@@ -121488,8 +121488,6 @@ class nxSplitter extends HTMLElement {
 			const gapCount = allChildren.length > 1 ? allChildren.length - 1 : 0;
 			const totalGapSize = gapCount * gapSize;
 
-			console.log(totalGapSize);
-
 			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
 			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
 
@@ -121509,8 +121507,6 @@ class nxSplitter extends HTMLElement {
 				newNextSize = 0;
 			}
 
-			console.log(prevSize, nextSize, newPrevSize, newNextSize);
-
 			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
@@ -121952,6 +121948,40 @@ class NxLayout extends HTMLElement {
 
 customElements.define('nx-layout', NxLayout);
 
+class nxPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+            <div class="wrapper">
+                <div class="head">${caption}</div>
+                <div class="body">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.querySelector(".body").appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel", nxPanel);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/index.js

@@ -106,6 +106,7 @@ import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
 import "./nx/nxTitle.js";
 import "./nx/nxLayout.js";
+import "./nx/nxPanel.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/dist/nx/nxPanel.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+            <div class="wrapper">
+                <div class="head">${caption}</div>
+                <div class="body">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.querySelector(".body").appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel", nxPanel);

package/dist/nx/nxSplitter.js

@@ -125,8 +125,6 @@ class nxSplitter extends HTMLElement {
 			const gapCount = allChildren.length > 1 ? allChildren.length - 1 : 0;
 			const totalGapSize = gapCount * gapSize;
 
-			console.log(totalGapSize);
-
 			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
 			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
 
@@ -146,8 +144,6 @@ class nxSplitter extends HTMLElement {
 				newNextSize = 0;
 			}
 
-			console.log(prevSize, nextSize, newPrevSize, newNextSize);
-
 			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
 			const totalSplitterSize = allChildren.reduce((sum, child) => {

package/package.json

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

package/src/index.js

@@ -106,6 +106,7 @@ import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
 import "./nx/nxTitle.js";
 import "./nx/nxLayout.js";
+import "./nx/nxPanel.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/src/nx/nxPanel.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	#init = () => {
+		const caption = this.getAttribute("caption");
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxPanel.css";
+				${ninegrid.getCustomPath(this,"nxPanel.css")}
+			</style>
+            
+            <div class="wrapper">
+                <div class="head">${caption}</div>
+                <div class="body">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.querySelector(".body").appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-panel", nxPanel);

package/src/nx/nxSplitter.js

@@ -125,8 +125,6 @@ class nxSplitter extends HTMLElement {
 			const gapCount = allChildren.length > 1 ? allChildren.length - 1 : 0;
 			const totalGapSize = gapCount * gapSize;
 
-			console.log(totalGapSize);
-
 			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
 			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
 
@@ -146,8 +144,6 @@ class nxSplitter extends HTMLElement {
 				newNextSize = 0;
 			}
 
-			console.log(prevSize, nextSize, newPrevSize, newNextSize);
-
 			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
 			const totalSplitterSize = allChildren.reduce((sum, child) => {

package/src/nx/nxSplitter-BAK.js

@@ -1,267 +0,0 @@
-import ninegrid from "../index.js";
-
-class nxSplitter extends HTMLElement {
-	#mode;
-
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	#detectMode = (el) => {
-		const prev = el.previousElementSibling;
-		const next = el.nextElementSibling;
-
-		const prevRect = prev?.getBoundingClientRect();
-		const nextRect = next?.getBoundingClientRect();
-
-		if (this.classList.contains('h')) {
-			this.#mode = "h";
-		}
-		else if (this.classList.contains('v')) {
-			this.#mode = "v";
-		}
-		else {
-			this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-		}
-	};
-
-	#startDrag = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const isHorizontal = this.#mode === "h";
-
-		const clickOffset = isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
-
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-
-		if (!parent || !prev || !next) {
-			console.warn("Spliter's parent or siblings not found.");
-			return;
-		}
-
-		(parent.shadowRoot || parent).appendChild(dragBar);
-
-		const dragBarOffsetParent = dragBar.offsetParent;
-
-		if (!dragBarOffsetParent) {
-			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
-			dragBar.remove();
-			return;
-		}
-
-		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
-
-		let initialPosInOffsetParent;
-		if (isHorizontal) {
-			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
-			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPosInOffsetParent}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
-			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPosInOffsetParent}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		const minLimit = isHorizontal
-			? prevRect.left - dragBarOffsetParentRect.left
-			: prevRect.top - dragBarOffsetParentRect.top;
-		const maxLimit = isHorizontal
-			? nextRect.right - dragBarOffsetParentRect.left
-			: nextRect.bottom - dragBarOffsetParentRect.top;
-
-
-		const onMove = moveEvent => {
-			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			const currentPosInOffsetParent = isHorizontal
-				? clientPos - dragBarOffsetParentRect.left
-				: clientPos - dragBarOffsetParentRect.top;
-
-			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
-
-			if (isHorizontal) {
-				dragBar.style.left = `${clampedPos}px`;
-			} else {
-				dragBar.style.top = `${clampedPos}px`;
-			}
-
-			console.log(clampedPos);
-		};
-
-		const onUp = (upEvent) => {
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-			const finalDragBarPosInOffsetParent = isHorizontal
-				? parseFloat(dragBar.style.left)
-				: parseFloat(dragBar.style.top);
-
-			// ⭐⭐ offsetParentTotalSize 변수를 여기서 정의합니다 ⭐⭐
-			const offsetParentTotalSize = isHorizontal
-				? dragBarOffsetParentRect.width
-				: dragBarOffsetParentRect.height;
-
-			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
-
-			// prev의 시작점 (offsetParent 기준)
-			const prevStartPosInOffsetParent = isHorizontal
-				? prevRect.left - dragBarOffsetParentRect.left
-				: prevRect.top - dragBarOffsetParentRect.top;
-
-			// prev의 새로운 크기 (dragBar의 왼쪽 위치 - prev의 왼쪽 위치)
-			let finalPrevSize = finalDragBarPosInOffsetParent - prevStartPosInOffsetParent;
-
-			// next의 새로운 크기 (offsetParent의 전체 크기 - prev 크기 - 스플리터 두께)
-			// 이 방법이 전체 공간을 정확히 채우면서 오차를 마지막 패널에 몰아넣는 데 더 견고합니다.
-			const MIN_PANEL_SIZE_PX = 1;
-			finalPrevSize = Math.max(MIN_PANEL_SIZE_PX, finalPrevSize) - clickOffset;
-			let finalNextSize = Math.max(MIN_PANEL_SIZE_PX, offsetParentTotalSize - finalPrevSize - splitterThickness);
-
-			// flex 속성 저장 및 복원
-			const originalPrevFlex = prev.style.flex;
-			const originalNextFlex = next.style.flex;
-
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			console.log(finalPrevSize, finalNextSize, offsetParentTotalSize);
-
-			if (isHorizontal) {
-				prev.style.width = `${finalPrevSize}px`;
-				next.style.width = `${finalNextSize}px`;
-			} else {
-				prev.style.height = `${finalPrevSize}px`;
-				next.style.height = `${finalNextSize}px`;
-			}
-
-			// 작업 완료 후 원래 flex 값으로 복원
-			prev.style.flex = originalPrevFlex;
-			next.style.flex = originalNextFlex;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-
-	#init = () => {
-		this.#detectMode(this);
-
-		this.classList.add(this.#mode);
-
-		const contents = this.innerHTML.trim();
-		const gripClass = `grip-${this.#mode}`;
-		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>`: `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
-
-		this.innerHTML = "";
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-          <style>
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
-          </style>
-          
-          ${gripTmpl}
-       `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			el.addEventListener("mousedown", e => this.#startDrag(e));
-		});
-
-		this.#prepareLayout();
-
-		window.addEventListener("resize", () => this.#prepareLayout());
-	};
-
-	#isLastSplitter = () => {
-		const parent = this.parentElement;
-		if (!parent) return false;
-
-		const allSplitters = [...parent.querySelectorAll("nx-splitter")];
-		return allSplitters.at(-1) === this;
-	};
-
-	#getSiblingSizeSum = () => {
-		const parent = this.parentElement;
-		if (!parent) return 0;
-
-		const isHorizontal = this.#mode === "h";
-
-		return Array.from(parent.children).reduce((sum, el) => {
-			const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
-			return sum + size;
-		}, 0);
-	};
-
-
-	#prepareLayout = () => {
-
-		const isHorizontal = this.#mode === "h";
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		const parent = this.parentElement;
-		if (!prev || !next || !parent) return;
-
-		const currentTotal = this.#getSiblingSizeSum();
-		const nextTotal = isHorizontal
-			? parent.getBoundingClientRect().width
-			: parent.getBoundingClientRect().height;
-
-		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-
-		const newPrevSize = nextTotal * prevSize / currentTotal;
-		const newNextSize = nextTotal * nextSize / currentTotal;
-
-
-		if (isHorizontal) {
-			prev.style.width = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.width = `${newNextSize}px`;
-			}
-		} else {
-			prev.style.height = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.height = `${newNextSize}px`;
-			}
-		}
-	};
-
-}
-
-customElements.define("nx-splitter", nxSplitter);