[READ-ONLY] Mirror of https://github.com/probablykasper/k5kit. Utilities for TypeScript and Svelte
vgrid: Resize columns on resizeObserver
+33
-6
+33
-6
src/lib/virtual-grid.ts
+33
-6
src/lib/virtual-grid.ts
···
157
157
const container_width = this.viewport?.clientWidth ?? total_fixed_width
158
158
const total_percent_width = container_width - total_fixed_width
159
159
let offset = 0
160
-
this.columns = columns.map((col) => {
160
+
const new_columns = columns.map((col) => {
161
161
col = { ...col }
162
162
if (col.is_pct) {
163
163
const pct = col.width / total_percent_pct
···
168
168
return col
169
169
})
170
170
171
-
// make all rows fully rerender
172
-
for (const row of this.rows) {
173
-
row.element?.remove()
171
+
let resize_only = true
172
+
if (this.columns.length !== new_columns.length) {
173
+
resize_only = false
174
+
}
175
+
for (let i = 0; i < this.columns.length; i++) {
176
+
if (new_columns[i].key !== this.columns[i].key) {
177
+
resize_only = false
178
+
break
179
+
}
174
180
}
175
-
this.rows = []
176
181
177
-
this.refresh(RefreshLevel.NewRows)
182
+
this.columns = new_columns
183
+
if (resize_only) {
184
+
for (const row of this.rows) {
185
+
if (!row.element) {
186
+
throw new Error('Unexpected missing row element')
187
+
}
188
+
for (let ci = 0; ci < this.columns.length; ci++) {
189
+
const column = this.columns[ci]
190
+
const cell = row.element.children[ci] as HTMLElement
191
+
cell.style.width = `${column.width}px`
192
+
cell.style.translate = `${column.offset}px 0`
193
+
}
194
+
}
195
+
} else {
196
+
// make all rows fully rerender
197
+
for (const row of this.rows) {
198
+
row.element?.remove()
199
+
}
200
+
this.rows = []
201
+
202
+
this.refresh(RefreshLevel.NewRows)
203
+
}
178
204
return this.columns
179
205
}
180
206
···
274
300
this.#update_viewport_size()
275
301
276
302
this.size_observer = new ResizeObserver(() => {
303
+
this.set_columns(this.columns)
277
304
this.#update_viewport_size()
278
305
this.refresh(RefreshLevel.NewRows)
279
306
})