@react-stately/virtualizer 3.1.6-nightly.2978 → 3.1.7-alpha.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/main.js +1077 -1835
- package/dist/main.js.map +1 -1
- package/dist/module.js +1055 -1806
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +9 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/LayoutInfo.ts +8 -0
- package/src/Virtualizer.ts +2 -1
package/dist/main.js
CHANGED
|
@@ -1,2028 +1,1270 @@
|
|
|
1
|
-
var
|
|
1
|
+
var $bMVmL$react = require("react");
|
|
2
|
+
var $bMVmL$reactariautils = require("@react-aria/utils");
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
function $parcel$exportWildcard(dest, source) {
|
|
5
|
+
Object.keys(source).forEach(function(key) {
|
|
6
|
+
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
10
|
+
Object.defineProperty(dest, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return source[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
return a && a.__esModule ? a.default : a;
|
|
18
|
+
return dest;
|
|
16
19
|
}
|
|
20
|
+
function $parcel$export(e, n, v, s) {
|
|
21
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
22
|
+
}
|
|
23
|
+
var $85b9c82579d5b203$exports = {};
|
|
17
24
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
22
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
23
|
-
*
|
|
24
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
25
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
26
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
27
|
-
* governing permissions and limitations under the License.
|
|
28
|
-
*/
|
|
29
|
-
// import {Point} from './Point';
|
|
30
|
-
// import { DragTarget, DropTarget } from '@react-types/shared';
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* [CollectionView]{@link CollectionView} supports arbitrary layout objects, which compute what views are visible, and how
|
|
34
|
-
* to position and style them. However, layouts do not create the views themselves directly. Instead,
|
|
35
|
-
* layouts produce lightweight {@link LayoutInfo} objects which describe various properties of a view,
|
|
36
|
-
* such as its position and size. The {@link CollectionView} is then responsible for creating the actual
|
|
37
|
-
* views as needed, based on this layout information.
|
|
38
|
-
*
|
|
39
|
-
* Every layout extends from the {@link Layout} abstract base class. Layouts must implement a minimum of the
|
|
40
|
-
* two methods listed below. All other methods can be optionally overridden to implement custom behavior.
|
|
41
|
-
*
|
|
42
|
-
* @see {@link getVisibleLayoutInfos}
|
|
43
|
-
* @see {@link getLayoutInfo}
|
|
44
|
-
*/
|
|
45
|
-
class Layout {
|
|
46
|
-
constructor() {
|
|
47
|
-
this.virtualizer = void 0;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/**
|
|
25
|
+
$parcel$export($85b9c82579d5b203$exports, "Layout", () => $85b9c82579d5b203$export$c84671f46d6a1ca);
|
|
26
|
+
class $85b9c82579d5b203$export$c84671f46d6a1ca {
|
|
27
|
+
/**
|
|
51
28
|
* Returns whether the layout should invalidate in response to
|
|
52
29
|
* visible rectangle changes. By default, it only invalidates
|
|
53
30
|
* when the collection view's size changes. Return true always
|
|
54
31
|
* to make the layout invalidate while scrolling (e.g. sticky headers).
|
|
55
|
-
*/
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
/**
|
|
32
|
+
*/ shouldInvalidate(newRect, oldRect) {
|
|
33
|
+
// By default, invalidate when the size changes
|
|
34
|
+
return newRect.width !== oldRect.width || newRect.height !== oldRect.height;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
61
37
|
* This method allows the layout to perform any pre-computation
|
|
62
38
|
* it needs to in order to prepare {@link LayoutInfo}s for retrieval.
|
|
63
39
|
* Called by the collection view before {@link getVisibleLayoutInfos}
|
|
64
40
|
* or {@link getLayoutInfo} are called.
|
|
65
|
-
*/
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
validate(invalidationContext) {} // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* Returns an array of {@link LayoutInfo} objects which are inside the given rectangle.
|
|
72
|
-
* Should be implemented by subclasses.
|
|
73
|
-
* @param rect The rectangle that should contain the returned LayoutInfo objects.
|
|
74
|
-
*/
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
/**
|
|
41
|
+
*/ validate(invalidationContext) {
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
78
44
|
* Returns a {@link DragTarget} describing a view at the given point to be dragged.
|
|
79
45
|
* Return `null` to cancel the drag. The default implementation returns the view at the given point.
|
|
80
46
|
* @param point The point at which the drag occurred.
|
|
81
|
-
*/
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
/**
|
|
47
|
+
*/ // getDragTarget(point: Point): DragTarget | null {
|
|
48
|
+
// let target = this.virtualizer.keyAtPoint(point);
|
|
49
|
+
// if (!target) {
|
|
50
|
+
// return null;
|
|
51
|
+
// }
|
|
52
|
+
// return {
|
|
53
|
+
// type: 'item',
|
|
54
|
+
// key: target
|
|
55
|
+
// };
|
|
56
|
+
// }
|
|
57
|
+
/**
|
|
94
58
|
* Returns a {@link DragTarget} object describing where a drop should occur. Return `null`
|
|
95
59
|
* to reject the drop. The dropped items will be inserted before the resulting target.
|
|
96
60
|
* @param point The point at which the drop occurred.
|
|
97
|
-
*/
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
/**
|
|
61
|
+
*/ // getDropTarget(point: Point): DropTarget | null {
|
|
62
|
+
// return null;
|
|
63
|
+
// }
|
|
64
|
+
/**
|
|
103
65
|
* Returns the starting attributes for an animated insertion.
|
|
104
66
|
* The view is animated from this {@link LayoutInfo} to the one returned by {@link getLayoutInfo}.
|
|
105
67
|
* The default implementation just returns its input.
|
|
106
68
|
*
|
|
107
69
|
* @param layoutInfo The proposed LayoutInfo for this view.
|
|
108
|
-
*/
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
/**
|
|
70
|
+
*/ getInitialLayoutInfo(layoutInfo) {
|
|
71
|
+
return layoutInfo;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
113
74
|
* Returns the ending attributes for an animated removal.
|
|
114
75
|
* The view is animated from the {@link LayoutInfo} returned by {@link getLayoutInfo}
|
|
115
76
|
* to the one returned by this method. The default implementation returns its input.
|
|
116
77
|
*
|
|
117
78
|
* @param layoutInfo The original LayoutInfo for this view.
|
|
118
|
-
*/
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
getFinalLayoutInfo(layoutInfo) {
|
|
122
|
-
return layoutInfo;
|
|
123
|
-
}
|
|
124
|
-
|
|
79
|
+
*/ getFinalLayoutInfo(layoutInfo) {
|
|
80
|
+
return layoutInfo;
|
|
81
|
+
}
|
|
125
82
|
}
|
|
126
83
|
|
|
127
|
-
exports.Layout = Layout;
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* Instances of this lightweight class are created by {@link Layout} subclasses
|
|
131
|
-
* to represent each view in the {@link CollectionView}. LayoutInfo objects describe
|
|
132
|
-
* various properties of a view, such as its position and size, and style information.
|
|
133
|
-
* The collection view uses this information when creating actual views to display.
|
|
134
|
-
*/
|
|
135
|
-
class LayoutInfo {
|
|
136
|
-
/**
|
|
137
|
-
* A string representing the view type. Should be `'item'` for item views.
|
|
138
|
-
* Other types are used by supplementary views.
|
|
139
|
-
*/
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* A unique key for this view. For item views, it should match the content key.
|
|
143
|
-
*/
|
|
144
84
|
|
|
145
|
-
|
|
146
|
-
* The key for a parent layout info, if any.
|
|
147
|
-
*/
|
|
85
|
+
var $67d280d4f19668ff$exports = {};
|
|
148
86
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* Whether the size is estimated. `false` by default.
|
|
155
|
-
*/
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* Whether the layout info sticks to the viewport when scrolling.
|
|
159
|
-
*/
|
|
160
|
-
|
|
161
|
-
/**
|
|
162
|
-
* The view's opacity. 1 by default.
|
|
163
|
-
*/
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* A CSS transform string to apply to the view. `null` by default.
|
|
167
|
-
*/
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* The z-index of the view. 0 by default.
|
|
171
|
-
*/
|
|
172
|
-
|
|
173
|
-
/**
|
|
87
|
+
$parcel$export($67d280d4f19668ff$exports, "LayoutInfo", () => $67d280d4f19668ff$export$7e0eeb9da702a085);
|
|
88
|
+
class $67d280d4f19668ff$export$7e0eeb9da702a085 {
|
|
89
|
+
/**
|
|
174
90
|
* @param type A string representing the view type. Should be `'item'` for item views.
|
|
175
91
|
Other types are used by supplementary views.
|
|
176
92
|
* @param key The unique key for this view.
|
|
177
93
|
* @param rect The rectangle describing the size and position of this view.
|
|
178
|
-
*/
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
this.parentKey = null;
|
|
192
|
-
this.rect = rect;
|
|
193
|
-
this.estimatedSize = false;
|
|
194
|
-
this.isSticky = false;
|
|
195
|
-
this.opacity = 1;
|
|
196
|
-
this.transform = null;
|
|
197
|
-
this.zIndex = 0;
|
|
198
|
-
}
|
|
199
|
-
/**
|
|
94
|
+
*/ constructor(type, key, rect){
|
|
95
|
+
this.type = type;
|
|
96
|
+
this.key = key;
|
|
97
|
+
this.parentKey = null;
|
|
98
|
+
this.rect = rect;
|
|
99
|
+
this.estimatedSize = false;
|
|
100
|
+
this.isSticky = false;
|
|
101
|
+
this.opacity = 1;
|
|
102
|
+
this.transform = null;
|
|
103
|
+
this.zIndex = 0;
|
|
104
|
+
this.allowOverflow = false;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
200
107
|
* Returns a copy of the LayoutInfo.
|
|
201
|
-
*/
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
return res;
|
|
213
|
-
}
|
|
214
|
-
|
|
108
|
+
*/ copy() {
|
|
109
|
+
let res = new $67d280d4f19668ff$export$7e0eeb9da702a085(this.type, this.key, this.rect.copy());
|
|
110
|
+
res.estimatedSize = this.estimatedSize;
|
|
111
|
+
res.opacity = this.opacity;
|
|
112
|
+
res.transform = this.transform;
|
|
113
|
+
res.parentKey = this.parentKey;
|
|
114
|
+
res.isSticky = this.isSticky;
|
|
115
|
+
res.zIndex = this.zIndex;
|
|
116
|
+
res.allowOverflow = this.allowOverflow;
|
|
117
|
+
return res;
|
|
118
|
+
}
|
|
215
119
|
}
|
|
216
120
|
|
|
217
|
-
exports.LayoutInfo = LayoutInfo;
|
|
218
|
-
|
|
219
|
-
class Point {
|
|
220
|
-
/** The x-coordinate of the point. */
|
|
221
121
|
|
|
222
|
-
|
|
223
|
-
constructor(x, y) {
|
|
224
|
-
if (x === void 0) {
|
|
225
|
-
x = 0;
|
|
226
|
-
}
|
|
122
|
+
var $63dcdc70cf96c5d7$exports = {};
|
|
227
123
|
|
|
228
|
-
|
|
229
|
-
|
|
124
|
+
$parcel$export($63dcdc70cf96c5d7$exports, "Point", () => $63dcdc70cf96c5d7$export$baf26146a414f24a);
|
|
125
|
+
class $63dcdc70cf96c5d7$export$baf26146a414f24a {
|
|
126
|
+
constructor(x = 0, y = 0){
|
|
127
|
+
this.x = x;
|
|
128
|
+
this.y = y;
|
|
230
129
|
}
|
|
231
|
-
|
|
232
|
-
this.x = void 0;
|
|
233
|
-
this.y = void 0;
|
|
234
|
-
this.x = x;
|
|
235
|
-
this.y = y;
|
|
236
|
-
}
|
|
237
|
-
/**
|
|
130
|
+
/**
|
|
238
131
|
* Returns a copy of this point.
|
|
239
|
-
*/
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
return new Point(this.x, this.y);
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
132
|
+
*/ copy() {
|
|
133
|
+
return new $63dcdc70cf96c5d7$export$baf26146a414f24a(this.x, this.y);
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
246
136
|
* Checks if two points are equal.
|
|
247
|
-
*/
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
return this.x === point.x && this.y === point.y;
|
|
252
|
-
}
|
|
253
|
-
/**
|
|
137
|
+
*/ equals(point) {
|
|
138
|
+
return this.x === point.x && this.y === point.y;
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
254
141
|
* Returns true if this point is the origin.
|
|
255
|
-
*/
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
isOrigin() {
|
|
259
|
-
return this.x === 0 && this.y === 0;
|
|
260
|
-
}
|
|
261
|
-
|
|
142
|
+
*/ isOrigin() {
|
|
143
|
+
return this.x === 0 && this.y === 0;
|
|
144
|
+
}
|
|
262
145
|
}
|
|
263
146
|
|
|
264
|
-
exports.Point = Point;
|
|
265
147
|
|
|
266
|
-
|
|
267
|
-
* Represents a rectangle.
|
|
268
|
-
*/
|
|
269
|
-
class Rect {
|
|
270
|
-
/** The x-coordinate of the rectangle. */
|
|
148
|
+
var $b257fb58d1fe030d$exports = {};
|
|
271
149
|
|
|
272
|
-
|
|
150
|
+
$parcel$export($b257fb58d1fe030d$exports, "Rect", () => $b257fb58d1fe030d$export$c79fc6492f3af13d);
|
|
273
151
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
if (y === void 0) {
|
|
283
|
-
y = 0;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
if (width === void 0) {
|
|
287
|
-
width = 0;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
if (height === void 0) {
|
|
291
|
-
height = 0;
|
|
152
|
+
class $b257fb58d1fe030d$export$c79fc6492f3af13d {
|
|
153
|
+
constructor(x = 0, y = 0, width = 0, height = 0){
|
|
154
|
+
this.x = x;
|
|
155
|
+
this.y = y;
|
|
156
|
+
this.width = width;
|
|
157
|
+
this.height = height;
|
|
292
158
|
}
|
|
293
|
-
|
|
294
|
-
this.x = void 0;
|
|
295
|
-
this.y = void 0;
|
|
296
|
-
this.width = void 0;
|
|
297
|
-
this.height = void 0;
|
|
298
|
-
this.x = x;
|
|
299
|
-
this.y = y;
|
|
300
|
-
this.width = width;
|
|
301
|
-
this.height = height;
|
|
302
|
-
}
|
|
303
|
-
/**
|
|
159
|
+
/**
|
|
304
160
|
* The maximum x-coordinate in the rectangle.
|
|
305
|
-
*/
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
return this.x + this.width;
|
|
310
|
-
}
|
|
311
|
-
/**
|
|
161
|
+
*/ get maxX() {
|
|
162
|
+
return this.x + this.width;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
312
165
|
* The maximum y-coordinate in the rectangle.
|
|
313
|
-
*/
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
return this.y + this.height;
|
|
318
|
-
}
|
|
319
|
-
/**
|
|
166
|
+
*/ get maxY() {
|
|
167
|
+
return this.y + this.height;
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
320
170
|
* The area of the rectangle.
|
|
321
|
-
*/
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
return this.width * this.height;
|
|
326
|
-
}
|
|
327
|
-
/**
|
|
171
|
+
*/ get area() {
|
|
172
|
+
return this.width * this.height;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
328
175
|
* The top left corner of the rectangle.
|
|
329
|
-
*/
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
return new Point(this.x, this.y);
|
|
334
|
-
}
|
|
335
|
-
/**
|
|
176
|
+
*/ get topLeft() {
|
|
177
|
+
return new $63dcdc70cf96c5d7$export$baf26146a414f24a(this.x, this.y);
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
336
180
|
* The top right corner of the rectangle.
|
|
337
|
-
*/
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
return new Point(this.maxX, this.y);
|
|
342
|
-
}
|
|
343
|
-
/**
|
|
181
|
+
*/ get topRight() {
|
|
182
|
+
return new $63dcdc70cf96c5d7$export$baf26146a414f24a(this.maxX, this.y);
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
344
185
|
* The bottom left corner of the rectangle.
|
|
345
|
-
*/
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
return new Point(this.x, this.maxY);
|
|
350
|
-
}
|
|
351
|
-
/**
|
|
186
|
+
*/ get bottomLeft() {
|
|
187
|
+
return new $63dcdc70cf96c5d7$export$baf26146a414f24a(this.x, this.maxY);
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
352
190
|
* The bottom right corner of the rectangle.
|
|
353
|
-
*/
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
return new Point(this.maxX, this.maxY);
|
|
358
|
-
}
|
|
359
|
-
/**
|
|
191
|
+
*/ get bottomRight() {
|
|
192
|
+
return new $63dcdc70cf96c5d7$export$baf26146a414f24a(this.maxX, this.maxY);
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
360
195
|
* Returns whether this rectangle intersects another rectangle.
|
|
361
196
|
* @param rect - The rectangle to check.
|
|
362
|
-
*/
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
return this.x <= rect.x + rect.width && rect.x <= this.x + this.width && this.y <= rect.y + rect.height && rect.y <= this.y + this.height;
|
|
367
|
-
}
|
|
368
|
-
/**
|
|
197
|
+
*/ intersects(rect) {
|
|
198
|
+
return this.x <= rect.x + rect.width && rect.x <= this.x + this.width && this.y <= rect.y + rect.height && rect.y <= this.y + this.height;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
369
201
|
* Returns whether this rectangle fully contains another rectangle.
|
|
370
202
|
* @param rect - The rectangle to check.
|
|
371
|
-
*/
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
return this.x <= rect.x && this.y <= rect.y && this.maxX >= rect.maxX && this.maxY >= rect.maxY;
|
|
376
|
-
}
|
|
377
|
-
/**
|
|
203
|
+
*/ containsRect(rect) {
|
|
204
|
+
return this.x <= rect.x && this.y <= rect.y && this.maxX >= rect.maxX && this.maxY >= rect.maxY;
|
|
205
|
+
}
|
|
206
|
+
/**
|
|
378
207
|
* Returns whether the rectangle contains the given point.
|
|
379
208
|
* @param point - The point to check.
|
|
380
|
-
*/
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
return this.x <= point.x && this.y <= point.y && this.maxX >= point.x && this.maxY >= point.y;
|
|
385
|
-
}
|
|
386
|
-
/**
|
|
209
|
+
*/ containsPoint(point) {
|
|
210
|
+
return this.x <= point.x && this.y <= point.y && this.maxX >= point.x && this.maxY >= point.y;
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
387
213
|
* Returns the first corner of this rectangle (from top to bottom, left to right)
|
|
388
214
|
* that is contained in the given rectangle, or null of the rectangles do not intersect.
|
|
389
215
|
* @param rect - The rectangle to check.
|
|
390
|
-
*/
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
216
|
+
*/ getCornerInRect(rect) {
|
|
217
|
+
for (let key of [
|
|
218
|
+
'topLeft',
|
|
219
|
+
'topRight',
|
|
220
|
+
'bottomLeft',
|
|
221
|
+
'bottomRight'
|
|
222
|
+
]){
|
|
223
|
+
if (rect.containsPoint(this[key])) return key;
|
|
224
|
+
}
|
|
225
|
+
return null;
|
|
398
226
|
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
sizeEquals(size) {
|
|
412
|
-
return this.width === size.width && this.height === size.height;
|
|
413
|
-
}
|
|
414
|
-
/**
|
|
227
|
+
equals(rect) {
|
|
228
|
+
return rect.x === this.x && rect.y === this.y && rect.width === this.width && rect.height === this.height;
|
|
229
|
+
}
|
|
230
|
+
pointEquals(point) {
|
|
231
|
+
return this.x === point.x && this.y === point.y;
|
|
232
|
+
}
|
|
233
|
+
sizeEquals(size) {
|
|
234
|
+
return this.width === size.width && this.height === size.height;
|
|
235
|
+
}
|
|
236
|
+
/**
|
|
415
237
|
* Returns a copy of this rectangle.
|
|
416
|
-
*/
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
copy() {
|
|
420
|
-
return new Rect(this.x, this.y, this.width, this.height);
|
|
421
|
-
}
|
|
422
|
-
|
|
238
|
+
*/ copy() {
|
|
239
|
+
return new $b257fb58d1fe030d$export$c79fc6492f3af13d(this.x, this.y, this.width, this.height);
|
|
240
|
+
}
|
|
423
241
|
}
|
|
424
242
|
|
|
425
|
-
exports.Rect = Rect;
|
|
426
243
|
|
|
427
|
-
|
|
428
|
-
constructor(width, height) {
|
|
429
|
-
if (width === void 0) {
|
|
430
|
-
width = 0;
|
|
431
|
-
}
|
|
244
|
+
var $c7e25de3d1bb13b7$exports = {};
|
|
432
245
|
|
|
433
|
-
|
|
434
|
-
|
|
246
|
+
$parcel$export($c7e25de3d1bb13b7$exports, "Size", () => $c7e25de3d1bb13b7$export$cb6da89c6af1a8ec);
|
|
247
|
+
class $c7e25de3d1bb13b7$export$cb6da89c6af1a8ec {
|
|
248
|
+
constructor(width = 0, height = 0){
|
|
249
|
+
this.width = width;
|
|
250
|
+
this.height = height;
|
|
435
251
|
}
|
|
436
|
-
|
|
437
|
-
this.width = void 0;
|
|
438
|
-
this.height = void 0;
|
|
439
|
-
this.width = width;
|
|
440
|
-
this.height = height;
|
|
441
|
-
}
|
|
442
|
-
/**
|
|
252
|
+
/**
|
|
443
253
|
* Returns a copy of this size.
|
|
444
|
-
*/
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
return new Size(this.width, this.height);
|
|
449
|
-
}
|
|
450
|
-
/**
|
|
254
|
+
*/ copy() {
|
|
255
|
+
return new $c7e25de3d1bb13b7$export$cb6da89c6af1a8ec(this.width, this.height);
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
451
258
|
* Returns whether this size is equal to another one.
|
|
452
|
-
*/
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
equals(other) {
|
|
456
|
-
return this.width === other.width && this.height === other.height;
|
|
457
|
-
}
|
|
458
|
-
|
|
259
|
+
*/ equals(other) {
|
|
260
|
+
return this.width === other.width && this.height === other.height;
|
|
261
|
+
}
|
|
459
262
|
}
|
|
460
263
|
|
|
461
|
-
exports.Size = Size;
|
|
462
|
-
let $c725352f87b2e3c40c7fcea17c35c2a$var$KEY = 0;
|
|
463
|
-
/**
|
|
464
|
-
* [CollectionView]{@link CollectionView} creates instances of the [ReusableView]{@link ReusableView} class to
|
|
465
|
-
* represent views currently being displayed. ReusableViews manage a DOM node, handle
|
|
466
|
-
* applying {@link LayoutInfo} objects to the view, and render content
|
|
467
|
-
* as needed. Subclasses must implement the {@link render} method at a
|
|
468
|
-
* minimum. Other methods can be overridden to customize behavior.
|
|
469
|
-
*/
|
|
470
264
|
|
|
471
|
-
|
|
472
|
-
/** The CollectionVirtualizer this view is a part of. */
|
|
265
|
+
var $48e7cd77a68be60c$exports = {};
|
|
473
266
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
this.viewType = void 0;
|
|
483
|
-
this.key = void 0;
|
|
484
|
-
this.virtualizer = virtualizer;
|
|
485
|
-
this.key = ++$c725352f87b2e3c40c7fcea17c35c2a$var$KEY;
|
|
486
|
-
}
|
|
487
|
-
/**
|
|
267
|
+
$parcel$export($48e7cd77a68be60c$exports, "ReusableView", () => $48e7cd77a68be60c$export$1a5223887c560441);
|
|
268
|
+
let $48e7cd77a68be60c$var$KEY = 0;
|
|
269
|
+
class $48e7cd77a68be60c$export$1a5223887c560441 {
|
|
270
|
+
constructor(virtualizer){
|
|
271
|
+
this.virtualizer = virtualizer;
|
|
272
|
+
this.key = ++$48e7cd77a68be60c$var$KEY;
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
488
275
|
* Prepares the view for reuse. Called just before the view is removed from the DOM.
|
|
489
|
-
*/
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
this.rendered = null;
|
|
495
|
-
this.layoutInfo = null;
|
|
496
|
-
}
|
|
497
|
-
|
|
276
|
+
*/ prepareForReuse() {
|
|
277
|
+
this.content = null;
|
|
278
|
+
this.rendered = null;
|
|
279
|
+
this.layoutInfo = null;
|
|
280
|
+
}
|
|
498
281
|
}
|
|
499
282
|
|
|
500
|
-
exports.ReusableView = ReusableView;
|
|
501
|
-
// use high res timer if available
|
|
502
|
-
let $c2209bcf49cd606639597eb5ee44c7c1$var$perf = typeof window !== 'undefined' ? window.performance : null; // @ts-ignore
|
|
503
|
-
|
|
504
|
-
let $c2209bcf49cd606639597eb5ee44c7c1$var$perfNow = $c2209bcf49cd606639597eb5ee44c7c1$var$perf && ($c2209bcf49cd606639597eb5ee44c7c1$var$perf.now || $c2209bcf49cd606639597eb5ee44c7c1$var$perf.webkitNow || $c2209bcf49cd606639597eb5ee44c7c1$var$perf.msNow || $c2209bcf49cd606639597eb5ee44c7c1$var$perf.mozNow);
|
|
505
|
-
let $c2209bcf49cd606639597eb5ee44c7c1$var$getTime = $c2209bcf49cd606639597eb5ee44c7c1$var$perfNow ? $c2209bcf49cd606639597eb5ee44c7c1$var$perfNow.bind($c2209bcf49cd606639597eb5ee44c7c1$var$perf) : function () {
|
|
506
|
-
return Date.now ? Date.now() : new Date().getTime();
|
|
507
|
-
};
|
|
508
|
-
let $c2209bcf49cd606639597eb5ee44c7c1$var$fixTs;
|
|
509
283
|
|
|
510
|
-
|
|
511
|
-
let canceled = false;
|
|
512
|
-
let raf_id;
|
|
513
|
-
let promise = new Promise(resolve => {
|
|
514
|
-
let start = $c2209bcf49cd606639597eb5ee44c7c1$var$getTime();
|
|
515
|
-
let diffX = end.x - begin.x;
|
|
516
|
-
let diffY = end.y - begin.y;
|
|
517
|
-
raf_id = requestAnimationFrame(function run(t) {
|
|
518
|
-
// if we're using a high res timer, make sure timestamp is not the old epoch-based value.
|
|
519
|
-
// http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision
|
|
520
|
-
if ($c2209bcf49cd606639597eb5ee44c7c1$var$fixTs == null) {
|
|
521
|
-
$c2209bcf49cd606639597eb5ee44c7c1$var$fixTs = t > 1e12 !== $c2209bcf49cd606639597eb5ee44c7c1$var$getTime() > 1e12;
|
|
522
|
-
}
|
|
284
|
+
var $1fa690b84970509f$exports = {};
|
|
523
285
|
|
|
524
|
-
|
|
525
|
-
t = $c2209bcf49cd606639597eb5ee44c7c1$var$getTime();
|
|
526
|
-
} // check if we're done
|
|
286
|
+
$parcel$export($1fa690b84970509f$exports, "useVirtualizerState", () => $1fa690b84970509f$export$1505db82fe357e65);
|
|
527
287
|
|
|
528
288
|
|
|
529
|
-
let delta = t - start;
|
|
530
289
|
|
|
531
|
-
if (delta > duration) {
|
|
532
|
-
fn(end);
|
|
533
|
-
resolve();
|
|
534
|
-
} else {
|
|
535
|
-
// call frame callback after computing eased time and get the next frame
|
|
536
|
-
let proceed = fn(new Point(begin.x + diffX * ease(delta / duration), begin.y + diffY * ease(delta / duration)));
|
|
537
290
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
291
|
+
// use high res timer if available
|
|
292
|
+
let $f4437db0d25b1451$var$perf = typeof window !== 'undefined' ? window.performance : null;
|
|
293
|
+
// @ts-ignore
|
|
294
|
+
let $f4437db0d25b1451$var$perfNow = $f4437db0d25b1451$var$perf && ($f4437db0d25b1451$var$perf.now || $f4437db0d25b1451$var$perf.webkitNow || $f4437db0d25b1451$var$perf.msNow || $f4437db0d25b1451$var$perf.mozNow);
|
|
295
|
+
let $f4437db0d25b1451$var$getTime = $f4437db0d25b1451$var$perfNow ? $f4437db0d25b1451$var$perfNow.bind($f4437db0d25b1451$var$perf) : function() {
|
|
296
|
+
return Date.now ? Date.now() : new Date().getTime();
|
|
297
|
+
};
|
|
298
|
+
let $f4437db0d25b1451$var$fixTs;
|
|
299
|
+
function $f4437db0d25b1451$export$dc0b63720788090c(begin, end, duration, ease, fn) {
|
|
300
|
+
let canceled = false;
|
|
301
|
+
let raf_id;
|
|
302
|
+
let promise = new Promise((resolve)=>{
|
|
303
|
+
let start = $f4437db0d25b1451$var$getTime();
|
|
304
|
+
let diffX = end.x - begin.x;
|
|
305
|
+
let diffY = end.y - begin.y;
|
|
306
|
+
raf_id = requestAnimationFrame(function run(t) {
|
|
307
|
+
// if we're using a high res timer, make sure timestamp is not the old epoch-based value.
|
|
308
|
+
// http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision
|
|
309
|
+
if ($f4437db0d25b1451$var$fixTs == null) $f4437db0d25b1451$var$fixTs = t > 1000000000000 !== $f4437db0d25b1451$var$getTime() > 1000000000000;
|
|
310
|
+
if ($f4437db0d25b1451$var$fixTs) t = $f4437db0d25b1451$var$getTime();
|
|
311
|
+
// check if we're done
|
|
312
|
+
let delta = t - start;
|
|
313
|
+
if (delta > duration) {
|
|
314
|
+
fn(end);
|
|
315
|
+
resolve();
|
|
316
|
+
} else {
|
|
317
|
+
// call frame callback after computing eased time and get the next frame
|
|
318
|
+
let proceed = fn(new $63dcdc70cf96c5d7$export$baf26146a414f24a(begin.x + diffX * ease(delta / duration), begin.y + diffY * ease(delta / duration)));
|
|
319
|
+
if (proceed !== false && !canceled) raf_id = requestAnimationFrame(run);
|
|
320
|
+
}
|
|
321
|
+
});
|
|
542
322
|
});
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
};
|
|
549
|
-
|
|
550
|
-
return promise;
|
|
551
|
-
} // easing functions
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
function $c2209bcf49cd606639597eb5ee44c7c1$export$easeOut(t) {
|
|
555
|
-
return Math.sin(t * Math.PI / 2);
|
|
323
|
+
promise.cancel = function() {
|
|
324
|
+
canceled = true;
|
|
325
|
+
cancelAnimationFrame(raf_id);
|
|
326
|
+
};
|
|
327
|
+
return promise;
|
|
556
328
|
}
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
let res = new Set();
|
|
560
|
-
|
|
561
|
-
for (let key of a.keys()) {
|
|
562
|
-
if (!b.has(key)) {
|
|
563
|
-
res.add(key);
|
|
564
|
-
}
|
|
565
|
-
}
|
|
566
|
-
|
|
567
|
-
return res;
|
|
329
|
+
function $f4437db0d25b1451$export$77860c106b4a6a2e(t) {
|
|
330
|
+
return t;
|
|
568
331
|
}
|
|
569
|
-
|
|
570
|
-
*
|
|
571
|
-
* keys to add to and remove from a to make it equal to b.
|
|
572
|
-
* @private
|
|
573
|
-
*/
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
function $eb5c48b3196adea28b2a65513c55f96$export$difference(a, b) {
|
|
577
|
-
let toRemove = $eb5c48b3196adea28b2a65513c55f96$export$keyDiff(a, b);
|
|
578
|
-
let toAdd = $eb5c48b3196adea28b2a65513c55f96$export$keyDiff(b, a);
|
|
579
|
-
let toUpdate = new Set();
|
|
580
|
-
|
|
581
|
-
for (let key of a.keys()) {
|
|
582
|
-
if (b.has(key)) {
|
|
583
|
-
toUpdate.add(key);
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
return {
|
|
588
|
-
toRemove,
|
|
589
|
-
toAdd,
|
|
590
|
-
toUpdate
|
|
591
|
-
};
|
|
332
|
+
function $f4437db0d25b1451$export$57636bb43b1ccbb0(t) {
|
|
333
|
+
return Math.sin(t * Math.PI / 2);
|
|
592
334
|
}
|
|
593
|
-
/**
|
|
594
|
-
* Returns an iterator that yields the items in all of the given iterators.
|
|
595
|
-
* @private
|
|
596
|
-
*/
|
|
597
|
-
|
|
598
335
|
|
|
599
|
-
function* $eb5c48b3196adea28b2a65513c55f96$export$concatIterators() {
|
|
600
|
-
for (var _len = arguments.length, iterators = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
601
|
-
iterators[_key] = arguments[_key];
|
|
602
|
-
}
|
|
603
336
|
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
337
|
+
function $dcde0d6fc989b206$export$37a26b283fd7740e(a, b) {
|
|
338
|
+
let res = new Set();
|
|
339
|
+
for (let key of a.keys())if (!b.has(key)) res.add(key);
|
|
340
|
+
return res;
|
|
607
341
|
}
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
342
|
+
function $dcde0d6fc989b206$export$acaf96a27438246b(a, b) {
|
|
343
|
+
let toRemove = $dcde0d6fc989b206$export$37a26b283fd7740e(a, b);
|
|
344
|
+
let toAdd = $dcde0d6fc989b206$export$37a26b283fd7740e(b, a);
|
|
345
|
+
let toUpdate = new Set;
|
|
346
|
+
for (let key of a.keys())if (b.has(key)) toUpdate.add(key);
|
|
347
|
+
return {
|
|
348
|
+
toRemove: toRemove,
|
|
349
|
+
toAdd: toAdd,
|
|
350
|
+
toUpdate: toUpdate
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
function* $dcde0d6fc989b206$export$cfc14088dfefce5f(...iterators) {
|
|
354
|
+
for (let iterator of iterators)yield* iterator;
|
|
355
|
+
}
|
|
356
|
+
function $dcde0d6fc989b206$export$6897c284b6f9f4dc(object) {
|
|
357
|
+
let res = {
|
|
358
|
+
};
|
|
359
|
+
for(let key in object)res[object[key]] = key;
|
|
360
|
+
return res;
|
|
625
361
|
}
|
|
626
362
|
|
|
627
|
-
class $d4638270963df552e2a603f0288c7$export$OverscanManager {
|
|
628
|
-
constructor() {
|
|
629
|
-
this.startTime = 0;
|
|
630
|
-
this.averagePerf = new $d4638270963df552e2a603f0288c7$var$RollingAverage();
|
|
631
|
-
this.averageTime = new $d4638270963df552e2a603f0288c7$var$RollingAverage();
|
|
632
|
-
this.velocity = new Point(5, 5);
|
|
633
|
-
this.overscanX = new $d4638270963df552e2a603f0288c7$var$RollingAverage();
|
|
634
|
-
this.overscanY = new $d4638270963df552e2a603f0288c7$var$RollingAverage();
|
|
635
|
-
this.visibleRect = new Rect();
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
setVisibleRect(rect) {
|
|
639
|
-
let time = performance.now() - this.startTime;
|
|
640
|
-
|
|
641
|
-
if (time < 500) {
|
|
642
|
-
this.averageTime.addSample(time);
|
|
643
|
-
|
|
644
|
-
if (rect.x !== this.visibleRect.x && time > 0) {
|
|
645
|
-
this.velocity.x = (rect.x - this.visibleRect.x) / time;
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
if (rect.y !== this.visibleRect.y && time > 0) {
|
|
649
|
-
this.velocity.y = (rect.y - this.visibleRect.y) / time;
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
363
|
|
|
653
|
-
this.startTime = performance.now();
|
|
654
|
-
this.visibleRect = rect;
|
|
655
|
-
}
|
|
656
364
|
|
|
657
|
-
collectMetrics() {
|
|
658
|
-
let time = performance.now() - this.startTime;
|
|
659
365
|
|
|
660
|
-
|
|
661
|
-
|
|
366
|
+
class $83436bb5e0f033a0$var$RollingAverage {
|
|
367
|
+
addSample(sample) {
|
|
368
|
+
this.count++;
|
|
369
|
+
this.value += (sample - this.value) / this.count;
|
|
662
370
|
}
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
this.overscanY.addSample(o);
|
|
371
|
+
constructor(){
|
|
372
|
+
this.count = 0;
|
|
373
|
+
this.value = 0;
|
|
667
374
|
}
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
375
|
+
}
|
|
376
|
+
class $83436bb5e0f033a0$export$4455ee6afb38dcbb {
|
|
377
|
+
setVisibleRect(rect) {
|
|
378
|
+
let time = performance.now() - this.startTime;
|
|
379
|
+
if (time < 500) {
|
|
380
|
+
this.averageTime.addSample(time);
|
|
381
|
+
if (rect.x !== this.visibleRect.x && time > 0) this.velocity.x = (rect.x - this.visibleRect.x) / time;
|
|
382
|
+
if (rect.y !== this.visibleRect.y && time > 0) this.velocity.y = (rect.y - this.visibleRect.y) / time;
|
|
383
|
+
}
|
|
384
|
+
this.startTime = performance.now();
|
|
385
|
+
this.visibleRect = rect;
|
|
386
|
+
}
|
|
387
|
+
collectMetrics() {
|
|
388
|
+
let time = performance.now() - this.startTime;
|
|
389
|
+
if (time < 500) this.averagePerf.addSample(time);
|
|
390
|
+
if (this.visibleRect.height > 0) {
|
|
391
|
+
let o = Math.abs(this.velocity.y * (this.averageTime.value + this.averagePerf.value));
|
|
392
|
+
this.overscanY.addSample(o);
|
|
393
|
+
}
|
|
394
|
+
if (this.visibleRect.width > 0) {
|
|
395
|
+
let o = Math.abs(this.velocity.x * (this.averageTime.value + this.averagePerf.value));
|
|
396
|
+
this.overscanX.addSample(o);
|
|
397
|
+
}
|
|
672
398
|
}
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
399
|
+
getOverscannedRect() {
|
|
400
|
+
let overscanned = this.visibleRect.copy();
|
|
401
|
+
let overscanY = Math.round(Math.min(this.visibleRect.height * 2, this.overscanY.value) / 100) * 100;
|
|
402
|
+
if (this.velocity.y > 0) {
|
|
403
|
+
overscanned.y -= overscanY * 0.2;
|
|
404
|
+
overscanned.height += overscanY + overscanY * 0.2;
|
|
405
|
+
} else {
|
|
406
|
+
overscanned.y -= overscanY;
|
|
407
|
+
overscanned.height += overscanY + overscanY * 0.2;
|
|
408
|
+
}
|
|
409
|
+
let overscanX = Math.round(Math.min(this.visibleRect.width * 2, this.overscanX.value) / 100) * 100;
|
|
410
|
+
if (this.velocity.x > 0) {
|
|
411
|
+
overscanned.x -= overscanX * 0.2;
|
|
412
|
+
overscanned.width += overscanX + overscanX * 0.2;
|
|
413
|
+
} else {
|
|
414
|
+
overscanned.x -= overscanX;
|
|
415
|
+
overscanned.width += overscanX + overscanX * 0.2;
|
|
416
|
+
}
|
|
417
|
+
return overscanned;
|
|
685
418
|
}
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
overscanned.width += overscanX + overscanX * 0.2;
|
|
419
|
+
constructor(){
|
|
420
|
+
this.startTime = 0;
|
|
421
|
+
this.averagePerf = new $83436bb5e0f033a0$var$RollingAverage();
|
|
422
|
+
this.averageTime = new $83436bb5e0f033a0$var$RollingAverage();
|
|
423
|
+
this.velocity = new $63dcdc70cf96c5d7$export$baf26146a414f24a(5, 5);
|
|
424
|
+
this.overscanX = new $83436bb5e0f033a0$var$RollingAverage();
|
|
425
|
+
this.overscanY = new $83436bb5e0f033a0$var$RollingAverage();
|
|
426
|
+
this.visibleRect = new $b257fb58d1fe030d$export$c79fc6492f3af13d();
|
|
695
427
|
}
|
|
696
|
-
|
|
697
|
-
return overscanned;
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
class $b8a692491eed0a311c18a0d64051b3$export$Transaction {
|
|
703
|
-
constructor() {
|
|
704
|
-
this.level = 0;
|
|
705
|
-
this.actions = [];
|
|
706
|
-
this.animated = true;
|
|
707
|
-
this.initialMap = new Map();
|
|
708
|
-
this.finalMap = new Map();
|
|
709
|
-
this.initialLayoutInfo = new Map();
|
|
710
|
-
this.finalLayoutInfo = new Map();
|
|
711
|
-
this.removed = new Map();
|
|
712
|
-
this.toRemove = new Map();
|
|
713
|
-
}
|
|
714
|
-
|
|
715
428
|
}
|
|
716
429
|
|
|
717
|
-
/**
|
|
718
|
-
* The CollectionView class renders a scrollable collection of data using customizable layouts,
|
|
719
|
-
* and manages animated updates to the data over time. It supports very large collections by
|
|
720
|
-
* only rendering visible views to the DOM, reusing them as you scroll. Collection views can
|
|
721
|
-
* present any type of view, including non-item views such as section headers and footers.
|
|
722
|
-
* Optionally, the {@link EditableCollectionView} subclass can be used to enable user interaction
|
|
723
|
-
* with the collection, including drag and drop, multiple selection, and keyboard interacton.
|
|
724
|
-
*
|
|
725
|
-
* Collection views get their data from a {@link DataSource} object that you provide. Items are
|
|
726
|
-
* grouped into sections by the data source, and the collection view calls its methods to retrieve
|
|
727
|
-
* the data. When data changes, the data source emits change events, and the collection view
|
|
728
|
-
* updates as appropriate, optionally with an animated transition. There is one built-in data source
|
|
729
|
-
* implementation, {@link ArrayDataSource}, which renders content from a 2d array.
|
|
730
|
-
*
|
|
731
|
-
* Collection views use {@link Layout} objects to compute what views should be visible, and how
|
|
732
|
-
* to position and style them. This means that collection views can have their items arranged in
|
|
733
|
-
* a stack, a grid, a circle, or any other layout you can think of. The layout can be changed
|
|
734
|
-
* dynamically at runtime as well, optionally with an animated transition between the layouts.
|
|
735
|
-
*
|
|
736
|
-
* Layouts produce information on what views should appear in the collection view, but do not create
|
|
737
|
-
* the views themselves directly. It is the responsibility of the {@link CollectionViewDelegate} object
|
|
738
|
-
* to create instances of {@link ReusableView} subclasses which render the items into DOM nodes.
|
|
739
|
-
* The delegate determines what type of view to display for each item, and creates instances of
|
|
740
|
-
* views as needed by the collection view. Those views are then reused by the collection view as
|
|
741
|
-
* the user scrolls through the content.
|
|
742
|
-
*/
|
|
743
|
-
class $c28d52c9ae86344e9273f2344f3d5a45$export$Virtualizer {
|
|
744
|
-
/**
|
|
745
|
-
* The collection view delegate. The delegate is used by the collection view
|
|
746
|
-
* to create and configure views.
|
|
747
|
-
*/
|
|
748
|
-
|
|
749
|
-
/** The duration of animated layout changes, in milliseconds. Default is 500ms. */
|
|
750
|
-
|
|
751
|
-
/**
|
|
752
|
-
* Whether to enable scroll anchoring. This will attempt to restore the scroll position
|
|
753
|
-
* after layout changes outside the viewport. Default is off.
|
|
754
|
-
*/
|
|
755
430
|
|
|
756
|
-
/** Whether to anchor the scroll position when at the top of the content. Default is off. */
|
|
757
431
|
|
|
758
|
-
/**
|
|
759
|
-
* Whether to overscan the visible area to pre-render items slightly outside and
|
|
760
|
-
* improve performance. Default is on.
|
|
761
|
-
*/
|
|
762
|
-
constructor(options) {
|
|
763
|
-
var _options$transitionDu;
|
|
764
432
|
|
|
765
|
-
if (options === void 0) {
|
|
766
|
-
options = {};
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
this.delegate = void 0;
|
|
770
|
-
this.transitionDuration = void 0;
|
|
771
|
-
this.anchorScrollPosition = void 0;
|
|
772
|
-
this.anchorScrollPositionAtTop = void 0;
|
|
773
|
-
this.shouldOverscan = void 0;
|
|
774
|
-
this._collection = void 0;
|
|
775
|
-
this._layout = void 0;
|
|
776
|
-
this._contentSize = void 0;
|
|
777
|
-
this._visibleRect = void 0;
|
|
778
|
-
this._visibleLayoutInfos = void 0;
|
|
779
|
-
this._reusableViews = void 0;
|
|
780
|
-
this._visibleViews = void 0;
|
|
781
|
-
this._renderedContent = void 0;
|
|
782
|
-
this._children = void 0;
|
|
783
|
-
this._invalidationContext = void 0;
|
|
784
|
-
this._overscanManager = void 0;
|
|
785
|
-
this._relayoutRaf = void 0;
|
|
786
|
-
this._scrollAnimation = void 0;
|
|
787
|
-
this._isScrolling = void 0;
|
|
788
|
-
this._sizeUpdateQueue = void 0;
|
|
789
|
-
this._animatedContentOffset = void 0;
|
|
790
|
-
this._transaction = void 0;
|
|
791
|
-
this._nextTransaction = void 0;
|
|
792
|
-
this._transactionQueue = void 0;
|
|
793
|
-
this._contentSize = new Size();
|
|
794
|
-
this._visibleRect = new Rect();
|
|
795
|
-
this._reusableViews = {};
|
|
796
|
-
this._visibleLayoutInfos = new Map();
|
|
797
|
-
this._visibleViews = new Map();
|
|
798
|
-
this._renderedContent = new WeakMap();
|
|
799
|
-
this._children = new Set();
|
|
800
|
-
this._invalidationContext = null;
|
|
801
|
-
this._overscanManager = new $d4638270963df552e2a603f0288c7$export$OverscanManager();
|
|
802
|
-
this._scrollAnimation = null;
|
|
803
|
-
this._isScrolling = false;
|
|
804
|
-
this._sizeUpdateQueue = new Map();
|
|
805
|
-
this._animatedContentOffset = new Point(0, 0);
|
|
806
|
-
this._transaction = null;
|
|
807
|
-
this._nextTransaction = null;
|
|
808
|
-
this._transactionQueue = []; // Set options from passed object if given
|
|
809
433
|
|
|
810
|
-
this.transitionDuration = (_options$transitionDu = options.transitionDuration) != null ? _options$transitionDu : 500;
|
|
811
|
-
this.anchorScrollPosition = options.anchorScrollPosition || false;
|
|
812
|
-
this.anchorScrollPositionAtTop = options.anchorScrollPositionAtTop || false;
|
|
813
|
-
this.shouldOverscan = options.shouldOverscan !== false;
|
|
814
434
|
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
this
|
|
818
|
-
|
|
435
|
+
class $4030d5bc382f52a8$export$febc5573c75cefb0 {
|
|
436
|
+
constructor(){
|
|
437
|
+
this.level = 0;
|
|
438
|
+
this.actions = [];
|
|
439
|
+
this.animated = true;
|
|
440
|
+
this.initialMap = new Map();
|
|
441
|
+
this.finalMap = new Map();
|
|
442
|
+
this.initialLayoutInfo = new Map();
|
|
443
|
+
this.finalLayoutInfo = new Map();
|
|
444
|
+
this.removed = new Map();
|
|
445
|
+
this.toRemove = new Map();
|
|
819
446
|
}
|
|
820
|
-
|
|
447
|
+
}
|
|
821
448
|
|
|
822
|
-
_setContentSize(size) {
|
|
823
|
-
this._contentSize = size;
|
|
824
|
-
this.delegate.setContentSize(size);
|
|
825
|
-
}
|
|
826
449
|
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
450
|
+
class $f9e1605aeab61ed8$export$89be5a243e59c4b2 {
|
|
451
|
+
constructor(options = {
|
|
452
|
+
}){
|
|
453
|
+
this._contentSize = new $c7e25de3d1bb13b7$export$cb6da89c6af1a8ec;
|
|
454
|
+
this._visibleRect = new $b257fb58d1fe030d$export$c79fc6492f3af13d;
|
|
455
|
+
this._reusableViews = {
|
|
456
|
+
};
|
|
457
|
+
this._visibleLayoutInfos = new Map();
|
|
458
|
+
this._visibleViews = new Map();
|
|
459
|
+
this._renderedContent = new WeakMap();
|
|
460
|
+
this._children = new Set();
|
|
461
|
+
this._invalidationContext = null;
|
|
462
|
+
this._overscanManager = new $83436bb5e0f033a0$export$4455ee6afb38dcbb();
|
|
463
|
+
this._scrollAnimation = null;
|
|
464
|
+
this._isScrolling = false;
|
|
465
|
+
this._sizeUpdateQueue = new Map();
|
|
466
|
+
this._animatedContentOffset = new $63dcdc70cf96c5d7$export$baf26146a414f24a(0, 0);
|
|
467
|
+
this._transaction = null;
|
|
468
|
+
this._nextTransaction = null;
|
|
469
|
+
this._transactionQueue = [];
|
|
470
|
+
// Set options from passed object if given
|
|
471
|
+
this.transitionDuration = options.transitionDuration ?? 500;
|
|
472
|
+
this.anchorScrollPosition = options.anchorScrollPosition || false;
|
|
473
|
+
this.anchorScrollPositionAtTop = options.anchorScrollPositionAtTop || false;
|
|
474
|
+
this.shouldOverscan = options.shouldOverscan !== false;
|
|
475
|
+
for (let key of [
|
|
476
|
+
'delegate',
|
|
477
|
+
'size',
|
|
478
|
+
'layout',
|
|
479
|
+
'collection'
|
|
480
|
+
])if (options[key]) this[key] = options[key];
|
|
481
|
+
}
|
|
482
|
+
_setContentSize(size) {
|
|
483
|
+
this._contentSize = size;
|
|
484
|
+
this.delegate.setContentSize(size);
|
|
485
|
+
}
|
|
486
|
+
_setContentOffset(offset) {
|
|
487
|
+
let rect = new $b257fb58d1fe030d$export$c79fc6492f3af13d(offset.x, offset.y, this._visibleRect.width, this._visibleRect.height);
|
|
488
|
+
this.delegate.setVisibleRect(rect);
|
|
489
|
+
}
|
|
490
|
+
/**
|
|
832
491
|
* Get the size of the scrollable content.
|
|
833
|
-
*/
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
get contentSize() {
|
|
837
|
-
return this._contentSize;
|
|
838
|
-
}
|
|
839
|
-
/**
|
|
840
|
-
* Get the collection view's currently visible rectangle.
|
|
841
|
-
*/
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
get visibleRect() {
|
|
845
|
-
return this._visibleRect;
|
|
846
|
-
}
|
|
847
|
-
/**
|
|
848
|
-
* Set the collection view's currently visible rectangle.
|
|
849
|
-
*/
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
set visibleRect(rect) {
|
|
853
|
-
this._setVisibleRect(rect);
|
|
854
|
-
}
|
|
855
|
-
|
|
856
|
-
_setVisibleRect(rect, forceUpdate) {
|
|
857
|
-
if (forceUpdate === void 0) {
|
|
858
|
-
forceUpdate = false;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
let current = this._visibleRect; // Ignore if the rects are equal
|
|
862
|
-
|
|
863
|
-
if (rect.equals(current)) {
|
|
864
|
-
return;
|
|
492
|
+
*/ get contentSize() {
|
|
493
|
+
return this._contentSize;
|
|
865
494
|
}
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
495
|
+
/**
|
|
496
|
+
* Get the collection view's currently visible rectangle.
|
|
497
|
+
*/ get visibleRect() {
|
|
498
|
+
return this._visibleRect;
|
|
869
499
|
}
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
500
|
+
/**
|
|
501
|
+
* Set the collection view's currently visible rectangle.
|
|
502
|
+
*/ set visibleRect(rect) {
|
|
503
|
+
this._setVisibleRect(rect);
|
|
504
|
+
}
|
|
505
|
+
_setVisibleRect(rect, forceUpdate = false) {
|
|
506
|
+
let current = this._visibleRect;
|
|
507
|
+
// Ignore if the rects are equal
|
|
508
|
+
if (rect.equals(current)) return;
|
|
509
|
+
if (this.shouldOverscan) this._overscanManager.setVisibleRect(rect);
|
|
510
|
+
let shouldInvalidate = this.layout && this.layout.shouldInvalidate(rect, this._visibleRect);
|
|
511
|
+
this._resetAnimatedContentOffset();
|
|
512
|
+
this._visibleRect = rect;
|
|
513
|
+
if (shouldInvalidate) this.relayout({
|
|
514
|
+
offsetChanged: !rect.pointEquals(current),
|
|
515
|
+
sizeChanged: !rect.sizeEquals(current)
|
|
516
|
+
});
|
|
517
|
+
else this.updateSubviews(forceUpdate);
|
|
518
|
+
}
|
|
519
|
+
get collection() {
|
|
520
|
+
return this._collection;
|
|
521
|
+
}
|
|
522
|
+
set collection(data) {
|
|
523
|
+
this._setData(data);
|
|
524
|
+
}
|
|
525
|
+
_setData(data) {
|
|
526
|
+
if (data === this._collection) return;
|
|
527
|
+
if (this._collection) this._runTransaction(()=>{
|
|
528
|
+
this._collection = data;
|
|
529
|
+
}, this.transitionDuration > 0);
|
|
530
|
+
else {
|
|
531
|
+
this._collection = data;
|
|
532
|
+
this.reloadData();
|
|
533
|
+
}
|
|
898
534
|
}
|
|
899
|
-
|
|
900
|
-
if (this._collection) {
|
|
901
|
-
this._runTransaction(() => {
|
|
902
|
-
this._collection = data;
|
|
903
|
-
}, this.transitionDuration > 0);
|
|
904
|
-
} else {
|
|
905
|
-
this._collection = data;
|
|
906
|
-
this.reloadData();
|
|
907
|
-
}
|
|
908
|
-
}
|
|
909
|
-
/**
|
|
535
|
+
/**
|
|
910
536
|
* Reloads the data from the data source and relayouts the collection view.
|
|
911
537
|
* Does not animate any changes. Equivalent to re-assigning the same data source
|
|
912
538
|
* to the collection view.
|
|
913
|
-
*/
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
});
|
|
920
|
-
}
|
|
921
|
-
/**
|
|
539
|
+
*/ reloadData() {
|
|
540
|
+
this.relayout({
|
|
541
|
+
contentChanged: true
|
|
542
|
+
});
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
922
545
|
* Returns the item with the given key.
|
|
923
|
-
*/
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
return this._collection ? this._collection.getItem(key) : null;
|
|
928
|
-
}
|
|
929
|
-
/**
|
|
546
|
+
*/ getItem(key) {
|
|
547
|
+
return this._collection ? this._collection.getItem(key) : null;
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
930
550
|
* Get the collection view's layout.
|
|
931
|
-
*/
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
return this._layout;
|
|
936
|
-
}
|
|
937
|
-
/**
|
|
551
|
+
*/ get layout() {
|
|
552
|
+
return this._layout;
|
|
553
|
+
}
|
|
554
|
+
/**
|
|
938
555
|
* Set the collection view's layout.
|
|
939
|
-
*/
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
this.setLayout(layout);
|
|
944
|
-
}
|
|
945
|
-
/**
|
|
556
|
+
*/ set layout(layout) {
|
|
557
|
+
this.setLayout(layout);
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
946
560
|
* Sets the collection view's layout, optionally with an animated transition
|
|
947
561
|
* from the current layout to the new layout.
|
|
948
562
|
* @param layout The layout to switch to.
|
|
949
563
|
* @param animated Whether to animate the layout change.
|
|
950
|
-
*/
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
564
|
+
*/ setLayout(layout, animated = false) {
|
|
565
|
+
if (layout === this._layout) return;
|
|
566
|
+
let applyLayout = ()=>{
|
|
567
|
+
if (this._layout) // @ts-ignore
|
|
568
|
+
this._layout.virtualizer = null;
|
|
569
|
+
layout.virtualizer = this;
|
|
570
|
+
this._layout = layout;
|
|
571
|
+
};
|
|
572
|
+
if (animated) // Animated layout transitions are really simple, thanks to our transaction support.
|
|
573
|
+
// We just set the layout inside a transaction action, which runs after the initial
|
|
574
|
+
// layout infos for the animation are retrieved from the previous layout. Then, the
|
|
575
|
+
// final layout infos are retrieved from the new layout, and animations occur.
|
|
576
|
+
this._runTransaction(applyLayout);
|
|
577
|
+
else {
|
|
578
|
+
applyLayout();
|
|
579
|
+
this.relayout();
|
|
580
|
+
}
|
|
960
581
|
}
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
582
|
+
_getReuseType(layoutInfo, content) {
|
|
583
|
+
if (layoutInfo.type === 'item' && content) {
|
|
584
|
+
let type = this.delegate.getType ? this.delegate.getType(content) : 'item';
|
|
585
|
+
let reuseType = type === 'item' ? 'item' : layoutInfo.type + '_' + type;
|
|
586
|
+
return {
|
|
587
|
+
type: type,
|
|
588
|
+
reuseType: reuseType
|
|
589
|
+
};
|
|
590
|
+
}
|
|
591
|
+
return {
|
|
592
|
+
type: layoutInfo.type,
|
|
593
|
+
reuseType: layoutInfo.type
|
|
594
|
+
};
|
|
595
|
+
}
|
|
596
|
+
getReusableView(layoutInfo) {
|
|
597
|
+
let content = this.getItem(layoutInfo.key);
|
|
598
|
+
let { reuseType: reuseType } = this._getReuseType(layoutInfo, content);
|
|
599
|
+
if (!this._reusableViews[reuseType]) this._reusableViews[reuseType] = [];
|
|
600
|
+
let reusable = this._reusableViews[reuseType];
|
|
601
|
+
let view = reusable.length > 0 ? reusable.pop() : new $48e7cd77a68be60c$export$1a5223887c560441(this);
|
|
602
|
+
view.viewType = reuseType;
|
|
603
|
+
if (!this._animatedContentOffset.isOrigin()) {
|
|
604
|
+
layoutInfo = layoutInfo.copy();
|
|
605
|
+
layoutInfo.rect.x += this._animatedContentOffset.x;
|
|
606
|
+
layoutInfo.rect.y += this._animatedContentOffset.y;
|
|
607
|
+
}
|
|
608
|
+
view.layoutInfo = layoutInfo;
|
|
609
|
+
this._renderView(view);
|
|
610
|
+
return view;
|
|
611
|
+
}
|
|
612
|
+
_renderView(reusableView) {
|
|
613
|
+
let { type: type , key: key } = reusableView.layoutInfo;
|
|
614
|
+
reusableView.content = this.getItem(key);
|
|
615
|
+
reusableView.rendered = this._renderContent(type, reusableView.content);
|
|
616
|
+
}
|
|
617
|
+
_renderContent(type, content) {
|
|
618
|
+
let cached = this._renderedContent.get(content);
|
|
619
|
+
if (cached != null) return cached;
|
|
620
|
+
let rendered = this.delegate.renderView(type, content);
|
|
621
|
+
if (content) this._renderedContent.set(content, rendered);
|
|
622
|
+
return rendered;
|
|
623
|
+
}
|
|
624
|
+
/**
|
|
625
|
+
* Returns an array of all currently visible views, including both
|
|
626
|
+
* item views and supplementary views.
|
|
627
|
+
*/ get visibleViews() {
|
|
628
|
+
return Array.from(this._visibleViews.values());
|
|
992
629
|
}
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
getReusableView(layoutInfo) {
|
|
1001
|
-
let content = this.getItem(layoutInfo.key);
|
|
1002
|
-
|
|
1003
|
-
let {
|
|
1004
|
-
reuseType
|
|
1005
|
-
} = this._getReuseType(layoutInfo, content);
|
|
1006
|
-
|
|
1007
|
-
if (!this._reusableViews[reuseType]) {
|
|
1008
|
-
this._reusableViews[reuseType] = [];
|
|
630
|
+
/**
|
|
631
|
+
* Gets the visible view for the given type and key. Returns null if
|
|
632
|
+
* the view is not currently visible.
|
|
633
|
+
*
|
|
634
|
+
* @param key The key of the view to retrieve.
|
|
635
|
+
*/ getView(key) {
|
|
636
|
+
return this._visibleViews.get(key) || null;
|
|
1009
637
|
}
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
layoutInfo = layoutInfo.copy();
|
|
1017
|
-
layoutInfo.rect.x += this._animatedContentOffset.x;
|
|
1018
|
-
layoutInfo.rect.y += this._animatedContentOffset.y;
|
|
638
|
+
/**
|
|
639
|
+
* Returns an array of visible views matching the given type.
|
|
640
|
+
* @param type The view type to find.
|
|
641
|
+
*/ getViewsOfType(type) {
|
|
642
|
+
return this.visibleViews.filter((v)=>v.layoutInfo && v.layoutInfo.type === type
|
|
643
|
+
);
|
|
1019
644
|
}
|
|
1020
|
-
|
|
1021
|
-
view.layoutInfo = layoutInfo;
|
|
1022
|
-
|
|
1023
|
-
this._renderView(view);
|
|
1024
|
-
|
|
1025
|
-
return view;
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
|
-
_renderView(reusableView) {
|
|
1029
|
-
let {
|
|
1030
|
-
type,
|
|
1031
|
-
key
|
|
1032
|
-
} = reusableView.layoutInfo;
|
|
1033
|
-
reusableView.content = this.getItem(key);
|
|
1034
|
-
reusableView.rendered = this._renderContent(type, reusableView.content);
|
|
1035
|
-
}
|
|
1036
|
-
|
|
1037
|
-
_renderContent(type, content) {
|
|
1038
|
-
let cached = this._renderedContent.get(content);
|
|
1039
|
-
|
|
1040
|
-
if (cached != null) {
|
|
1041
|
-
return cached;
|
|
1042
|
-
}
|
|
1043
|
-
|
|
1044
|
-
let rendered = this.delegate.renderView(type, content);
|
|
1045
|
-
|
|
1046
|
-
if (content) {
|
|
1047
|
-
this._renderedContent.set(content, rendered);
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
|
-
return rendered;
|
|
1051
|
-
}
|
|
1052
|
-
/**
|
|
1053
|
-
* Returns an array of all currently visible views, including both
|
|
1054
|
-
* item views and supplementary views.
|
|
1055
|
-
*/
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
get visibleViews() {
|
|
1059
|
-
return Array.from(this._visibleViews.values());
|
|
1060
|
-
}
|
|
1061
|
-
/**
|
|
1062
|
-
* Gets the visible view for the given type and key. Returns null if
|
|
1063
|
-
* the view is not currently visible.
|
|
1064
|
-
*
|
|
1065
|
-
* @param key The key of the view to retrieve.
|
|
1066
|
-
*/
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
getView(key) {
|
|
1070
|
-
return this._visibleViews.get(key) || null;
|
|
1071
|
-
}
|
|
1072
|
-
/**
|
|
1073
|
-
* Returns an array of visible views matching the given type.
|
|
1074
|
-
* @param type The view type to find.
|
|
1075
|
-
*/
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
getViewsOfType(type) {
|
|
1079
|
-
return this.visibleViews.filter(v => v.layoutInfo && v.layoutInfo.type === type);
|
|
1080
|
-
}
|
|
1081
|
-
/**
|
|
645
|
+
/**
|
|
1082
646
|
* Returns the key for the given view. Returns null
|
|
1083
647
|
* if the view is not currently visible.
|
|
1084
|
-
*/
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
keyForView(view) {
|
|
1088
|
-
if (view && view.layoutInfo) {
|
|
1089
|
-
return view.layoutInfo.key;
|
|
648
|
+
*/ keyForView(view) {
|
|
649
|
+
if (view && view.layoutInfo) return view.layoutInfo.key;
|
|
650
|
+
return null;
|
|
1090
651
|
}
|
|
1091
|
-
|
|
1092
|
-
return null;
|
|
1093
|
-
}
|
|
1094
|
-
/**
|
|
652
|
+
/**
|
|
1095
653
|
* Returns the key for the item view currently at the given point.
|
|
1096
|
-
*/
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
if (!layoutInfo) {
|
|
1105
|
-
return null;
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
return layoutInfo.key;
|
|
1109
|
-
}
|
|
1110
|
-
/**
|
|
654
|
+
*/ keyAtPoint(point) {
|
|
655
|
+
let rect = new $b257fb58d1fe030d$export$c79fc6492f3af13d(point.x, point.y, 1, 1);
|
|
656
|
+
let layoutInfos = this.layout.getVisibleLayoutInfos(rect);
|
|
657
|
+
let layoutInfo = layoutInfos[0];
|
|
658
|
+
if (!layoutInfo) return null;
|
|
659
|
+
return layoutInfo.key;
|
|
660
|
+
}
|
|
661
|
+
/**
|
|
1111
662
|
* Cleanup for when the Virtualizer will be unmounted.
|
|
1112
|
-
*/
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
willUnmount() {
|
|
1116
|
-
cancelAnimationFrame(this._relayoutRaf);
|
|
1117
|
-
}
|
|
1118
|
-
/**
|
|
1119
|
-
* Triggers a layout invalidation, and updates the visible subviews.
|
|
1120
|
-
*/
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
relayout(context) {
|
|
1124
|
-
if (context === void 0) {
|
|
1125
|
-
context = {};
|
|
663
|
+
*/ willUnmount() {
|
|
664
|
+
cancelAnimationFrame(this._relayoutRaf);
|
|
1126
665
|
}
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
666
|
+
/**
|
|
667
|
+
* Triggers a layout invalidation, and updates the visible subviews.
|
|
668
|
+
*/ relayout(context = {
|
|
669
|
+
}) {
|
|
670
|
+
// Ignore relayouts while animating the scroll position
|
|
671
|
+
if (this._scrollAnimation || typeof requestAnimationFrame === 'undefined') return;
|
|
672
|
+
// If we already scheduled a relayout, extend the invalidation
|
|
673
|
+
// context so we coalesce multiple relayouts in the same frame.
|
|
674
|
+
if (this._invalidationContext) {
|
|
675
|
+
Object.assign(this._invalidationContext, context);
|
|
676
|
+
return;
|
|
677
|
+
}
|
|
678
|
+
this._invalidationContext = context;
|
|
679
|
+
this._relayoutRaf = requestAnimationFrame(()=>{
|
|
680
|
+
this._relayoutRaf = null;
|
|
681
|
+
this.relayoutNow();
|
|
682
|
+
});
|
|
1138
683
|
}
|
|
1139
|
-
|
|
1140
|
-
this._invalidationContext = context;
|
|
1141
|
-
this._relayoutRaf = requestAnimationFrame(() => {
|
|
1142
|
-
this._relayoutRaf = null;
|
|
1143
|
-
this.relayoutNow();
|
|
1144
|
-
});
|
|
1145
|
-
}
|
|
1146
|
-
/**
|
|
684
|
+
/**
|
|
1147
685
|
* Performs a relayout immediately. Prefer {@link relayout} over this method
|
|
1148
686
|
* where possible, since it coalesces multiple layout passes in the same tick.
|
|
1149
|
-
*/
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
// a scheduled relayoutNow call that has this._invalidationContext set as its default context arg (relayoutNow() in relayout)
|
|
1162
|
-
|
|
1163
|
-
context = _babelRuntimeHelpersExtends({}, this._invalidationContext, context);
|
|
1164
|
-
} // Reset the invalidation context
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
this._invalidationContext = null; // Do nothing if we don't have a layout or content, or we are
|
|
1168
|
-
// in the middle of an animated scroll transition.
|
|
1169
|
-
|
|
1170
|
-
if (!this.layout || !this._collection || this._scrollAnimation) {
|
|
1171
|
-
return;
|
|
1172
|
-
}
|
|
1173
|
-
|
|
1174
|
-
let scrollAnchor = this._getScrollAnchor(); // Trigger the beforeLayout hook, if provided
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
if (typeof context.beforeLayout === 'function') {
|
|
1178
|
-
context.beforeLayout();
|
|
1179
|
-
} // Validate the layout
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
this.layout.validate(context);
|
|
1183
|
-
|
|
1184
|
-
this._setContentSize(this.layout.getContentSize()); // Trigger the afterLayout hook, if provided
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
if (typeof context.afterLayout === 'function') {
|
|
1188
|
-
context.afterLayout();
|
|
1189
|
-
} // Adjust scroll position based on scroll anchor, and constrain.
|
|
1190
|
-
// If the content changed, scroll to the top.
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
let visibleRect = this.getVisibleRect();
|
|
1194
|
-
|
|
1195
|
-
let restoredScrollAnchor = this._restoreScrollAnchor(scrollAnchor, context);
|
|
1196
|
-
|
|
1197
|
-
let contentOffsetX = context.contentChanged ? 0 : restoredScrollAnchor.x;
|
|
1198
|
-
let contentOffsetY = context.contentChanged ? 0 : restoredScrollAnchor.y;
|
|
1199
|
-
contentOffsetX = Math.max(0, Math.min(this.contentSize.width - visibleRect.width, contentOffsetX));
|
|
1200
|
-
contentOffsetY = Math.max(0, Math.min(this.contentSize.height - visibleRect.height, contentOffsetY));
|
|
1201
|
-
let hasLayoutUpdates = false;
|
|
1202
|
-
|
|
1203
|
-
if (contentOffsetX !== visibleRect.x || contentOffsetY !== visibleRect.y) {
|
|
1204
|
-
// If this is an animated relayout, we do not immediately scroll because it would be jittery.
|
|
1205
|
-
// Save the difference between the current and new content offsets, and apply it to the
|
|
1206
|
-
// individual content items instead. At the end of the animation, we'll reset and set the
|
|
1207
|
-
// scroll offset for real. This ensures jitter-free animation since we don't need to sync
|
|
1208
|
-
// the scroll animation and the content animation.
|
|
1209
|
-
if (context.animated || !this._animatedContentOffset.isOrigin()) {
|
|
1210
|
-
this._animatedContentOffset.x += visibleRect.x - contentOffsetX;
|
|
1211
|
-
this._animatedContentOffset.y += visibleRect.y - contentOffsetY;
|
|
1212
|
-
hasLayoutUpdates = this.updateSubviews(context.contentChanged);
|
|
1213
|
-
} else {
|
|
1214
|
-
this._setContentOffset(new Point(contentOffsetX, contentOffsetY));
|
|
1215
|
-
}
|
|
1216
|
-
} else {
|
|
1217
|
-
hasLayoutUpdates = this.updateSubviews(context.contentChanged);
|
|
1218
|
-
} // Apply layout infos, unless this is coming from an animated transaction
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
if (!(context.transaction && context.animated)) {
|
|
1222
|
-
this._applyLayoutInfos();
|
|
1223
|
-
} // Wait for animations, and apply the afterAnimation hook, if provided
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
if (context.animated && hasLayoutUpdates) {
|
|
1227
|
-
this._enableTransitions();
|
|
1228
|
-
|
|
1229
|
-
let done = () => {
|
|
1230
|
-
this._disableTransitions(); // Reset scroll position after animations (see above comment).
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
if (!this._animatedContentOffset.isOrigin()) {
|
|
1234
|
-
// Get the content offset to scroll to, taking _animatedContentOffset into account.
|
|
1235
|
-
let {
|
|
1236
|
-
x,
|
|
1237
|
-
y
|
|
1238
|
-
} = this.getVisibleRect();
|
|
1239
|
-
|
|
1240
|
-
this._resetAnimatedContentOffset();
|
|
1241
|
-
|
|
1242
|
-
this._setContentOffset(new Point(x, y));
|
|
1243
|
-
}
|
|
1244
|
-
|
|
1245
|
-
if (typeof context.afterAnimation === 'function') {
|
|
1246
|
-
context.afterAnimation();
|
|
687
|
+
*/ relayoutNow(context = this._invalidationContext || {
|
|
688
|
+
}) {
|
|
689
|
+
// Cancel the scheduled relayout, since we're doing it now.
|
|
690
|
+
if (this._relayoutRaf) {
|
|
691
|
+
cancelAnimationFrame(this._relayoutRaf);
|
|
692
|
+
this._relayoutRaf = null;
|
|
693
|
+
// Update the provided context with the current invalidationContext since we are cancelling
|
|
694
|
+
// a scheduled relayoutNow call that has this._invalidationContext set as its default context arg (relayoutNow() in relayout)
|
|
695
|
+
context = {
|
|
696
|
+
...this._invalidationContext,
|
|
697
|
+
...context
|
|
698
|
+
};
|
|
1247
699
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
700
|
+
// Reset the invalidation context
|
|
701
|
+
this._invalidationContext = null;
|
|
702
|
+
// Do nothing if we don't have a layout or content, or we are
|
|
703
|
+
// in the middle of an animated scroll transition.
|
|
704
|
+
if (!this.layout || !this._collection || this._scrollAnimation) return;
|
|
705
|
+
let scrollAnchor = this._getScrollAnchor();
|
|
706
|
+
// Trigger the beforeLayout hook, if provided
|
|
707
|
+
if (typeof context.beforeLayout === 'function') context.beforeLayout();
|
|
708
|
+
// Validate the layout
|
|
709
|
+
this.layout.validate(context);
|
|
710
|
+
this._setContentSize(this.layout.getContentSize());
|
|
711
|
+
// Trigger the afterLayout hook, if provided
|
|
712
|
+
if (typeof context.afterLayout === 'function') context.afterLayout();
|
|
713
|
+
// Adjust scroll position based on scroll anchor, and constrain.
|
|
714
|
+
// If the content changed, scroll to the top.
|
|
715
|
+
let visibleRect = this.getVisibleRect();
|
|
716
|
+
let restoredScrollAnchor = this._restoreScrollAnchor(scrollAnchor, context);
|
|
717
|
+
let contentOffsetX = context.contentChanged ? 0 : restoredScrollAnchor.x;
|
|
718
|
+
let contentOffsetY = context.contentChanged ? 0 : restoredScrollAnchor.y;
|
|
719
|
+
contentOffsetX = Math.max(0, Math.min(this.contentSize.width - visibleRect.width, contentOffsetX));
|
|
720
|
+
contentOffsetY = Math.max(0, Math.min(this.contentSize.height - visibleRect.height, contentOffsetY));
|
|
721
|
+
let hasLayoutUpdates = false;
|
|
722
|
+
if (contentOffsetX !== visibleRect.x || contentOffsetY !== visibleRect.y) {
|
|
723
|
+
// If this is an animated relayout, we do not immediately scroll because it would be jittery.
|
|
724
|
+
// Save the difference between the current and new content offsets, and apply it to the
|
|
725
|
+
// individual content items instead. At the end of the animation, we'll reset and set the
|
|
726
|
+
// scroll offset for real. This ensures jitter-free animation since we don't need to sync
|
|
727
|
+
// the scroll animation and the content animation.
|
|
728
|
+
if (context.animated || !this._animatedContentOffset.isOrigin()) {
|
|
729
|
+
this._animatedContentOffset.x += visibleRect.x - contentOffsetX;
|
|
730
|
+
this._animatedContentOffset.y += visibleRect.y - contentOffsetY;
|
|
731
|
+
hasLayoutUpdates = this.updateSubviews(context.contentChanged);
|
|
732
|
+
} else this._setContentOffset(new $63dcdc70cf96c5d7$export$baf26146a414f24a(contentOffsetX, contentOffsetY));
|
|
733
|
+
} else hasLayoutUpdates = this.updateSubviews(context.contentChanged);
|
|
734
|
+
// Apply layout infos, unless this is coming from an animated transaction
|
|
735
|
+
if (!(context.transaction && context.animated)) this._applyLayoutInfos();
|
|
736
|
+
// Wait for animations, and apply the afterAnimation hook, if provided
|
|
737
|
+
if (context.animated && hasLayoutUpdates) {
|
|
738
|
+
this._enableTransitions();
|
|
739
|
+
let done = ()=>{
|
|
740
|
+
this._disableTransitions();
|
|
741
|
+
// Reset scroll position after animations (see above comment).
|
|
742
|
+
if (!this._animatedContentOffset.isOrigin()) {
|
|
743
|
+
// Get the content offset to scroll to, taking _animatedContentOffset into account.
|
|
744
|
+
let { x: x , y: y } = this.getVisibleRect();
|
|
745
|
+
this._resetAnimatedContentOffset();
|
|
746
|
+
this._setContentOffset(new $63dcdc70cf96c5d7$export$baf26146a414f24a(x, y));
|
|
747
|
+
}
|
|
748
|
+
if (typeof context.afterAnimation === 'function') context.afterAnimation();
|
|
749
|
+
};
|
|
750
|
+
// Sometimes the animation takes slightly longer than expected.
|
|
751
|
+
setTimeout(done, this.transitionDuration + 100);
|
|
752
|
+
return;
|
|
753
|
+
} else if (typeof context.afterAnimation === 'function') context.afterAnimation();
|
|
1255
754
|
}
|
|
1256
|
-
|
|
1257
|
-
/**
|
|
755
|
+
/**
|
|
1258
756
|
* Corrects DOM order of visible views to match item order of collection.
|
|
1259
|
-
*/
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
}
|
|
1267
|
-
|
|
1268
|
-
for (let key of this._visibleLayoutInfos.keys()) {
|
|
1269
|
-
let view = this._visibleViews.get(key);
|
|
1270
|
-
|
|
1271
|
-
this._children.delete(view);
|
|
1272
|
-
|
|
1273
|
-
this._children.add(view);
|
|
1274
|
-
}
|
|
1275
|
-
}
|
|
1276
|
-
|
|
1277
|
-
_enableTransitions() {
|
|
1278
|
-
this.delegate.beginAnimations();
|
|
1279
|
-
}
|
|
1280
|
-
|
|
1281
|
-
_disableTransitions() {
|
|
1282
|
-
this.delegate.endAnimations();
|
|
1283
|
-
}
|
|
1284
|
-
|
|
1285
|
-
_getScrollAnchor() {
|
|
1286
|
-
if (!this.anchorScrollPosition) {
|
|
1287
|
-
return null;
|
|
1288
|
-
}
|
|
1289
|
-
|
|
1290
|
-
let visibleRect = this.getVisibleRect(); // Ask the delegate to provide a scroll anchor, if possible
|
|
1291
|
-
|
|
1292
|
-
if (this.delegate.getScrollAnchor) {
|
|
1293
|
-
let key = this.delegate.getScrollAnchor(visibleRect);
|
|
1294
|
-
|
|
1295
|
-
if (key) {
|
|
1296
|
-
let layoutInfo = this.layout.getLayoutInfo(key);
|
|
1297
|
-
let corner = layoutInfo.rect.getCornerInRect(visibleRect);
|
|
1298
|
-
|
|
1299
|
-
if (corner) {
|
|
1300
|
-
let key = layoutInfo.key;
|
|
1301
|
-
let offset = layoutInfo.rect[corner].y - visibleRect.y;
|
|
1302
|
-
return {
|
|
1303
|
-
key,
|
|
1304
|
-
layoutInfo,
|
|
1305
|
-
corner,
|
|
1306
|
-
offset
|
|
1307
|
-
};
|
|
1308
|
-
}
|
|
1309
|
-
}
|
|
1310
|
-
} // No need to anchor the scroll position if it is at the top
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
if (visibleRect.y === 0 && !this.anchorScrollPositionAtTop) {
|
|
1314
|
-
return null;
|
|
1315
|
-
} // Find a view with a visible corner that has the smallest distance to the top of the collection view
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
let cornerAnchor = null;
|
|
1319
|
-
|
|
1320
|
-
for (let [key, view] of this._visibleViews) {
|
|
1321
|
-
let layoutInfo = view.layoutInfo;
|
|
1322
|
-
|
|
1323
|
-
if (layoutInfo && layoutInfo.rect.area > 0) {
|
|
1324
|
-
let corner = layoutInfo.rect.getCornerInRect(visibleRect);
|
|
1325
|
-
|
|
1326
|
-
if (corner) {
|
|
1327
|
-
let offset = layoutInfo.rect[corner].y - visibleRect.y;
|
|
1328
|
-
|
|
1329
|
-
if (!cornerAnchor || offset < cornerAnchor.offset) {
|
|
1330
|
-
cornerAnchor = {
|
|
1331
|
-
key,
|
|
1332
|
-
layoutInfo,
|
|
1333
|
-
corner,
|
|
1334
|
-
offset
|
|
1335
|
-
};
|
|
1336
|
-
}
|
|
757
|
+
*/ _correctItemOrder() {
|
|
758
|
+
// Defer until after scrolling and animated transactions are complete
|
|
759
|
+
if (this._isScrolling || this._transaction) return;
|
|
760
|
+
for (let key of this._visibleLayoutInfos.keys()){
|
|
761
|
+
let view = this._visibleViews.get(key);
|
|
762
|
+
this._children.delete(view);
|
|
763
|
+
this._children.add(view);
|
|
1337
764
|
}
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
|
-
|
|
1341
|
-
return cornerAnchor;
|
|
1342
|
-
}
|
|
1343
|
-
|
|
1344
|
-
_restoreScrollAnchor(scrollAnchor, context) {
|
|
1345
|
-
let contentOffset = this.getVisibleRect();
|
|
1346
|
-
|
|
1347
|
-
if (scrollAnchor) {
|
|
1348
|
-
var _context$transaction;
|
|
1349
|
-
|
|
1350
|
-
let finalAnchor = (_context$transaction = context.transaction) != null && _context$transaction.animated ? context.transaction.finalMap.get(scrollAnchor.key) : this.layout.getLayoutInfo(scrollAnchor.layoutInfo.key);
|
|
1351
|
-
|
|
1352
|
-
if (finalAnchor) {
|
|
1353
|
-
let adjustment = finalAnchor.rect[scrollAnchor.corner].y - contentOffset.y - scrollAnchor.offset;
|
|
1354
|
-
contentOffset.y += adjustment;
|
|
1355
|
-
}
|
|
1356
|
-
}
|
|
1357
|
-
|
|
1358
|
-
return contentOffset;
|
|
1359
|
-
}
|
|
1360
|
-
|
|
1361
|
-
getVisibleRect() {
|
|
1362
|
-
let v = this.visibleRect;
|
|
1363
|
-
let x = v.x - this._animatedContentOffset.x;
|
|
1364
|
-
let y = v.y - this._animatedContentOffset.y;
|
|
1365
|
-
return new Rect(x, y, v.width, v.height);
|
|
1366
|
-
}
|
|
1367
|
-
|
|
1368
|
-
getVisibleLayoutInfos() {
|
|
1369
|
-
let rect = this.shouldOverscan ? this._overscanManager.getOverscannedRect() : this.getVisibleRect();
|
|
1370
|
-
this._visibleLayoutInfos = this._getLayoutInfoMap(rect);
|
|
1371
|
-
return this._visibleLayoutInfos;
|
|
1372
|
-
}
|
|
1373
|
-
|
|
1374
|
-
_getLayoutInfoMap(rect, copy) {
|
|
1375
|
-
if (copy === void 0) {
|
|
1376
|
-
copy = false;
|
|
1377
|
-
}
|
|
1378
|
-
|
|
1379
|
-
let layoutInfos = this.layout.getVisibleLayoutInfos(rect);
|
|
1380
|
-
let map = new Map();
|
|
1381
|
-
|
|
1382
|
-
for (let layoutInfo of layoutInfos) {
|
|
1383
|
-
if (copy) {
|
|
1384
|
-
layoutInfo = layoutInfo.copy();
|
|
1385
|
-
}
|
|
1386
|
-
|
|
1387
|
-
map.set(layoutInfo.key, layoutInfo);
|
|
1388
|
-
}
|
|
1389
|
-
|
|
1390
|
-
return map;
|
|
1391
|
-
}
|
|
1392
|
-
|
|
1393
|
-
updateSubviews(forceUpdate) {
|
|
1394
|
-
if (forceUpdate === void 0) {
|
|
1395
|
-
forceUpdate = false;
|
|
1396
|
-
}
|
|
1397
|
-
|
|
1398
|
-
if (!this._collection) {
|
|
1399
|
-
return;
|
|
1400
765
|
}
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
766
|
+
_enableTransitions() {
|
|
767
|
+
this.delegate.beginAnimations();
|
|
768
|
+
}
|
|
769
|
+
_disableTransitions() {
|
|
770
|
+
this.delegate.endAnimations();
|
|
771
|
+
}
|
|
772
|
+
_getScrollAnchor() {
|
|
773
|
+
if (!this.anchorScrollPosition) return null;
|
|
774
|
+
let visibleRect = this.getVisibleRect();
|
|
775
|
+
// Ask the delegate to provide a scroll anchor, if possible
|
|
776
|
+
if (this.delegate.getScrollAnchor) {
|
|
777
|
+
let key = this.delegate.getScrollAnchor(visibleRect);
|
|
778
|
+
if (key) {
|
|
779
|
+
let layoutInfo = this.layout.getLayoutInfo(key);
|
|
780
|
+
let corner = layoutInfo.rect.getCornerInRect(visibleRect);
|
|
781
|
+
if (corner) {
|
|
782
|
+
let key = layoutInfo.key;
|
|
783
|
+
let offset = layoutInfo.rect[corner].y - visibleRect.y;
|
|
784
|
+
return {
|
|
785
|
+
key: key,
|
|
786
|
+
layoutInfo: layoutInfo,
|
|
787
|
+
corner: corner,
|
|
788
|
+
offset: offset
|
|
789
|
+
};
|
|
790
|
+
}
|
|
791
|
+
}
|
|
1423
792
|
}
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
793
|
+
// No need to anchor the scroll position if it is at the top
|
|
794
|
+
if (visibleRect.y === 0 && !this.anchorScrollPositionAtTop) return null;
|
|
795
|
+
// Find a view with a visible corner that has the smallest distance to the top of the collection view
|
|
796
|
+
let cornerAnchor = null;
|
|
797
|
+
for (let [key, view] of this._visibleViews){
|
|
798
|
+
let layoutInfo = view.layoutInfo;
|
|
799
|
+
if (layoutInfo && layoutInfo.rect.area > 0) {
|
|
800
|
+
let corner = layoutInfo.rect.getCornerInRect(visibleRect);
|
|
801
|
+
if (corner) {
|
|
802
|
+
let offset = layoutInfo.rect[corner].y - visibleRect.y;
|
|
803
|
+
if (!cornerAnchor || offset < cornerAnchor.offset) cornerAnchor = {
|
|
804
|
+
key: key,
|
|
805
|
+
layoutInfo: layoutInfo,
|
|
806
|
+
corner: corner,
|
|
807
|
+
offset: offset
|
|
808
|
+
};
|
|
809
|
+
}
|
|
810
|
+
}
|
|
1440
811
|
}
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
if (
|
|
1446
|
-
|
|
812
|
+
return cornerAnchor;
|
|
813
|
+
}
|
|
814
|
+
_restoreScrollAnchor(scrollAnchor, context) {
|
|
815
|
+
let contentOffset = this.getVisibleRect();
|
|
816
|
+
if (scrollAnchor) {
|
|
817
|
+
let finalAnchor = context.transaction?.animated ? context.transaction.finalMap.get(scrollAnchor.key) : this.layout.getLayoutInfo(scrollAnchor.layoutInfo.key);
|
|
818
|
+
if (finalAnchor) {
|
|
819
|
+
let adjustment = finalAnchor.rect[scrollAnchor.corner].y - contentOffset.y - scrollAnchor.offset;
|
|
820
|
+
contentOffset.y += adjustment;
|
|
821
|
+
}
|
|
1447
822
|
}
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
823
|
+
return contentOffset;
|
|
824
|
+
}
|
|
825
|
+
getVisibleRect() {
|
|
826
|
+
let v = this.visibleRect;
|
|
827
|
+
let x = v.x - this._animatedContentOffset.x;
|
|
828
|
+
let y = v.y - this._animatedContentOffset.y;
|
|
829
|
+
return new $b257fb58d1fe030d$export$c79fc6492f3af13d(x, y, v.width, v.height);
|
|
830
|
+
}
|
|
831
|
+
getVisibleLayoutInfos() {
|
|
832
|
+
let rect = this.shouldOverscan ? this._overscanManager.getOverscannedRect() : this.getVisibleRect();
|
|
833
|
+
this._visibleLayoutInfos = this._getLayoutInfoMap(rect);
|
|
834
|
+
return this._visibleLayoutInfos;
|
|
835
|
+
}
|
|
836
|
+
_getLayoutInfoMap(rect, copy = false) {
|
|
837
|
+
let layoutInfos = this.layout.getVisibleLayoutInfos(rect);
|
|
838
|
+
let map = new Map;
|
|
839
|
+
for (let layoutInfo of layoutInfos){
|
|
840
|
+
if (copy) layoutInfo = layoutInfo.copy();
|
|
841
|
+
map.set(layoutInfo.key, layoutInfo);
|
|
842
|
+
}
|
|
843
|
+
return map;
|
|
844
|
+
}
|
|
845
|
+
updateSubviews(forceUpdate = false) {
|
|
846
|
+
if (!this._collection) return;
|
|
847
|
+
let visibleLayoutInfos = this.getVisibleLayoutInfos();
|
|
848
|
+
let currentlyVisible = this._visibleViews;
|
|
849
|
+
let toAdd, toRemove, toUpdate;
|
|
850
|
+
// If this is a force update, remove and re-add all views.
|
|
851
|
+
// Otherwise, find and update the diff.
|
|
852
|
+
if (forceUpdate) {
|
|
853
|
+
toAdd = visibleLayoutInfos;
|
|
854
|
+
toRemove = currentlyVisible;
|
|
855
|
+
toUpdate = new Set();
|
|
1471
856
|
} else {
|
|
1472
|
-
|
|
857
|
+
({ toAdd: toAdd , toRemove: toRemove , toUpdate: toUpdate } = $dcde0d6fc989b206$export$acaf96a27438246b(currentlyVisible, visibleLayoutInfos));
|
|
858
|
+
for (let key of toUpdate){
|
|
859
|
+
let view = currentlyVisible.get(key);
|
|
860
|
+
if (!view || !view.layoutInfo) continue;
|
|
861
|
+
let item = this.getItem(visibleLayoutInfos.get(key).key);
|
|
862
|
+
if (view.content === item) toUpdate.delete(key);
|
|
863
|
+
else {
|
|
864
|
+
// If the view type changes, delete and recreate the view instead of updating
|
|
865
|
+
let { reuseType: reuseType } = this._getReuseType(view.layoutInfo, item);
|
|
866
|
+
if (view.viewType !== reuseType) {
|
|
867
|
+
toUpdate.delete(key);
|
|
868
|
+
toAdd.add(key);
|
|
869
|
+
toRemove.add(key);
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
// We are done if the sets are equal
|
|
874
|
+
if (toAdd.size === 0 && toRemove.size === 0 && toUpdate.size === 0) {
|
|
875
|
+
if (this._transaction) this._applyLayoutInfos();
|
|
876
|
+
return;
|
|
877
|
+
}
|
|
1473
878
|
}
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
879
|
+
// Track views that should be removed. They are not removed from
|
|
880
|
+
// the DOM immediately, since we may reuse and need to re-insert
|
|
881
|
+
// them back into the DOM anyway.
|
|
882
|
+
let removed = new Set();
|
|
883
|
+
for (let key of toRemove.keys()){
|
|
884
|
+
let view = this._visibleViews.get(key);
|
|
885
|
+
if (view) {
|
|
886
|
+
removed.add(view);
|
|
887
|
+
this._visibleViews.delete(key);
|
|
888
|
+
// If we are in the middle of a transaction, wait until the end
|
|
889
|
+
// of the animations to remove the views from the DOM. Also means
|
|
890
|
+
// we can't reuse those views immediately.
|
|
891
|
+
if (this._transaction) this._transaction.toRemove.set(key, view);
|
|
892
|
+
else this.reuseView(view);
|
|
893
|
+
}
|
|
1488
894
|
}
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
895
|
+
for (let key1 of toAdd.keys()){
|
|
896
|
+
let layoutInfo = visibleLayoutInfos.get(key1);
|
|
897
|
+
let view;
|
|
898
|
+
// If we're in a transaction, and a layout change happens
|
|
899
|
+
// during the animations such that a view that was going
|
|
900
|
+
// to be removed is now not, we don't create a new view
|
|
901
|
+
// since the old one is still in the DOM, marked as toRemove.
|
|
902
|
+
if (this._transaction) {
|
|
903
|
+
// if transaction, get initial layout attributes for the animation
|
|
904
|
+
if (this._transaction.initialLayoutInfo.has(key1)) layoutInfo = this._transaction.initialLayoutInfo.get(key1);
|
|
905
|
+
view = this._transaction.toRemove.get(key1);
|
|
906
|
+
if (view) {
|
|
907
|
+
this._transaction.toRemove.delete(key1);
|
|
908
|
+
this._applyLayoutInfo(view, layoutInfo);
|
|
909
|
+
}
|
|
910
|
+
}
|
|
911
|
+
if (!view) {
|
|
912
|
+
// Create or reuse a view for this row
|
|
913
|
+
view = this.getReusableView(layoutInfo);
|
|
914
|
+
// Add the view to the DOM if needed
|
|
915
|
+
if (!removed.has(view)) this._children.add(view);
|
|
916
|
+
}
|
|
917
|
+
this._visibleViews.set(key1, view);
|
|
918
|
+
removed.delete(view);
|
|
1496
919
|
}
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
view = this.getReusableView(layoutInfo); // Add the view to the DOM if needed
|
|
1502
|
-
|
|
1503
|
-
if (!removed.has(view)) {
|
|
1504
|
-
this._children.add(view);
|
|
920
|
+
for (let key2 of toUpdate){
|
|
921
|
+
let view = currentlyVisible.get(key2);
|
|
922
|
+
this._renderedContent.delete(key2);
|
|
923
|
+
this._renderView(view);
|
|
1505
924
|
}
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
requestAnimationFrame(() => this._applyLayoutInfos());
|
|
925
|
+
// Remove the remaining rows to delete from the DOM
|
|
926
|
+
if (!this._transaction) this.removeViews(removed);
|
|
927
|
+
this._correctItemOrder();
|
|
928
|
+
this._flushVisibleViews();
|
|
929
|
+
let hasLayoutUpdates = this._transaction && (toAdd.size > 0 || toRemove.size > 0 || this._hasLayoutUpdates());
|
|
930
|
+
if (hasLayoutUpdates) requestAnimationFrame(()=>{
|
|
931
|
+
// If we're in a transaction, apply animations to visible views
|
|
932
|
+
// and "to be removed" views, which animate off screen.
|
|
933
|
+
if (this._transaction) requestAnimationFrame(()=>this._applyLayoutInfos()
|
|
934
|
+
);
|
|
935
|
+
});
|
|
936
|
+
return hasLayoutUpdates;
|
|
937
|
+
}
|
|
938
|
+
afterRender() {
|
|
939
|
+
if (this.shouldOverscan) this._overscanManager.collectMetrics();
|
|
940
|
+
}
|
|
941
|
+
_flushVisibleViews() {
|
|
942
|
+
// CollectionVirtualizer deals with a flattened set of LayoutInfos, but they can represent heirarchy
|
|
943
|
+
// by referencing a parentKey. Just before rendering the visible views, we rebuild this heirarchy
|
|
944
|
+
// by creating a mapping of views by parent key and recursively calling the delegate's renderWrapper
|
|
945
|
+
// method to build the final tree.
|
|
946
|
+
let viewsByParentKey = new Map([
|
|
947
|
+
[
|
|
948
|
+
null,
|
|
949
|
+
[]
|
|
950
|
+
]
|
|
951
|
+
]);
|
|
952
|
+
for (let view1 of this._children){
|
|
953
|
+
if (!viewsByParentKey.has(view1.layoutInfo.parentKey)) viewsByParentKey.set(view1.layoutInfo.parentKey, []);
|
|
954
|
+
viewsByParentKey.get(view1.layoutInfo.parentKey).push(view1);
|
|
955
|
+
if (!viewsByParentKey.has(view1.layoutInfo.key)) viewsByParentKey.set(view1.layoutInfo.key, []);
|
|
1538
956
|
}
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
// CollectionVirtualizer deals with a flattened set of LayoutInfos, but they can represent heirarchy
|
|
1553
|
-
// by referencing a parentKey. Just before rendering the visible views, we rebuild this heirarchy
|
|
1554
|
-
// by creating a mapping of views by parent key and recursively calling the delegate's renderWrapper
|
|
1555
|
-
// method to build the final tree.
|
|
1556
|
-
let viewsByParentKey = new Map([[null, []]]);
|
|
1557
|
-
|
|
1558
|
-
for (let view of this._children) {
|
|
1559
|
-
if (!viewsByParentKey.has(view.layoutInfo.parentKey)) {
|
|
1560
|
-
viewsByParentKey.set(view.layoutInfo.parentKey, []);
|
|
1561
|
-
}
|
|
1562
|
-
|
|
1563
|
-
viewsByParentKey.get(view.layoutInfo.parentKey).push(view);
|
|
1564
|
-
|
|
1565
|
-
if (!viewsByParentKey.has(view.layoutInfo.key)) {
|
|
1566
|
-
viewsByParentKey.set(view.layoutInfo.key, []);
|
|
1567
|
-
}
|
|
1568
|
-
}
|
|
1569
|
-
|
|
1570
|
-
let buildTree = (parent, views) => views.map(view => {
|
|
1571
|
-
let children = viewsByParentKey.get(view.layoutInfo.key);
|
|
1572
|
-
return this.delegate.renderWrapper(parent, view, children, childViews => buildTree(view, childViews));
|
|
1573
|
-
});
|
|
1574
|
-
|
|
1575
|
-
let children = buildTree(null, viewsByParentKey.get(null));
|
|
1576
|
-
this.delegate.setVisibleViews(children);
|
|
1577
|
-
}
|
|
1578
|
-
|
|
1579
|
-
_applyLayoutInfo(view, layoutInfo) {
|
|
1580
|
-
if (view.layoutInfo === layoutInfo) {
|
|
1581
|
-
return false;
|
|
957
|
+
let buildTree = (parent, views)=>views.map((view)=>{
|
|
958
|
+
let children = viewsByParentKey.get(view.layoutInfo.key);
|
|
959
|
+
return this.delegate.renderWrapper(parent, view, children, (childViews)=>buildTree(view, childViews)
|
|
960
|
+
);
|
|
961
|
+
})
|
|
962
|
+
;
|
|
963
|
+
let children1 = buildTree(null, viewsByParentKey.get(null));
|
|
964
|
+
this.delegate.setVisibleViews(children1);
|
|
965
|
+
}
|
|
966
|
+
_applyLayoutInfo(view, layoutInfo) {
|
|
967
|
+
if (view.layoutInfo === layoutInfo) return false;
|
|
968
|
+
view.layoutInfo = layoutInfo;
|
|
969
|
+
return true;
|
|
1582
970
|
}
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
let cur = view.layoutInfo;
|
|
1593
|
-
|
|
1594
|
-
if (cur) {
|
|
1595
|
-
let layoutInfo = this.layout.getLayoutInfo(cur.key);
|
|
1596
|
-
|
|
1597
|
-
if (this._applyLayoutInfo(view, layoutInfo)) {
|
|
1598
|
-
updated = true;
|
|
971
|
+
_applyLayoutInfos() {
|
|
972
|
+
let updated = false;
|
|
973
|
+
// Apply layout infos to visible views
|
|
974
|
+
for (let view of this._visibleViews.values()){
|
|
975
|
+
let cur = view.layoutInfo;
|
|
976
|
+
if (cur) {
|
|
977
|
+
let layoutInfo = this.layout.getLayoutInfo(cur.key);
|
|
978
|
+
if (this._applyLayoutInfo(view, layoutInfo)) updated = true;
|
|
979
|
+
}
|
|
1599
980
|
}
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
981
|
+
// Apply final layout infos for views that will be removed
|
|
982
|
+
if (this._transaction) {
|
|
983
|
+
for (let view of this._transaction.toRemove.values()){
|
|
984
|
+
let cur = view.layoutInfo;
|
|
985
|
+
let layoutInfo = this.layout.getLayoutInfo(cur.key);
|
|
986
|
+
if (this._applyLayoutInfo(view, layoutInfo)) updated = true;
|
|
987
|
+
}
|
|
988
|
+
for (let view2 of this._transaction.removed.values()){
|
|
989
|
+
let cur = view2.layoutInfo;
|
|
990
|
+
let layoutInfo = this._transaction.finalLayoutInfo.get(cur.key) || cur;
|
|
991
|
+
layoutInfo = this.layout.getFinalLayoutInfo(layoutInfo.copy());
|
|
992
|
+
if (this._applyLayoutInfo(view2, layoutInfo)) updated = true;
|
|
993
|
+
}
|
|
1611
994
|
}
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
let
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
995
|
+
if (updated) this._flushVisibleViews();
|
|
996
|
+
}
|
|
997
|
+
_hasLayoutUpdates() {
|
|
998
|
+
if (!this._transaction) return false;
|
|
999
|
+
for (let view of this._visibleViews.values()){
|
|
1000
|
+
let cur = view.layoutInfo;
|
|
1001
|
+
if (!cur) return true;
|
|
1002
|
+
let layoutInfo = this.layout.getLayoutInfo(cur.key);
|
|
1003
|
+
if (// Uses equals rather than pointEquals so that width/height changes are taken into account
|
|
1004
|
+
!cur.rect.equals(layoutInfo.rect) || cur.opacity !== layoutInfo.opacity || cur.transform !== layoutInfo.transform) return true;
|
|
1621
1005
|
}
|
|
1622
|
-
|
|
1006
|
+
return false;
|
|
1623
1007
|
}
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1008
|
+
reuseView(view) {
|
|
1009
|
+
view.prepareForReuse();
|
|
1010
|
+
this._reusableViews[view.viewType].push(view);
|
|
1627
1011
|
}
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
_hasLayoutUpdates() {
|
|
1631
|
-
if (!this._transaction) {
|
|
1632
|
-
return false;
|
|
1012
|
+
removeViews(toRemove) {
|
|
1013
|
+
for (let view of toRemove)this._children.delete(view);
|
|
1633
1014
|
}
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
}
|
|
1015
|
+
updateItemSize(key, size) {
|
|
1016
|
+
// TODO: we should be able to invalidate a single index path
|
|
1017
|
+
// @ts-ignore
|
|
1018
|
+
if (!this.layout.updateItemSize) return;
|
|
1019
|
+
// If the scroll position is currently animating, add the update
|
|
1020
|
+
// to a queue to be processed after the animation is complete.
|
|
1021
|
+
if (this._scrollAnimation) {
|
|
1022
|
+
this._sizeUpdateQueue.set(key, size);
|
|
1023
|
+
return;
|
|
1024
|
+
}
|
|
1025
|
+
// @ts-ignore
|
|
1026
|
+
let changed = this.layout.updateItemSize(key, size);
|
|
1027
|
+
if (changed) this.relayout();
|
|
1648
1028
|
}
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
}
|
|
1652
|
-
|
|
1653
|
-
reuseView(view) {
|
|
1654
|
-
view.prepareForReuse();
|
|
1655
|
-
|
|
1656
|
-
this._reusableViews[view.viewType].push(view);
|
|
1657
|
-
}
|
|
1658
|
-
|
|
1659
|
-
removeViews(toRemove) {
|
|
1660
|
-
for (let view of toRemove) {
|
|
1661
|
-
this._children.delete(view);
|
|
1029
|
+
startScrolling() {
|
|
1030
|
+
this._isScrolling = true;
|
|
1662
1031
|
}
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
// @ts-ignore
|
|
1668
|
-
if (!this.layout.updateItemSize) {
|
|
1669
|
-
return;
|
|
1670
|
-
} // If the scroll position is currently animating, add the update
|
|
1671
|
-
// to a queue to be processed after the animation is complete.
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
if (this._scrollAnimation) {
|
|
1675
|
-
this._sizeUpdateQueue.set(key, size);
|
|
1676
|
-
|
|
1677
|
-
return;
|
|
1678
|
-
} // @ts-ignore
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
let changed = this.layout.updateItemSize(key, size);
|
|
1682
|
-
|
|
1683
|
-
if (changed) {
|
|
1684
|
-
this.relayout();
|
|
1032
|
+
endScrolling() {
|
|
1033
|
+
this._isScrolling = false;
|
|
1034
|
+
this._correctItemOrder();
|
|
1035
|
+
this._flushVisibleViews();
|
|
1685
1036
|
}
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
endScrolling() {
|
|
1693
|
-
this._isScrolling = false;
|
|
1694
|
-
|
|
1695
|
-
this._correctItemOrder();
|
|
1696
|
-
|
|
1697
|
-
this._flushVisibleViews();
|
|
1698
|
-
}
|
|
1699
|
-
|
|
1700
|
-
_resetAnimatedContentOffset() {
|
|
1701
|
-
// Reset the animated content offset of subviews. See comment in relayoutNow for details.
|
|
1702
|
-
if (!this._animatedContentOffset.isOrigin()) {
|
|
1703
|
-
this._animatedContentOffset = new Point(0, 0);
|
|
1704
|
-
|
|
1705
|
-
this._applyLayoutInfos();
|
|
1037
|
+
_resetAnimatedContentOffset() {
|
|
1038
|
+
// Reset the animated content offset of subviews. See comment in relayoutNow for details.
|
|
1039
|
+
if (!this._animatedContentOffset.isOrigin()) {
|
|
1040
|
+
this._animatedContentOffset = new $63dcdc70cf96c5d7$export$baf26146a414f24a(0, 0);
|
|
1041
|
+
this._applyLayoutInfos();
|
|
1042
|
+
}
|
|
1706
1043
|
}
|
|
1707
|
-
|
|
1708
|
-
/**
|
|
1044
|
+
/**
|
|
1709
1045
|
* Scrolls the item with the given key into view, optionally with an animation.
|
|
1710
1046
|
* @param key The key of the item to scroll into view.
|
|
1711
1047
|
* @param duration The duration of the scroll animation.
|
|
1712
|
-
*/
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
let x = this.visibleRect.x;
|
|
1734
|
-
let y = this.visibleRect.y;
|
|
1735
|
-
let minX = layoutInfo.rect.x - offsetX;
|
|
1736
|
-
let minY = layoutInfo.rect.y - offsetY;
|
|
1737
|
-
let maxX = x + this.visibleRect.width;
|
|
1738
|
-
let maxY = y + this.visibleRect.height;
|
|
1739
|
-
|
|
1740
|
-
if (shouldScrollX) {
|
|
1741
|
-
if (minX <= x || maxX === 0) {
|
|
1742
|
-
x = minX;
|
|
1743
|
-
} else if (layoutInfo.rect.maxX > maxX) {
|
|
1744
|
-
x += layoutInfo.rect.maxX - maxX;
|
|
1745
|
-
}
|
|
1746
|
-
}
|
|
1747
|
-
|
|
1748
|
-
if (shouldScrollY) {
|
|
1749
|
-
if (minY <= y || maxY === 0) {
|
|
1750
|
-
y = minY;
|
|
1751
|
-
} else if (layoutInfo.rect.maxY > maxY) {
|
|
1752
|
-
y += layoutInfo.rect.maxY - maxY;
|
|
1753
|
-
}
|
|
1048
|
+
*/ scrollToItem(key, options) {
|
|
1049
|
+
// key can be 0, so check if null or undefined
|
|
1050
|
+
if (key == null) return;
|
|
1051
|
+
let layoutInfo = this.layout.getLayoutInfo(key);
|
|
1052
|
+
if (!layoutInfo) return;
|
|
1053
|
+
let { duration: duration = 300 , shouldScrollX: shouldScrollX = true , shouldScrollY: shouldScrollY = true , offsetX: offsetX = 0 , offsetY: offsetY = 0 } = options;
|
|
1054
|
+
let x = this.visibleRect.x;
|
|
1055
|
+
let y = this.visibleRect.y;
|
|
1056
|
+
let minX = layoutInfo.rect.x - offsetX;
|
|
1057
|
+
let minY = layoutInfo.rect.y - offsetY;
|
|
1058
|
+
let maxX = x + this.visibleRect.width;
|
|
1059
|
+
let maxY = y + this.visibleRect.height;
|
|
1060
|
+
if (shouldScrollX) {
|
|
1061
|
+
if (minX <= x || maxX === 0) x = minX;
|
|
1062
|
+
else if (layoutInfo.rect.maxX > maxX) x += layoutInfo.rect.maxX - maxX;
|
|
1063
|
+
}
|
|
1064
|
+
if (shouldScrollY) {
|
|
1065
|
+
if (minY <= y || maxY === 0) y = minY;
|
|
1066
|
+
else if (layoutInfo.rect.maxY > maxY) y += layoutInfo.rect.maxY - maxY;
|
|
1067
|
+
}
|
|
1068
|
+
return this.scrollTo(new $63dcdc70cf96c5d7$export$baf26146a414f24a(x, y), duration);
|
|
1754
1069
|
}
|
|
1755
|
-
|
|
1756
|
-
return this.scrollTo(new Point(x, y), duration);
|
|
1757
|
-
}
|
|
1758
|
-
/**
|
|
1070
|
+
/**
|
|
1759
1071
|
* Performs an animated scroll to the given offset.
|
|
1760
1072
|
* @param offset - The offset to scroll to.
|
|
1761
1073
|
* @param duration The duration of the animation.
|
|
1762
1074
|
* @returns A promise that resolves when the animation is complete.
|
|
1763
|
-
*/
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
duration = 300;
|
|
1769
|
-
}
|
|
1770
|
-
|
|
1771
|
-
// Cancel the current scroll animation
|
|
1772
|
-
if (this._scrollAnimation) {
|
|
1773
|
-
this._scrollAnimation.cancel();
|
|
1774
|
-
|
|
1775
|
-
this._scrollAnimation = null;
|
|
1776
|
-
} // Set the content offset synchronously if the duration is zero
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
if (duration <= 0 || this.visibleRect.pointEquals(offset)) {
|
|
1780
|
-
this._setContentOffset(offset);
|
|
1781
|
-
|
|
1782
|
-
return Promise.resolve();
|
|
1783
|
-
}
|
|
1784
|
-
|
|
1785
|
-
this.startScrolling();
|
|
1786
|
-
this._scrollAnimation = $c2209bcf49cd606639597eb5ee44c7c1$export$tween(this.visibleRect, offset, duration, $c2209bcf49cd606639597eb5ee44c7c1$export$easeOut, offset => {
|
|
1787
|
-
this._setContentOffset(offset);
|
|
1788
|
-
});
|
|
1789
|
-
|
|
1790
|
-
this._scrollAnimation.then(() => {
|
|
1791
|
-
this._scrollAnimation = null; // Process view size updates that occurred during the animation.
|
|
1792
|
-
// Only views that are still visible will be actually updated.
|
|
1793
|
-
|
|
1794
|
-
for (let [key, size] of this._sizeUpdateQueue) {
|
|
1795
|
-
this.updateItemSize(key, size);
|
|
1796
|
-
}
|
|
1797
|
-
|
|
1798
|
-
this._sizeUpdateQueue.clear();
|
|
1799
|
-
|
|
1800
|
-
this.relayout();
|
|
1801
|
-
|
|
1802
|
-
this._processTransactionQueue();
|
|
1803
|
-
|
|
1804
|
-
this.endScrolling();
|
|
1805
|
-
});
|
|
1806
|
-
|
|
1807
|
-
return this._scrollAnimation;
|
|
1808
|
-
}
|
|
1809
|
-
|
|
1810
|
-
_runTransaction(action, animated) {
|
|
1811
|
-
this._startTransaction();
|
|
1812
|
-
|
|
1813
|
-
if (this._nextTransaction) {
|
|
1814
|
-
this._nextTransaction.actions.push(action);
|
|
1815
|
-
}
|
|
1816
|
-
|
|
1817
|
-
this._endTransaction(animated);
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
_startTransaction() {
|
|
1821
|
-
if (!this._nextTransaction) {
|
|
1822
|
-
this._nextTransaction = new $b8a692491eed0a311c18a0d64051b3$export$Transaction();
|
|
1823
|
-
}
|
|
1824
|
-
|
|
1825
|
-
this._nextTransaction.level++;
|
|
1826
|
-
}
|
|
1827
|
-
|
|
1828
|
-
_endTransaction(animated) {
|
|
1829
|
-
if (!this._nextTransaction) {
|
|
1830
|
-
return false;
|
|
1831
|
-
} // Save whether the transaction should be animated.
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
if (animated != null) {
|
|
1835
|
-
this._nextTransaction.animated = animated;
|
|
1836
|
-
} // If we haven't reached level 0, we are still in a
|
|
1837
|
-
// nested transaction. Wait for the parent to end.
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
if (--this._nextTransaction.level > 0) {
|
|
1841
|
-
return false;
|
|
1842
|
-
} // Do nothing for empty transactions
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
if (this._nextTransaction.actions.length === 0) {
|
|
1846
|
-
this._nextTransaction = null;
|
|
1847
|
-
return false;
|
|
1848
|
-
} // Default animations to true
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
if (this._nextTransaction.animated == null) {
|
|
1852
|
-
this._nextTransaction.animated = true;
|
|
1853
|
-
} // Enqueue the transaction
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
this._transactionQueue.push(this._nextTransaction);
|
|
1857
|
-
|
|
1858
|
-
this._nextTransaction = null;
|
|
1859
|
-
|
|
1860
|
-
this._processTransactionQueue();
|
|
1861
|
-
|
|
1862
|
-
return true;
|
|
1863
|
-
}
|
|
1864
|
-
|
|
1865
|
-
_processTransactionQueue() {
|
|
1866
|
-
// If the current transaction is animating, wait until the end
|
|
1867
|
-
// to process the next transaction.
|
|
1868
|
-
if (this._transaction || this._scrollAnimation) {
|
|
1869
|
-
return;
|
|
1870
|
-
}
|
|
1871
|
-
|
|
1872
|
-
let next = this._transactionQueue.shift();
|
|
1873
|
-
|
|
1874
|
-
if (next) {
|
|
1875
|
-
this._performTransaction(next);
|
|
1876
|
-
}
|
|
1877
|
-
}
|
|
1878
|
-
|
|
1879
|
-
_getContentRect() {
|
|
1880
|
-
return new Rect(0, 0, this.contentSize.width, this.contentSize.height);
|
|
1881
|
-
}
|
|
1882
|
-
|
|
1883
|
-
_performTransaction(transaction) {
|
|
1884
|
-
this._transaction = transaction;
|
|
1885
|
-
this.relayoutNow({
|
|
1886
|
-
transaction: transaction,
|
|
1887
|
-
animated: transaction.animated,
|
|
1888
|
-
beforeLayout: () => {
|
|
1889
|
-
// Get the initial layout infos for all views before the updates
|
|
1890
|
-
// so we can figure out which views to add and remove.
|
|
1891
|
-
if (transaction.animated) {
|
|
1892
|
-
transaction.initialMap = this._getLayoutInfoMap(this._getContentRect(), true);
|
|
1893
|
-
} // Apply the actions that occurred during this transaction
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
for (let action of transaction.actions) {
|
|
1897
|
-
action();
|
|
1075
|
+
*/ scrollTo(offset1, duration = 300) {
|
|
1076
|
+
// Cancel the current scroll animation
|
|
1077
|
+
if (this._scrollAnimation) {
|
|
1078
|
+
this._scrollAnimation.cancel();
|
|
1079
|
+
this._scrollAnimation = null;
|
|
1898
1080
|
}
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
transaction.finalMap = this._getLayoutInfoMap(this._getContentRect());
|
|
1904
|
-
|
|
1905
|
-
this._setupTransactionAnimations(transaction);
|
|
1906
|
-
} else {
|
|
1907
|
-
this._transaction = null;
|
|
1081
|
+
// Set the content offset synchronously if the duration is zero
|
|
1082
|
+
if (duration <= 0 || this.visibleRect.pointEquals(offset1)) {
|
|
1083
|
+
this._setContentOffset(offset1);
|
|
1084
|
+
return Promise.resolve();
|
|
1908
1085
|
}
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
this.
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1086
|
+
this.startScrolling();
|
|
1087
|
+
this._scrollAnimation = $f4437db0d25b1451$export$dc0b63720788090c(this.visibleRect, offset1, duration, $f4437db0d25b1451$export$57636bb43b1ccbb0, (offset)=>{
|
|
1088
|
+
this._setContentOffset(offset);
|
|
1089
|
+
});
|
|
1090
|
+
this._scrollAnimation.then(()=>{
|
|
1091
|
+
this._scrollAnimation = null;
|
|
1092
|
+
// Process view size updates that occurred during the animation.
|
|
1093
|
+
// Only views that are still visible will be actually updated.
|
|
1094
|
+
for (let [key, size] of this._sizeUpdateQueue)this.updateItemSize(key, size);
|
|
1095
|
+
this._sizeUpdateQueue.clear();
|
|
1096
|
+
this.relayout();
|
|
1097
|
+
this._processTransactionQueue();
|
|
1098
|
+
this.endScrolling();
|
|
1099
|
+
});
|
|
1100
|
+
return this._scrollAnimation;
|
|
1101
|
+
}
|
|
1102
|
+
_runTransaction(action, animated) {
|
|
1103
|
+
this._startTransaction();
|
|
1104
|
+
if (this._nextTransaction) this._nextTransaction.actions.push(action);
|
|
1105
|
+
this._endTransaction(animated);
|
|
1106
|
+
}
|
|
1107
|
+
_startTransaction() {
|
|
1108
|
+
if (!this._nextTransaction) this._nextTransaction = new $4030d5bc382f52a8$export$febc5573c75cefb0;
|
|
1109
|
+
this._nextTransaction.level++;
|
|
1110
|
+
}
|
|
1111
|
+
_endTransaction(animated) {
|
|
1112
|
+
if (!this._nextTransaction) return false;
|
|
1113
|
+
// Save whether the transaction should be animated.
|
|
1114
|
+
if (animated != null) this._nextTransaction.animated = animated;
|
|
1115
|
+
// If we haven't reached level 0, we are still in a
|
|
1116
|
+
// nested transaction. Wait for the parent to end.
|
|
1117
|
+
if (--this._nextTransaction.level > 0) return false;
|
|
1118
|
+
// Do nothing for empty transactions
|
|
1119
|
+
if (this._nextTransaction.actions.length === 0) {
|
|
1120
|
+
this._nextTransaction = null;
|
|
1121
|
+
return false;
|
|
1918
1122
|
}
|
|
1919
|
-
|
|
1920
|
-
this.
|
|
1921
|
-
|
|
1922
|
-
this.
|
|
1923
|
-
|
|
1924
|
-
this._flushVisibleViews();
|
|
1925
|
-
|
|
1123
|
+
// Default animations to true
|
|
1124
|
+
if (this._nextTransaction.animated == null) this._nextTransaction.animated = true;
|
|
1125
|
+
// Enqueue the transaction
|
|
1126
|
+
this._transactionQueue.push(this._nextTransaction);
|
|
1127
|
+
this._nextTransaction = null;
|
|
1926
1128
|
this._processTransactionQueue();
|
|
1927
|
-
|
|
1928
|
-
}
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
}
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1129
|
+
return true;
|
|
1130
|
+
}
|
|
1131
|
+
_processTransactionQueue() {
|
|
1132
|
+
// If the current transaction is animating, wait until the end
|
|
1133
|
+
// to process the next transaction.
|
|
1134
|
+
if (this._transaction || this._scrollAnimation) return;
|
|
1135
|
+
let next = this._transactionQueue.shift();
|
|
1136
|
+
if (next) this._performTransaction(next);
|
|
1137
|
+
}
|
|
1138
|
+
_getContentRect() {
|
|
1139
|
+
return new $b257fb58d1fe030d$export$c79fc6492f3af13d(0, 0, this.contentSize.width, this.contentSize.height);
|
|
1140
|
+
}
|
|
1141
|
+
_performTransaction(transaction) {
|
|
1142
|
+
this._transaction = transaction;
|
|
1143
|
+
this.relayoutNow({
|
|
1144
|
+
transaction: transaction,
|
|
1145
|
+
animated: transaction.animated,
|
|
1146
|
+
beforeLayout: ()=>{
|
|
1147
|
+
// Get the initial layout infos for all views before the updates
|
|
1148
|
+
// so we can figure out which views to add and remove.
|
|
1149
|
+
if (transaction.animated) transaction.initialMap = this._getLayoutInfoMap(this._getContentRect(), true);
|
|
1150
|
+
// Apply the actions that occurred during this transaction
|
|
1151
|
+
for (let action of transaction.actions)action();
|
|
1152
|
+
},
|
|
1153
|
+
afterLayout: ()=>{
|
|
1154
|
+
// Get the final layout infos after the updates
|
|
1155
|
+
if (transaction.animated) {
|
|
1156
|
+
transaction.finalMap = this._getLayoutInfoMap(this._getContentRect());
|
|
1157
|
+
this._setupTransactionAnimations(transaction);
|
|
1158
|
+
} else this._transaction = null;
|
|
1159
|
+
},
|
|
1160
|
+
afterAnimation: ()=>{
|
|
1161
|
+
// Remove and reuse views when animations are done
|
|
1162
|
+
if (transaction.toRemove.size > 0 || transaction.removed.size > 0) for (let view of $dcde0d6fc989b206$export$cfc14088dfefce5f(transaction.toRemove.values(), transaction.removed.values())){
|
|
1163
|
+
this._children.delete(view);
|
|
1164
|
+
this.reuseView(view);
|
|
1165
|
+
}
|
|
1166
|
+
this._transaction = null;
|
|
1167
|
+
// Ensure DOM order is correct for accessibility after animations are complete
|
|
1168
|
+
this._correctItemOrder();
|
|
1169
|
+
this._flushVisibleViews();
|
|
1170
|
+
this._processTransactionQueue();
|
|
1171
|
+
}
|
|
1172
|
+
});
|
|
1173
|
+
}
|
|
1174
|
+
_setupTransactionAnimations(transaction) {
|
|
1175
|
+
let { initialMap: initialMap , finalMap: finalMap } = transaction;
|
|
1176
|
+
// Store initial and final layout infos for animations
|
|
1177
|
+
for (let [key, layoutInfo] of initialMap)if (finalMap.has(key)) // Store the initial layout info for use during animations.
|
|
1940
1178
|
transaction.initialLayoutInfo.set(key, layoutInfo);
|
|
1941
|
-
|
|
1942
|
-
// This view was removed. Store the layout info for use
|
|
1179
|
+
else // This view was removed. Store the layout info for use
|
|
1943
1180
|
// in Layout#getFinalLayoutInfo during animations.
|
|
1944
1181
|
transaction.finalLayoutInfo.set(layoutInfo.key, layoutInfo);
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
let
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
transaction.removed.set(key, view);
|
|
1960
|
-
|
|
1961
|
-
this._visibleViews.delete(key); // In case something weird happened, where we have a view but no
|
|
1962
|
-
// initial layout info, use the one attached to the view.
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
if (view.layoutInfo) {
|
|
1966
|
-
if (!transaction.finalLayoutInfo.has(view.layoutInfo.key)) {
|
|
1967
|
-
transaction.finalLayoutInfo.set(view.layoutInfo.key, view.layoutInfo);
|
|
1968
|
-
}
|
|
1182
|
+
// Get initial layout infos for views that were added
|
|
1183
|
+
for (let [key3, layoutInfo1] of finalMap)if (!initialMap.has(key3)) {
|
|
1184
|
+
let initialLayoutInfo = this.layout.getInitialLayoutInfo(layoutInfo1.copy());
|
|
1185
|
+
transaction.initialLayoutInfo.set(key3, initialLayoutInfo);
|
|
1186
|
+
}
|
|
1187
|
+
// Figure out which views were removed.
|
|
1188
|
+
for (let [key4, view] of this._visibleViews)if (!finalMap.has(key4)) {
|
|
1189
|
+
transaction.removed.set(key4, view);
|
|
1190
|
+
this._visibleViews.delete(key4);
|
|
1191
|
+
// In case something weird happened, where we have a view but no
|
|
1192
|
+
// initial layout info, use the one attached to the view.
|
|
1193
|
+
if (view.layoutInfo) {
|
|
1194
|
+
if (!transaction.finalLayoutInfo.has(view.layoutInfo.key)) transaction.finalLayoutInfo.set(view.layoutInfo.key, view.layoutInfo);
|
|
1195
|
+
}
|
|
1969
1196
|
}
|
|
1970
|
-
}
|
|
1971
1197
|
}
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1974
1198
|
}
|
|
1975
1199
|
|
|
1976
|
-
function useVirtualizerState(opts) {
|
|
1977
|
-
let [visibleViews, setVisibleViews] = useState([]);
|
|
1978
|
-
let [contentSize, setContentSize] = useState(new Size());
|
|
1979
|
-
let [isAnimating, setAnimating] = useState(false);
|
|
1980
|
-
let [isScrolling, setScrolling] = useState(false);
|
|
1981
|
-
let virtualizer = useMemo(() => new $c28d52c9ae86344e9273f2344f3d5a45$export$Virtualizer(), []);
|
|
1982
|
-
virtualizer.delegate = {
|
|
1983
|
-
setVisibleViews,
|
|
1984
1200
|
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1201
|
+
function $1fa690b84970509f$export$1505db82fe357e65(opts) {
|
|
1202
|
+
let [visibleViews, setVisibleViews] = $bMVmL$react.useState([]);
|
|
1203
|
+
let [contentSize, setContentSize] = $bMVmL$react.useState(new $c7e25de3d1bb13b7$export$cb6da89c6af1a8ec());
|
|
1204
|
+
let [isAnimating, setAnimating] = $bMVmL$react.useState(false);
|
|
1205
|
+
let [isScrolling, setScrolling] = $bMVmL$react.useState(false);
|
|
1206
|
+
let virtualizer = $bMVmL$react.useMemo(()=>new $f9e1605aeab61ed8$export$89be5a243e59c4b2()
|
|
1207
|
+
, []);
|
|
1208
|
+
virtualizer.delegate = {
|
|
1209
|
+
setVisibleViews: setVisibleViews,
|
|
1210
|
+
setVisibleRect (rect) {
|
|
1211
|
+
virtualizer.visibleRect = rect;
|
|
1212
|
+
opts.onVisibleRectChange(rect);
|
|
1213
|
+
},
|
|
1214
|
+
setContentSize: setContentSize,
|
|
1215
|
+
renderView: opts.renderView,
|
|
1216
|
+
renderWrapper: opts.renderWrapper,
|
|
1217
|
+
beginAnimations: ()=>setAnimating(true)
|
|
1218
|
+
,
|
|
1219
|
+
endAnimations: ()=>setAnimating(false)
|
|
1220
|
+
,
|
|
1221
|
+
getScrollAnchor: opts.getScrollAnchor
|
|
1222
|
+
};
|
|
1223
|
+
virtualizer.layout = opts.layout;
|
|
1224
|
+
virtualizer.collection = opts.collection;
|
|
1225
|
+
virtualizer.transitionDuration = opts.transitionDuration;
|
|
1226
|
+
$bMVmL$reactariautils.useLayoutEffect(()=>{
|
|
1227
|
+
virtualizer.afterRender();
|
|
1228
|
+
});
|
|
1229
|
+
// eslint-disable-next-line arrow-body-style
|
|
1230
|
+
$bMVmL$react.useEffect(()=>{
|
|
1231
|
+
return ()=>virtualizer.willUnmount()
|
|
1232
|
+
;
|
|
1233
|
+
}, []);
|
|
1234
|
+
return {
|
|
1235
|
+
virtualizer: virtualizer,
|
|
1236
|
+
visibleViews: visibleViews,
|
|
1237
|
+
setVisibleRect: $bMVmL$react.useCallback((rect)=>{
|
|
1238
|
+
virtualizer.visibleRect = rect;
|
|
1239
|
+
}, [
|
|
1240
|
+
virtualizer
|
|
1241
|
+
]),
|
|
1242
|
+
contentSize: contentSize,
|
|
1243
|
+
isAnimating: isAnimating,
|
|
1244
|
+
isScrolling: isScrolling,
|
|
1245
|
+
startScrolling: $bMVmL$react.useCallback(()=>{
|
|
1246
|
+
virtualizer.startScrolling();
|
|
1247
|
+
setScrolling(true);
|
|
1248
|
+
}, [
|
|
1249
|
+
virtualizer
|
|
1250
|
+
]),
|
|
1251
|
+
endScrolling: $bMVmL$react.useCallback(()=>{
|
|
1252
|
+
virtualizer.endScrolling();
|
|
1253
|
+
setScrolling(false);
|
|
1254
|
+
}, [
|
|
1255
|
+
virtualizer
|
|
1256
|
+
])
|
|
1257
|
+
};
|
|
1258
|
+
}
|
|
1989
1259
|
|
|
1990
|
-
setContentSize,
|
|
1991
|
-
renderView: opts.renderView,
|
|
1992
|
-
renderWrapper: opts.renderWrapper,
|
|
1993
|
-
beginAnimations: () => setAnimating(true),
|
|
1994
|
-
endAnimations: () => setAnimating(false),
|
|
1995
|
-
getScrollAnchor: opts.getScrollAnchor
|
|
1996
|
-
};
|
|
1997
|
-
virtualizer.layout = opts.layout;
|
|
1998
|
-
virtualizer.collection = opts.collection;
|
|
1999
|
-
virtualizer.transitionDuration = opts.transitionDuration;
|
|
2000
|
-
useLayoutEffect(() => {
|
|
2001
|
-
virtualizer.afterRender();
|
|
2002
|
-
}); // eslint-disable-next-line arrow-body-style
|
|
2003
1260
|
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
}, [virtualizer]),
|
|
2013
|
-
contentSize,
|
|
2014
|
-
isAnimating,
|
|
2015
|
-
isScrolling,
|
|
2016
|
-
startScrolling: useCallback(() => {
|
|
2017
|
-
virtualizer.startScrolling();
|
|
2018
|
-
setScrolling(true);
|
|
2019
|
-
}, [virtualizer]),
|
|
2020
|
-
endScrolling: useCallback(() => {
|
|
2021
|
-
virtualizer.endScrolling();
|
|
2022
|
-
setScrolling(false);
|
|
2023
|
-
}, [virtualizer])
|
|
2024
|
-
};
|
|
2025
|
-
}
|
|
1261
|
+
$parcel$exportWildcard(module.exports, $85b9c82579d5b203$exports);
|
|
1262
|
+
$parcel$exportWildcard(module.exports, $67d280d4f19668ff$exports);
|
|
1263
|
+
$parcel$exportWildcard(module.exports, $63dcdc70cf96c5d7$exports);
|
|
1264
|
+
$parcel$exportWildcard(module.exports, $b257fb58d1fe030d$exports);
|
|
1265
|
+
$parcel$exportWildcard(module.exports, $c7e25de3d1bb13b7$exports);
|
|
1266
|
+
$parcel$exportWildcard(module.exports, $48e7cd77a68be60c$exports);
|
|
1267
|
+
$parcel$exportWildcard(module.exports, $1fa690b84970509f$exports);
|
|
1268
|
+
|
|
2026
1269
|
|
|
2027
|
-
exports.useVirtualizerState = useVirtualizerState;
|
|
2028
1270
|
//# sourceMappingURL=main.js.map
|