@svgrid/grid 2.2.27 → 2.2.28

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 (212) hide show
  1. package/README.md +199 -199
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -734
  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 +254 -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 -2723
  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 +133 -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/cdn/{GridMenus-BzxEYNtW.js → GridMenus-BbzEvTYO.js} +2 -2
  51. package/dist/cdn/{GridMenus-Dr-nGEXn.js → GridMenus-E220X2kM.js} +2 -2
  52. package/dist/cdn/{SvDateTimePicker-B1sDc9Pz.js → SvDateTimePicker-B8GopjhC.js} +2 -2
  53. package/dist/cdn/{SvDateTimePicker-Bh0FTs1E.js → SvDateTimePicker-DB0aIEk8.js} +2 -2
  54. package/dist/cdn/{SvGridChart-Bgk4hDs8.js → SvGridChart-BcLCYvw9.js} +1 -1
  55. package/dist/cdn/{SvGridChart-BKQsO5fZ.js → SvGridChart-BhnFdLd0.js} +1 -1
  56. package/dist/cdn/{SvGridChartPanel-DkCc2Z7b.js → SvGridChartPanel-Cmx9DHAS.js} +1 -1
  57. package/dist/cdn/{SvGridChartPanel-DSkHIQDd.js → SvGridChartPanel-DvjwxLvK.js} +1 -1
  58. package/dist/cdn/{SvGridChartView-BrbVaELm.js → SvGridChartView-B40DTJSX.js} +1 -1
  59. package/dist/cdn/{SvGridChartView-i9rWvSKg.js → SvGridChartView-PwqI4s02.js} +1 -1
  60. package/dist/cdn/{SvGridDropdown-D08sVmAy.js → SvGridDropdown-DjALc_4f.js} +1 -1
  61. package/dist/cdn/{SvGridDropdown-CGxxopQ4.js → SvGridDropdown-hpnHvOGt.js} +1 -1
  62. package/dist/cdn/{src-cgs1wcUS.js → src-BxNEslEo.js} +25 -25
  63. package/dist/cdn/{src-Cw8d9U8j.js → src-C4yKQZ5t.js} +26 -26
  64. package/dist/cdn/svgrid.js +5 -5
  65. package/dist/cdn/svgrid.svelte-external.js +5 -5
  66. package/dist/chart-export.js +8 -8
  67. package/package.json +10 -10
  68. package/src/FlexRender.svelte +96 -96
  69. package/src/GridFooter.svelte +179 -179
  70. package/src/GridMenus.svelte +734 -734
  71. package/src/SvAutoComplete.svelte +165 -165
  72. package/src/SvCalendar.svelte +503 -503
  73. package/src/SvCalendar.test.ts +226 -226
  74. package/src/SvCarousel.svelte +141 -141
  75. package/src/SvCheckBox.svelte +101 -101
  76. package/src/SvColorInput.svelte +181 -181
  77. package/src/SvComboBox.svelte +275 -275
  78. package/src/SvContextMenu.svelte +116 -116
  79. package/src/SvCountryInput.svelte +160 -160
  80. package/src/SvDrawer.svelte +254 -250
  81. package/src/SvDrawer.test.ts +18 -1
  82. package/src/SvDropDownList.svelte +374 -374
  83. package/src/SvDurationInput.svelte +126 -126
  84. package/src/SvField.svelte +293 -293
  85. package/src/SvForm.svelte +437 -437
  86. package/src/SvForm.test.ts +411 -411
  87. package/src/SvGrid.controller.svelte.ts +3239 -3239
  88. package/src/SvGrid.css +2723 -2723
  89. package/src/SvGrid.svelte +3333 -3333
  90. package/src/SvGrid.types.ts +1613 -1613
  91. package/src/SvGridChart.svelte +1724 -1724
  92. package/src/SvGridChartPanel.svelte +485 -485
  93. package/src/SvGridChartView.svelte +70 -70
  94. package/src/SvGridDropdown.svelte +696 -696
  95. package/src/SvGridSelect.svelte +259 -259
  96. package/src/SvGroupCell.svelte +109 -109
  97. package/src/SvListBox.svelte +287 -287
  98. package/src/SvMaskedInput.svelte +122 -122
  99. package/src/SvMenu.svelte +124 -124
  100. package/src/SvMenu.test.ts +97 -97
  101. package/src/SvMenuList.svelte +146 -146
  102. package/src/SvMultiSelect.svelte +281 -281
  103. package/src/SvNavPane.test.ts +15 -4
  104. package/src/SvNumberInput.svelte +168 -168
  105. package/src/SvOtpInput.svelte +158 -158
  106. package/src/SvPasswordInput.svelte +151 -151
  107. package/src/SvPhoneInput.svelte +133 -131
  108. package/src/SvPopover.svelte +197 -197
  109. package/src/SvRadioGroup.svelte +107 -107
  110. package/src/SvRowGroupPanel.svelte +170 -170
  111. package/src/SvScrollArea.svelte +61 -61
  112. package/src/SvSlider.svelte +200 -200
  113. package/src/SvSwitchButton.svelte +107 -107
  114. package/src/SvTagsInput.svelte +112 -112
  115. package/src/SvTextInput.svelte +147 -147
  116. package/src/SvTimePicker.svelte +245 -245
  117. package/src/SvToaster.svelte +159 -159
  118. package/src/SvToaster.test.ts +95 -95
  119. package/src/SvToggleButton.svelte +85 -85
  120. package/src/SvTooltip.svelte +161 -161
  121. package/src/SvTour.svelte +204 -204
  122. package/src/SvTree.svelte +437 -437
  123. package/src/SvTreeSelect.svelte +233 -233
  124. package/src/a11y/dismissable.test.ts +119 -119
  125. package/src/a11y/dismissable.ts +114 -114
  126. package/src/a11y.contract.test.ts +49 -49
  127. package/src/a11y.test.ts +59 -59
  128. package/src/a11y.ts +61 -61
  129. package/src/ai.test.ts +502 -502
  130. package/src/ai.ts +1391 -1391
  131. package/src/build-api.coverage.test.ts +633 -633
  132. package/src/build-api.ts +895 -895
  133. package/src/builtin-editors.grid.test.ts +85 -85
  134. package/src/cell-formatting.ts +169 -169
  135. package/src/cell-render.ts +469 -469
  136. package/src/chart-export.ts +201 -201
  137. package/src/chart-view.svelte.ts +36 -36
  138. package/src/chart.ts +2296 -2296
  139. package/src/collaboration.test.ts +104 -104
  140. package/src/collaboration.ts +167 -167
  141. package/src/core.performance.test.ts +30 -30
  142. package/src/core.ts +1111 -1111
  143. package/src/createAutocomplete.svelte.ts +132 -132
  144. package/src/createCombobox.svelte.ts +191 -191
  145. package/src/createCountryInput.svelte.ts +157 -157
  146. package/src/createDropdownList.svelte.ts +168 -168
  147. package/src/createForm.svelte.ts +386 -386
  148. package/src/createGrid.svelte.ts +42 -42
  149. package/src/createGrid.test.ts +10 -10
  150. package/src/createGridState.svelte.ts +17 -17
  151. package/src/createMenu.svelte.ts +225 -225
  152. package/src/createPopoverSelect.svelte.ts +213 -213
  153. package/src/createSlider.svelte.ts +191 -191
  154. package/src/createTooltip.svelte.ts +144 -144
  155. package/src/createTree.svelte.ts +319 -319
  156. package/src/editing.test.ts +859 -859
  157. package/src/editing.ts +675 -675
  158. package/src/editor-contract.ts +157 -157
  159. package/src/export-data-api.test.ts +126 -126
  160. package/src/export-format.test.ts +107 -107
  161. package/src/export-format.ts +598 -598
  162. package/src/filter-operators.ts +157 -157
  163. package/src/flex-render.ts +3 -3
  164. package/src/form-field.ts +127 -127
  165. package/src/index.ts +713 -713
  166. package/src/js-scroller.svelte.ts +173 -173
  167. package/src/keyboard.test.ts +59 -59
  168. package/src/keyboard.ts +97 -97
  169. package/src/list-nav.test.ts +49 -49
  170. package/src/list-nav.ts +29 -29
  171. package/src/list-option.test.ts +56 -56
  172. package/src/list-option.ts +172 -172
  173. package/src/menus.test.ts +700 -700
  174. package/src/menus.ts +652 -652
  175. package/src/merge-objects.ts +48 -48
  176. package/src/overlays.test.ts +90 -90
  177. package/src/render-component.ts +28 -28
  178. package/src/scheduler-model.test.ts +562 -562
  179. package/src/scheduler-model.ts +872 -872
  180. package/src/selection.test.ts +754 -754
  181. package/src/selection.ts +600 -600
  182. package/src/server-data-source.test.ts +289 -289
  183. package/src/server-data-source.ts +413 -413
  184. package/src/sparkline.test.ts +68 -68
  185. package/src/sparkline.ts +169 -169
  186. package/src/spreadsheet.test.ts +489 -489
  187. package/src/spreadsheet.ts +312 -312
  188. package/src/static-functions.ts +11 -11
  189. package/src/subscribe.ts +38 -38
  190. package/src/svgrid-wrapper.types.ts +524 -524
  191. package/src/svgrid.behavior.test.ts +706 -706
  192. package/src/svgrid.charting.test.ts +534 -534
  193. package/src/svgrid.features.test.ts +157 -157
  194. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  195. package/src/svgrid.wrapper.test.ts +40 -40
  196. package/src/test-setup.ts +62 -62
  197. package/src/themes/index.ts +215 -215
  198. package/src/toast-store.svelte.ts +246 -246
  199. package/src/toast-store.test.ts +147 -147
  200. package/src/ui-buttons.test.ts +144 -144
  201. package/src/ui-inputs.test.ts +118 -118
  202. package/src/ui-range.test.ts +70 -70
  203. package/src/ui-selection.test.ts +155 -155
  204. package/src/ui-tier1.test.ts +142 -142
  205. package/src/virtual.test.ts +88 -88
  206. package/src/virtualization/column-virtualizer.test.ts +27 -27
  207. package/src/virtualization/column-virtualizer.ts +30 -30
  208. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  209. package/src/virtualization/types.ts +30 -30
  210. package/src/virtualization/virtualizer.test.ts +47 -47
  211. package/src/virtualization/virtualizer.ts +296 -296
  212. package/themes/ember.css +71 -71
@@ -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
+ }