ninegrid2 6.745.0 → 6.747.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 +19 -12
- package/dist/bundle.esm.js +19 -12
- package/dist/nx/nxSplitter.js +19 -12
- package/package.json +1 -1
- package/src/nx/nxSplitter.js +19 -12
package/dist/bundle.cjs.js
CHANGED
|
@@ -121180,25 +121180,32 @@ class nxSplitter extends HTMLElement {
|
|
|
121180
121180
|
const parentRect = parent.getBoundingClientRect();
|
|
121181
121181
|
const totalSize = isHorizontal ? parentRect.width : parentRect.height;
|
|
121182
121182
|
|
|
121183
|
-
//
|
|
121183
|
+
// 현재 prev/next 크기로 비율 역산
|
|
121184
|
+
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
121185
|
+
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
121186
|
+
|
|
121187
|
+
const totalPanelSize = prevSize + nextSize;
|
|
121188
|
+
|
|
121189
|
+
// ➤ 현재 비율 계산
|
|
121190
|
+
const prevRatio = totalPanelSize > 0 ? prevSize / totalPanelSize : 0.5;
|
|
121191
|
+
const nextRatio = 1 - prevRatio;
|
|
121184
121192
|
const splitterRatio = splitterSize / totalSize;
|
|
121185
|
-
const eachRatio = (1 - splitterRatio) / 2;
|
|
121186
121193
|
|
|
121187
|
-
|
|
121188
|
-
prev.style.width = `${eachRatio * 100}%`;
|
|
121194
|
+
const availableRatio = 1 - splitterRatio;
|
|
121189
121195
|
|
|
121190
|
-
|
|
121191
|
-
|
|
121192
|
-
}
|
|
121196
|
+
// ➤ 비율 기반 스타일 적용
|
|
121197
|
+
if (isHorizontal) {
|
|
121198
|
+
prev.style.width = `${availableRatio * prevRatio * 100}%`;
|
|
121199
|
+
next.style.width = `${availableRatio * nextRatio * 100}%`;
|
|
121200
|
+
this.style.width = `${splitterRatio * 100}%`;
|
|
121193
121201
|
} else {
|
|
121194
|
-
prev.style.height = `${
|
|
121195
|
-
|
|
121196
|
-
|
|
121197
|
-
next.style.height = `${eachRatio * 100}%`;
|
|
121198
|
-
}
|
|
121202
|
+
prev.style.height = `${availableRatio * prevRatio * 100}%`;
|
|
121203
|
+
next.style.height = `${availableRatio * nextRatio * 100}%`;
|
|
121204
|
+
this.style.height = `${splitterRatio * 100}%`;
|
|
121199
121205
|
}
|
|
121200
121206
|
};
|
|
121201
121207
|
|
|
121208
|
+
|
|
121202
121209
|
}
|
|
121203
121210
|
|
|
121204
121211
|
customElements.define("nx-splitter", nxSplitter);
|
package/dist/bundle.esm.js
CHANGED
|
@@ -121176,25 +121176,32 @@ class nxSplitter extends HTMLElement {
|
|
|
121176
121176
|
const parentRect = parent.getBoundingClientRect();
|
|
121177
121177
|
const totalSize = isHorizontal ? parentRect.width : parentRect.height;
|
|
121178
121178
|
|
|
121179
|
-
//
|
|
121179
|
+
// 현재 prev/next 크기로 비율 역산
|
|
121180
|
+
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
121181
|
+
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
121182
|
+
|
|
121183
|
+
const totalPanelSize = prevSize + nextSize;
|
|
121184
|
+
|
|
121185
|
+
// ➤ 현재 비율 계산
|
|
121186
|
+
const prevRatio = totalPanelSize > 0 ? prevSize / totalPanelSize : 0.5;
|
|
121187
|
+
const nextRatio = 1 - prevRatio;
|
|
121180
121188
|
const splitterRatio = splitterSize / totalSize;
|
|
121181
|
-
const eachRatio = (1 - splitterRatio) / 2;
|
|
121182
121189
|
|
|
121183
|
-
|
|
121184
|
-
prev.style.width = `${eachRatio * 100}%`;
|
|
121190
|
+
const availableRatio = 1 - splitterRatio;
|
|
121185
121191
|
|
|
121186
|
-
|
|
121187
|
-
|
|
121188
|
-
}
|
|
121192
|
+
// ➤ 비율 기반 스타일 적용
|
|
121193
|
+
if (isHorizontal) {
|
|
121194
|
+
prev.style.width = `${availableRatio * prevRatio * 100}%`;
|
|
121195
|
+
next.style.width = `${availableRatio * nextRatio * 100}%`;
|
|
121196
|
+
this.style.width = `${splitterRatio * 100}%`;
|
|
121189
121197
|
} else {
|
|
121190
|
-
prev.style.height = `${
|
|
121191
|
-
|
|
121192
|
-
|
|
121193
|
-
next.style.height = `${eachRatio * 100}%`;
|
|
121194
|
-
}
|
|
121198
|
+
prev.style.height = `${availableRatio * prevRatio * 100}%`;
|
|
121199
|
+
next.style.height = `${availableRatio * nextRatio * 100}%`;
|
|
121200
|
+
this.style.height = `${splitterRatio * 100}%`;
|
|
121195
121201
|
}
|
|
121196
121202
|
};
|
|
121197
121203
|
|
|
121204
|
+
|
|
121198
121205
|
}
|
|
121199
121206
|
|
|
121200
121207
|
customElements.define("nx-splitter", nxSplitter);
|
package/dist/nx/nxSplitter.js
CHANGED
|
@@ -192,25 +192,32 @@ class nxSplitter extends HTMLElement {
|
|
|
192
192
|
const parentRect = parent.getBoundingClientRect();
|
|
193
193
|
const totalSize = isHorizontal ? parentRect.width : parentRect.height;
|
|
194
194
|
|
|
195
|
-
//
|
|
195
|
+
// 현재 prev/next 크기로 비율 역산
|
|
196
|
+
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
197
|
+
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
198
|
+
|
|
199
|
+
const totalPanelSize = prevSize + nextSize;
|
|
200
|
+
|
|
201
|
+
// ➤ 현재 비율 계산
|
|
202
|
+
const prevRatio = totalPanelSize > 0 ? prevSize / totalPanelSize : 0.5;
|
|
203
|
+
const nextRatio = 1 - prevRatio;
|
|
196
204
|
const splitterRatio = splitterSize / totalSize;
|
|
197
|
-
const eachRatio = (1 - splitterRatio) / 2;
|
|
198
205
|
|
|
199
|
-
|
|
200
|
-
prev.style.width = `${eachRatio * 100}%`;
|
|
206
|
+
const availableRatio = 1 - splitterRatio;
|
|
201
207
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
208
|
+
// ➤ 비율 기반 스타일 적용
|
|
209
|
+
if (isHorizontal) {
|
|
210
|
+
prev.style.width = `${availableRatio * prevRatio * 100}%`;
|
|
211
|
+
next.style.width = `${availableRatio * nextRatio * 100}%`;
|
|
212
|
+
this.style.width = `${splitterRatio * 100}%`;
|
|
205
213
|
} else {
|
|
206
|
-
prev.style.height = `${
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
next.style.height = `${eachRatio * 100}%`;
|
|
210
|
-
}
|
|
214
|
+
prev.style.height = `${availableRatio * prevRatio * 100}%`;
|
|
215
|
+
next.style.height = `${availableRatio * nextRatio * 100}%`;
|
|
216
|
+
this.style.height = `${splitterRatio * 100}%`;
|
|
211
217
|
}
|
|
212
218
|
};
|
|
213
219
|
|
|
220
|
+
|
|
214
221
|
}
|
|
215
222
|
|
|
216
223
|
customElements.define("nx-splitter", nxSplitter);
|
package/package.json
CHANGED
package/src/nx/nxSplitter.js
CHANGED
|
@@ -192,25 +192,32 @@ class nxSplitter extends HTMLElement {
|
|
|
192
192
|
const parentRect = parent.getBoundingClientRect();
|
|
193
193
|
const totalSize = isHorizontal ? parentRect.width : parentRect.height;
|
|
194
194
|
|
|
195
|
-
//
|
|
195
|
+
// 현재 prev/next 크기로 비율 역산
|
|
196
|
+
const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
|
|
197
|
+
const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
|
|
198
|
+
|
|
199
|
+
const totalPanelSize = prevSize + nextSize;
|
|
200
|
+
|
|
201
|
+
// ➤ 현재 비율 계산
|
|
202
|
+
const prevRatio = totalPanelSize > 0 ? prevSize / totalPanelSize : 0.5;
|
|
203
|
+
const nextRatio = 1 - prevRatio;
|
|
196
204
|
const splitterRatio = splitterSize / totalSize;
|
|
197
|
-
const eachRatio = (1 - splitterRatio) / 2;
|
|
198
205
|
|
|
199
|
-
|
|
200
|
-
prev.style.width = `${eachRatio * 100}%`;
|
|
206
|
+
const availableRatio = 1 - splitterRatio;
|
|
201
207
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
208
|
+
// ➤ 비율 기반 스타일 적용
|
|
209
|
+
if (isHorizontal) {
|
|
210
|
+
prev.style.width = `${availableRatio * prevRatio * 100}%`;
|
|
211
|
+
next.style.width = `${availableRatio * nextRatio * 100}%`;
|
|
212
|
+
this.style.width = `${splitterRatio * 100}%`;
|
|
205
213
|
} else {
|
|
206
|
-
prev.style.height = `${
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
next.style.height = `${eachRatio * 100}%`;
|
|
210
|
-
}
|
|
214
|
+
prev.style.height = `${availableRatio * prevRatio * 100}%`;
|
|
215
|
+
next.style.height = `${availableRatio * nextRatio * 100}%`;
|
|
216
|
+
this.style.height = `${splitterRatio * 100}%`;
|
|
211
217
|
}
|
|
212
218
|
};
|
|
213
219
|
|
|
220
|
+
|
|
214
221
|
}
|
|
215
222
|
|
|
216
223
|
customElements.define("nx-splitter", nxSplitter);
|