ninegrid2 6.682.0 β†’ 6.684.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.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +19 -15
  2. package/dist/bundle.esm.js +19 -15
  3. package/dist/nx/nxSplitter.js +19 -15
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +19 -15
package/dist/bundle.cjs.js CHANGED
@@ -121082,7 +121082,15 @@ class nxSplitter extends HTMLElement {
121082
121082
  });
121083
121083
 
121084
121084
  const parent = this.getRootNode().host || this.parentElement;
121085
+ const prev = this.previousElementSibling;
121086
+ const next = this.nextElementSibling;
121087
+
121088
+ if (!parent || !prev || !next) return;
121089
+
121085
121090
  const parentRect = parent.getBoundingClientRect();
121091
+ const prevRect = prev.getBoundingClientRect();
121092
+ const nextRect = next.getBoundingClientRect();
121093
+
121086
121094
  const left = e.clientX - parentRect.left;
121087
121095
  const top = e.clientY - parentRect.top;
121088
121096
 
@@ -121102,17 +121110,19 @@ class nxSplitter extends HTMLElement {
121102
121110
  // πŸ‘‡ λΆ€λͺ¨ λ…Έλ“œ κΈ°μ€€μœΌλ‘œ μ‚½μž…
121103
121111
  parent.appendChild(dragBar);
121104
121112
 
121113
+ const min = this.#mode === "h" ? prevRect.left : prevRect.top;
121114
+ const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
121115
+
121105
121116
  const onMove = e => {
121106
- const rect = parent.getBoundingClientRect();
121117
+ const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
121118
+ const position = Math.max(min, Math.min(clientPos, max));
121119
+
121120
+ const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
121107
121121
 
121108
121122
  if (this.#mode === "h") {
121109
- let left = e.clientX - rect.left;
121110
- left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width λ²”μœ„ μ œν•œ
121111
- dragBar.style.left = `${left}px`;
121123
+ dragBar.style.left = `${relative}px`;
121112
121124
  } else {
121113
- let top = e.clientY - rect.top;
121114
- top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height λ²”μœ„ μ œν•œ
121115
- dragBar.style.top = `${top}px`;
121125
+ dragBar.style.top = `${relative}px`;
121116
121126
  }
121117
121127
  };
121118
121128
 
@@ -121129,16 +121139,10 @@ class nxSplitter extends HTMLElement {
121129
121139
  ? e.clientX - parentRect.left
121130
121140
  : e.clientY - parentRect.top;
121131
121141
 
121132
- // ν˜•μ œ μš”μ†Œλ“€
121133
- const prev = this.previousElementSibling;
121134
- const next = this.nextElementSibling;
121135
-
121136
- if (!prev || !next) return;
121137
-
121138
121142
  if (this.#mode === "h") {
121139
121143
  prev.style.width = `${position}px`;
121140
- //next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121141
- next.style.width = `100%`;
121144
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121145
+ //next.style.width = `100%`;
121142
121146
  } else {
121143
121147
  prev.style.height = `${position}px`;
121144
121148
  next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
package/dist/bundle.esm.js CHANGED
@@ -121078,7 +121078,15 @@ class nxSplitter extends HTMLElement {
121078
121078
  });
121079
121079
 
121080
121080
  const parent = this.getRootNode().host || this.parentElement;
121081
+ const prev = this.previousElementSibling;
121082
+ const next = this.nextElementSibling;
121083
+
121084
+ if (!parent || !prev || !next) return;
121085
+
121081
121086
  const parentRect = parent.getBoundingClientRect();
121087
+ const prevRect = prev.getBoundingClientRect();
121088
+ const nextRect = next.getBoundingClientRect();
121089
+
121082
121090
  const left = e.clientX - parentRect.left;
121083
121091
  const top = e.clientY - parentRect.top;
121084
121092
 
@@ -121098,17 +121106,19 @@ class nxSplitter extends HTMLElement {
121098
121106
  // πŸ‘‡ λΆ€λͺ¨ λ…Έλ“œ κΈ°μ€€μœΌλ‘œ μ‚½μž…
121099
121107
  parent.appendChild(dragBar);
121100
121108
 
121109
+ const min = this.#mode === "h" ? prevRect.left : prevRect.top;
121110
+ const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
121111
+
121101
121112
  const onMove = e => {
121102
- const rect = parent.getBoundingClientRect();
121113
+ const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
121114
+ const position = Math.max(min, Math.min(clientPos, max));
121115
+
121116
+ const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
121103
121117
 
121104
121118
  if (this.#mode === "h") {
121105
- let left = e.clientX - rect.left;
121106
- left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width λ²”μœ„ μ œν•œ
121107
- dragBar.style.left = `${left}px`;
121119
+ dragBar.style.left = `${relative}px`;
121108
121120
  } else {
121109
- let top = e.clientY - rect.top;
121110
- top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height λ²”μœ„ μ œν•œ
121111
- dragBar.style.top = `${top}px`;
121121
+ dragBar.style.top = `${relative}px`;
121112
121122
  }
121113
121123
  };
121114
121124
 
@@ -121125,16 +121135,10 @@ class nxSplitter extends HTMLElement {
121125
121135
  ? e.clientX - parentRect.left
121126
121136
  : e.clientY - parentRect.top;
121127
121137
 
121128
- // ν˜•μ œ μš”μ†Œλ“€
121129
- const prev = this.previousElementSibling;
121130
- const next = this.nextElementSibling;
121131
-
121132
- if (!prev || !next) return;
121133
-
121134
121138
  if (this.#mode === "h") {
121135
121139
  prev.style.width = `${position}px`;
121136
- //next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121137
- next.style.width = `100%`;
121140
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
121141
+ //next.style.width = `100%`;
121138
121142
  } else {
121139
121143
  prev.style.height = `${position}px`;
121140
121144
  next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
package/dist/nx/nxSplitter.js CHANGED
@@ -37,7 +37,15 @@ class nxSplitter extends HTMLElement {
37
37
  });
38
38
 
39
39
  const parent = this.getRootNode().host || this.parentElement;
40
+ const prev = this.previousElementSibling;
41
+ const next = this.nextElementSibling;
42
+
43
+ if (!parent || !prev || !next) return;
44
+
40
45
  const parentRect = parent.getBoundingClientRect();
46
+ const prevRect = prev.getBoundingClientRect();
47
+ const nextRect = next.getBoundingClientRect();
48
+
41
49
  const left = e.clientX - parentRect.left;
42
50
  const top = e.clientY - parentRect.top;
43
51
 
@@ -57,17 +65,19 @@ class nxSplitter extends HTMLElement {
57
65
  // πŸ‘‡ λΆ€λͺ¨ λ…Έλ“œ κΈ°μ€€μœΌλ‘œ μ‚½μž…
58
66
  parent.appendChild(dragBar);
59
67
 
68
+ const min = this.#mode === "h" ? prevRect.left : prevRect.top;
69
+ const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
70
+
60
71
  const onMove = e => {
61
- const rect = parent.getBoundingClientRect();
72
+ const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
73
+ const position = Math.max(min, Math.min(clientPos, max));
74
+
75
+ const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
62
76
 
63
77
  if (this.#mode === "h") {
64
- let left = e.clientX - rect.left;
65
- left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width λ²”μœ„ μ œν•œ
66
- dragBar.style.left = `${left}px`;
78
+ dragBar.style.left = `${relative}px`;
67
79
  } else {
68
- let top = e.clientY - rect.top;
69
- top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height λ²”μœ„ μ œν•œ
70
- dragBar.style.top = `${top}px`;
80
+ dragBar.style.top = `${relative}px`;
71
81
  }
72
82
  };
73
83
 
@@ -84,16 +94,10 @@ class nxSplitter extends HTMLElement {
84
94
  ? e.clientX - parentRect.left
85
95
  : e.clientY - parentRect.top;
86
96
 
87
- // ν˜•μ œ μš”μ†Œλ“€
88
- const prev = this.previousElementSibling;
89
- const next = this.nextElementSibling;
90
-
91
- if (!prev || !next) return;
92
-
93
97
  if (this.#mode === "h") {
94
98
  prev.style.width = `${position}px`;
95
- //next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
96
- next.style.width = `100%`;
99
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
100
+ //next.style.width = `100%`;
97
101
  } else {
98
102
  prev.style.height = `${position}px`;
99
103
  next.style.height = `${parentRect.height - position - this.offsetHeight}px`;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.682.0",
4
+ "version": "6.684.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -37,7 +37,15 @@ class nxSplitter extends HTMLElement {
37
37
  });
38
38
 
39
39
  const parent = this.getRootNode().host || this.parentElement;
40
+ const prev = this.previousElementSibling;
41
+ const next = this.nextElementSibling;
42
+
43
+ if (!parent || !prev || !next) return;
44
+
40
45
  const parentRect = parent.getBoundingClientRect();
46
+ const prevRect = prev.getBoundingClientRect();
47
+ const nextRect = next.getBoundingClientRect();
48
+
41
49
  const left = e.clientX - parentRect.left;
42
50
  const top = e.clientY - parentRect.top;
43
51
 
@@ -57,17 +65,19 @@ class nxSplitter extends HTMLElement {
57
65
  // πŸ‘‡ λΆ€λͺ¨ λ…Έλ“œ κΈ°μ€€μœΌλ‘œ μ‚½μž…
58
66
  parent.appendChild(dragBar);
59
67
 
68
+ const min = this.#mode === "h" ? prevRect.left : prevRect.top;
69
+ const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
70
+
60
71
  const onMove = e => {
61
- const rect = parent.getBoundingClientRect();
72
+ const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
73
+ const position = Math.max(min, Math.min(clientPos, max));
74
+
75
+ const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
62
76
 
63
77
  if (this.#mode === "h") {
64
- let left = e.clientX - rect.left;
65
- left = Math.max(0, Math.min(left, rect.width)); // 0 ~ width λ²”μœ„ μ œν•œ
66
- dragBar.style.left = `${left}px`;
78
+ dragBar.style.left = `${relative}px`;
67
79
  } else {
68
- let top = e.clientY - rect.top;
69
- top = Math.max(0, Math.min(top, rect.height)); // 0 ~ height λ²”μœ„ μ œν•œ
70
- dragBar.style.top = `${top}px`;
80
+ dragBar.style.top = `${relative}px`;
71
81
  }
72
82
  };
73
83
 
@@ -84,16 +94,10 @@ class nxSplitter extends HTMLElement {
84
94
  ? e.clientX - parentRect.left
85
95
  : e.clientY - parentRect.top;
86
96
 
87
- // ν˜•μ œ μš”μ†Œλ“€
88
- const prev = this.previousElementSibling;
89
- const next = this.nextElementSibling;
90
-
91
- if (!prev || !next) return;
92
-
93
97
  if (this.#mode === "h") {
94
98
  prev.style.width = `${position}px`;
95
- //next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
96
- next.style.width = `100%`;
99
+ next.style.width = `${parentRect.width - position - this.offsetWidth}px`;
100
+ //next.style.width = `100%`;
97
101
  } else {
98
102
  prev.style.height = `${position}px`;
99
103
  next.style.height = `${parentRect.height - position - this.offsetHeight}px`;