ninegrid2 6.850.0 → 6.852.0

package/dist/bundle.cjs.js

@@ -121167,7 +121167,7 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag = (e) => {
+	#startDrag_BAK = (e) => {
 
 		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
@@ -121207,21 +121207,18 @@ class nxSplitter extends HTMLElement {
 		parseFloat(computedStyle.paddingLeft) || 0;
 		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
 
+
 		let el = parent;
 		let totalPadding = 0;
 
 		while (el) {
-			console.log(el, el instanceof Element, el instanceof ShadowRoot);
+			console.log(el, el.parentElement, el.host);
 			if (el instanceof Element) {
 				const style = getComputedStyle(el);
 				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.offsetParent;
+				el = el.parentElement;
 			} else if (el instanceof ShadowRoot) {
-
-				const host = el.host;
-				const style = getComputedStyle(host);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = host.offsetParent;
+				el = el.host;
 			} else {
 				break;
 			}
@@ -121229,6 +121226,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		console.log(totalPadding, e.clientX, parentRect.left);
 
 		const left = e.clientX - parentRect.left + totalPadding;
@@ -121316,6 +121314,145 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const isHorizontal = this.#mode === "h";
+
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		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 });
+		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
+		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;
+		}
+
+		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
+		// dragBar의 초기 위치 설정 (parent 기준)
+		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
+		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
+		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
+		let initialPos;
+		if (isHorizontal) {
+			initialPos = e.clientX - parentRect.left;
+			dragBar.style.top = "0";
+			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			initialPos = e.clientY - parentRect.top;
+			dragBar.style.left = "0";
+			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
+		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
+		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
+
+		const onMove = moveEvent => {
+			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+
+			// 부모 기준으로 드래그 바의 상대 위치
+			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+
+			if (isHorizontal) {
+				dragBar.style.left = `${relativePos}px`;
+			} else {
+				dragBar.style.top = `${relativePos}px`;
+			}
+		};
+
+		const onUp = upEvent => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
+			const finalDragBarPos = isHorizontal
+				? parseFloat(dragBar.style.left)
+				: parseFloat(dragBar.style.top);
+
+			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
+			const newPrevSize = finalDragBarPos;
+
+			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
+			const newNextSize = parentTotalSize - newPrevSize;
+
+			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
+			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
+			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
+			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
+
+			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
+			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
+			// 이와 같이 직접 style.width/height를 설정.
+			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
+			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
+
+			// flex-grow 비율로 제어하는 경우
+			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
+			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
+			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
+
+			// 기존 flex 값을 저장하고 복원
+			const originalPrevFlex = prev.style.flex;
+			const originalNextFlex = next.style.flex;
+
+			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			if (isHorizontal) {
+				prev.style.width = `${finalPrevSize}px`;
+				next.style.width = `${finalNextSize}px`;
+			} else {
+				prev.style.height = `${finalPrevSize}px`;
+				next.style.height = `${finalNextSize}px`;
+			}
+
+			// 작업 완료 후 원래 flex 값으로 복원
+			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
+			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			prev.style.flex = originalPrevFlex;
+			next.style.flex = originalNextFlex;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/dist/bundle.esm.js

@@ -121163,7 +121163,7 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag = (e) => {
+	#startDrag_BAK = (e) => {
 
 		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
@@ -121203,21 +121203,18 @@ class nxSplitter extends HTMLElement {
 		parseFloat(computedStyle.paddingLeft) || 0;
 		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
 
+
 		let el = parent;
 		let totalPadding = 0;
 
 		while (el) {
-			console.log(el, el instanceof Element, el instanceof ShadowRoot);
+			console.log(el, el.parentElement, el.host);
 			if (el instanceof Element) {
 				const style = getComputedStyle(el);
 				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.offsetParent;
+				el = el.parentElement;
 			} else if (el instanceof ShadowRoot) {
-
-				const host = el.host;
-				const style = getComputedStyle(host);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = host.offsetParent;
+				el = el.host;
 			} else {
 				break;
 			}
@@ -121225,6 +121222,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		console.log(totalPadding, e.clientX, parentRect.left);
 
 		const left = e.clientX - parentRect.left + totalPadding;
@@ -121312,6 +121310,145 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#startDrag = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		const splitterRect = this.getBoundingClientRect();
+		const isHorizontal = this.#mode === "h";
+
+		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		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 });
+		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
+		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;
+		}
+
+		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
+		// dragBar의 초기 위치 설정 (parent 기준)
+		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
+		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
+		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
+		let initialPos;
+		if (isHorizontal) {
+			initialPos = e.clientX - parentRect.left;
+			dragBar.style.top = "0";
+			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			initialPos = e.clientY - parentRect.top;
+			dragBar.style.left = "0";
+			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
+		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
+		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
+
+		const onMove = moveEvent => {
+			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+
+			// 부모 기준으로 드래그 바의 상대 위치
+			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+
+			if (isHorizontal) {
+				dragBar.style.left = `${relativePos}px`;
+			} else {
+				dragBar.style.top = `${relativePos}px`;
+			}
+		};
+
+		const onUp = upEvent => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
+			const finalDragBarPos = isHorizontal
+				? parseFloat(dragBar.style.left)
+				: parseFloat(dragBar.style.top);
+
+			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
+			const newPrevSize = finalDragBarPos;
+
+			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
+			const newNextSize = parentTotalSize - newPrevSize;
+
+			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
+			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
+			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
+			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
+
+			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
+			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
+			// 이와 같이 직접 style.width/height를 설정.
+			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
+			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
+
+			// flex-grow 비율로 제어하는 경우
+			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
+			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
+			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
+
+			// 기존 flex 값을 저장하고 복원
+			const originalPrevFlex = prev.style.flex;
+			const originalNextFlex = next.style.flex;
+
+			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			if (isHorizontal) {
+				prev.style.width = `${finalPrevSize}px`;
+				next.style.width = `${finalNextSize}px`;
+			} else {
+				prev.style.height = `${finalPrevSize}px`;
+				next.style.height = `${finalNextSize}px`;
+			}
+
+			// 작업 완료 후 원래 flex 값으로 복원
+			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
+			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			prev.style.flex = originalPrevFlex;
+			next.style.flex = originalNextFlex;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/dist/nx/nxSplitter.js

@@ -22,7 +22,7 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag = (e) => {
+	#startDrag_BAK = (e) => {
 
 		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
@@ -62,21 +62,18 @@ class nxSplitter extends HTMLElement {
 		const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
 		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
 
+
 		let el = parent;
 		let totalPadding = 0;
 
 		while (el) {
-			console.log(el, el instanceof Element, el instanceof ShadowRoot);
+			console.log(el, el.parentElement, el.host)
 			if (el instanceof Element) {
 				const style = getComputedStyle(el);
 				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.offsetParent;
+				el = el.parentElement;
 			} else if (el instanceof ShadowRoot) {
-
-				const host = el.host;
-				const style = getComputedStyle(host);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = host.offsetParent;
+				el = el.host;
 			} else {
 				break;
 			}
@@ -84,6 +81,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		console.log(totalPadding, e.clientX, parentRect.left);
 
 		const left = e.clientX - parentRect.left + totalPadding;
@@ -171,6 +169,145 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#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 });
+		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
+		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;
+		}
+
+		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
+		// dragBar의 초기 위치 설정 (parent 기준)
+		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
+		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
+		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
+		let initialPos;
+		if (isHorizontal) {
+			initialPos = e.clientX - parentRect.left;
+			dragBar.style.top = "0";
+			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			initialPos = e.clientY - parentRect.top;
+			dragBar.style.left = "0";
+			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
+		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
+		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
+
+		const onMove = moveEvent => {
+			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+
+			// 부모 기준으로 드래그 바의 상대 위치
+			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+
+			if (isHorizontal) {
+				dragBar.style.left = `${relativePos}px`;
+			} else {
+				dragBar.style.top = `${relativePos}px`;
+			}
+		};
+
+		const onUp = upEvent => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
+			const finalDragBarPos = isHorizontal
+				? parseFloat(dragBar.style.left)
+				: parseFloat(dragBar.style.top);
+
+			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
+			const newPrevSize = finalDragBarPos;
+
+			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
+			const newNextSize = parentTotalSize - newPrevSize;
+
+			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
+			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
+			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
+			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
+
+			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
+			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
+			// 이와 같이 직접 style.width/height를 설정.
+			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
+			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
+
+			// flex-grow 비율로 제어하는 경우
+			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
+			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
+			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
+
+			// 기존 flex 값을 저장하고 복원
+			const originalPrevFlex = prev.style.flex;
+			const originalNextFlex = next.style.flex;
+
+			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			if (isHorizontal) {
+				prev.style.width = `${finalPrevSize}px`;
+				next.style.width = `${finalNextSize}px`;
+			} else {
+				prev.style.height = `${finalPrevSize}px`;
+				next.style.height = `${finalNextSize}px`;
+			}
+
+			// 작업 완료 후 원래 flex 값으로 복원
+			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
+			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			prev.style.flex = originalPrevFlex;
+			next.style.flex = originalNextFlex;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);

package/package.json

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

package/src/nx/nxSplitter.js

@@ -22,7 +22,7 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag = (e) => {
+	#startDrag_BAK = (e) => {
 
 		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
@@ -62,21 +62,18 @@ class nxSplitter extends HTMLElement {
 		const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
 		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
 
+
 		let el = parent;
 		let totalPadding = 0;
 
 		while (el) {
-			console.log(el, el instanceof Element, el instanceof ShadowRoot);
+			console.log(el, el.parentElement, el.host)
 			if (el instanceof Element) {
 				const style = getComputedStyle(el);
 				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = el.offsetParent;
+				el = el.parentElement;
 			} else if (el instanceof ShadowRoot) {
-
-				const host = el.host;
-				const style = getComputedStyle(host);
-				totalPadding += parseFloat(style.paddingLeft) || 0;
-				el = host.offsetParent;
+				el = el.host;
 			} else {
 				break;
 			}
@@ -84,6 +81,7 @@ class nxSplitter extends HTMLElement {
 
 
 
+
 		console.log(totalPadding, e.clientX, parentRect.left);
 
 		const left = e.clientX - parentRect.left + totalPadding;
@@ -171,6 +169,145 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
+	#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 });
+		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
+		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;
+		}
+
+		const parentRect = parent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect();
+		const nextRect = next.getBoundingClientRect();
+
+		// dragBar의 초기 위치 설정 (parent 기준)
+		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
+		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
+		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
+		let initialPos;
+		if (isHorizontal) {
+			initialPos = e.clientX - parentRect.left;
+			dragBar.style.top = "0";
+			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100%";
+		} else {
+			initialPos = e.clientY - parentRect.top;
+			dragBar.style.left = "0";
+			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.height = "1px";
+			dragBar.style.width = "100%";
+		}
+
+		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
+		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
+		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
+
+		const onMove = moveEvent => {
+			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
+			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+
+			// 부모 기준으로 드래그 바의 상대 위치
+			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+
+			if (isHorizontal) {
+				dragBar.style.left = `${relativePos}px`;
+			} else {
+				dragBar.style.top = `${relativePos}px`;
+			}
+		};
+
+		const onUp = upEvent => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+
+			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
+			const finalDragBarPos = isHorizontal
+				? parseFloat(dragBar.style.left)
+				: parseFloat(dragBar.style.top);
+
+			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
+			const newPrevSize = finalDragBarPos;
+
+			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
+			const newNextSize = parentTotalSize - newPrevSize;
+
+			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
+			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
+			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
+			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
+
+			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
+			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
+			// 이와 같이 직접 style.width/height를 설정.
+			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
+			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
+
+			// flex-grow 비율로 제어하는 경우
+			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
+			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
+			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
+
+			// 기존 flex 값을 저장하고 복원
+			const originalPrevFlex = prev.style.flex;
+			const originalNextFlex = next.style.flex;
+
+			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
+			prev.style.flex = "none";
+			next.style.flex = "none";
+
+			if (isHorizontal) {
+				prev.style.width = `${finalPrevSize}px`;
+				next.style.width = `${finalNextSize}px`;
+			} else {
+				prev.style.height = `${finalPrevSize}px`;
+				next.style.height = `${finalNextSize}px`;
+			}
+
+			// 작업 완료 후 원래 flex 값으로 복원
+			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
+			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			prev.style.flex = originalPrevFlex;
+			next.style.flex = originalNextFlex;
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);