ninegrid2 6.665.0 → 6.667.0

package/dist/bundle.cjs.js

@@ -121057,7 +121057,7 @@ class nxSplitter extends HTMLElement {
 		this.#init();
 	}
 
-	#detectMode(el) {
+	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
 
@@ -121065,7 +121065,52 @@ class nxSplitter extends HTMLElement {
 		const nextRect = next?.getBoundingClientRect();
 
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-	}
+	};
+
+	#startDrag = (e) => {
+		console.log(e);
+
+		const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = "nx-drag-bar";
+		dragBar.style.position = "fixed";
+		dragBar.style.zIndex = "9999";
+		dragBar.style.pointerEvents = "none";
+		dragBar.style.background = "#666";
+		dragBar.style.opacity = "0.6";
+
+		// 방향별 초기 위치 설정
+		if (mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100vh";
+			dragBar.style.left = `${e.clientX}px`;
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.width = "100vw";
+			dragBar.style.height = "1px";
+			dragBar.style.top = `${e.clientY}px`;
+		}
+
+		document.body.appendChild(dragBar);
+
+		const onMove = e => {
+			console.log(e);
+			if (mode === "h") dragBar.style.left = `${e.clientX}px`;
+			else dragBar.style.top = `${e.clientY}px`;
+		};
+
+		const onUp = (e) => {
+			console.log(e);
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);
@@ -121088,6 +121133,11 @@ class nxSplitter extends HTMLElement {
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		// grip 이벤트 바인딩
+		this.shadowRoot.querySelectorAll(".grid-h,.grid-v").forEach(grip => {
+			grip.addEventListener("mousedown", e => this.#startDrag(e));
+		});
 	}
 }
 

package/dist/bundle.esm.js

@@ -121053,7 +121053,7 @@ class nxSplitter extends HTMLElement {
 		this.#init();
 	}
 
-	#detectMode(el) {
+	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
 
@@ -121061,7 +121061,52 @@ class nxSplitter extends HTMLElement {
 		const nextRect = next?.getBoundingClientRect();
 
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-	}
+	};
+
+	#startDrag = (e) => {
+		console.log(e);
+
+		const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = "nx-drag-bar";
+		dragBar.style.position = "fixed";
+		dragBar.style.zIndex = "9999";
+		dragBar.style.pointerEvents = "none";
+		dragBar.style.background = "#666";
+		dragBar.style.opacity = "0.6";
+
+		// 방향별 초기 위치 설정
+		if (mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100vh";
+			dragBar.style.left = `${e.clientX}px`;
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.width = "100vw";
+			dragBar.style.height = "1px";
+			dragBar.style.top = `${e.clientY}px`;
+		}
+
+		document.body.appendChild(dragBar);
+
+		const onMove = e => {
+			console.log(e);
+			if (mode === "h") dragBar.style.left = `${e.clientX}px`;
+			else dragBar.style.top = `${e.clientY}px`;
+		};
+
+		const onUp = (e) => {
+			console.log(e);
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);
@@ -121084,6 +121129,11 @@ class nxSplitter extends HTMLElement {
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		// grip 이벤트 바인딩
+		this.shadowRoot.querySelectorAll(".grid-h,.grid-v").forEach(grip => {
+			grip.addEventListener("mousedown", e => this.#startDrag(e));
+		});
 	}
 }
 

package/dist/nx/nxSplitter.js

@@ -12,7 +12,7 @@ class nxSplitter extends HTMLElement {
 		this.#init();
 	}
 
-	#detectMode(el) {
+	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
 
@@ -20,12 +20,57 @@ class nxSplitter extends HTMLElement {
 		const nextRect = next?.getBoundingClientRect();
 
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-	}
+	};
+
+	#startDrag = (e) => {
+		console.log(e);
+
+		const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = "nx-drag-bar";
+		dragBar.style.position = "fixed";
+		dragBar.style.zIndex = "9999";
+		dragBar.style.pointerEvents = "none";
+		dragBar.style.background = "#666";
+		dragBar.style.opacity = "0.6";
+
+		// 방향별 초기 위치 설정
+		if (mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100vh";
+			dragBar.style.left = `${e.clientX}px`;
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.width = "100vw";
+			dragBar.style.height = "1px";
+			dragBar.style.top = `${e.clientY}px`;
+		}
+
+		document.body.appendChild(dragBar);
+
+		const onMove = e => {
+			console.log(e);
+			if (mode === "h") dragBar.style.left = `${e.clientX}px`;
+			else dragBar.style.top = `${e.clientY}px`;
+		};
+
+		const onUp = (e) => {
+			console.log(e);
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);
 
-		this.classList.add(this.#mode)
+		this.classList.add(this.#mode);
 
 		const contents = this.innerHTML.trim();
 		const gripClass = `grip-${this.#mode}`;
@@ -43,6 +88,11 @@ class nxSplitter extends HTMLElement {
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		// grip 이벤트 바인딩
+		this.shadowRoot.querySelectorAll(".grid-h,.grid-v").forEach(grip => {
+			grip.addEventListener("mousedown", e => this.#startDrag(e));
+		});
 	}
 }
 

package/package.json

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

package/src/nx/nxSplitter.js

@@ -12,7 +12,7 @@ class nxSplitter extends HTMLElement {
 		this.#init();
 	}
 
-	#detectMode(el) {
+	#detectMode = (el) => {
 		const prev = el.previousElementSibling;
 		const next = el.nextElementSibling;
 
@@ -20,12 +20,57 @@ class nxSplitter extends HTMLElement {
 		const nextRect = next?.getBoundingClientRect();
 
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-	}
+	};
+
+	#startDrag = (e) => {
+		console.log(e);
+
+		const mode = this.#mode;
+		const dragBar = document.createElement("div");
+		dragBar.className = "nx-drag-bar";
+		dragBar.style.position = "fixed";
+		dragBar.style.zIndex = "9999";
+		dragBar.style.pointerEvents = "none";
+		dragBar.style.background = "#666";
+		dragBar.style.opacity = "0.6";
+
+		// 방향별 초기 위치 설정
+		if (mode === "h") {
+			dragBar.style.top = "0";
+			dragBar.style.width = "1px";
+			dragBar.style.height = "100vh";
+			dragBar.style.left = `${e.clientX}px`;
+		} else {
+			dragBar.style.left = "0";
+			dragBar.style.width = "100vw";
+			dragBar.style.height = "1px";
+			dragBar.style.top = `${e.clientY}px`;
+		}
+
+		document.body.appendChild(dragBar);
+
+		const onMove = e => {
+			console.log(e);
+			if (mode === "h") dragBar.style.left = `${e.clientX}px`;
+			else dragBar.style.top = `${e.clientY}px`;
+		};
+
+		const onUp = (e) => {
+			console.log(e);
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onUp);
+			dragBar.remove();
+		};
+
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onUp);
+	};
+
 
 	#init = () => {
 		this.#detectMode(this);
 
-		this.classList.add(this.#mode)
+		this.classList.add(this.#mode);
 
 		const contents = this.innerHTML.trim();
 		const gripClass = `grip-${this.#mode}`;
@@ -43,6 +88,11 @@ class nxSplitter extends HTMLElement {
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		// grip 이벤트 바인딩
+		this.shadowRoot.querySelectorAll(".grid-h,.grid-v").forEach(grip => {
+			grip.addEventListener("mousedown", e => this.#startDrag(e));
+		});
 	}
 }