ninegrid2 6.678.0 → 6.680.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -121104,21 +121104,47 @@ class nxSplitter extends HTMLElement {
121104
121104
 
121105
121105
  const onMove = e => {
121106
121106
  const rect = parent.getBoundingClientRect();
121107
+
121107
121108
  if (this.#mode === "h") {
121108
- const left = e.clientX - rect.left;
121109
+ let left = e.clientX - rect.left;
121110
+ left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
121109
121111
  dragBar.style.left = `${left}px`;
121110
121112
  } else {
121111
- const top = e.clientY - rect.top;
121113
+ let top = e.clientY - rect.top;
121114
+ top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
121112
121115
  dragBar.style.top = `${top}px`;
121113
121116
  }
121114
121117
  };
121115
121118
 
121116
- const onUp = () => {
121119
+
121120
+ const onUp = e => {
121117
121121
  window.removeEventListener("mousemove", onMove);
121118
121122
  window.removeEventListener("mouseup", onUp);
121119
121123
  dragBar.remove();
121124
+
121125
+ const parentRect = parent.getBoundingClientRect();
121126
+
121127
+ // 현재 드래그 위치 계산 (부모 기준)
121128
+ const position = (this.#mode === "h")
121129
+ ? e.clientX - parentRect.left
121130
+ : e.clientY - parentRect.top;
121131
+
121132
+ // 형제 요소들
121133
+ const prev = this.previousElementSibling;
121134
+ const next = this.nextElementSibling;
121135
+
121136
+ if (!prev || !next) return;
121137
+
121138
+ if (this.#mode === "h") {
121139
+ prev.style.width = `${position}px`;
121140
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121141
+ } else {
121142
+ prev.style.height = `${position}px`;
121143
+ next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
121144
+ }
121120
121145
  };
121121
121146
 
121147
+
121122
121148
  window.addEventListener("mousemove", onMove);
121123
121149
  window.addEventListener("mouseup", onUp);
121124
121150
  };
@@ -121100,21 +121100,47 @@ class nxSplitter extends HTMLElement {
121100
121100
 
121101
121101
  const onMove = e => {
121102
121102
  const rect = parent.getBoundingClientRect();
121103
+
121103
121104
  if (this.#mode === "h") {
121104
- const left = e.clientX - rect.left;
121105
+ let left = e.clientX - rect.left;
121106
+ left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
121105
121107
  dragBar.style.left = `${left}px`;
121106
121108
  } else {
121107
- const top = e.clientY - rect.top;
121109
+ let top = e.clientY - rect.top;
121110
+ top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
121108
121111
  dragBar.style.top = `${top}px`;
121109
121112
  }
121110
121113
  };
121111
121114
 
121112
- const onUp = () => {
121115
+
121116
+ const onUp = e => {
121113
121117
  window.removeEventListener("mousemove", onMove);
121114
121118
  window.removeEventListener("mouseup", onUp);
121115
121119
  dragBar.remove();
121120
+
121121
+ const parentRect = parent.getBoundingClientRect();
121122
+
121123
+ // 현재 드래그 위치 계산 (부모 기준)
121124
+ const position = (this.#mode === "h")
121125
+ ? e.clientX - parentRect.left
121126
+ : e.clientY - parentRect.top;
121127
+
121128
+ // 형제 요소들
121129
+ const prev = this.previousElementSibling;
121130
+ const next = this.nextElementSibling;
121131
+
121132
+ if (!prev || !next) return;
121133
+
121134
+ if (this.#mode === "h") {
121135
+ prev.style.width = `${position}px`;
121136
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121137
+ } else {
121138
+ prev.style.height = `${position}px`;
121139
+ next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
121140
+ }
121116
121141
  };
121117
121142
 
121143
+
121118
121144
  window.addEventListener("mousemove", onMove);
121119
121145
  window.addEventListener("mouseup", onUp);
121120
121146
  };
@@ -59,21 +59,47 @@ class nxSplitter extends HTMLElement {
59
59
 
60
60
  const onMove = e => {
61
61
  const rect = parent.getBoundingClientRect();
62
+
62
63
  if (this.#mode === "h") {
63
- const left = e.clientX - rect.left;
64
+ let left = e.clientX - rect.left;
65
+ left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
64
66
  dragBar.style.left = `${left}px`;
65
67
  } else {
66
- const top = e.clientY - rect.top;
68
+ let top = e.clientY - rect.top;
69
+ top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
67
70
  dragBar.style.top = `${top}px`;
68
71
  }
69
72
  };
70
73
 
71
- const onUp = () => {
74
+
75
+ const onUp = e => {
72
76
  window.removeEventListener("mousemove", onMove);
73
77
  window.removeEventListener("mouseup", onUp);
74
78
  dragBar.remove();
79
+
80
+ const parentRect = parent.getBoundingClientRect();
81
+
82
+ // 현재 드래그 위치 계산 (부모 기준)
83
+ const position = (this.#mode === "h")
84
+ ? e.clientX - parentRect.left
85
+ : e.clientY - parentRect.top;
86
+
87
+ // 형제 요소들
88
+ const prev = this.previousElementSibling;
89
+ const next = this.nextElementSibling;
90
+
91
+ if (!prev || !next) return;
92
+
93
+ if (this.#mode === "h") {
94
+ prev.style.width = `${position}px`;
95
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
96
+ } else {
97
+ prev.style.height = `${position}px`;
98
+ next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
99
+ }
75
100
  };
76
101
 
102
+
77
103
  window.addEventListener("mousemove", onMove);
78
104
  window.addEventListener("mouseup", onUp);
79
105
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.678.0",
4
+ "version": "6.680.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
@@ -59,21 +59,47 @@ class nxSplitter extends HTMLElement {
59
59
 
60
60
  const onMove = e => {
61
61
  const rect = parent.getBoundingClientRect();
62
+
62
63
  if (this.#mode === "h") {
63
- const left = e.clientX - rect.left;
64
+ let left = e.clientX - rect.left;
65
+ left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width 범위 제한
64
66
  dragBar.style.left = `${left}px`;
65
67
  } else {
66
- const top = e.clientY - rect.top;
68
+ let top = e.clientY - rect.top;
69
+ top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height 범위 제한
67
70
  dragBar.style.top = `${top}px`;
68
71
  }
69
72
  };
70
73
 
71
- const onUp = () => {
74
+
75
+ const onUp = e => {
72
76
  window.removeEventListener("mousemove", onMove);
73
77
  window.removeEventListener("mouseup", onUp);
74
78
  dragBar.remove();
79
+
80
+ const parentRect = parent.getBoundingClientRect();
81
+
82
+ // 현재 드래그 위치 계산 (부모 기준)
83
+ const position = (this.#mode === "h")
84
+ ? e.clientX - parentRect.left
85
+ : e.clientY - parentRect.top;
86
+
87
+ // 형제 요소들
88
+ const prev = this.previousElementSibling;
89
+ const next = this.nextElementSibling;
90
+
91
+ if (!prev || !next) return;
92
+
93
+ if (this.#mode === "h") {
94
+ prev.style.width = `${position}px`;
95
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
96
+ } else {
97
+ prev.style.height = `${position}px`;
98
+ next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
99
+ }
75
100
  };
76
101
 
102
+
77
103
  window.addEventListener("mousemove", onMove);
78
104
  window.addEventListener("mouseup", onUp);
79
105
  };