@svgrid/grid 2.2.26 → 2.2.27

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 (218) hide show
  1. package/README.md +199 -145
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -728
  5. package/dist/SvAutoComplete.svelte +165 -165
  6. package/dist/SvCalendar.svelte +503 -503
  7. package/dist/SvCarousel.svelte +141 -141
  8. package/dist/SvCheckBox.svelte +101 -101
  9. package/dist/SvColorInput.svelte +181 -181
  10. package/dist/SvComboBox.svelte +275 -275
  11. package/dist/SvContextMenu.svelte +116 -116
  12. package/dist/SvCountryInput.svelte +160 -160
  13. package/dist/SvDrawer.svelte +250 -250
  14. package/dist/SvDropDownList.svelte +374 -374
  15. package/dist/SvDurationInput.svelte +126 -126
  16. package/dist/SvField.svelte +293 -293
  17. package/dist/SvForm.svelte +437 -437
  18. package/dist/SvGrid.css +2723 -2719
  19. package/dist/SvGrid.svelte +3333 -3333
  20. package/dist/SvGridChart.svelte +1724 -1724
  21. package/dist/SvGridChartPanel.svelte +485 -485
  22. package/dist/SvGridChartView.svelte +70 -70
  23. package/dist/SvGridDropdown.svelte +696 -696
  24. package/dist/SvGridSelect.svelte +259 -259
  25. package/dist/SvGroupCell.svelte +109 -109
  26. package/dist/SvListBox.svelte +287 -287
  27. package/dist/SvMaskedInput.svelte +122 -122
  28. package/dist/SvMenu.svelte +124 -124
  29. package/dist/SvMenuList.svelte +146 -146
  30. package/dist/SvMultiSelect.svelte +281 -281
  31. package/dist/SvNumberInput.svelte +168 -168
  32. package/dist/SvOtpInput.svelte +158 -158
  33. package/dist/SvPasswordInput.svelte +151 -151
  34. package/dist/SvPhoneInput.svelte +131 -131
  35. package/dist/SvPopover.svelte +197 -197
  36. package/dist/SvRadioGroup.svelte +107 -107
  37. package/dist/SvRowGroupPanel.svelte +170 -170
  38. package/dist/SvScrollArea.svelte +61 -61
  39. package/dist/SvSlider.svelte +200 -200
  40. package/dist/SvSwitchButton.svelte +107 -107
  41. package/dist/SvTagsInput.svelte +112 -112
  42. package/dist/SvTextInput.svelte +147 -147
  43. package/dist/SvTimePicker.svelte +245 -245
  44. package/dist/SvToaster.svelte +159 -159
  45. package/dist/SvToggleButton.svelte +85 -85
  46. package/dist/SvTooltip.svelte +161 -161
  47. package/dist/SvTour.svelte +204 -204
  48. package/dist/SvTree.svelte +437 -437
  49. package/dist/SvTreeSelect.svelte +233 -233
  50. package/dist/a11y/dismissable.d.ts +11 -0
  51. package/dist/a11y/dismissable.js +21 -0
  52. package/dist/ai.js +3 -3
  53. package/dist/cdn/GridMenus-BzxEYNtW.js +421 -0
  54. package/dist/cdn/GridMenus-Dr-nGEXn.js +417 -0
  55. package/dist/cdn/{SvDateTimePicker-CYC7gRER.js → SvDateTimePicker-B1sDc9Pz.js} +451 -444
  56. package/dist/cdn/{SvDateTimePicker-DtQKd4Ns.js → SvDateTimePicker-Bh0FTs1E.js} +114 -107
  57. package/dist/cdn/{SvGridChart-BhnFdLd0.js → SvGridChart-BKQsO5fZ.js} +1 -1
  58. package/dist/cdn/{SvGridChart-BcLCYvw9.js → SvGridChart-Bgk4hDs8.js} +1 -1
  59. package/dist/cdn/{SvGridChartPanel-DvjwxLvK.js → SvGridChartPanel-DSkHIQDd.js} +1 -1
  60. package/dist/cdn/{SvGridChartPanel-Cmx9DHAS.js → SvGridChartPanel-DkCc2Z7b.js} +1 -1
  61. package/dist/cdn/{SvGridChartView-B40DTJSX.js → SvGridChartView-BrbVaELm.js} +1 -1
  62. package/dist/cdn/{SvGridChartView-PwqI4s02.js → SvGridChartView-i9rWvSKg.js} +1 -1
  63. package/dist/cdn/{SvGridDropdown-hpnHvOGt.js → SvGridDropdown-CGxxopQ4.js} +1 -1
  64. package/dist/cdn/{SvGridDropdown-DjALc_4f.js → SvGridDropdown-D08sVmAy.js} +1 -1
  65. package/dist/cdn/{src-DysW9qbk.js → src-Cw8d9U8j.js} +5753 -5753
  66. package/dist/cdn/{src-bYfr_7aR.js → src-cgs1wcUS.js} +8102 -8102
  67. package/dist/cdn/svgrid.js +9 -9
  68. package/dist/cdn/svgrid.svelte-external.js +9 -9
  69. package/dist/chart-export.js +8 -8
  70. package/dist/index.d.ts +1 -1
  71. package/dist/index.js +1 -1
  72. package/package.json +30 -13
  73. package/src/FlexRender.svelte +96 -96
  74. package/src/GridFooter.svelte +179 -179
  75. package/src/GridMenus.svelte +734 -728
  76. package/src/SvAutoComplete.svelte +165 -165
  77. package/src/SvCalendar.svelte +503 -503
  78. package/src/SvCalendar.test.ts +226 -226
  79. package/src/SvCarousel.svelte +141 -141
  80. package/src/SvCheckBox.svelte +101 -101
  81. package/src/SvColorInput.svelte +181 -181
  82. package/src/SvComboBox.svelte +275 -275
  83. package/src/SvContextMenu.svelte +116 -116
  84. package/src/SvCountryInput.svelte +160 -160
  85. package/src/SvDrawer.svelte +250 -250
  86. package/src/SvDropDownList.svelte +374 -374
  87. package/src/SvDurationInput.svelte +126 -126
  88. package/src/SvField.svelte +293 -293
  89. package/src/SvForm.svelte +437 -437
  90. package/src/SvForm.test.ts +411 -411
  91. package/src/SvGrid.controller.svelte.ts +3239 -3239
  92. package/src/SvGrid.css +2723 -2719
  93. package/src/SvGrid.svelte +3333 -3333
  94. package/src/SvGrid.types.ts +1613 -1613
  95. package/src/SvGridChart.svelte +1724 -1724
  96. package/src/SvGridChartPanel.svelte +485 -485
  97. package/src/SvGridChartView.svelte +70 -70
  98. package/src/SvGridDropdown.svelte +696 -696
  99. package/src/SvGridSelect.svelte +259 -259
  100. package/src/SvGroupCell.svelte +109 -109
  101. package/src/SvListBox.svelte +287 -287
  102. package/src/SvMaskedInput.svelte +122 -122
  103. package/src/SvMenu.svelte +124 -124
  104. package/src/SvMenu.test.ts +97 -97
  105. package/src/SvMenuList.svelte +146 -146
  106. package/src/SvMultiSelect.svelte +281 -281
  107. package/src/SvNumberInput.svelte +168 -168
  108. package/src/SvOtpInput.svelte +158 -158
  109. package/src/SvPasswordInput.svelte +151 -151
  110. package/src/SvPhoneInput.svelte +131 -131
  111. package/src/SvPopover.svelte +197 -197
  112. package/src/SvRadioGroup.svelte +107 -107
  113. package/src/SvRowGroupPanel.svelte +170 -170
  114. package/src/SvScrollArea.svelte +61 -61
  115. package/src/SvSlider.svelte +200 -200
  116. package/src/SvSwitchButton.svelte +107 -107
  117. package/src/SvTagsInput.svelte +112 -112
  118. package/src/SvTextInput.svelte +147 -147
  119. package/src/SvTimePicker.svelte +245 -245
  120. package/src/SvToaster.svelte +159 -159
  121. package/src/SvToaster.test.ts +95 -95
  122. package/src/SvToggleButton.svelte +85 -85
  123. package/src/SvTooltip.svelte +161 -161
  124. package/src/SvTour.svelte +204 -204
  125. package/src/SvTree.svelte +437 -437
  126. package/src/SvTreeSelect.svelte +233 -233
  127. package/src/a11y/dismissable.test.ts +119 -95
  128. package/src/a11y/dismissable.ts +114 -94
  129. package/src/a11y.contract.test.ts +49 -49
  130. package/src/a11y.test.ts +59 -59
  131. package/src/a11y.ts +61 -61
  132. package/src/ai.test.ts +502 -502
  133. package/src/ai.ts +1391 -1391
  134. package/src/build-api.coverage.test.ts +633 -633
  135. package/src/build-api.ts +895 -895
  136. package/src/builtin-editors.grid.test.ts +85 -85
  137. package/src/cell-formatting.ts +169 -169
  138. package/src/cell-render.ts +469 -469
  139. package/src/chart-export.ts +201 -201
  140. package/src/chart-view.svelte.ts +36 -36
  141. package/src/chart.ts +2296 -2296
  142. package/src/collaboration.test.ts +104 -104
  143. package/src/collaboration.ts +167 -167
  144. package/src/core.performance.test.ts +30 -30
  145. package/src/core.ts +1111 -1111
  146. package/src/createAutocomplete.svelte.ts +132 -132
  147. package/src/createCombobox.svelte.ts +191 -191
  148. package/src/createCountryInput.svelte.ts +157 -157
  149. package/src/createDropdownList.svelte.ts +168 -168
  150. package/src/createForm.svelte.ts +386 -386
  151. package/src/createGrid.svelte.ts +42 -42
  152. package/src/createGrid.test.ts +10 -10
  153. package/src/createGridState.svelte.ts +17 -17
  154. package/src/createMenu.svelte.ts +225 -225
  155. package/src/createPopoverSelect.svelte.ts +213 -213
  156. package/src/createSlider.svelte.ts +191 -191
  157. package/src/createTooltip.svelte.ts +144 -144
  158. package/src/createTree.svelte.ts +319 -319
  159. package/src/editing.test.ts +859 -859
  160. package/src/editing.ts +675 -675
  161. package/src/editor-contract.ts +157 -157
  162. package/src/export-data-api.test.ts +126 -126
  163. package/src/export-format.test.ts +107 -107
  164. package/src/export-format.ts +598 -598
  165. package/src/filter-operators.ts +157 -157
  166. package/src/flex-render.ts +3 -3
  167. package/src/form-field.ts +127 -127
  168. package/src/index.ts +713 -712
  169. package/src/js-scroller.svelte.ts +173 -173
  170. package/src/keyboard.test.ts +59 -59
  171. package/src/keyboard.ts +97 -97
  172. package/src/list-nav.test.ts +49 -49
  173. package/src/list-nav.ts +29 -29
  174. package/src/list-option.test.ts +56 -56
  175. package/src/list-option.ts +172 -172
  176. package/src/menus.test.ts +700 -700
  177. package/src/menus.ts +652 -652
  178. package/src/merge-objects.ts +48 -48
  179. package/src/overlays.test.ts +90 -90
  180. package/src/render-component.ts +28 -28
  181. package/src/scheduler-model.test.ts +562 -562
  182. package/src/scheduler-model.ts +872 -872
  183. package/src/selection.test.ts +754 -754
  184. package/src/selection.ts +600 -600
  185. package/src/server-data-source.test.ts +289 -289
  186. package/src/server-data-source.ts +413 -413
  187. package/src/sparkline.test.ts +68 -68
  188. package/src/sparkline.ts +169 -169
  189. package/src/spreadsheet.test.ts +489 -489
  190. package/src/spreadsheet.ts +312 -312
  191. package/src/static-functions.ts +11 -11
  192. package/src/subscribe.ts +38 -38
  193. package/src/svgrid-wrapper.types.ts +524 -524
  194. package/src/svgrid.behavior.test.ts +706 -706
  195. package/src/svgrid.charting.test.ts +534 -534
  196. package/src/svgrid.features.test.ts +157 -157
  197. package/src/svgrid.filter-menu-scroll.test.ts +102 -0
  198. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  199. package/src/svgrid.wrapper.test.ts +40 -40
  200. package/src/test-setup.ts +62 -62
  201. package/src/themes/index.ts +215 -215
  202. package/src/toast-store.svelte.ts +246 -246
  203. package/src/toast-store.test.ts +147 -147
  204. package/src/ui-buttons.test.ts +144 -144
  205. package/src/ui-inputs.test.ts +118 -118
  206. package/src/ui-range.test.ts +70 -70
  207. package/src/ui-selection.test.ts +155 -155
  208. package/src/ui-tier1.test.ts +142 -142
  209. package/src/virtual.test.ts +88 -88
  210. package/src/virtualization/column-virtualizer.test.ts +27 -27
  211. package/src/virtualization/column-virtualizer.ts +30 -30
  212. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  213. package/src/virtualization/types.ts +30 -30
  214. package/src/virtualization/virtualizer.test.ts +47 -47
  215. package/src/virtualization/virtualizer.ts +296 -296
  216. package/themes/ember.css +71 -71
  217. package/dist/cdn/GridMenus-GfCAHgkZ.js +0 -420
  218. package/dist/cdn/GridMenus-GiVNSeDU.js +0 -416
@@ -1,296 +1,296 @@
1
- import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types'
2
-
3
- type VirtualizerListener = () => void
4
-
5
- function clamp(value: number, min: number, max: number) {
6
- return Math.min(Math.max(value, min), max)
7
- }
8
-
9
- function sameOptions(a: VirtualizerOptions, b: VirtualizerOptions) {
10
- return (
11
- a.count === b.count &&
12
- a.estimateSize === b.estimateSize &&
13
- (a.overscan ?? 6) === (b.overscan ?? 6) &&
14
- a.viewportHeight === b.viewportHeight &&
15
- (a.scrollOffset ?? 0) === (b.scrollOffset ?? 0)
16
- )
17
- }
18
-
19
- function sameState(a: VirtualizerState, b: VirtualizerState) {
20
- if (
21
- a.totalSize !== b.totalSize ||
22
- a.startIndex !== b.startIndex ||
23
- a.endIndex !== b.endIndex ||
24
- a.viewportHeight !== b.viewportHeight ||
25
- a.items.length !== b.items.length
26
- ) {
27
- return false
28
- }
29
- // Per-item start+size check: catches column-resize cases where the total
30
- // is unchanged (e.g. column A grew, column B shrunk to compensate under
31
- // fit-to-width). Without this, the virtualizer skips the emit and the
32
- // grid renders with stale widths.
33
- for (let i = 0; i < a.items.length; i += 1) {
34
- const ai = a.items[i]!
35
- const bi = b.items[i]!
36
- if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size) return false
37
- }
38
- return true
39
- }
40
-
41
- // Slot-based keying: the key is the POSITION of the item inside the
42
- // visible window (slot 0 = topmost rendered row, slot 1 = next, etc.)
43
- // - NOT the data index. As the user scrolls, the window's startIndex
44
- // changes but the slot keys stay the same (0..N-1), so Svelte recycles
45
- // the existing <tr> DOM nodes and only updates their data + position.
46
- //
47
- // This avoids the mount/unmount churn that previously fired on every
48
- // scroll tick: with data-index keys, scrolling down 1 row meant the old
49
- // topmost key disappeared and a new bottommost key appeared, forcing
50
- // Svelte to unmount the top <tr> and mount a fresh one at the bottom.
51
- // Slot-based keys keep the same N <tr> nodes alive for the lifetime of
52
- // the grid; scroll just translates them via the top spacer.
53
- function buildUniformItems(
54
- startIndex: number,
55
- endIndex: number,
56
- estimateSize: number,
57
- ): Array<VirtualItem> {
58
- const items: Array<VirtualItem> = []
59
- for (let index = startIndex; index <= endIndex; index += 1) {
60
- const start = index * estimateSize
61
- items.push({
62
- index,
63
- start,
64
- size: estimateSize,
65
- end: start + estimateSize,
66
- key: `virtual_slot_${index - startIndex}`,
67
- })
68
- }
69
- return items
70
- }
71
-
72
- function buildVariableItems(
73
- startIndex: number,
74
- endIndex: number,
75
- offsets: Array<number>,
76
- ): Array<VirtualItem> {
77
- const items: Array<VirtualItem> = []
78
- for (let index = startIndex; index <= endIndex; index += 1) {
79
- const start = offsets[index] ?? 0
80
- const end = offsets[index + 1] ?? start
81
- items.push({
82
- index,
83
- start,
84
- size: end - start,
85
- end,
86
- key: `virtual_slot_${index - startIndex}`,
87
- })
88
- }
89
- return items
90
- }
91
-
92
- function createState(
93
- options: VirtualizerOptions,
94
- /** Pre-built cumulative offsets for the variable-size path. */
95
- offsets: Array<number> | null,
96
- ): VirtualizerState {
97
- const count = Math.max(options.count, 0)
98
- const overscan = Math.max(options.overscan ?? 6, 0)
99
- const viewportHeight = Math.max(options.viewportHeight, 0)
100
-
101
- if (typeof options.estimateSize === 'function' && offsets) {
102
- const totalSize = offsets[count] ?? 0
103
- const maxOffset = Math.max(totalSize - viewportHeight, 0)
104
- const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
105
-
106
- // First index whose end > scrollOffset.
107
- let lo = 0
108
- let hi = count
109
- while (lo < hi) {
110
- const mid = (lo + hi) >>> 1
111
- if ((offsets[mid + 1] ?? 0) <= scrollOffset) lo = mid + 1
112
- else hi = mid
113
- }
114
- const visibleStart = lo
115
-
116
- // First index whose start >= scrollOffset + viewportHeight.
117
- const viewportEnd = scrollOffset + viewportHeight
118
- lo = visibleStart
119
- hi = count
120
- while (lo < hi) {
121
- const mid = (lo + hi) >>> 1
122
- if ((offsets[mid] ?? 0) < viewportEnd) lo = mid + 1
123
- else hi = mid
124
- }
125
- const visibleEnd = Math.max(lo - 1, visibleStart)
126
-
127
- const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
128
- const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
129
-
130
- return {
131
- items: endIndex >= startIndex ? buildVariableItems(startIndex, endIndex, offsets) : [],
132
- totalSize,
133
- startIndex,
134
- endIndex,
135
- scrollOffset,
136
- viewportHeight,
137
- }
138
- }
139
-
140
- // Uniform-size fast path (original behavior).
141
- const estimateSize = Math.max(
142
- typeof options.estimateSize === 'number' ? options.estimateSize : 1,
143
- 1,
144
- )
145
- const totalSize = count * estimateSize
146
- const maxOffset = Math.max(totalSize - viewportHeight, 0)
147
- const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
148
-
149
- const visibleStart = Math.floor(scrollOffset / estimateSize)
150
- const visibleCount = Math.ceil(viewportHeight / estimateSize)
151
- const visibleEnd = Math.min(visibleStart + visibleCount, Math.max(count - 1, 0))
152
-
153
- const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
154
- const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
155
-
156
- return {
157
- items: endIndex >= startIndex ? buildUniformItems(startIndex, endIndex, estimateSize) : [],
158
- totalSize,
159
- startIndex,
160
- endIndex,
161
- scrollOffset,
162
- viewportHeight,
163
- }
164
- }
165
-
166
- /** Cached cumulative-offset table for the variable-size virtualizer path.
167
- * Rebuilt only when count or the size function changes; reused across the
168
- * many `recalc()` calls that happen during scroll. */
169
- type OffsetCache = {
170
- fn: (index: number) => number
171
- count: number
172
- offsets: Array<number>
173
- } | null
174
-
175
- export function createVirtualizer(initial: VirtualizerOptions) {
176
- let options = initial
177
- let offsetCache: OffsetCache = null
178
-
179
- function getOffsets(): Array<number> | null {
180
- if (typeof options.estimateSize !== 'function') return null
181
- const count = Math.max(options.count, 0)
182
- if (
183
- offsetCache &&
184
- offsetCache.fn === options.estimateSize &&
185
- offsetCache.count === count
186
- ) {
187
- return offsetCache.offsets
188
- }
189
- const sizeFn = options.estimateSize
190
- const offsets = new Array<number>(count + 1)
191
- offsets[0] = 0
192
- for (let i = 0; i < count; i += 1) {
193
- offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 1)
194
- }
195
- offsetCache = { fn: sizeFn, count, offsets }
196
- return offsets
197
- }
198
-
199
- let state = createState(options, getOffsets())
200
- const listeners = new Set<VirtualizerListener>()
201
-
202
- function emit() {
203
- listeners.forEach((listener) => listener())
204
- }
205
-
206
- function recalc() {
207
- const next = createState(options, getOffsets())
208
- if (sameState(state, next)) return
209
- state = next
210
- emit()
211
- }
212
-
213
- return {
214
- setOptions(next: Partial<VirtualizerOptions>) {
215
- const merged = { ...options, ...next }
216
- if (sameOptions(options, merged)) return
217
- options = merged
218
- recalc()
219
- },
220
- setScrollOffset(scrollOffset: number) {
221
- if ((options.scrollOffset ?? 0) === scrollOffset) return
222
- options = { ...options, scrollOffset }
223
- recalc()
224
- },
225
- setViewportHeight(viewportHeight: number) {
226
- if (options.viewportHeight === viewportHeight) return
227
- options = { ...options, viewportHeight }
228
- recalc()
229
- },
230
- scrollToIndex(index: number) {
231
- const boundedIndex = clamp(index, 0, Math.max(options.count - 1, 0))
232
- // Read the current state's totals so the offset is correct under both
233
- // uniform and per-index sizing.
234
- const totalSize = state.totalSize
235
- let targetOffset: number
236
- if (typeof options.estimateSize === 'function') {
237
- // Use the cached cumulative offsets if present.
238
- const offsets = getOffsets()
239
- if (offsets) {
240
- targetOffset = offsets[boundedIndex] ?? 0
241
- } else {
242
- let acc = 0
243
- const sizeFn = options.estimateSize
244
- for (let i = 0; i < boundedIndex; i += 1) acc += Math.max(sizeFn(i), 1)
245
- targetOffset = acc
246
- }
247
- } else {
248
- targetOffset = boundedIndex * Math.max(options.estimateSize, 1)
249
- }
250
- const maxOffset = Math.max(totalSize - options.viewportHeight, 0)
251
- const nextOffset = clamp(targetOffset, 0, maxOffset)
252
- if ((options.scrollOffset ?? 0) === nextOffset) return
253
- options = { ...options, scrollOffset: nextOffset }
254
- recalc()
255
- },
256
- getVirtualItems() {
257
- return state.items
258
- },
259
- getTotalSize() {
260
- return state.totalSize
261
- },
262
- /** Cumulative offset of row `index` from the top in px, regardless
263
- * of whether `estimateSize` is uniform or per-index. Uses the
264
- * cached offsets array under function-form sizing so the lookup
265
- * is O(1) instead of O(index). */
266
- getOffsetForIndex(index: number): number {
267
- if (index <= 0) return 0
268
- const count = Math.max(options.count, 0)
269
- const bounded = Math.min(index, count)
270
- if (typeof options.estimateSize === 'function') {
271
- const offsets = getOffsets()
272
- if (offsets) return offsets[bounded] ?? 0
273
- let acc = 0
274
- const fn = options.estimateSize
275
- for (let i = 0; i < bounded; i += 1) acc += Math.max(fn(i), 1)
276
- return acc
277
- }
278
- return bounded * Math.max(options.estimateSize, 1)
279
- },
280
- /** Height of row `index` in px (whichever estimateSize provides). */
281
- getSizeForIndex(index: number): number {
282
- if (index < 0 || index >= options.count) return 0
283
- if (typeof options.estimateSize === 'function') {
284
- return Math.max(options.estimateSize(index), 1)
285
- }
286
- return Math.max(options.estimateSize, 1)
287
- },
288
- getState() {
289
- return state
290
- },
291
- subscribe(listener: VirtualizerListener) {
292
- listeners.add(listener)
293
- return () => listeners.delete(listener)
294
- },
295
- }
296
- }
1
+ import type { VirtualItem, VirtualizerOptions, VirtualizerState } from './types'
2
+
3
+ type VirtualizerListener = () => void
4
+
5
+ function clamp(value: number, min: number, max: number) {
6
+ return Math.min(Math.max(value, min), max)
7
+ }
8
+
9
+ function sameOptions(a: VirtualizerOptions, b: VirtualizerOptions) {
10
+ return (
11
+ a.count === b.count &&
12
+ a.estimateSize === b.estimateSize &&
13
+ (a.overscan ?? 6) === (b.overscan ?? 6) &&
14
+ a.viewportHeight === b.viewportHeight &&
15
+ (a.scrollOffset ?? 0) === (b.scrollOffset ?? 0)
16
+ )
17
+ }
18
+
19
+ function sameState(a: VirtualizerState, b: VirtualizerState) {
20
+ if (
21
+ a.totalSize !== b.totalSize ||
22
+ a.startIndex !== b.startIndex ||
23
+ a.endIndex !== b.endIndex ||
24
+ a.viewportHeight !== b.viewportHeight ||
25
+ a.items.length !== b.items.length
26
+ ) {
27
+ return false
28
+ }
29
+ // Per-item start+size check: catches column-resize cases where the total
30
+ // is unchanged (e.g. column A grew, column B shrunk to compensate under
31
+ // fit-to-width). Without this, the virtualizer skips the emit and the
32
+ // grid renders with stale widths.
33
+ for (let i = 0; i < a.items.length; i += 1) {
34
+ const ai = a.items[i]!
35
+ const bi = b.items[i]!
36
+ if (ai.index !== bi.index || ai.start !== bi.start || ai.size !== bi.size) return false
37
+ }
38
+ return true
39
+ }
40
+
41
+ // Slot-based keying: the key is the POSITION of the item inside the
42
+ // visible window (slot 0 = topmost rendered row, slot 1 = next, etc.)
43
+ // - NOT the data index. As the user scrolls, the window's startIndex
44
+ // changes but the slot keys stay the same (0..N-1), so Svelte recycles
45
+ // the existing <tr> DOM nodes and only updates their data + position.
46
+ //
47
+ // This avoids the mount/unmount churn that previously fired on every
48
+ // scroll tick: with data-index keys, scrolling down 1 row meant the old
49
+ // topmost key disappeared and a new bottommost key appeared, forcing
50
+ // Svelte to unmount the top <tr> and mount a fresh one at the bottom.
51
+ // Slot-based keys keep the same N <tr> nodes alive for the lifetime of
52
+ // the grid; scroll just translates them via the top spacer.
53
+ function buildUniformItems(
54
+ startIndex: number,
55
+ endIndex: number,
56
+ estimateSize: number,
57
+ ): Array<VirtualItem> {
58
+ const items: Array<VirtualItem> = []
59
+ for (let index = startIndex; index <= endIndex; index += 1) {
60
+ const start = index * estimateSize
61
+ items.push({
62
+ index,
63
+ start,
64
+ size: estimateSize,
65
+ end: start + estimateSize,
66
+ key: `virtual_slot_${index - startIndex}`,
67
+ })
68
+ }
69
+ return items
70
+ }
71
+
72
+ function buildVariableItems(
73
+ startIndex: number,
74
+ endIndex: number,
75
+ offsets: Array<number>,
76
+ ): Array<VirtualItem> {
77
+ const items: Array<VirtualItem> = []
78
+ for (let index = startIndex; index <= endIndex; index += 1) {
79
+ const start = offsets[index] ?? 0
80
+ const end = offsets[index + 1] ?? start
81
+ items.push({
82
+ index,
83
+ start,
84
+ size: end - start,
85
+ end,
86
+ key: `virtual_slot_${index - startIndex}`,
87
+ })
88
+ }
89
+ return items
90
+ }
91
+
92
+ function createState(
93
+ options: VirtualizerOptions,
94
+ /** Pre-built cumulative offsets for the variable-size path. */
95
+ offsets: Array<number> | null,
96
+ ): VirtualizerState {
97
+ const count = Math.max(options.count, 0)
98
+ const overscan = Math.max(options.overscan ?? 6, 0)
99
+ const viewportHeight = Math.max(options.viewportHeight, 0)
100
+
101
+ if (typeof options.estimateSize === 'function' && offsets) {
102
+ const totalSize = offsets[count] ?? 0
103
+ const maxOffset = Math.max(totalSize - viewportHeight, 0)
104
+ const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
105
+
106
+ // First index whose end > scrollOffset.
107
+ let lo = 0
108
+ let hi = count
109
+ while (lo < hi) {
110
+ const mid = (lo + hi) >>> 1
111
+ if ((offsets[mid + 1] ?? 0) <= scrollOffset) lo = mid + 1
112
+ else hi = mid
113
+ }
114
+ const visibleStart = lo
115
+
116
+ // First index whose start >= scrollOffset + viewportHeight.
117
+ const viewportEnd = scrollOffset + viewportHeight
118
+ lo = visibleStart
119
+ hi = count
120
+ while (lo < hi) {
121
+ const mid = (lo + hi) >>> 1
122
+ if ((offsets[mid] ?? 0) < viewportEnd) lo = mid + 1
123
+ else hi = mid
124
+ }
125
+ const visibleEnd = Math.max(lo - 1, visibleStart)
126
+
127
+ const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
128
+ const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
129
+
130
+ return {
131
+ items: endIndex >= startIndex ? buildVariableItems(startIndex, endIndex, offsets) : [],
132
+ totalSize,
133
+ startIndex,
134
+ endIndex,
135
+ scrollOffset,
136
+ viewportHeight,
137
+ }
138
+ }
139
+
140
+ // Uniform-size fast path (original behavior).
141
+ const estimateSize = Math.max(
142
+ typeof options.estimateSize === 'number' ? options.estimateSize : 1,
143
+ 1,
144
+ )
145
+ const totalSize = count * estimateSize
146
+ const maxOffset = Math.max(totalSize - viewportHeight, 0)
147
+ const scrollOffset = clamp(options.scrollOffset ?? 0, 0, maxOffset)
148
+
149
+ const visibleStart = Math.floor(scrollOffset / estimateSize)
150
+ const visibleCount = Math.ceil(viewportHeight / estimateSize)
151
+ const visibleEnd = Math.min(visibleStart + visibleCount, Math.max(count - 1, 0))
152
+
153
+ const startIndex = count === 0 ? 0 : clamp(visibleStart - overscan, 0, count - 1)
154
+ const endIndex = count === 0 ? -1 : clamp(visibleEnd + overscan, 0, count - 1)
155
+
156
+ return {
157
+ items: endIndex >= startIndex ? buildUniformItems(startIndex, endIndex, estimateSize) : [],
158
+ totalSize,
159
+ startIndex,
160
+ endIndex,
161
+ scrollOffset,
162
+ viewportHeight,
163
+ }
164
+ }
165
+
166
+ /** Cached cumulative-offset table for the variable-size virtualizer path.
167
+ * Rebuilt only when count or the size function changes; reused across the
168
+ * many `recalc()` calls that happen during scroll. */
169
+ type OffsetCache = {
170
+ fn: (index: number) => number
171
+ count: number
172
+ offsets: Array<number>
173
+ } | null
174
+
175
+ export function createVirtualizer(initial: VirtualizerOptions) {
176
+ let options = initial
177
+ let offsetCache: OffsetCache = null
178
+
179
+ function getOffsets(): Array<number> | null {
180
+ if (typeof options.estimateSize !== 'function') return null
181
+ const count = Math.max(options.count, 0)
182
+ if (
183
+ offsetCache &&
184
+ offsetCache.fn === options.estimateSize &&
185
+ offsetCache.count === count
186
+ ) {
187
+ return offsetCache.offsets
188
+ }
189
+ const sizeFn = options.estimateSize
190
+ const offsets = new Array<number>(count + 1)
191
+ offsets[0] = 0
192
+ for (let i = 0; i < count; i += 1) {
193
+ offsets[i + 1] = offsets[i]! + Math.max(sizeFn(i), 1)
194
+ }
195
+ offsetCache = { fn: sizeFn, count, offsets }
196
+ return offsets
197
+ }
198
+
199
+ let state = createState(options, getOffsets())
200
+ const listeners = new Set<VirtualizerListener>()
201
+
202
+ function emit() {
203
+ listeners.forEach((listener) => listener())
204
+ }
205
+
206
+ function recalc() {
207
+ const next = createState(options, getOffsets())
208
+ if (sameState(state, next)) return
209
+ state = next
210
+ emit()
211
+ }
212
+
213
+ return {
214
+ setOptions(next: Partial<VirtualizerOptions>) {
215
+ const merged = { ...options, ...next }
216
+ if (sameOptions(options, merged)) return
217
+ options = merged
218
+ recalc()
219
+ },
220
+ setScrollOffset(scrollOffset: number) {
221
+ if ((options.scrollOffset ?? 0) === scrollOffset) return
222
+ options = { ...options, scrollOffset }
223
+ recalc()
224
+ },
225
+ setViewportHeight(viewportHeight: number) {
226
+ if (options.viewportHeight === viewportHeight) return
227
+ options = { ...options, viewportHeight }
228
+ recalc()
229
+ },
230
+ scrollToIndex(index: number) {
231
+ const boundedIndex = clamp(index, 0, Math.max(options.count - 1, 0))
232
+ // Read the current state's totals so the offset is correct under both
233
+ // uniform and per-index sizing.
234
+ const totalSize = state.totalSize
235
+ let targetOffset: number
236
+ if (typeof options.estimateSize === 'function') {
237
+ // Use the cached cumulative offsets if present.
238
+ const offsets = getOffsets()
239
+ if (offsets) {
240
+ targetOffset = offsets[boundedIndex] ?? 0
241
+ } else {
242
+ let acc = 0
243
+ const sizeFn = options.estimateSize
244
+ for (let i = 0; i < boundedIndex; i += 1) acc += Math.max(sizeFn(i), 1)
245
+ targetOffset = acc
246
+ }
247
+ } else {
248
+ targetOffset = boundedIndex * Math.max(options.estimateSize, 1)
249
+ }
250
+ const maxOffset = Math.max(totalSize - options.viewportHeight, 0)
251
+ const nextOffset = clamp(targetOffset, 0, maxOffset)
252
+ if ((options.scrollOffset ?? 0) === nextOffset) return
253
+ options = { ...options, scrollOffset: nextOffset }
254
+ recalc()
255
+ },
256
+ getVirtualItems() {
257
+ return state.items
258
+ },
259
+ getTotalSize() {
260
+ return state.totalSize
261
+ },
262
+ /** Cumulative offset of row `index` from the top in px, regardless
263
+ * of whether `estimateSize` is uniform or per-index. Uses the
264
+ * cached offsets array under function-form sizing so the lookup
265
+ * is O(1) instead of O(index). */
266
+ getOffsetForIndex(index: number): number {
267
+ if (index <= 0) return 0
268
+ const count = Math.max(options.count, 0)
269
+ const bounded = Math.min(index, count)
270
+ if (typeof options.estimateSize === 'function') {
271
+ const offsets = getOffsets()
272
+ if (offsets) return offsets[bounded] ?? 0
273
+ let acc = 0
274
+ const fn = options.estimateSize
275
+ for (let i = 0; i < bounded; i += 1) acc += Math.max(fn(i), 1)
276
+ return acc
277
+ }
278
+ return bounded * Math.max(options.estimateSize, 1)
279
+ },
280
+ /** Height of row `index` in px (whichever estimateSize provides). */
281
+ getSizeForIndex(index: number): number {
282
+ if (index < 0 || index >= options.count) return 0
283
+ if (typeof options.estimateSize === 'function') {
284
+ return Math.max(options.estimateSize(index), 1)
285
+ }
286
+ return Math.max(options.estimateSize, 1)
287
+ },
288
+ getState() {
289
+ return state
290
+ },
291
+ subscribe(listener: VirtualizerListener) {
292
+ listeners.add(listener)
293
+ return () => listeners.delete(listener)
294
+ },
295
+ }
296
+ }