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