ninegrid2 6.750.0 → 6.751.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.
- package/dist/bundle.cjs.js +13 -14
- package/dist/bundle.esm.js +13 -14
- package/dist/nx/nxSplitter.js +13 -14
- package/package.json +1 -1
- package/src/nx/nxSplitter.js +13 -14
package/dist/bundle.cjs.js
CHANGED
|
@@ -121169,48 +121169,47 @@ class nxSplitter extends HTMLElement {
|
|
|
121169
121169
|
|
|
121170
121170
|
#prepareLayout = () => {
|
|
121171
121171
|
const isHorizontal = this.#mode === "h";
|
|
121172
|
-
|
|
121172
|
+
|
|
121173
121173
|
const prev = this.previousElementSibling;
|
|
121174
121174
|
const next = this.nextElementSibling;
|
|
121175
121175
|
const parent = this.parentElement;
|
|
121176
121176
|
if (!prev || !next || !parent) return;
|
|
121177
121177
|
|
|
121178
|
+
// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
|
|
121179
|
+
const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
|
|
121180
|
+
|
|
121181
|
+
// 전체 부모 사이즈 측정
|
|
121178
121182
|
const parentSize = isHorizontal
|
|
121179
121183
|
? parent.getBoundingClientRect().width
|
|
121180
121184
|
: parent.getBoundingClientRect().height;
|
|
121181
121185
|
|
|
121182
|
-
//
|
|
121186
|
+
// splitter 제외한 나머지 공간
|
|
121187
|
+
const available = parentSize - splitterSize;
|
|
121188
|
+
|
|
121189
|
+
// 현재 prev/next 실제 크기 기준으로 비율 역산
|
|
121183
121190
|
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
121184
121191
|
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
121185
121192
|
const totalPanelSize = prevSize + nextSize;
|
|
121186
121193
|
|
|
121187
|
-
// 현재 비율 계산
|
|
121188
121194
|
const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
|
|
121189
121195
|
const nextRatio = 1 - prevRatio;
|
|
121190
121196
|
|
|
121191
|
-
//
|
|
121192
|
-
const available = parentSize - splitterSize;
|
|
121193
|
-
|
|
121197
|
+
// 비율 기반으로 pixel 크기 다시 계산
|
|
121194
121198
|
const newPrevSize = available * prevRatio;
|
|
121195
121199
|
const newNextSize = available * nextRatio;
|
|
121196
121200
|
|
|
121197
121201
|
if (isHorizontal) {
|
|
121198
121202
|
prev.style.width = `${newPrevSize}px`;
|
|
121203
|
+
next.style.width = `${newNextSize}px`;
|
|
121199
121204
|
this.style.width = `${splitterSize}px`;
|
|
121200
|
-
|
|
121201
|
-
if (this.#isLastSplitter()) {
|
|
121202
|
-
next.style.width = `${newNextSize}px`;
|
|
121203
|
-
}
|
|
121204
121205
|
} else {
|
|
121205
121206
|
prev.style.height = `${newPrevSize}px`;
|
|
121207
|
+
next.style.height = `${newNextSize}px`;
|
|
121206
121208
|
this.style.height = `${splitterSize}px`;
|
|
121207
|
-
|
|
121208
|
-
if (this.#isLastSplitter()) {
|
|
121209
|
-
next.style.height = `${newNextSize}px`;
|
|
121210
|
-
}
|
|
121211
121209
|
}
|
|
121212
121210
|
};
|
|
121213
121211
|
|
|
121212
|
+
|
|
121214
121213
|
}
|
|
121215
121214
|
|
|
121216
121215
|
customElements.define("nx-splitter", nxSplitter);
|
package/dist/bundle.esm.js
CHANGED
|
@@ -121165,48 +121165,47 @@ class nxSplitter extends HTMLElement {
|
|
|
121165
121165
|
|
|
121166
121166
|
#prepareLayout = () => {
|
|
121167
121167
|
const isHorizontal = this.#mode === "h";
|
|
121168
|
-
|
|
121168
|
+
|
|
121169
121169
|
const prev = this.previousElementSibling;
|
|
121170
121170
|
const next = this.nextElementSibling;
|
|
121171
121171
|
const parent = this.parentElement;
|
|
121172
121172
|
if (!prev || !next || !parent) return;
|
|
121173
121173
|
|
|
121174
|
+
// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
|
|
121175
|
+
const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
|
|
121176
|
+
|
|
121177
|
+
// 전체 부모 사이즈 측정
|
|
121174
121178
|
const parentSize = isHorizontal
|
|
121175
121179
|
? parent.getBoundingClientRect().width
|
|
121176
121180
|
: parent.getBoundingClientRect().height;
|
|
121177
121181
|
|
|
121178
|
-
//
|
|
121182
|
+
// splitter 제외한 나머지 공간
|
|
121183
|
+
const available = parentSize - splitterSize;
|
|
121184
|
+
|
|
121185
|
+
// 현재 prev/next 실제 크기 기준으로 비율 역산
|
|
121179
121186
|
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
121180
121187
|
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
121181
121188
|
const totalPanelSize = prevSize + nextSize;
|
|
121182
121189
|
|
|
121183
|
-
// 현재 비율 계산
|
|
121184
121190
|
const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
|
|
121185
121191
|
const nextRatio = 1 - prevRatio;
|
|
121186
121192
|
|
|
121187
|
-
//
|
|
121188
|
-
const available = parentSize - splitterSize;
|
|
121189
|
-
|
|
121193
|
+
// 비율 기반으로 pixel 크기 다시 계산
|
|
121190
121194
|
const newPrevSize = available * prevRatio;
|
|
121191
121195
|
const newNextSize = available * nextRatio;
|
|
121192
121196
|
|
|
121193
121197
|
if (isHorizontal) {
|
|
121194
121198
|
prev.style.width = `${newPrevSize}px`;
|
|
121199
|
+
next.style.width = `${newNextSize}px`;
|
|
121195
121200
|
this.style.width = `${splitterSize}px`;
|
|
121196
|
-
|
|
121197
|
-
if (this.#isLastSplitter()) {
|
|
121198
|
-
next.style.width = `${newNextSize}px`;
|
|
121199
|
-
}
|
|
121200
121201
|
} else {
|
|
121201
121202
|
prev.style.height = `${newPrevSize}px`;
|
|
121203
|
+
next.style.height = `${newNextSize}px`;
|
|
121202
121204
|
this.style.height = `${splitterSize}px`;
|
|
121203
|
-
|
|
121204
|
-
if (this.#isLastSplitter()) {
|
|
121205
|
-
next.style.height = `${newNextSize}px`;
|
|
121206
|
-
}
|
|
121207
121205
|
}
|
|
121208
121206
|
};
|
|
121209
121207
|
|
|
121208
|
+
|
|
121210
121209
|
}
|
|
121211
121210
|
|
|
121212
121211
|
customElements.define("nx-splitter", nxSplitter);
|
package/dist/nx/nxSplitter.js
CHANGED
|
@@ -181,48 +181,47 @@ class nxSplitter extends HTMLElement {
|
|
|
181
181
|
|
|
182
182
|
#prepareLayout = () => {
|
|
183
183
|
const isHorizontal = this.#mode === "h";
|
|
184
|
-
|
|
184
|
+
|
|
185
185
|
const prev = this.previousElementSibling;
|
|
186
186
|
const next = this.nextElementSibling;
|
|
187
187
|
const parent = this.parentElement;
|
|
188
188
|
if (!prev || !next || !parent) return;
|
|
189
189
|
|
|
190
|
+
// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
|
|
191
|
+
const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
|
|
192
|
+
|
|
193
|
+
// 전체 부모 사이즈 측정
|
|
190
194
|
const parentSize = isHorizontal
|
|
191
195
|
? parent.getBoundingClientRect().width
|
|
192
196
|
: parent.getBoundingClientRect().height;
|
|
193
197
|
|
|
194
|
-
//
|
|
198
|
+
// splitter 제외한 나머지 공간
|
|
199
|
+
const available = parentSize - splitterSize;
|
|
200
|
+
|
|
201
|
+
// 현재 prev/next 실제 크기 기준으로 비율 역산
|
|
195
202
|
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
196
203
|
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
197
204
|
const totalPanelSize = prevSize + nextSize;
|
|
198
205
|
|
|
199
|
-
// 현재 비율 계산
|
|
200
206
|
const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
|
|
201
207
|
const nextRatio = 1 - prevRatio;
|
|
202
208
|
|
|
203
|
-
//
|
|
204
|
-
const available = parentSize - splitterSize;
|
|
205
|
-
|
|
209
|
+
// 비율 기반으로 pixel 크기 다시 계산
|
|
206
210
|
const newPrevSize = available * prevRatio;
|
|
207
211
|
const newNextSize = available * nextRatio;
|
|
208
212
|
|
|
209
213
|
if (isHorizontal) {
|
|
210
214
|
prev.style.width = `${newPrevSize}px`;
|
|
215
|
+
next.style.width = `${newNextSize}px`;
|
|
211
216
|
this.style.width = `${splitterSize}px`;
|
|
212
|
-
|
|
213
|
-
if (this.#isLastSplitter()) {
|
|
214
|
-
next.style.width = `${newNextSize}px`;
|
|
215
|
-
}
|
|
216
217
|
} else {
|
|
217
218
|
prev.style.height = `${newPrevSize}px`;
|
|
219
|
+
next.style.height = `${newNextSize}px`;
|
|
218
220
|
this.style.height = `${splitterSize}px`;
|
|
219
|
-
|
|
220
|
-
if (this.#isLastSplitter()) {
|
|
221
|
-
next.style.height = `${newNextSize}px`;
|
|
222
|
-
}
|
|
223
221
|
}
|
|
224
222
|
};
|
|
225
223
|
|
|
224
|
+
|
|
226
225
|
}
|
|
227
226
|
|
|
228
227
|
customElements.define("nx-splitter", nxSplitter);
|
package/package.json
CHANGED
package/src/nx/nxSplitter.js
CHANGED
|
@@ -181,48 +181,47 @@ class nxSplitter extends HTMLElement {
|
|
|
181
181
|
|
|
182
182
|
#prepareLayout = () => {
|
|
183
183
|
const isHorizontal = this.#mode === "h";
|
|
184
|
-
|
|
184
|
+
|
|
185
185
|
const prev = this.previousElementSibling;
|
|
186
186
|
const next = this.nextElementSibling;
|
|
187
187
|
const parent = this.parentElement;
|
|
188
188
|
if (!prev || !next || !parent) return;
|
|
189
189
|
|
|
190
|
+
// ⛓ splitter의 실제 크기 고정 기준 (최초 생성 기준)
|
|
191
|
+
const splitterSize = isHorizontal ? this.offsetWidth : this.offsetHeight;
|
|
192
|
+
|
|
193
|
+
// 전체 부모 사이즈 측정
|
|
190
194
|
const parentSize = isHorizontal
|
|
191
195
|
? parent.getBoundingClientRect().width
|
|
192
196
|
: parent.getBoundingClientRect().height;
|
|
193
197
|
|
|
194
|
-
//
|
|
198
|
+
// splitter 제외한 나머지 공간
|
|
199
|
+
const available = parentSize - splitterSize;
|
|
200
|
+
|
|
201
|
+
// 현재 prev/next 실제 크기 기준으로 비율 역산
|
|
195
202
|
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
196
203
|
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
197
204
|
const totalPanelSize = prevSize + nextSize;
|
|
198
205
|
|
|
199
|
-
// 현재 비율 계산
|
|
200
206
|
const prevRatio = totalPanelSize ? prevSize / totalPanelSize : 0.5;
|
|
201
207
|
const nextRatio = 1 - prevRatio;
|
|
202
208
|
|
|
203
|
-
//
|
|
204
|
-
const available = parentSize - splitterSize;
|
|
205
|
-
|
|
209
|
+
// 비율 기반으로 pixel 크기 다시 계산
|
|
206
210
|
const newPrevSize = available * prevRatio;
|
|
207
211
|
const newNextSize = available * nextRatio;
|
|
208
212
|
|
|
209
213
|
if (isHorizontal) {
|
|
210
214
|
prev.style.width = `${newPrevSize}px`;
|
|
215
|
+
next.style.width = `${newNextSize}px`;
|
|
211
216
|
this.style.width = `${splitterSize}px`;
|
|
212
|
-
|
|
213
|
-
if (this.#isLastSplitter()) {
|
|
214
|
-
next.style.width = `${newNextSize}px`;
|
|
215
|
-
}
|
|
216
217
|
} else {
|
|
217
218
|
prev.style.height = `${newPrevSize}px`;
|
|
219
|
+
next.style.height = `${newNextSize}px`;
|
|
218
220
|
this.style.height = `${splitterSize}px`;
|
|
219
|
-
|
|
220
|
-
if (this.#isLastSplitter()) {
|
|
221
|
-
next.style.height = `${newNextSize}px`;
|
|
222
|
-
}
|
|
223
221
|
}
|
|
224
222
|
};
|
|
225
223
|
|
|
224
|
+
|
|
226
225
|
}
|
|
227
226
|
|
|
228
227
|
customElements.define("nx-splitter", nxSplitter);
|