@deck.gl-community/infovis-layers 9.3.7 → 9.4.0-alpha.1
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/index.cjs +1840 -1420
- package/dist/index.cjs.map +4 -4
- package/dist/layers/block-layer/block-layer-uniforms.d.ts +4 -3
- package/dist/layers/block-layer/block-layer-uniforms.d.ts.map +1 -1
- package/dist/layers/block-layer/block-layer-uniforms.js +4 -3
- package/dist/layers/block-layer/block-layer-uniforms.js.map +1 -1
- package/dist/layers/block-layer/block-layer-vertex.glsl.d.ts +1 -1
- package/dist/layers/block-layer/block-layer-vertex.glsl.js +4 -4
- package/dist/layers/block-layer/block-layer.d.ts +2 -0
- package/dist/layers/block-layer/block-layer.d.ts.map +1 -1
- package/dist/layers/block-layer/block-layer.js +23 -2
- package/dist/layers/block-layer/block-layer.js.map +1 -1
- package/dist/layers/block-layer/block-layer.wgsl.d.ts +4 -0
- package/dist/layers/block-layer/block-layer.wgsl.d.ts.map +1 -0
- package/dist/layers/block-layer/block-layer.wgsl.js +134 -0
- package/dist/layers/block-layer/block-layer.wgsl.js.map +1 -0
- package/dist/layers/fast-text-layer/fast-text-layer.d.ts +47 -0
- package/dist/layers/fast-text-layer/fast-text-layer.d.ts.map +1 -1
- package/dist/layers/fast-text-layer/fast-text-layer.js +5 -1
- package/dist/layers/fast-text-layer/fast-text-layer.js.map +1 -1
- package/dist/layers/fast-text-layer/fast-text-layer.wgsl.d.ts +4 -0
- package/dist/layers/fast-text-layer/fast-text-layer.wgsl.d.ts.map +1 -0
- package/dist/layers/fast-text-layer/fast-text-layer.wgsl.js +247 -0
- package/dist/layers/fast-text-layer/fast-text-layer.wgsl.js.map +1 -0
- package/dist/layers/time-delta-layer.d.ts.map +1 -1
- package/dist/layers/time-delta-layer.js +34 -17
- package/dist/layers/time-delta-layer.js.map +1 -1
- package/package.json +12 -12
- package/src/layers/block-layer/block-layer-uniforms.ts +4 -3
- package/src/layers/block-layer/block-layer-vertex.glsl.ts +4 -4
- package/src/layers/block-layer/block-layer.ts +24 -2
- package/src/layers/block-layer/block-layer.wgsl.ts +134 -0
- package/src/layers/fast-text-layer/fast-text-layer.ts +5 -1
- package/src/layers/fast-text-layer/fast-text-layer.wgsl.ts +247 -0
- package/src/layers/time-delta-layer.ts +34 -17
package/dist/index.cjs
CHANGED
|
@@ -69,7 +69,7 @@ __export(dist_exports, {
|
|
|
69
69
|
module.exports = __toCommonJS(dist_exports);
|
|
70
70
|
|
|
71
71
|
// dist/layers/time-delta-layer.js
|
|
72
|
-
var
|
|
72
|
+
var import_core4 = require("@deck.gl/core");
|
|
73
73
|
var import_layers = require("@deck.gl/layers");
|
|
74
74
|
|
|
75
75
|
// dist/utils/format-utils.js
|
|
@@ -143,1098 +143,518 @@ function formatDayDuration(seconds) {
|
|
|
143
143
|
return `${sign}${days}d${remainingHours}h`;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
// dist/layers/
|
|
147
|
-
var TimeDeltaLayer = class extends import_core.CompositeLayer {
|
|
148
|
-
renderLayers() {
|
|
149
|
-
const { startTimeMs, endTimeMs, color: color3 = [0, 0, 0, 255], yMin, yMax } = this.props;
|
|
150
|
-
if (!this.props.header) {
|
|
151
|
-
const timeLines2 = [
|
|
152
|
-
{
|
|
153
|
-
sourcePosition: [startTimeMs, yMin],
|
|
154
|
-
targetPosition: [startTimeMs, yMax]
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
sourcePosition: [endTimeMs, yMin],
|
|
158
|
-
targetPosition: [endTimeMs, yMax]
|
|
159
|
-
}
|
|
160
|
-
];
|
|
161
|
-
return [
|
|
162
|
-
// Interval end lines
|
|
163
|
-
new import_layers.LineLayer({
|
|
164
|
-
id: "time-delta-side-bars",
|
|
165
|
-
data: timeLines2,
|
|
166
|
-
getSourcePosition: (d) => d.sourcePosition,
|
|
167
|
-
getTargetPosition: (d) => d.targetPosition,
|
|
168
|
-
getColor: color3,
|
|
169
|
-
getWidth: 4,
|
|
170
|
-
widthUnits: "pixels"
|
|
171
|
-
})
|
|
172
|
-
];
|
|
173
|
-
}
|
|
174
|
-
const { y, fontSize, fontFamily, fontSettings, fontWeight } = this.props;
|
|
175
|
-
const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, y - 10];
|
|
176
|
-
const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
|
|
177
|
-
const timeDeltaLabel = formatTimeMs(timeDeltaMs, { space: false });
|
|
178
|
-
const timeLines = [
|
|
179
|
-
{
|
|
180
|
-
sourcePosition: [startTimeMs, y],
|
|
181
|
-
targetPosition: [startTimeMs, y - 7]
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
sourcePosition: [endTimeMs, y],
|
|
185
|
-
targetPosition: [endTimeMs, y - 7]
|
|
186
|
-
}
|
|
187
|
-
];
|
|
188
|
-
return [
|
|
189
|
-
// Interval end lines
|
|
190
|
-
new import_layers.LineLayer({
|
|
191
|
-
id: "header-time-delta-side-bars",
|
|
192
|
-
data: timeLines,
|
|
193
|
-
getSourcePosition: (d) => d.sourcePosition,
|
|
194
|
-
getTargetPosition: (d) => d.targetPosition,
|
|
195
|
-
getColor: color3,
|
|
196
|
-
getWidth: 4,
|
|
197
|
-
widthUnits: "pixels"
|
|
198
|
-
}),
|
|
199
|
-
// Interval center
|
|
200
|
-
new import_layers.LineLayer({
|
|
201
|
-
id: "header-time-delta-dotted-line",
|
|
202
|
-
data: [
|
|
203
|
-
{
|
|
204
|
-
sourcePosition: [startTimeMs, y - 7],
|
|
205
|
-
targetPosition: [endTimeMs, y - 7]
|
|
206
|
-
}
|
|
207
|
-
],
|
|
208
|
-
getSourcePosition: (d) => d.sourcePosition,
|
|
209
|
-
getTargetPosition: (d) => d.targetPosition,
|
|
210
|
-
getColor: color3,
|
|
211
|
-
getWidth: 1,
|
|
212
|
-
widthUnits: "pixels"
|
|
213
|
-
}),
|
|
214
|
-
// Label
|
|
215
|
-
new import_layers.TextLayer({
|
|
216
|
-
id: "header-time-delta-label",
|
|
217
|
-
data: [{ position: timeDeltaPosition, text: timeDeltaLabel }],
|
|
218
|
-
getPosition: (d) => d.position,
|
|
219
|
-
getText: (d) => d.text,
|
|
220
|
-
characterSet: "-0123456789.dhms\xB5",
|
|
221
|
-
getSize: fontSize,
|
|
222
|
-
fontFamily,
|
|
223
|
-
fontSettings,
|
|
224
|
-
fontWeight,
|
|
225
|
-
getColor: color3,
|
|
226
|
-
getTextAnchor: "middle",
|
|
227
|
-
getAlignmentBaseline: "center",
|
|
228
|
-
background: true,
|
|
229
|
-
getBackgroundColor: [255 - color3[0], 255 - color3[1], 255 - color3[2], 255],
|
|
230
|
-
backgroundPadding: [4, 2]
|
|
231
|
-
// Horizontal and vertical padding
|
|
232
|
-
})
|
|
233
|
-
];
|
|
234
|
-
}
|
|
235
|
-
};
|
|
236
|
-
__publicField(TimeDeltaLayer, "layerName", "TimeDeltaLayer");
|
|
237
|
-
__publicField(TimeDeltaLayer, "defaultProps", {
|
|
238
|
-
header: false,
|
|
239
|
-
minTimeMs: 0,
|
|
240
|
-
maxTimeMs: 100,
|
|
241
|
-
startTimeMs: 0,
|
|
242
|
-
endTimeMs: 100,
|
|
243
|
-
y: 0,
|
|
244
|
-
color: [0, 0, 0, 255],
|
|
245
|
-
unit: "timestamp",
|
|
246
|
-
yMin: -1e6,
|
|
247
|
-
// Should cover full viewport height in most cases
|
|
248
|
-
yMax: 1e6,
|
|
249
|
-
// Should cover full viewport height in most cases
|
|
250
|
-
fontSize: 12,
|
|
251
|
-
fontFamily: import_layers.TextLayer.defaultProps.fontFamily,
|
|
252
|
-
fontSettings: import_layers.TextLayer.defaultProps.fontSettings,
|
|
253
|
-
fontWeight: import_layers.TextLayer.defaultProps.fontWeight
|
|
254
|
-
});
|
|
255
|
-
|
|
256
|
-
// dist/layers/animation-layer/animation-layer.js
|
|
146
|
+
// dist/layers/fast-text-layer/fast-text-layer.js
|
|
257
147
|
var import_core2 = require("@deck.gl/core");
|
|
148
|
+
var import_core3 = require("@luma.gl/core");
|
|
149
|
+
var import_engine = require("@luma.gl/engine");
|
|
150
|
+
var import_log = require("@probe.gl/log");
|
|
258
151
|
|
|
259
|
-
// dist/layers/
|
|
260
|
-
var
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
easing: group.easing ?? LINEAR_EASING
|
|
274
|
-
}
|
|
275
|
-
],
|
|
276
|
-
duration: delay2 + group.duration
|
|
277
|
-
};
|
|
152
|
+
// dist/layers/fast-text-layer/fast-text-layout.js
|
|
153
|
+
var import_core = require("@deck.gl/core");
|
|
154
|
+
|
|
155
|
+
// dist/utils/utf8-string-view.js
|
|
156
|
+
var textEncoder = new TextEncoder();
|
|
157
|
+
var textDecoder = new TextDecoder();
|
|
158
|
+
function makeUtf8StringView(value) {
|
|
159
|
+
const data = textEncoder.encode(value);
|
|
160
|
+
return { data, start: 0, end: data.length };
|
|
161
|
+
}
|
|
162
|
+
function getArrowUtf8ColumnSource(utf8Column) {
|
|
163
|
+
const chunks = getArrowUtf8DataChunks(utf8Column);
|
|
164
|
+
if (!chunks || chunks.length === 0) {
|
|
165
|
+
return null;
|
|
278
166
|
}
|
|
279
|
-
const
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
frames.push(...childResult.frames);
|
|
287
|
-
current += childResult.duration;
|
|
288
|
-
if (i < group.frames.length - 1)
|
|
289
|
-
current += delay;
|
|
167
|
+
const sourceChunks = [];
|
|
168
|
+
let rowOffset = 0;
|
|
169
|
+
for (const chunk of chunks) {
|
|
170
|
+
const valueOffsets = chunk.valueOffsets;
|
|
171
|
+
const values = chunk.values;
|
|
172
|
+
if (!valueOffsets || !values) {
|
|
173
|
+
return null;
|
|
290
174
|
}
|
|
291
|
-
|
|
175
|
+
sourceChunks.push({
|
|
176
|
+
rowOffset,
|
|
177
|
+
rowCount: chunk.length,
|
|
178
|
+
valueOffsetIndex: 0,
|
|
179
|
+
valueOffsets,
|
|
180
|
+
values
|
|
181
|
+
});
|
|
182
|
+
rowOffset += chunk.length;
|
|
292
183
|
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
return { frames, duration: delay + maxDuration };
|
|
184
|
+
return {
|
|
185
|
+
rowCount: utf8Column.length,
|
|
186
|
+
chunks: sourceChunks,
|
|
187
|
+
isValid: (rowIndex) => utf8Column.isValid(rowIndex)
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
function getArrowUtf8RowView(utf8Column, rowIndex, out) {
|
|
191
|
+
if (!Number.isInteger(rowIndex) || rowIndex < 0 || rowIndex >= utf8Column.length) {
|
|
192
|
+
return false;
|
|
303
193
|
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
const child = group.frames[i];
|
|
307
|
-
const childResult = resolveFramesGroup(child, baseStart + i * delay);
|
|
308
|
-
frames.push(...childResult.frames);
|
|
309
|
-
const childEnd = baseStart + i * delay + childResult.duration;
|
|
310
|
-
if (childEnd > maxEnd)
|
|
311
|
-
maxEnd = childEnd;
|
|
194
|
+
if (!utf8Column.isValid(rowIndex)) {
|
|
195
|
+
return false;
|
|
312
196
|
}
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
function getFramesDuration(frames) {
|
|
317
|
-
let maxEnd = 0;
|
|
318
|
-
for (const frame of frames) {
|
|
319
|
-
if (frame.end > maxEnd)
|
|
320
|
-
maxEnd = frame.end;
|
|
197
|
+
const chunks = getArrowUtf8DataChunks(utf8Column);
|
|
198
|
+
if (!chunks || chunks.length === 0) {
|
|
199
|
+
return false;
|
|
321
200
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
easing: frame.easing
|
|
335
|
-
});
|
|
201
|
+
let rowOffset = 0;
|
|
202
|
+
for (const chunk of chunks) {
|
|
203
|
+
const chunkEnd = rowOffset + chunk.length;
|
|
204
|
+
if (rowIndex >= rowOffset && rowIndex < chunkEnd) {
|
|
205
|
+
const valueOffsets = chunk.valueOffsets;
|
|
206
|
+
const values = chunk.values;
|
|
207
|
+
if (!valueOffsets || !values) {
|
|
208
|
+
return false;
|
|
209
|
+
}
|
|
210
|
+
return fillUtf8StringView(valueOffsets, values, rowIndex - rowOffset, out);
|
|
211
|
+
}
|
|
212
|
+
rowOffset = chunkEnd;
|
|
336
213
|
}
|
|
337
|
-
return
|
|
214
|
+
return false;
|
|
338
215
|
}
|
|
339
|
-
function
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
const resolved = resolveFramesGroup(frames, 0);
|
|
343
|
-
return {
|
|
344
|
-
start: time,
|
|
345
|
-
end: time + resolved.duration,
|
|
346
|
-
inProgress: true,
|
|
347
|
-
iterations: 0,
|
|
348
|
-
frames: resolved.frames
|
|
349
|
-
};
|
|
216
|
+
function getUtf8ColumnSourceRowView(source, rowIndex, out) {
|
|
217
|
+
if (!Number.isInteger(rowIndex) || rowIndex < 0 || rowIndex >= source.rowCount) {
|
|
218
|
+
return false;
|
|
350
219
|
}
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
return state;
|
|
354
|
-
}
|
|
355
|
-
const iterationEnd = state.end;
|
|
356
|
-
const iterations = state.iterations + 1;
|
|
357
|
-
if (iterations > repeat) {
|
|
358
|
-
return state;
|
|
220
|
+
if (!source.isValid(rowIndex)) {
|
|
221
|
+
return false;
|
|
359
222
|
}
|
|
360
|
-
const
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
iterations,
|
|
367
|
-
frames: reverseResolvedFrames(state.frames),
|
|
368
|
-
inProgress: true
|
|
369
|
-
};
|
|
370
|
-
} else {
|
|
371
|
-
const resolved = resolveFramesGroup(frames, 0);
|
|
372
|
-
return {
|
|
373
|
-
start,
|
|
374
|
-
end: start + resolved.duration,
|
|
375
|
-
inProgress: true,
|
|
376
|
-
iterations,
|
|
377
|
-
frames: resolved.frames
|
|
378
|
-
};
|
|
223
|
+
for (const chunk of source.chunks) {
|
|
224
|
+
const chunkEnd = chunk.rowOffset + chunk.rowCount;
|
|
225
|
+
if (rowIndex < chunk.rowOffset || rowIndex >= chunkEnd) {
|
|
226
|
+
continue;
|
|
227
|
+
}
|
|
228
|
+
return fillUtf8StringView(chunk.valueOffsets, chunk.values, chunk.valueOffsetIndex + rowIndex - chunk.rowOffset, out);
|
|
379
229
|
}
|
|
230
|
+
return false;
|
|
380
231
|
}
|
|
381
|
-
function
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
if (
|
|
385
|
-
return
|
|
386
|
-
if (typeof to === "number" && typeof from === "number") {
|
|
387
|
-
return from + (to - from) * ratio;
|
|
232
|
+
function arrowFindUtf8(utf8Column, value, startRow = 0) {
|
|
233
|
+
const normalizedStartRow = Math.max(0, startRow);
|
|
234
|
+
const fastResult = arrowFindUtf8InDataChunks(utf8Column, value, normalizedStartRow);
|
|
235
|
+
if (fastResult !== null) {
|
|
236
|
+
return fastResult;
|
|
388
237
|
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
const toValue = to[i];
|
|
394
|
-
const fromValue = from[i];
|
|
395
|
-
out[i] = typeof toValue === "number" && typeof fromValue === "number" ? fromValue + (toValue - fromValue) * ratio : toValue;
|
|
238
|
+
const expected = decodeUtf8StringView(value);
|
|
239
|
+
for (let rowIndex = normalizedStartRow; rowIndex < utf8Column.length; rowIndex += 1) {
|
|
240
|
+
if (utf8Column.get(rowIndex) === expected) {
|
|
241
|
+
return rowIndex;
|
|
396
242
|
}
|
|
397
|
-
return out;
|
|
398
243
|
}
|
|
399
|
-
return
|
|
244
|
+
return -1;
|
|
400
245
|
}
|
|
401
|
-
function
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
let
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
if (
|
|
411
|
-
|
|
412
|
-
const duration = frame.end - frame.start;
|
|
413
|
-
if (duration <= 0) {
|
|
414
|
-
Object.assign(nextProps, frame.to);
|
|
415
|
-
continue;
|
|
246
|
+
function arrowFindUtf8InDataChunks(utf8Column, value, startRow) {
|
|
247
|
+
const chunks = getArrowUtf8DataChunks(utf8Column);
|
|
248
|
+
if (!chunks || chunks.length === 0) {
|
|
249
|
+
return null;
|
|
250
|
+
}
|
|
251
|
+
let globalRowOffset = 0;
|
|
252
|
+
for (const chunk of chunks) {
|
|
253
|
+
const valueOffsets = chunk.valueOffsets;
|
|
254
|
+
const values = chunk.values;
|
|
255
|
+
if (!valueOffsets || !values) {
|
|
256
|
+
return null;
|
|
416
257
|
}
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
258
|
+
const chunkStartRow = Math.max(0, startRow - globalRowOffset);
|
|
259
|
+
for (let chunkRow = chunkStartRow; chunkRow < chunk.length; chunkRow += 1) {
|
|
260
|
+
const globalRow = globalRowOffset + chunkRow;
|
|
261
|
+
if (!utf8Column.isValid(globalRow)) {
|
|
262
|
+
continue;
|
|
421
263
|
}
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
continue;
|
|
427
|
-
}
|
|
428
|
-
const t = frame.easing((timeSinceStart - frame.start) / duration);
|
|
429
|
-
for (const key of Object.keys(frame.to)) {
|
|
430
|
-
const toValue = frame.to[key];
|
|
431
|
-
const fromValue = frame.from[key];
|
|
432
|
-
if (String(key).startsWith("get") && (typeof fromValue === "function" || typeof toValue === "function")) {
|
|
433
|
-
nextProps[key] = toValue;
|
|
434
|
-
updateTriggers[key] = { ...updateTriggers[key], animation: toValue };
|
|
435
|
-
transitions ??= {};
|
|
436
|
-
transitions[key] = {
|
|
437
|
-
duration: frame.end - frame.start,
|
|
438
|
-
easing: frame.easing
|
|
439
|
-
};
|
|
440
|
-
} else {
|
|
441
|
-
const value = interpolateProp(fromValue, toValue, t);
|
|
442
|
-
if (value !== void 0) {
|
|
443
|
-
nextProps[key] = value;
|
|
444
|
-
}
|
|
264
|
+
const start = valueOffsets[chunkRow];
|
|
265
|
+
const end = valueOffsets[chunkRow + 1];
|
|
266
|
+
if (start !== void 0 && end !== void 0 && utf8BytesEqual(values, start, end, value)) {
|
|
267
|
+
return globalRow;
|
|
445
268
|
}
|
|
446
269
|
}
|
|
270
|
+
globalRowOffset += chunk.length;
|
|
447
271
|
}
|
|
448
|
-
return
|
|
272
|
+
return -1;
|
|
449
273
|
}
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
const { animationState } = this.state;
|
|
459
|
-
return !animationState || animationState.inProgress;
|
|
274
|
+
function getArrowUtf8DataChunks(utf8Column) {
|
|
275
|
+
return utf8Column.data;
|
|
276
|
+
}
|
|
277
|
+
function fillUtf8StringView(valueOffsets, values, offsetIndex, out) {
|
|
278
|
+
const start = valueOffsets[offsetIndex];
|
|
279
|
+
const end = valueOffsets[offsetIndex + 1];
|
|
280
|
+
if (start === void 0 || end === void 0) {
|
|
281
|
+
return false;
|
|
460
282
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
...this.props.layer.props.parameters,
|
|
471
|
-
...this.props.parameters
|
|
472
|
-
}
|
|
473
|
-
});
|
|
474
|
-
let { animationState } = this.state;
|
|
475
|
-
let layer = baseLayer;
|
|
476
|
-
while (true) {
|
|
477
|
-
if (animationState == null ? void 0 : animationState.inProgress) {
|
|
478
|
-
const nextProps = resolveProps(layer, animationState.frames, time - animationState.start);
|
|
479
|
-
nextProps["id"] = `${this.id}-animation-layer`;
|
|
480
|
-
layer = baseLayer.clone(nextProps);
|
|
481
|
-
animationState.inProgress = time < animationState.end;
|
|
482
|
-
this.setNeedsRedraw();
|
|
483
|
-
}
|
|
484
|
-
const nextState = resolveAnimationFrames(time, this.props, animationState);
|
|
485
|
-
if (nextState === animationState)
|
|
486
|
-
break;
|
|
487
|
-
animationState = nextState;
|
|
488
|
-
}
|
|
489
|
-
this.state.animationState = animationState;
|
|
490
|
-
this.state.layer = layer;
|
|
283
|
+
out.data = values;
|
|
284
|
+
out.start = start;
|
|
285
|
+
out.end = end;
|
|
286
|
+
return true;
|
|
287
|
+
}
|
|
288
|
+
function utf8BytesEqual(data, start, end, value) {
|
|
289
|
+
const valueLength = value.end - value.start;
|
|
290
|
+
if (end - start !== valueLength) {
|
|
291
|
+
return false;
|
|
491
292
|
}
|
|
492
|
-
|
|
493
|
-
|
|
293
|
+
for (let index = 0; index < valueLength; index += 1) {
|
|
294
|
+
if (data[start + index] !== value.data[value.start + index]) {
|
|
295
|
+
return false;
|
|
296
|
+
}
|
|
494
297
|
}
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
var import_engine = require("@luma.gl/engine");
|
|
501
|
-
|
|
502
|
-
// dist/layers/block-layer/block-layer-fragment.glsl.js
|
|
503
|
-
var block_layer_fragment_glsl_default = `#version 300 es
|
|
504
|
-
#define SHADER_NAME block-layer-fragment-shader
|
|
505
|
-
|
|
506
|
-
precision highp float;
|
|
507
|
-
|
|
508
|
-
in vec2 unitPosition;
|
|
509
|
-
flat in vec4 vFillColor;
|
|
510
|
-
flat in vec4 vLineColor;
|
|
511
|
-
flat in float lineWidth;
|
|
512
|
-
flat in vec2 size;
|
|
513
|
-
|
|
514
|
-
out vec4 fragColor;
|
|
298
|
+
return true;
|
|
299
|
+
}
|
|
300
|
+
function decodeUtf8StringView(value) {
|
|
301
|
+
return textDecoder.decode(value.data.subarray(value.start, value.end));
|
|
302
|
+
}
|
|
515
303
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
304
|
+
// dist/layers/fast-text-layer/fast-text-layout.js
|
|
305
|
+
var FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE = Int16Array.BYTES_PER_ELEMENT * 10 + Uint8Array.BYTES_PER_ELEMENT * 4;
|
|
306
|
+
function buildFastTextUtf8ColumnSource(utf8Column) {
|
|
307
|
+
return getArrowUtf8ColumnSource(utf8Column);
|
|
308
|
+
}
|
|
309
|
+
function collectFastTextCharacterSet(props) {
|
|
310
|
+
const characterSet = /* @__PURE__ */ new Set();
|
|
311
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
312
|
+
for (const object of iterable) {
|
|
313
|
+
objectInfo.index++;
|
|
314
|
+
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
315
|
+
for (const character of Array.from(text)) {
|
|
316
|
+
if (character !== "\n") {
|
|
317
|
+
characterSet.add(character);
|
|
318
|
+
}
|
|
531
319
|
}
|
|
532
|
-
} else {
|
|
533
|
-
fragColor = vFillColor;
|
|
534
320
|
}
|
|
535
|
-
|
|
536
|
-
DECKGL_FILTER_COLOR(fragColor, geometry);
|
|
321
|
+
return characterSet;
|
|
537
322
|
}
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
highp float sizeMaxPixels;
|
|
546
|
-
highp int lineWidthUnits;
|
|
547
|
-
} block;
|
|
548
|
-
`;
|
|
549
|
-
var blockUniforms = {
|
|
550
|
-
name: "block",
|
|
551
|
-
vs: glslUniformBlock,
|
|
552
|
-
fs: glslUniformBlock,
|
|
553
|
-
uniformTypes: {
|
|
554
|
-
sizeUnits: "i32",
|
|
555
|
-
widthMinPixels: "f32",
|
|
556
|
-
heightMinPixels: "f32",
|
|
557
|
-
sizeMaxPixels: "f32",
|
|
558
|
-
lineWidthUnits: "i32"
|
|
323
|
+
function buildFastTextGlyphData(props) {
|
|
324
|
+
const buildStartTime = performance.now();
|
|
325
|
+
const columnNormalizeStartTime = performance.now();
|
|
326
|
+
const textUtf8Column = resolveFastTextUtf8ColumnSource(props.textUtf8Column);
|
|
327
|
+
const columnNormalizeDurationMs = performance.now() - columnNormalizeStartTime;
|
|
328
|
+
if (props.textUtf8Column && !textUtf8Column) {
|
|
329
|
+
throw new Error("FastTextLayer textUtf8Column must expose Arrow Utf8 buffers");
|
|
559
330
|
}
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
// dist/layers/block-layer/block-layer-vertex.glsl.js
|
|
563
|
-
var block_layer_vertex_glsl_default = `#version 300 es
|
|
564
|
-
#define SHADER_NAME block-layer-vertex-shader
|
|
565
|
-
|
|
566
|
-
in vec3 positions;
|
|
567
|
-
in vec3 instancePositions;
|
|
568
|
-
in vec3 instancePositions64Low;
|
|
569
|
-
in vec2 instanceSizes;
|
|
570
|
-
in float instanceLineWidths;
|
|
571
|
-
in vec4 instanceFillColors;
|
|
572
|
-
in vec4 instanceLineColors;
|
|
573
|
-
in vec3 instancePickingColors;
|
|
574
|
-
|
|
575
|
-
out vec2 unitPosition;
|
|
576
|
-
flat out vec4 vFillColor;
|
|
577
|
-
flat out vec4 vLineColor;
|
|
578
|
-
flat out float lineWidth;
|
|
579
|
-
flat out vec2 size;
|
|
580
|
-
|
|
581
|
-
// This needs to be added back to the project module
|
|
582
|
-
vec2 project_size_to_pixel(vec2 size, int unit) {
|
|
583
|
-
if (unit == UNIT_PIXELS) return size;
|
|
584
|
-
if (unit == UNIT_COMMON && project.projectionMode != PROJECTION_MODE_IDENTITY) {
|
|
585
|
-
return size * project.scale;
|
|
331
|
+
if ((textUtf8Column || props.getTextUtf8) && !props.singleLine) {
|
|
332
|
+
throw new Error("FastTextLayer UTF-8 text sources require singleLine text layout");
|
|
586
333
|
}
|
|
587
|
-
|
|
334
|
+
const glyphData = props.singleLine ? buildSingleLineGlyphData({
|
|
335
|
+
...props,
|
|
336
|
+
textUtf8Column
|
|
337
|
+
}) : buildMultiLineGlyphData(props);
|
|
338
|
+
return withFastTextGlyphBuildStats(glyphData, {
|
|
339
|
+
columnNormalizeDurationMs,
|
|
340
|
+
totalDurationMs: performance.now() - buildStartTime
|
|
341
|
+
});
|
|
588
342
|
}
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
343
|
+
function buildSingleLineGlyphData(props) {
|
|
344
|
+
const buildStartTime = performance.now();
|
|
345
|
+
const countStartTime = performance.now();
|
|
346
|
+
const countResult = countSingleLineFastTextGlyphs(props);
|
|
347
|
+
const countDurationMs = performance.now() - countStartTime;
|
|
348
|
+
const allocateStartTime = performance.now();
|
|
349
|
+
const attributes = allocateFastTextGlyphAttributes(countResult.glyphCount);
|
|
350
|
+
const startIndices = new Uint32Array(countResult.rowCount + 1);
|
|
351
|
+
const allocateDurationMs = performance.now() - allocateStartTime;
|
|
352
|
+
const writeState = {
|
|
353
|
+
glyphIndex: 0,
|
|
354
|
+
startIndices,
|
|
355
|
+
attributes,
|
|
356
|
+
glyphRecordViews: createFastTextGlyphRecordViews(attributes.instanceGlyphData)
|
|
357
|
+
};
|
|
358
|
+
const writeTimings = createFastTextGlyphWriteTimings();
|
|
359
|
+
const byteLookup = props.textUtf8Column || props.getTextUtf8 ? buildFastTextByteGlyphLookup(props.mapping) : null;
|
|
360
|
+
const scratchUtf8View = { data: EMPTY_BYTES, start: 0, end: 0 };
|
|
361
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
362
|
+
const writeStartTime = performance.now();
|
|
363
|
+
for (const object of iterable) {
|
|
364
|
+
objectInfo.index++;
|
|
365
|
+
startIndices[objectInfo.index] = writeState.glyphIndex;
|
|
366
|
+
if (props.textUtf8Column && byteLookup) {
|
|
367
|
+
writeSingleLineUtf8LabelGlyphs(props, props.textUtf8Column, byteLookup, scratchUtf8View, object, objectInfo, writeState, writeTimings);
|
|
368
|
+
} else if (props.getTextUtf8 && byteLookup) {
|
|
369
|
+
writeSingleLineUtf8ViewLabelGlyphs(props, props.getTextUtf8, byteLookup, scratchUtf8View, object, objectInfo, writeState, writeTimings);
|
|
370
|
+
} else {
|
|
371
|
+
writeSingleLineStringLabelGlyphs(props, object, objectInfo, writeState, writeTimings);
|
|
372
|
+
}
|
|
594
373
|
}
|
|
595
|
-
|
|
374
|
+
startIndices[countResult.rowCount] = writeState.glyphIndex;
|
|
375
|
+
const writeDurationMs = performance.now() - writeStartTime;
|
|
376
|
+
return createFastTextGlyphData(countResult, startIndices, attributes, {
|
|
377
|
+
sourceMode: props.textUtf8Column ? "utf8-column" : props.getTextUtf8 ? "utf8-view" : "string",
|
|
378
|
+
layoutMode: "single-line",
|
|
379
|
+
columnNormalizeDurationMs: 0,
|
|
380
|
+
countDurationMs,
|
|
381
|
+
allocateDurationMs,
|
|
382
|
+
writeDurationMs,
|
|
383
|
+
...writeTimings,
|
|
384
|
+
totalDurationMs: performance.now() - buildStartTime
|
|
385
|
+
});
|
|
596
386
|
}
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
387
|
+
function buildMultiLineGlyphData(props) {
|
|
388
|
+
const buildStartTime = performance.now();
|
|
389
|
+
const countStartTime = performance.now();
|
|
390
|
+
const countResult = countMultiLineFastTextGlyphs(props);
|
|
391
|
+
const countDurationMs = performance.now() - countStartTime;
|
|
392
|
+
const allocateStartTime = performance.now();
|
|
393
|
+
const attributes = allocateFastTextGlyphAttributes(countResult.glyphCount);
|
|
394
|
+
const startIndices = new Uint32Array(countResult.rowCount + 1);
|
|
395
|
+
const allocateDurationMs = performance.now() - allocateStartTime;
|
|
396
|
+
const writeState = {
|
|
397
|
+
glyphIndex: 0,
|
|
398
|
+
startIndices,
|
|
399
|
+
attributes,
|
|
400
|
+
glyphRecordViews: createFastTextGlyphRecordViews(attributes.instanceGlyphData)
|
|
401
|
+
};
|
|
402
|
+
const writeTimings = createFastTextGlyphWriteTimings();
|
|
403
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
404
|
+
const writeStartTime = performance.now();
|
|
405
|
+
for (const object of iterable) {
|
|
406
|
+
objectInfo.index++;
|
|
407
|
+
startIndices[objectInfo.index] = writeState.glyphIndex;
|
|
408
|
+
writeMultiLineLabelGlyphs(props, object, objectInfo, writeState, writeTimings);
|
|
409
|
+
}
|
|
410
|
+
startIndices[countResult.rowCount] = writeState.glyphIndex;
|
|
411
|
+
const writeDurationMs = performance.now() - writeStartTime;
|
|
412
|
+
return createFastTextGlyphData(countResult, startIndices, attributes, {
|
|
413
|
+
sourceMode: "string",
|
|
414
|
+
layoutMode: "multi-line",
|
|
415
|
+
columnNormalizeDurationMs: 0,
|
|
416
|
+
countDurationMs,
|
|
417
|
+
allocateDurationMs,
|
|
418
|
+
writeDurationMs,
|
|
419
|
+
...writeTimings,
|
|
420
|
+
totalDurationMs: performance.now() - buildStartTime
|
|
421
|
+
});
|
|
623
422
|
}
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
423
|
+
function updateFastTextDynamicGlyphAttributes(props) {
|
|
424
|
+
const updateStartTime = performance.now();
|
|
425
|
+
const glyphRecordViews = createFastTextGlyphRecordViews(props.glyphData.attributes.instanceGlyphData);
|
|
426
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
427
|
+
let rowCount = 0;
|
|
428
|
+
let glyphCount = 0;
|
|
429
|
+
let positionAccessorDurationMs = 0;
|
|
430
|
+
let colorAccessorDurationMs = 0;
|
|
431
|
+
let clipRectAccessorDurationMs = 0;
|
|
432
|
+
let writeDurationMs = 0;
|
|
433
|
+
for (const object of iterable) {
|
|
434
|
+
objectInfo.index++;
|
|
435
|
+
rowCount++;
|
|
436
|
+
const rowGlyphStart = props.glyphData.startIndices[objectInfo.index] ?? 0;
|
|
437
|
+
const rowGlyphEnd = props.glyphData.startIndices[objectInfo.index + 1] ?? rowGlyphStart;
|
|
438
|
+
if (rowGlyphEnd <= rowGlyphStart) {
|
|
439
|
+
continue;
|
|
440
|
+
}
|
|
441
|
+
let position = DEFAULT_POSITION;
|
|
442
|
+
let color3 = DEFAULT_COLOR;
|
|
443
|
+
let clipRect = DEFAULT_CLIP_RECT;
|
|
444
|
+
if (props.updatePositions) {
|
|
445
|
+
const accessorStartTime = performance.now();
|
|
446
|
+
position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
447
|
+
positionAccessorDurationMs += performance.now() - accessorStartTime;
|
|
448
|
+
}
|
|
449
|
+
if (props.updateColors) {
|
|
450
|
+
const accessorStartTime = performance.now();
|
|
451
|
+
color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR;
|
|
452
|
+
colorAccessorDurationMs += performance.now() - accessorStartTime;
|
|
453
|
+
}
|
|
454
|
+
if (props.updateClipRects) {
|
|
455
|
+
const accessorStartTime = performance.now();
|
|
456
|
+
clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
457
|
+
clipRectAccessorDurationMs += performance.now() - accessorStartTime;
|
|
458
|
+
}
|
|
459
|
+
const writeStartTime = performance.now();
|
|
460
|
+
for (let glyphIndex = rowGlyphStart; glyphIndex < rowGlyphEnd; glyphIndex += 1) {
|
|
461
|
+
if (props.updatePositions) {
|
|
462
|
+
writeFastTextGlyphPosition(props.glyphData.attributes, glyphIndex, position);
|
|
463
|
+
}
|
|
464
|
+
if (props.updateClipRects) {
|
|
465
|
+
writeFastTextGlyphClipRect(glyphRecordViews, glyphIndex, clipRect);
|
|
466
|
+
}
|
|
467
|
+
if (props.updateColors) {
|
|
468
|
+
writeFastTextGlyphColor(glyphRecordViews, glyphIndex, color3);
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
writeDurationMs += performance.now() - writeStartTime;
|
|
472
|
+
glyphCount += rowGlyphEnd - rowGlyphStart;
|
|
473
|
+
}
|
|
474
|
+
return {
|
|
475
|
+
rowCount,
|
|
476
|
+
glyphCount,
|
|
477
|
+
attributeByteLength: props.glyphData.byteLength,
|
|
478
|
+
positionAccessorDurationMs,
|
|
479
|
+
colorAccessorDurationMs,
|
|
480
|
+
clipRectAccessorDurationMs,
|
|
481
|
+
writeDurationMs,
|
|
482
|
+
totalDurationMs: performance.now() - updateStartTime
|
|
483
|
+
};
|
|
484
|
+
}
|
|
485
|
+
var MISSING_CHARACTER_ADVANCE = 32;
|
|
486
|
+
var FAST_TEXT_BYTE_LOOKUP_SIZE = 256;
|
|
487
|
+
var EMPTY_BYTES = new Uint8Array();
|
|
627
488
|
var DEFAULT_COLOR = [0, 0, 0, 255];
|
|
628
|
-
var
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
getPosition: { type: "accessor", value: (x) => x.position },
|
|
635
|
-
getSize: { type: "accessor", value: [10, 10] },
|
|
636
|
-
getLineWidth: { type: "accessor", value: 1 },
|
|
637
|
-
getFillColor: { type: "accessor", value: DEFAULT_COLOR },
|
|
638
|
-
getLineColor: { type: "accessor", value: DEFAULT_COLOR }
|
|
489
|
+
var DEFAULT_POSITION = [0, 0, 0];
|
|
490
|
+
var DEFAULT_CLIP_RECT = [0, 0, -1, -1];
|
|
491
|
+
var ANCHOR_OFFSET_MULTIPLIER = {
|
|
492
|
+
start: 0,
|
|
493
|
+
middle: -0.5,
|
|
494
|
+
end: -1
|
|
639
495
|
};
|
|
640
|
-
var
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
496
|
+
var BASELINE_OFFSET_MULTIPLIER = {
|
|
497
|
+
top: 0,
|
|
498
|
+
center: -0.5,
|
|
499
|
+
bottom: -1
|
|
500
|
+
};
|
|
501
|
+
function countSingleLineFastTextGlyphs(props) {
|
|
502
|
+
if (props.textUtf8Column) {
|
|
503
|
+
return countSingleLineUtf8FastTextGlyphs(props, props.textUtf8Column);
|
|
648
504
|
}
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
instancePositions: {
|
|
652
|
-
size: 3,
|
|
653
|
-
type: "float64",
|
|
654
|
-
fp64: this.use64bitPositions(),
|
|
655
|
-
transition: true,
|
|
656
|
-
accessor: "getPosition"
|
|
657
|
-
},
|
|
658
|
-
instanceSizes: {
|
|
659
|
-
size: 2,
|
|
660
|
-
transition: true,
|
|
661
|
-
accessor: "getSize"
|
|
662
|
-
},
|
|
663
|
-
instanceLineWidths: {
|
|
664
|
-
size: 1,
|
|
665
|
-
transition: true,
|
|
666
|
-
accessor: "getLineWidth"
|
|
667
|
-
},
|
|
668
|
-
instanceLineColors: {
|
|
669
|
-
size: this.props.colorFormat.length,
|
|
670
|
-
type: "unorm8",
|
|
671
|
-
transition: true,
|
|
672
|
-
accessor: "getLineColor",
|
|
673
|
-
defaultValue: DEFAULT_COLOR
|
|
674
|
-
},
|
|
675
|
-
instanceFillColors: {
|
|
676
|
-
size: this.props.colorFormat.length,
|
|
677
|
-
type: "unorm8",
|
|
678
|
-
transition: true,
|
|
679
|
-
accessor: "getFillColor",
|
|
680
|
-
defaultValue: DEFAULT_COLOR
|
|
681
|
-
}
|
|
682
|
-
});
|
|
683
|
-
}
|
|
684
|
-
updateState(params) {
|
|
685
|
-
var _a;
|
|
686
|
-
const { changeFlags } = params;
|
|
687
|
-
super.updateState(params);
|
|
688
|
-
if (changeFlags.extensionsChanged) {
|
|
689
|
-
(_a = this.state.model) == null ? void 0 : _a.destroy();
|
|
690
|
-
this.state.model = this._getModel();
|
|
691
|
-
this.getAttributeManager().invalidateAll();
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
draw() {
|
|
695
|
-
const { sizeUnits, widthMinPixels, heightMinPixels, sizeMaxPixels, lineWidthUnits } = this.props;
|
|
696
|
-
const model = this.state.model;
|
|
697
|
-
const blockProps = {
|
|
698
|
-
sizeUnits: import_core3.UNIT[sizeUnits],
|
|
699
|
-
widthMinPixels,
|
|
700
|
-
heightMinPixels,
|
|
701
|
-
sizeMaxPixels,
|
|
702
|
-
lineWidthUnits: import_core3.UNIT[lineWidthUnits]
|
|
703
|
-
};
|
|
704
|
-
model.shaderInputs.setProps({ block: blockProps });
|
|
705
|
-
model.draw(this.context.renderPass);
|
|
706
|
-
}
|
|
707
|
-
_getModel() {
|
|
708
|
-
const positions = [0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0];
|
|
709
|
-
return new import_engine.Model(this.context.device, {
|
|
710
|
-
...this.getShaders(),
|
|
711
|
-
id: this.props.id,
|
|
712
|
-
bufferLayout: this.getAttributeManager().getBufferLayouts(),
|
|
713
|
-
geometry: new import_engine.Geometry({
|
|
714
|
-
topology: "triangle-strip",
|
|
715
|
-
attributes: {
|
|
716
|
-
positions: new Float32Array(positions)
|
|
717
|
-
}
|
|
718
|
-
}),
|
|
719
|
-
isInstanced: true
|
|
720
|
-
});
|
|
721
|
-
}
|
|
722
|
-
};
|
|
723
|
-
__publicField(BlockLayer, "layerName", "BlockLayer");
|
|
724
|
-
__publicField(BlockLayer, "defaultProps", defaultProps);
|
|
725
|
-
|
|
726
|
-
// dist/layers/fast-text-layer/fast-text-layer.js
|
|
727
|
-
var import_core5 = require("@deck.gl/core");
|
|
728
|
-
var import_core6 = require("@luma.gl/core");
|
|
729
|
-
var import_engine2 = require("@luma.gl/engine");
|
|
730
|
-
var import_log = require("@probe.gl/log");
|
|
731
|
-
|
|
732
|
-
// dist/layers/fast-text-layer/fast-text-layout.js
|
|
733
|
-
var import_core4 = require("@deck.gl/core");
|
|
734
|
-
|
|
735
|
-
// dist/utils/utf8-string-view.js
|
|
736
|
-
var textEncoder = new TextEncoder();
|
|
737
|
-
var textDecoder = new TextDecoder();
|
|
738
|
-
function makeUtf8StringView(value) {
|
|
739
|
-
const data = textEncoder.encode(value);
|
|
740
|
-
return { data, start: 0, end: data.length };
|
|
741
|
-
}
|
|
742
|
-
function getArrowUtf8ColumnSource(utf8Column) {
|
|
743
|
-
const chunks = getArrowUtf8DataChunks(utf8Column);
|
|
744
|
-
if (!chunks || chunks.length === 0) {
|
|
745
|
-
return null;
|
|
746
|
-
}
|
|
747
|
-
const sourceChunks = [];
|
|
748
|
-
let rowOffset = 0;
|
|
749
|
-
for (const chunk of chunks) {
|
|
750
|
-
const valueOffsets = chunk.valueOffsets;
|
|
751
|
-
const values = chunk.values;
|
|
752
|
-
if (!valueOffsets || !values) {
|
|
753
|
-
return null;
|
|
754
|
-
}
|
|
755
|
-
sourceChunks.push({
|
|
756
|
-
rowOffset,
|
|
757
|
-
rowCount: chunk.length,
|
|
758
|
-
valueOffsetIndex: 0,
|
|
759
|
-
valueOffsets,
|
|
760
|
-
values
|
|
761
|
-
});
|
|
762
|
-
rowOffset += chunk.length;
|
|
505
|
+
if (props.getTextUtf8) {
|
|
506
|
+
return countSingleLineUtf8ViewFastTextGlyphs(props, props.getTextUtf8);
|
|
763
507
|
}
|
|
764
|
-
return
|
|
765
|
-
rowCount: utf8Column.length,
|
|
766
|
-
chunks: sourceChunks,
|
|
767
|
-
isValid: (rowIndex) => utf8Column.isValid(rowIndex)
|
|
768
|
-
};
|
|
508
|
+
return countSingleLineStringFastTextGlyphs(props);
|
|
769
509
|
}
|
|
770
|
-
function
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
for (const chunk of chunks) {
|
|
783
|
-
const chunkEnd = rowOffset + chunk.length;
|
|
784
|
-
if (rowIndex >= rowOffset && rowIndex < chunkEnd) {
|
|
785
|
-
const valueOffsets = chunk.valueOffsets;
|
|
786
|
-
const values = chunk.values;
|
|
787
|
-
if (!valueOffsets || !values) {
|
|
788
|
-
return false;
|
|
789
|
-
}
|
|
790
|
-
return fillUtf8StringView(valueOffsets, values, rowIndex - rowOffset, out);
|
|
510
|
+
function countSingleLineUtf8FastTextGlyphs(props, textUtf8Column) {
|
|
511
|
+
let glyphCount = 0;
|
|
512
|
+
let rowCount = 0;
|
|
513
|
+
const characterSet = /* @__PURE__ */ new Set();
|
|
514
|
+
const textView = { data: EMPTY_BYTES, start: 0, end: 0 };
|
|
515
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
516
|
+
for (const object of iterable) {
|
|
517
|
+
objectInfo.index++;
|
|
518
|
+
rowCount++;
|
|
519
|
+
const rowIndex = resolveTextUtf8Row(props.getTextUtf8Row, object, objectInfo);
|
|
520
|
+
if (rowIndex == null || !getUtf8ColumnSourceRowView(textUtf8Column, rowIndex, textView)) {
|
|
521
|
+
continue;
|
|
791
522
|
}
|
|
792
|
-
|
|
523
|
+
glyphCount += textView.end - textView.start;
|
|
793
524
|
}
|
|
794
|
-
return
|
|
525
|
+
return { glyphCount, rowCount, characterSet };
|
|
795
526
|
}
|
|
796
|
-
function
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
if (
|
|
806
|
-
|
|
527
|
+
function countSingleLineUtf8ViewFastTextGlyphs(props, getTextUtf8) {
|
|
528
|
+
let glyphCount = 0;
|
|
529
|
+
let rowCount = 0;
|
|
530
|
+
const characterSet = /* @__PURE__ */ new Set();
|
|
531
|
+
const textView = { data: EMPTY_BYTES, start: 0, end: 0 };
|
|
532
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
533
|
+
for (const object of iterable) {
|
|
534
|
+
objectInfo.index++;
|
|
535
|
+
rowCount++;
|
|
536
|
+
if (getTextUtf8(object, textView, objectInfo)) {
|
|
537
|
+
glyphCount += Math.max(0, textView.end - textView.start);
|
|
807
538
|
}
|
|
808
|
-
return fillUtf8StringView(chunk.valueOffsets, chunk.values, chunk.valueOffsetIndex + rowIndex - chunk.rowOffset, out);
|
|
809
539
|
}
|
|
810
|
-
return
|
|
540
|
+
return { glyphCount, rowCount, characterSet };
|
|
811
541
|
}
|
|
812
|
-
function
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
542
|
+
function countSingleLineStringFastTextGlyphs(props) {
|
|
543
|
+
let glyphCount = 0;
|
|
544
|
+
let rowCount = 0;
|
|
545
|
+
const characterSet = /* @__PURE__ */ new Set();
|
|
546
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
547
|
+
for (const object of iterable) {
|
|
548
|
+
objectInfo.index++;
|
|
549
|
+
rowCount++;
|
|
550
|
+
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
551
|
+
glyphCount += text.length;
|
|
552
|
+
for (let index = 0; index < text.length; index += 1) {
|
|
553
|
+
characterSet.add(text[index]);
|
|
822
554
|
}
|
|
823
555
|
}
|
|
824
|
-
return
|
|
556
|
+
return { glyphCount, rowCount, characterSet };
|
|
825
557
|
}
|
|
826
|
-
function
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
const
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
}
|
|
838
|
-
const chunkStartRow = Math.max(0, startRow - globalRowOffset);
|
|
839
|
-
for (let chunkRow = chunkStartRow; chunkRow < chunk.length; chunkRow += 1) {
|
|
840
|
-
const globalRow = globalRowOffset + chunkRow;
|
|
841
|
-
if (!utf8Column.isValid(globalRow)) {
|
|
558
|
+
function countMultiLineFastTextGlyphs(props) {
|
|
559
|
+
let glyphCount = 0;
|
|
560
|
+
let rowCount = 0;
|
|
561
|
+
const characterSet = /* @__PURE__ */ new Set();
|
|
562
|
+
const { iterable, objectInfo } = (0, import_core.createIterable)(props.data);
|
|
563
|
+
for (const object of iterable) {
|
|
564
|
+
objectInfo.index++;
|
|
565
|
+
rowCount++;
|
|
566
|
+
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
567
|
+
for (const character of Array.from(text)) {
|
|
568
|
+
if (character === "\n") {
|
|
842
569
|
continue;
|
|
843
570
|
}
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
if (start !== void 0 && end !== void 0 && utf8BytesEqual(values, start, end, value)) {
|
|
847
|
-
return globalRow;
|
|
848
|
-
}
|
|
571
|
+
characterSet.add(character);
|
|
572
|
+
glyphCount++;
|
|
849
573
|
}
|
|
850
|
-
globalRowOffset += chunk.length;
|
|
851
574
|
}
|
|
852
|
-
return
|
|
575
|
+
return { glyphCount, rowCount, characterSet };
|
|
853
576
|
}
|
|
854
|
-
function
|
|
855
|
-
return
|
|
577
|
+
function allocateFastTextGlyphAttributes(glyphCount) {
|
|
578
|
+
return {
|
|
579
|
+
instanceGlyphData: new Uint8Array(glyphCount * FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE),
|
|
580
|
+
instancePositions: new Float32Array(glyphCount * 2)
|
|
581
|
+
};
|
|
856
582
|
}
|
|
857
|
-
function
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
}
|
|
863
|
-
out.data = values;
|
|
864
|
-
out.start = start;
|
|
865
|
-
out.end = end;
|
|
866
|
-
return true;
|
|
583
|
+
function createFastTextGlyphRecordViews(instanceGlyphData) {
|
|
584
|
+
return {
|
|
585
|
+
int16Values: new Int16Array(instanceGlyphData.buffer),
|
|
586
|
+
uint16Values: new Uint16Array(instanceGlyphData.buffer),
|
|
587
|
+
uint8Values: instanceGlyphData
|
|
588
|
+
};
|
|
867
589
|
}
|
|
868
|
-
function
|
|
869
|
-
const
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
}
|
|
873
|
-
for (let index = 0; index < valueLength; index += 1) {
|
|
874
|
-
if (data[start + index] !== value.data[value.start + index]) {
|
|
875
|
-
return false;
|
|
876
|
-
}
|
|
877
|
-
}
|
|
878
|
-
return true;
|
|
879
|
-
}
|
|
880
|
-
function decodeUtf8StringView(value) {
|
|
881
|
-
return textDecoder.decode(value.data.subarray(value.start, value.end));
|
|
882
|
-
}
|
|
883
|
-
|
|
884
|
-
// dist/layers/fast-text-layer/fast-text-layout.js
|
|
885
|
-
var FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE = Int16Array.BYTES_PER_ELEMENT * 10 + Uint8Array.BYTES_PER_ELEMENT * 4;
|
|
886
|
-
function buildFastTextUtf8ColumnSource(utf8Column) {
|
|
887
|
-
return getArrowUtf8ColumnSource(utf8Column);
|
|
888
|
-
}
|
|
889
|
-
function collectFastTextCharacterSet(props) {
|
|
890
|
-
const characterSet = /* @__PURE__ */ new Set();
|
|
891
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
892
|
-
for (const object of iterable) {
|
|
893
|
-
objectInfo.index++;
|
|
894
|
-
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
895
|
-
for (const character of Array.from(text)) {
|
|
896
|
-
if (character !== "\n") {
|
|
897
|
-
characterSet.add(character);
|
|
898
|
-
}
|
|
899
|
-
}
|
|
900
|
-
}
|
|
901
|
-
return characterSet;
|
|
902
|
-
}
|
|
903
|
-
function buildFastTextGlyphData(props) {
|
|
904
|
-
const buildStartTime = performance.now();
|
|
905
|
-
const columnNormalizeStartTime = performance.now();
|
|
906
|
-
const textUtf8Column = resolveFastTextUtf8ColumnSource(props.textUtf8Column);
|
|
907
|
-
const columnNormalizeDurationMs = performance.now() - columnNormalizeStartTime;
|
|
908
|
-
if (props.textUtf8Column && !textUtf8Column) {
|
|
909
|
-
throw new Error("FastTextLayer textUtf8Column must expose Arrow Utf8 buffers");
|
|
910
|
-
}
|
|
911
|
-
if ((textUtf8Column || props.getTextUtf8) && !props.singleLine) {
|
|
912
|
-
throw new Error("FastTextLayer UTF-8 text sources require singleLine text layout");
|
|
913
|
-
}
|
|
914
|
-
const glyphData = props.singleLine ? buildSingleLineGlyphData({
|
|
915
|
-
...props,
|
|
916
|
-
textUtf8Column
|
|
917
|
-
}) : buildMultiLineGlyphData(props);
|
|
918
|
-
return withFastTextGlyphBuildStats(glyphData, {
|
|
919
|
-
columnNormalizeDurationMs,
|
|
920
|
-
totalDurationMs: performance.now() - buildStartTime
|
|
921
|
-
});
|
|
922
|
-
}
|
|
923
|
-
function buildSingleLineGlyphData(props) {
|
|
924
|
-
const buildStartTime = performance.now();
|
|
925
|
-
const countStartTime = performance.now();
|
|
926
|
-
const countResult = countSingleLineFastTextGlyphs(props);
|
|
927
|
-
const countDurationMs = performance.now() - countStartTime;
|
|
928
|
-
const allocateStartTime = performance.now();
|
|
929
|
-
const attributes = allocateFastTextGlyphAttributes(countResult.glyphCount);
|
|
930
|
-
const startIndices = new Uint32Array(countResult.rowCount + 1);
|
|
931
|
-
const allocateDurationMs = performance.now() - allocateStartTime;
|
|
932
|
-
const writeState = {
|
|
933
|
-
glyphIndex: 0,
|
|
590
|
+
function createFastTextGlyphData(countResult, startIndices, attributes, stats) {
|
|
591
|
+
const byteLength = startIndices.byteLength + attributes.instanceGlyphData.byteLength + attributes.instancePositions.byteLength;
|
|
592
|
+
return {
|
|
593
|
+
length: countResult.glyphCount,
|
|
934
594
|
startIndices,
|
|
935
595
|
attributes,
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
for (const object of iterable) {
|
|
944
|
-
objectInfo.index++;
|
|
945
|
-
startIndices[objectInfo.index] = writeState.glyphIndex;
|
|
946
|
-
if (props.textUtf8Column && byteLookup) {
|
|
947
|
-
writeSingleLineUtf8LabelGlyphs(props, props.textUtf8Column, byteLookup, scratchUtf8View, object, objectInfo, writeState, writeTimings);
|
|
948
|
-
} else if (props.getTextUtf8 && byteLookup) {
|
|
949
|
-
writeSingleLineUtf8ViewLabelGlyphs(props, props.getTextUtf8, byteLookup, scratchUtf8View, object, objectInfo, writeState, writeTimings);
|
|
950
|
-
} else {
|
|
951
|
-
writeSingleLineStringLabelGlyphs(props, object, objectInfo, writeState, writeTimings);
|
|
596
|
+
characterSet: countResult.characterSet,
|
|
597
|
+
byteLength,
|
|
598
|
+
buildStats: {
|
|
599
|
+
...stats,
|
|
600
|
+
rowCount: countResult.rowCount,
|
|
601
|
+
glyphCount: countResult.glyphCount,
|
|
602
|
+
attributeByteLength: byteLength
|
|
952
603
|
}
|
|
953
|
-
}
|
|
954
|
-
startIndices[countResult.rowCount] = writeState.glyphIndex;
|
|
955
|
-
const writeDurationMs = performance.now() - writeStartTime;
|
|
956
|
-
return createFastTextGlyphData(countResult, startIndices, attributes, {
|
|
957
|
-
sourceMode: props.textUtf8Column ? "utf8-column" : props.getTextUtf8 ? "utf8-view" : "string",
|
|
958
|
-
layoutMode: "single-line",
|
|
959
|
-
columnNormalizeDurationMs: 0,
|
|
960
|
-
countDurationMs,
|
|
961
|
-
allocateDurationMs,
|
|
962
|
-
writeDurationMs,
|
|
963
|
-
...writeTimings,
|
|
964
|
-
totalDurationMs: performance.now() - buildStartTime
|
|
965
|
-
});
|
|
604
|
+
};
|
|
966
605
|
}
|
|
967
|
-
function
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
const attributes = allocateFastTextGlyphAttributes(countResult.glyphCount);
|
|
974
|
-
const startIndices = new Uint32Array(countResult.rowCount + 1);
|
|
975
|
-
const allocateDurationMs = performance.now() - allocateStartTime;
|
|
976
|
-
const writeState = {
|
|
977
|
-
glyphIndex: 0,
|
|
978
|
-
startIndices,
|
|
979
|
-
attributes,
|
|
980
|
-
glyphRecordViews: createFastTextGlyphRecordViews(attributes.instanceGlyphData)
|
|
606
|
+
function createFastTextGlyphWriteTimings() {
|
|
607
|
+
return {
|
|
608
|
+
textResolveDurationMs: 0,
|
|
609
|
+
styleAccessorDurationMs: 0,
|
|
610
|
+
layoutDurationMs: 0,
|
|
611
|
+
glyphWriteDurationMs: 0
|
|
981
612
|
};
|
|
982
|
-
const writeTimings = createFastTextGlyphWriteTimings();
|
|
983
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
984
|
-
const writeStartTime = performance.now();
|
|
985
|
-
for (const object of iterable) {
|
|
986
|
-
objectInfo.index++;
|
|
987
|
-
startIndices[objectInfo.index] = writeState.glyphIndex;
|
|
988
|
-
writeMultiLineLabelGlyphs(props, object, objectInfo, writeState, writeTimings);
|
|
989
|
-
}
|
|
990
|
-
startIndices[countResult.rowCount] = writeState.glyphIndex;
|
|
991
|
-
const writeDurationMs = performance.now() - writeStartTime;
|
|
992
|
-
return createFastTextGlyphData(countResult, startIndices, attributes, {
|
|
993
|
-
sourceMode: "string",
|
|
994
|
-
layoutMode: "multi-line",
|
|
995
|
-
columnNormalizeDurationMs: 0,
|
|
996
|
-
countDurationMs,
|
|
997
|
-
allocateDurationMs,
|
|
998
|
-
writeDurationMs,
|
|
999
|
-
...writeTimings,
|
|
1000
|
-
totalDurationMs: performance.now() - buildStartTime
|
|
1001
|
-
});
|
|
1002
613
|
}
|
|
1003
|
-
function
|
|
1004
|
-
const updateStartTime = performance.now();
|
|
1005
|
-
const glyphRecordViews = createFastTextGlyphRecordViews(props.glyphData.attributes.instanceGlyphData);
|
|
1006
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
1007
|
-
let rowCount = 0;
|
|
1008
|
-
let glyphCount = 0;
|
|
1009
|
-
let positionAccessorDurationMs = 0;
|
|
1010
|
-
let colorAccessorDurationMs = 0;
|
|
1011
|
-
let clipRectAccessorDurationMs = 0;
|
|
1012
|
-
let writeDurationMs = 0;
|
|
1013
|
-
for (const object of iterable) {
|
|
1014
|
-
objectInfo.index++;
|
|
1015
|
-
rowCount++;
|
|
1016
|
-
const rowGlyphStart = props.glyphData.startIndices[objectInfo.index] ?? 0;
|
|
1017
|
-
const rowGlyphEnd = props.glyphData.startIndices[objectInfo.index + 1] ?? rowGlyphStart;
|
|
1018
|
-
if (rowGlyphEnd <= rowGlyphStart) {
|
|
1019
|
-
continue;
|
|
1020
|
-
}
|
|
1021
|
-
let position = DEFAULT_POSITION;
|
|
1022
|
-
let color3 = DEFAULT_COLOR2;
|
|
1023
|
-
let clipRect = DEFAULT_CLIP_RECT;
|
|
1024
|
-
if (props.updatePositions) {
|
|
1025
|
-
const accessorStartTime = performance.now();
|
|
1026
|
-
position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
1027
|
-
positionAccessorDurationMs += performance.now() - accessorStartTime;
|
|
1028
|
-
}
|
|
1029
|
-
if (props.updateColors) {
|
|
1030
|
-
const accessorStartTime = performance.now();
|
|
1031
|
-
color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR2;
|
|
1032
|
-
colorAccessorDurationMs += performance.now() - accessorStartTime;
|
|
1033
|
-
}
|
|
1034
|
-
if (props.updateClipRects) {
|
|
1035
|
-
const accessorStartTime = performance.now();
|
|
1036
|
-
clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
1037
|
-
clipRectAccessorDurationMs += performance.now() - accessorStartTime;
|
|
1038
|
-
}
|
|
1039
|
-
const writeStartTime = performance.now();
|
|
1040
|
-
for (let glyphIndex = rowGlyphStart; glyphIndex < rowGlyphEnd; glyphIndex += 1) {
|
|
1041
|
-
if (props.updatePositions) {
|
|
1042
|
-
writeFastTextGlyphPosition(props.glyphData.attributes, glyphIndex, position);
|
|
1043
|
-
}
|
|
1044
|
-
if (props.updateClipRects) {
|
|
1045
|
-
writeFastTextGlyphClipRect(glyphRecordViews, glyphIndex, clipRect);
|
|
1046
|
-
}
|
|
1047
|
-
if (props.updateColors) {
|
|
1048
|
-
writeFastTextGlyphColor(glyphRecordViews, glyphIndex, color3);
|
|
1049
|
-
}
|
|
1050
|
-
}
|
|
1051
|
-
writeDurationMs += performance.now() - writeStartTime;
|
|
1052
|
-
glyphCount += rowGlyphEnd - rowGlyphStart;
|
|
1053
|
-
}
|
|
614
|
+
function withFastTextGlyphBuildStats(glyphData, stats) {
|
|
1054
615
|
return {
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
clipRectAccessorDurationMs,
|
|
1061
|
-
writeDurationMs,
|
|
1062
|
-
totalDurationMs: performance.now() - updateStartTime
|
|
616
|
+
...glyphData,
|
|
617
|
+
buildStats: {
|
|
618
|
+
...glyphData.buildStats,
|
|
619
|
+
...stats
|
|
620
|
+
}
|
|
1063
621
|
};
|
|
1064
622
|
}
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
var ANCHOR_OFFSET_MULTIPLIER = {
|
|
1072
|
-
start: 0,
|
|
1073
|
-
middle: -0.5,
|
|
1074
|
-
end: -1
|
|
1075
|
-
};
|
|
1076
|
-
var BASELINE_OFFSET_MULTIPLIER = {
|
|
1077
|
-
top: 0,
|
|
1078
|
-
center: -0.5,
|
|
1079
|
-
bottom: -1
|
|
1080
|
-
};
|
|
1081
|
-
function countSingleLineFastTextGlyphs(props) {
|
|
1082
|
-
if (props.textUtf8Column) {
|
|
1083
|
-
return countSingleLineUtf8FastTextGlyphs(props, props.textUtf8Column);
|
|
623
|
+
function writeSingleLineStringLabelGlyphs(props, object, objectInfo, writeState, timings) {
|
|
624
|
+
const textResolveStartTime = performance.now();
|
|
625
|
+
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
626
|
+
timings.textResolveDurationMs += performance.now() - textResolveStartTime;
|
|
627
|
+
if (!text) {
|
|
628
|
+
return;
|
|
1084
629
|
}
|
|
1085
|
-
|
|
1086
|
-
|
|
630
|
+
const styleAccessorStartTime = performance.now();
|
|
631
|
+
const position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
632
|
+
const color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR;
|
|
633
|
+
const clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
634
|
+
timings.styleAccessorDurationMs += performance.now() - styleAccessorStartTime;
|
|
635
|
+
const layoutStartTime = performance.now();
|
|
636
|
+
const width = getSingleLineStringWidth(text, props.mapping);
|
|
637
|
+
const lineOffsetX = ANCHOR_OFFSET_MULTIPLIER[props.textAnchor] * width;
|
|
638
|
+
const rowBaselineY = getSingleLineBaselineY(props);
|
|
639
|
+
timings.layoutDurationMs += performance.now() - layoutStartTime;
|
|
640
|
+
let cursorX = 0;
|
|
641
|
+
const glyphWriteStartTime = performance.now();
|
|
642
|
+
for (let index = 0; index < text.length; index += 1) {
|
|
643
|
+
const character = text[index];
|
|
644
|
+
const frame = props.mapping[character];
|
|
645
|
+
writeFastTextGlyphRecord({
|
|
646
|
+
frame,
|
|
647
|
+
lineOffsetX,
|
|
648
|
+
cursorX,
|
|
649
|
+
rowBaselineY,
|
|
650
|
+
position,
|
|
651
|
+
color: color3,
|
|
652
|
+
clipRect,
|
|
653
|
+
writeState
|
|
654
|
+
});
|
|
655
|
+
cursorX += (frame == null ? void 0 : frame.advance) ?? MISSING_CHARACTER_ADVANCE;
|
|
1087
656
|
}
|
|
1088
|
-
|
|
1089
|
-
}
|
|
1090
|
-
function countSingleLineUtf8FastTextGlyphs(props, textUtf8Column) {
|
|
1091
|
-
let glyphCount = 0;
|
|
1092
|
-
let rowCount = 0;
|
|
1093
|
-
const characterSet = /* @__PURE__ */ new Set();
|
|
1094
|
-
const textView = { data: EMPTY_BYTES, start: 0, end: 0 };
|
|
1095
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
1096
|
-
for (const object of iterable) {
|
|
1097
|
-
objectInfo.index++;
|
|
1098
|
-
rowCount++;
|
|
1099
|
-
const rowIndex = resolveTextUtf8Row(props.getTextUtf8Row, object, objectInfo);
|
|
1100
|
-
if (rowIndex == null || !getUtf8ColumnSourceRowView(textUtf8Column, rowIndex, textView)) {
|
|
1101
|
-
continue;
|
|
1102
|
-
}
|
|
1103
|
-
glyphCount += textView.end - textView.start;
|
|
1104
|
-
}
|
|
1105
|
-
return { glyphCount, rowCount, characterSet };
|
|
1106
|
-
}
|
|
1107
|
-
function countSingleLineUtf8ViewFastTextGlyphs(props, getTextUtf8) {
|
|
1108
|
-
let glyphCount = 0;
|
|
1109
|
-
let rowCount = 0;
|
|
1110
|
-
const characterSet = /* @__PURE__ */ new Set();
|
|
1111
|
-
const textView = { data: EMPTY_BYTES, start: 0, end: 0 };
|
|
1112
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
1113
|
-
for (const object of iterable) {
|
|
1114
|
-
objectInfo.index++;
|
|
1115
|
-
rowCount++;
|
|
1116
|
-
if (getTextUtf8(object, textView, objectInfo)) {
|
|
1117
|
-
glyphCount += Math.max(0, textView.end - textView.start);
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
return { glyphCount, rowCount, characterSet };
|
|
1121
|
-
}
|
|
1122
|
-
function countSingleLineStringFastTextGlyphs(props) {
|
|
1123
|
-
let glyphCount = 0;
|
|
1124
|
-
let rowCount = 0;
|
|
1125
|
-
const characterSet = /* @__PURE__ */ new Set();
|
|
1126
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
1127
|
-
for (const object of iterable) {
|
|
1128
|
-
objectInfo.index++;
|
|
1129
|
-
rowCount++;
|
|
1130
|
-
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
1131
|
-
glyphCount += text.length;
|
|
1132
|
-
for (let index = 0; index < text.length; index += 1) {
|
|
1133
|
-
characterSet.add(text[index]);
|
|
1134
|
-
}
|
|
1135
|
-
}
|
|
1136
|
-
return { glyphCount, rowCount, characterSet };
|
|
1137
|
-
}
|
|
1138
|
-
function countMultiLineFastTextGlyphs(props) {
|
|
1139
|
-
let glyphCount = 0;
|
|
1140
|
-
let rowCount = 0;
|
|
1141
|
-
const characterSet = /* @__PURE__ */ new Set();
|
|
1142
|
-
const { iterable, objectInfo } = (0, import_core4.createIterable)(props.data);
|
|
1143
|
-
for (const object of iterable) {
|
|
1144
|
-
objectInfo.index++;
|
|
1145
|
-
rowCount++;
|
|
1146
|
-
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
1147
|
-
for (const character of Array.from(text)) {
|
|
1148
|
-
if (character === "\n") {
|
|
1149
|
-
continue;
|
|
1150
|
-
}
|
|
1151
|
-
characterSet.add(character);
|
|
1152
|
-
glyphCount++;
|
|
1153
|
-
}
|
|
1154
|
-
}
|
|
1155
|
-
return { glyphCount, rowCount, characterSet };
|
|
1156
|
-
}
|
|
1157
|
-
function allocateFastTextGlyphAttributes(glyphCount) {
|
|
1158
|
-
return {
|
|
1159
|
-
instanceGlyphData: new Uint8Array(glyphCount * FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE),
|
|
1160
|
-
instancePositions: new Float32Array(glyphCount * 2)
|
|
1161
|
-
};
|
|
1162
|
-
}
|
|
1163
|
-
function createFastTextGlyphRecordViews(instanceGlyphData) {
|
|
1164
|
-
return {
|
|
1165
|
-
int16Values: new Int16Array(instanceGlyphData.buffer),
|
|
1166
|
-
uint16Values: new Uint16Array(instanceGlyphData.buffer),
|
|
1167
|
-
uint8Values: instanceGlyphData
|
|
1168
|
-
};
|
|
1169
|
-
}
|
|
1170
|
-
function createFastTextGlyphData(countResult, startIndices, attributes, stats) {
|
|
1171
|
-
const byteLength = startIndices.byteLength + attributes.instanceGlyphData.byteLength + attributes.instancePositions.byteLength;
|
|
1172
|
-
return {
|
|
1173
|
-
length: countResult.glyphCount,
|
|
1174
|
-
startIndices,
|
|
1175
|
-
attributes,
|
|
1176
|
-
characterSet: countResult.characterSet,
|
|
1177
|
-
byteLength,
|
|
1178
|
-
buildStats: {
|
|
1179
|
-
...stats,
|
|
1180
|
-
rowCount: countResult.rowCount,
|
|
1181
|
-
glyphCount: countResult.glyphCount,
|
|
1182
|
-
attributeByteLength: byteLength
|
|
1183
|
-
}
|
|
1184
|
-
};
|
|
1185
|
-
}
|
|
1186
|
-
function createFastTextGlyphWriteTimings() {
|
|
1187
|
-
return {
|
|
1188
|
-
textResolveDurationMs: 0,
|
|
1189
|
-
styleAccessorDurationMs: 0,
|
|
1190
|
-
layoutDurationMs: 0,
|
|
1191
|
-
glyphWriteDurationMs: 0
|
|
1192
|
-
};
|
|
1193
|
-
}
|
|
1194
|
-
function withFastTextGlyphBuildStats(glyphData, stats) {
|
|
1195
|
-
return {
|
|
1196
|
-
...glyphData,
|
|
1197
|
-
buildStats: {
|
|
1198
|
-
...glyphData.buildStats,
|
|
1199
|
-
...stats
|
|
1200
|
-
}
|
|
1201
|
-
};
|
|
1202
|
-
}
|
|
1203
|
-
function writeSingleLineStringLabelGlyphs(props, object, objectInfo, writeState, timings) {
|
|
1204
|
-
const textResolveStartTime = performance.now();
|
|
1205
|
-
const text = resolveAccessor(props.getText, object, objectInfo) ?? "";
|
|
1206
|
-
timings.textResolveDurationMs += performance.now() - textResolveStartTime;
|
|
1207
|
-
if (!text) {
|
|
1208
|
-
return;
|
|
1209
|
-
}
|
|
1210
|
-
const styleAccessorStartTime = performance.now();
|
|
1211
|
-
const position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
1212
|
-
const color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR2;
|
|
1213
|
-
const clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
1214
|
-
timings.styleAccessorDurationMs += performance.now() - styleAccessorStartTime;
|
|
1215
|
-
const layoutStartTime = performance.now();
|
|
1216
|
-
const width = getSingleLineStringWidth(text, props.mapping);
|
|
1217
|
-
const lineOffsetX = ANCHOR_OFFSET_MULTIPLIER[props.textAnchor] * width;
|
|
1218
|
-
const rowBaselineY = getSingleLineBaselineY(props);
|
|
1219
|
-
timings.layoutDurationMs += performance.now() - layoutStartTime;
|
|
1220
|
-
let cursorX = 0;
|
|
1221
|
-
const glyphWriteStartTime = performance.now();
|
|
1222
|
-
for (let index = 0; index < text.length; index += 1) {
|
|
1223
|
-
const character = text[index];
|
|
1224
|
-
const frame = props.mapping[character];
|
|
1225
|
-
writeFastTextGlyphRecord({
|
|
1226
|
-
frame,
|
|
1227
|
-
lineOffsetX,
|
|
1228
|
-
cursorX,
|
|
1229
|
-
rowBaselineY,
|
|
1230
|
-
position,
|
|
1231
|
-
color: color3,
|
|
1232
|
-
clipRect,
|
|
1233
|
-
writeState
|
|
1234
|
-
});
|
|
1235
|
-
cursorX += (frame == null ? void 0 : frame.advance) ?? MISSING_CHARACTER_ADVANCE;
|
|
1236
|
-
}
|
|
1237
|
-
timings.glyphWriteDurationMs += performance.now() - glyphWriteStartTime;
|
|
657
|
+
timings.glyphWriteDurationMs += performance.now() - glyphWriteStartTime;
|
|
1238
658
|
}
|
|
1239
659
|
function writeSingleLineUtf8LabelGlyphs(props, textUtf8Column, byteLookup, textView, object, objectInfo, writeState, timings) {
|
|
1240
660
|
const textResolveStartTime = performance.now();
|
|
@@ -1249,7 +669,7 @@ function writeSingleLineUtf8LabelGlyphs(props, textUtf8Column, byteLookup, textV
|
|
|
1249
669
|
}
|
|
1250
670
|
const styleAccessorStartTime = performance.now();
|
|
1251
671
|
const position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
1252
|
-
const color3 = resolveAccessor(props.getColor, object, objectInfo) ??
|
|
672
|
+
const color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR;
|
|
1253
673
|
const clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
1254
674
|
timings.styleAccessorDurationMs += performance.now() - styleAccessorStartTime;
|
|
1255
675
|
const layoutStartTime = performance.now();
|
|
@@ -1284,7 +704,7 @@ function writeSingleLineUtf8ViewLabelGlyphs(props, getTextUtf8, byteLookup, text
|
|
|
1284
704
|
}
|
|
1285
705
|
const styleAccessorStartTime = performance.now();
|
|
1286
706
|
const position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
1287
|
-
const color3 = resolveAccessor(props.getColor, object, objectInfo) ??
|
|
707
|
+
const color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR;
|
|
1288
708
|
const clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
1289
709
|
timings.styleAccessorDurationMs += performance.now() - styleAccessorStartTime;
|
|
1290
710
|
const layoutStartTime = performance.now();
|
|
@@ -1319,7 +739,7 @@ function writeMultiLineLabelGlyphs(props, object, objectInfo, writeState, timing
|
|
|
1319
739
|
}
|
|
1320
740
|
const styleAccessorStartTime = performance.now();
|
|
1321
741
|
const position = resolveAccessor(props.getPosition, object, objectInfo) ?? DEFAULT_POSITION;
|
|
1322
|
-
const color3 = resolveAccessor(props.getColor, object, objectInfo) ??
|
|
742
|
+
const color3 = resolveAccessor(props.getColor, object, objectInfo) ?? DEFAULT_COLOR;
|
|
1323
743
|
const clipRect = resolveAccessor(props.getClipRect, object, objectInfo) ?? DEFAULT_CLIP_RECT;
|
|
1324
744
|
timings.styleAccessorDurationMs += performance.now() - styleAccessorStartTime;
|
|
1325
745
|
const layoutStartTime = performance.now();
|
|
@@ -1460,10 +880,10 @@ function resolveAccessor(accessor, object, objectInfo) {
|
|
|
1460
880
|
return typeof accessor === "function" ? accessor(object, objectInfo) : accessor;
|
|
1461
881
|
}
|
|
1462
882
|
function writeColor(target, offset, color3) {
|
|
1463
|
-
target[offset] = clampByte(color3[0] ??
|
|
1464
|
-
target[offset + 1] = clampByte(color3[1] ??
|
|
1465
|
-
target[offset + 2] = clampByte(color3[2] ??
|
|
1466
|
-
target[offset + 3] = clampByte(color3[3] ??
|
|
883
|
+
target[offset] = clampByte(color3[0] ?? DEFAULT_COLOR[0]);
|
|
884
|
+
target[offset + 1] = clampByte(color3[1] ?? DEFAULT_COLOR[1]);
|
|
885
|
+
target[offset + 2] = clampByte(color3[2] ?? DEFAULT_COLOR[2]);
|
|
886
|
+
target[offset + 3] = clampByte(color3[3] ?? DEFAULT_COLOR[3]);
|
|
1467
887
|
}
|
|
1468
888
|
function clampByte(value) {
|
|
1469
889
|
return Math.max(0, Math.min(255, Math.round(value)));
|
|
@@ -1805,8 +1225,255 @@ function nextPowerOfTwo(value) {
|
|
|
1805
1225
|
return Math.pow(2, Math.ceil(Math.log2(Math.max(1, value))));
|
|
1806
1226
|
}
|
|
1807
1227
|
|
|
1228
|
+
// dist/layers/fast-text-layer/fast-text-layer.wgsl.js
|
|
1229
|
+
var fast_text_layer_wgsl_default = (
|
|
1230
|
+
/* wgsl */
|
|
1231
|
+
`
|
|
1232
|
+
struct FastTextUniforms {
|
|
1233
|
+
fontAtlasSize: vec2<f32>,
|
|
1234
|
+
fontSize: f32,
|
|
1235
|
+
size: f32,
|
|
1236
|
+
sizeScale: f32,
|
|
1237
|
+
sizeMinPixels: f32,
|
|
1238
|
+
sizeMaxPixels: f32,
|
|
1239
|
+
pixelOffset: vec2<f32>,
|
|
1240
|
+
billboard: f32,
|
|
1241
|
+
sizeUnits: i32,
|
|
1242
|
+
alphaCutoff: f32,
|
|
1243
|
+
sdfEnabled: f32,
|
|
1244
|
+
sdfBuffer: f32,
|
|
1245
|
+
sdfGamma: f32,
|
|
1246
|
+
contentCutoffPixels: vec2<f32>,
|
|
1247
|
+
contentAlign: vec2<i32>,
|
|
1248
|
+
flipY: f32,
|
|
1249
|
+
};
|
|
1250
|
+
|
|
1251
|
+
@group(0) @binding(auto) var<uniform> fastText: FastTextUniforms;
|
|
1252
|
+
@group(0) @binding(auto) var fontAtlasTexture: texture_2d<f32>;
|
|
1253
|
+
@group(0) @binding(auto) var fontAtlasTextureSampler: sampler;
|
|
1254
|
+
|
|
1255
|
+
struct FastTextAttributes {
|
|
1256
|
+
@location(0) positions: vec2<f32>,
|
|
1257
|
+
@location(1) instancePositions: vec2<f32>,
|
|
1258
|
+
@location(2) instanceGlyphOffsets: vec2<i32>,
|
|
1259
|
+
@location(3) instanceGlyphFrames: vec4<u32>,
|
|
1260
|
+
@location(4) instanceClipRects: vec4<i32>,
|
|
1261
|
+
@location(5) instanceColors: vec4<f32>,
|
|
1262
|
+
};
|
|
1263
|
+
|
|
1264
|
+
struct FastTextVaryings {
|
|
1265
|
+
@builtin(position) position: vec4<f32>,
|
|
1266
|
+
@location(0) color: vec4<f32>,
|
|
1267
|
+
@location(1) textureCoords: vec2<f32>,
|
|
1268
|
+
@location(2) uv: vec2<f32>,
|
|
1269
|
+
};
|
|
1270
|
+
|
|
1271
|
+
struct FastTextClipResult {
|
|
1272
|
+
position: vec4<f32>,
|
|
1273
|
+
pixelOffset: vec2<f32>,
|
|
1274
|
+
};
|
|
1275
|
+
|
|
1276
|
+
fn fast_text_alignment_pixel_offset(
|
|
1277
|
+
anchor: f32,
|
|
1278
|
+
extent: f32,
|
|
1279
|
+
clipStart: f32,
|
|
1280
|
+
clipEnd: f32,
|
|
1281
|
+
mode: i32
|
|
1282
|
+
) -> f32 {
|
|
1283
|
+
if (clipEnd < clipStart) {
|
|
1284
|
+
return 0.0;
|
|
1285
|
+
}
|
|
1286
|
+
if (mode == 1) {
|
|
1287
|
+
return max(-(anchor + clipStart), 0.0);
|
|
1288
|
+
}
|
|
1289
|
+
if (mode == 2) {
|
|
1290
|
+
let visibleMin = max(0.0, anchor + clipStart);
|
|
1291
|
+
let visibleMax = min(extent, anchor + clipEnd);
|
|
1292
|
+
return select(0.0, (visibleMin + visibleMax) * 0.5 - anchor, visibleMin < visibleMax);
|
|
1293
|
+
}
|
|
1294
|
+
if (mode == 3) {
|
|
1295
|
+
return min(extent - (anchor + clipEnd), 0.0);
|
|
1296
|
+
}
|
|
1297
|
+
return 0.0;
|
|
1298
|
+
}
|
|
1299
|
+
|
|
1300
|
+
fn fast_text_clip_glyph_vertex(
|
|
1301
|
+
initialPixelOffset: vec2<f32>,
|
|
1302
|
+
anchorPositionScreen: vec2<f32>,
|
|
1303
|
+
clipRect: vec4<i32>,
|
|
1304
|
+
initialPosition: vec4<f32>
|
|
1305
|
+
) -> FastTextClipResult {
|
|
1306
|
+
var result: FastTextClipResult;
|
|
1307
|
+
result.position = initialPosition;
|
|
1308
|
+
result.pixelOffset = initialPixelOffset;
|
|
1309
|
+
|
|
1310
|
+
let clipRectFloat = vec4<f32>(clipRect);
|
|
1311
|
+
var clipXY = project_size_vec2(clipRectFloat.xy) * project.scale;
|
|
1312
|
+
let clipWH = project_size_vec2(clipRectFloat.zw) * project.scale;
|
|
1313
|
+
|
|
1314
|
+
if (fastText.flipY > 0.5) {
|
|
1315
|
+
clipXY.y = -clipXY.y - clipWH.y;
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
if (fastText.contentAlign.x > 0 || fastText.contentAlign.y > 0) {
|
|
1319
|
+
let viewportPixels = project.viewportSize / project.devicePixelRatio;
|
|
1320
|
+
let scrollPixels = vec2<f32>(
|
|
1321
|
+
fast_text_alignment_pixel_offset(
|
|
1322
|
+
anchorPositionScreen.x,
|
|
1323
|
+
viewportPixels.x,
|
|
1324
|
+
clipXY.x,
|
|
1325
|
+
clipXY.x + clipWH.x,
|
|
1326
|
+
fastText.contentAlign.x
|
|
1327
|
+
),
|
|
1328
|
+
-fast_text_alignment_pixel_offset(
|
|
1329
|
+
anchorPositionScreen.y,
|
|
1330
|
+
viewportPixels.y,
|
|
1331
|
+
-clipXY.y - clipWH.y,
|
|
1332
|
+
-clipXY.y,
|
|
1333
|
+
fastText.contentAlign.y
|
|
1334
|
+
)
|
|
1335
|
+
);
|
|
1336
|
+
result.pixelOffset += scrollPixels;
|
|
1337
|
+
result.position = vec4<f32>(
|
|
1338
|
+
result.position.xy + project_pixel_size_to_clipspace(scrollPixels),
|
|
1339
|
+
result.position.zw
|
|
1340
|
+
);
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
if (clipRectFloat.z >= 0.0) {
|
|
1344
|
+
if (result.pixelOffset.x < clipXY.x || result.pixelOffset.x > clipXY.x + clipWH.x) {
|
|
1345
|
+
result.position = vec4<f32>(0.0);
|
|
1346
|
+
} else if (fastText.contentCutoffPixels.x > 0.0) {
|
|
1347
|
+
let viewportWidth = project.viewportSize.x / project.devicePixelRatio;
|
|
1348
|
+
let left = max(anchorPositionScreen.x + clipXY.x, 0.0);
|
|
1349
|
+
let right = min(anchorPositionScreen.x + clipXY.x + clipWH.x, viewportWidth);
|
|
1350
|
+
if (right - left < fastText.contentCutoffPixels.x) {
|
|
1351
|
+
result.position = vec4<f32>(0.0);
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
if (clipRectFloat.w >= 0.0) {
|
|
1357
|
+
if (result.pixelOffset.y < clipXY.y || result.pixelOffset.y > clipXY.y + clipWH.y) {
|
|
1358
|
+
result.position = vec4<f32>(0.0);
|
|
1359
|
+
} else if (fastText.contentCutoffPixels.y > 0.0) {
|
|
1360
|
+
let viewportHeight = project.viewportSize.y / project.devicePixelRatio;
|
|
1361
|
+
let top = max(anchorPositionScreen.y - clipXY.y - clipWH.y, 0.0);
|
|
1362
|
+
let bottom = min(anchorPositionScreen.y - clipXY.y, viewportHeight);
|
|
1363
|
+
if (bottom - top < fastText.contentCutoffPixels.y) {
|
|
1364
|
+
result.position = vec4<f32>(0.0);
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
return result;
|
|
1370
|
+
}
|
|
1371
|
+
|
|
1372
|
+
@vertex
|
|
1373
|
+
fn vertexMain(attributes: FastTextAttributes) -> FastTextVaryings {
|
|
1374
|
+
let worldPosition = vec3<f32>(attributes.instancePositions, 0.0);
|
|
1375
|
+
geometry.worldPosition = worldPosition;
|
|
1376
|
+
geometry.uv = attributes.positions;
|
|
1377
|
+
|
|
1378
|
+
let glyphFrame = vec4<f32>(attributes.instanceGlyphFrames);
|
|
1379
|
+
let glyphSize = glyphFrame.zw;
|
|
1380
|
+
let sizePixels = clamp(
|
|
1381
|
+
project_unit_size_to_pixel(fastText.size * fastText.sizeScale, fastText.sizeUnits),
|
|
1382
|
+
fastText.sizeMinPixels,
|
|
1383
|
+
fastText.sizeMaxPixels
|
|
1384
|
+
);
|
|
1385
|
+
let instanceScale = select(sizePixels / fastText.fontSize, 0.0, fastText.fontSize == 0.0);
|
|
1386
|
+
var pixelOffset = vec2<f32>(attributes.instanceGlyphOffsets) + attributes.positions * glyphSize;
|
|
1387
|
+
pixelOffset = pixelOffset * instanceScale + fastText.pixelOffset;
|
|
1388
|
+
pixelOffset.y = -pixelOffset.y;
|
|
1389
|
+
|
|
1390
|
+
var clipPosition: vec4<f32>;
|
|
1391
|
+
var anchorPositionClip: vec4<f32>;
|
|
1392
|
+
|
|
1393
|
+
if (fastText.billboard > 0.5) {
|
|
1394
|
+
let projected = project_position_to_clipspace_and_commonspace(
|
|
1395
|
+
worldPosition,
|
|
1396
|
+
vec3<f32>(0.0),
|
|
1397
|
+
vec3<f32>(0.0)
|
|
1398
|
+
);
|
|
1399
|
+
geometry.position = projected.commonPosition;
|
|
1400
|
+
anchorPositionClip = projected.clipPosition;
|
|
1401
|
+
clipPosition = vec4<f32>(
|
|
1402
|
+
projected.clipPosition.xy + project_pixel_size_to_clipspace(pixelOffset),
|
|
1403
|
+
projected.clipPosition.zw
|
|
1404
|
+
);
|
|
1405
|
+
} else {
|
|
1406
|
+
var offsetCommon = vec3<f32>(project_pixel_size_vec2(pixelOffset), 0.0);
|
|
1407
|
+
if (fastText.flipY > 0.5) {
|
|
1408
|
+
offsetCommon.y = -offsetCommon.y;
|
|
1409
|
+
}
|
|
1410
|
+
let projected = project_position_to_clipspace_and_commonspace(
|
|
1411
|
+
worldPosition,
|
|
1412
|
+
vec3<f32>(0.0),
|
|
1413
|
+
offsetCommon
|
|
1414
|
+
);
|
|
1415
|
+
geometry.position = projected.commonPosition;
|
|
1416
|
+
anchorPositionClip = project_position_to_clipspace(
|
|
1417
|
+
worldPosition,
|
|
1418
|
+
vec3<f32>(0.0),
|
|
1419
|
+
vec3<f32>(0.0)
|
|
1420
|
+
);
|
|
1421
|
+
clipPosition = projected.clipPosition;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
let anchorPositionNdc = anchorPositionClip.xy / anchorPositionClip.w;
|
|
1425
|
+
let anchorPositionScreen = vec2<f32>(
|
|
1426
|
+
anchorPositionNdc.x + 1.0,
|
|
1427
|
+
1.0 - anchorPositionNdc.y
|
|
1428
|
+
) * 0.5 * project.viewportSize / project.devicePixelRatio;
|
|
1429
|
+
let clipped = fast_text_clip_glyph_vertex(
|
|
1430
|
+
pixelOffset,
|
|
1431
|
+
anchorPositionScreen,
|
|
1432
|
+
attributes.instanceClipRects,
|
|
1433
|
+
clipPosition
|
|
1434
|
+
);
|
|
1435
|
+
|
|
1436
|
+
var varyings: FastTextVaryings;
|
|
1437
|
+
varyings.position = clipped.position;
|
|
1438
|
+
varyings.color = attributes.instanceColors;
|
|
1439
|
+
varyings.textureCoords =
|
|
1440
|
+
(glyphFrame.xy + attributes.positions * glyphSize) / fastText.fontAtlasSize;
|
|
1441
|
+
varyings.uv = attributes.positions;
|
|
1442
|
+
return varyings;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
@fragment
|
|
1446
|
+
fn fragmentMain(varyings: FastTextVaryings) -> @location(0) vec4<f32> {
|
|
1447
|
+
geometry.uv = varyings.uv;
|
|
1448
|
+
|
|
1449
|
+
var alpha = textureSample(
|
|
1450
|
+
fontAtlasTexture,
|
|
1451
|
+
fontAtlasTextureSampler,
|
|
1452
|
+
varyings.textureCoords
|
|
1453
|
+
).a;
|
|
1454
|
+
|
|
1455
|
+
if (fastText.sdfEnabled > 0.5) {
|
|
1456
|
+
alpha = smoothstep(
|
|
1457
|
+
fastText.sdfBuffer - fastText.sdfGamma,
|
|
1458
|
+
fastText.sdfBuffer + fastText.sdfGamma,
|
|
1459
|
+
alpha
|
|
1460
|
+
);
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1463
|
+
let outputAlpha = alpha * varyings.color.a;
|
|
1464
|
+
if (outputAlpha < fastText.alphaCutoff) {
|
|
1465
|
+
discard;
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
return deckgl_premultiplied_alpha(
|
|
1469
|
+
vec4<f32>(varyings.color.rgb, outputAlpha * layer.opacity)
|
|
1470
|
+
);
|
|
1471
|
+
}
|
|
1472
|
+
`
|
|
1473
|
+
);
|
|
1474
|
+
|
|
1808
1475
|
// dist/layers/fast-text-layer/fast-text-layer.js
|
|
1809
|
-
var
|
|
1476
|
+
var defaultProps = {
|
|
1810
1477
|
billboard: true,
|
|
1811
1478
|
sizeScale: { type: "number", value: 1, min: 0 },
|
|
1812
1479
|
sizeUnits: "pixels",
|
|
@@ -1841,13 +1508,14 @@ var defaultProps2 = {
|
|
|
1841
1508
|
contentAlignHorizontal: "none",
|
|
1842
1509
|
contentAlignVertical: "none"
|
|
1843
1510
|
};
|
|
1844
|
-
var FastTextLayer = class extends
|
|
1511
|
+
var FastTextLayer = class extends import_core2.Layer {
|
|
1845
1512
|
/** Return the shader set used by the direct glyph instance model. */
|
|
1846
1513
|
getShaders() {
|
|
1847
1514
|
return super.getShaders({
|
|
1515
|
+
source: fast_text_layer_wgsl_default,
|
|
1848
1516
|
vs: FAST_TEXT_VS,
|
|
1849
1517
|
fs: FAST_TEXT_FS,
|
|
1850
|
-
modules: [
|
|
1518
|
+
modules: [import_core2.project32, import_core2.color, fastTextUniforms]
|
|
1851
1519
|
});
|
|
1852
1520
|
}
|
|
1853
1521
|
/** Initialize the model and atlas manager. */
|
|
@@ -1895,7 +1563,7 @@ var FastTextLayer = class extends import_core5.Layer {
|
|
|
1895
1563
|
sizeMaxPixels: this.props.sizeMaxPixels,
|
|
1896
1564
|
pixelOffset: this.props.pixelOffset,
|
|
1897
1565
|
billboard: this.props.billboard,
|
|
1898
|
-
sizeUnits:
|
|
1566
|
+
sizeUnits: import_core2.UNIT[this.props.sizeUnits],
|
|
1899
1567
|
alphaCutoff: this.props.alphaCutoff,
|
|
1900
1568
|
sdfEnabled: this.resolveSdfEnabled(),
|
|
1901
1569
|
sdfBuffer: FAST_TEXT_SDF_BUFFER,
|
|
@@ -1920,11 +1588,11 @@ var FastTextLayer = class extends import_core5.Layer {
|
|
|
1920
1588
|
}
|
|
1921
1589
|
/** Build a luma model for instanced glyph quads. */
|
|
1922
1590
|
getModel() {
|
|
1923
|
-
return new
|
|
1591
|
+
return new import_engine.Model(this.context.device, {
|
|
1924
1592
|
...this.getShaders(),
|
|
1925
1593
|
id: this.props.id,
|
|
1926
1594
|
bufferLayout: FAST_TEXT_BUFFER_LAYOUT,
|
|
1927
|
-
geometry: new
|
|
1595
|
+
geometry: new import_engine.Geometry({
|
|
1928
1596
|
topology: "triangle-list",
|
|
1929
1597
|
attributes: {
|
|
1930
1598
|
positions: {
|
|
@@ -2088,7 +1756,7 @@ var FastTextLayer = class extends import_core5.Layer {
|
|
|
2088
1756
|
});
|
|
2089
1757
|
}
|
|
2090
1758
|
};
|
|
2091
|
-
__publicField(FastTextLayer, "defaultProps",
|
|
1759
|
+
__publicField(FastTextLayer, "defaultProps", defaultProps);
|
|
2092
1760
|
__publicField(FastTextLayer, "layerName", "FastTextLayer");
|
|
2093
1761
|
var FAST_TEXT_CONTENT_ALIGN = {
|
|
2094
1762
|
none: 0,
|
|
@@ -2104,6 +1772,7 @@ var fastTextLog = new import_log.Log({ id: "trace-layers" });
|
|
|
2104
1772
|
var FAST_TEXT_PROBE_LABEL_STYLE = "background:#f59e0b;color:#111827;font-weight:700;padding:2px 8px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;";
|
|
2105
1773
|
var fastTextUniforms = {
|
|
2106
1774
|
name: "fastText",
|
|
1775
|
+
source: "",
|
|
2107
1776
|
vs: `layout(std140) uniform fastTextUniforms {
|
|
2108
1777
|
vec2 fontAtlasSize;
|
|
2109
1778
|
float fontSize;
|
|
@@ -2164,436 +1833,1187 @@ var fastTextUniforms = {
|
|
|
2164
1833
|
contentAlign: "vec2<i32>",
|
|
2165
1834
|
flipY: "f32"
|
|
2166
1835
|
}
|
|
2167
|
-
};
|
|
2168
|
-
var FAST_TEXT_BUFFER_LAYOUT = [
|
|
2169
|
-
{ name: "instancePositions", stepMode: "instance", format: "float32x2" },
|
|
2170
|
-
{
|
|
2171
|
-
name: "instanceGlyphData",
|
|
2172
|
-
stepMode: "instance",
|
|
2173
|
-
byteStride: FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE,
|
|
2174
|
-
attributes: [
|
|
2175
|
-
{ attribute: "instanceGlyphOffsets", format: "sint16x2", byteOffset: 0 },
|
|
2176
|
-
{
|
|
2177
|
-
attribute: "instanceGlyphFrames",
|
|
2178
|
-
format: "uint16x4",
|
|
2179
|
-
byteOffset: Int16Array.BYTES_PER_ELEMENT * 2
|
|
2180
|
-
},
|
|
2181
|
-
{
|
|
2182
|
-
attribute: "instanceClipRects",
|
|
2183
|
-
format: "sint16x4",
|
|
2184
|
-
byteOffset: Int16Array.BYTES_PER_ELEMENT * 6
|
|
2185
|
-
},
|
|
2186
|
-
{
|
|
2187
|
-
attribute: "instanceColors",
|
|
2188
|
-
format: "unorm8x4",
|
|
2189
|
-
byteOffset: Int16Array.BYTES_PER_ELEMENT * 10
|
|
2190
|
-
}
|
|
2191
|
-
]
|
|
1836
|
+
};
|
|
1837
|
+
var FAST_TEXT_BUFFER_LAYOUT = [
|
|
1838
|
+
{ name: "instancePositions", stepMode: "instance", format: "float32x2" },
|
|
1839
|
+
{
|
|
1840
|
+
name: "instanceGlyphData",
|
|
1841
|
+
stepMode: "instance",
|
|
1842
|
+
byteStride: FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE,
|
|
1843
|
+
attributes: [
|
|
1844
|
+
{ attribute: "instanceGlyphOffsets", format: "sint16x2", byteOffset: 0 },
|
|
1845
|
+
{
|
|
1846
|
+
attribute: "instanceGlyphFrames",
|
|
1847
|
+
format: "uint16x4",
|
|
1848
|
+
byteOffset: Int16Array.BYTES_PER_ELEMENT * 2
|
|
1849
|
+
},
|
|
1850
|
+
{
|
|
1851
|
+
attribute: "instanceClipRects",
|
|
1852
|
+
format: "sint16x4",
|
|
1853
|
+
byteOffset: Int16Array.BYTES_PER_ELEMENT * 6
|
|
1854
|
+
},
|
|
1855
|
+
{
|
|
1856
|
+
attribute: "instanceColors",
|
|
1857
|
+
format: "unorm8x4",
|
|
1858
|
+
byteOffset: Int16Array.BYTES_PER_ELEMENT * 10
|
|
1859
|
+
}
|
|
1860
|
+
]
|
|
1861
|
+
}
|
|
1862
|
+
];
|
|
1863
|
+
var DEFAULT_SAMPLER_PARAMETERS = {
|
|
1864
|
+
minFilter: "linear",
|
|
1865
|
+
mipmapFilter: "linear",
|
|
1866
|
+
magFilter: "linear",
|
|
1867
|
+
addressModeU: "clamp-to-edge",
|
|
1868
|
+
addressModeV: "clamp-to-edge"
|
|
1869
|
+
};
|
|
1870
|
+
var FAST_TEXT_VS = `#version 300 es
|
|
1871
|
+
#define SHADER_NAME fast-text-layer-vertex-shader
|
|
1872
|
+
|
|
1873
|
+
in vec2 positions;
|
|
1874
|
+
in vec2 instancePositions;
|
|
1875
|
+
in ivec2 instanceGlyphOffsets;
|
|
1876
|
+
in uvec4 instanceGlyphFrames;
|
|
1877
|
+
in ivec4 instanceClipRects;
|
|
1878
|
+
in vec4 instanceColors;
|
|
1879
|
+
|
|
1880
|
+
out vec4 vColor;
|
|
1881
|
+
out vec2 vTextureCoords;
|
|
1882
|
+
out vec2 uv;
|
|
1883
|
+
|
|
1884
|
+
float fastTextGetAlignmentPixelOffset(float anchor, float extent, float clipStart, float clipEnd, int mode) {
|
|
1885
|
+
if (clipEnd < clipStart) {
|
|
1886
|
+
return 0.0;
|
|
1887
|
+
}
|
|
1888
|
+
if (mode == FAST_TEXT_ALIGN_MODE_START) {
|
|
1889
|
+
return max(-(anchor + clipStart), 0.0);
|
|
1890
|
+
}
|
|
1891
|
+
if (mode == FAST_TEXT_ALIGN_MODE_CENTER) {
|
|
1892
|
+
float visibleMin = max(0.0, anchor + clipStart);
|
|
1893
|
+
float visibleMax = min(extent, anchor + clipEnd);
|
|
1894
|
+
return visibleMin < visibleMax ? (visibleMin + visibleMax) / 2.0 - anchor : 0.0;
|
|
1895
|
+
}
|
|
1896
|
+
if (mode == FAST_TEXT_ALIGN_MODE_END) {
|
|
1897
|
+
return min(extent - (anchor + clipEnd), 0.0);
|
|
1898
|
+
}
|
|
1899
|
+
return 0.0;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
void fastTextClipGlyphVertex(vec2 pixelOffset, vec2 anchorPosScreen) {
|
|
1903
|
+
vec4 clipRect = vec4(instanceClipRects);
|
|
1904
|
+
vec2 clipXY = project_size_to_pixel(clipRect.xy);
|
|
1905
|
+
vec2 clipWH = project_size_to_pixel(clipRect.zw);
|
|
1906
|
+
if (fastText.flipY) {
|
|
1907
|
+
clipXY.y = -clipXY.y - clipWH.y;
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
if (fastText.contentAlign.x > 0 || fastText.contentAlign.y > 0) {
|
|
1911
|
+
vec2 viewportPixels = project.viewportSize / project.devicePixelRatio;
|
|
1912
|
+
vec2 scrollPixels = vec2(
|
|
1913
|
+
fastTextGetAlignmentPixelOffset(
|
|
1914
|
+
anchorPosScreen.x,
|
|
1915
|
+
viewportPixels.x,
|
|
1916
|
+
clipXY.x,
|
|
1917
|
+
clipXY.x + clipWH.x,
|
|
1918
|
+
fastText.contentAlign.x
|
|
1919
|
+
),
|
|
1920
|
+
-fastTextGetAlignmentPixelOffset(
|
|
1921
|
+
anchorPosScreen.y,
|
|
1922
|
+
viewportPixels.y,
|
|
1923
|
+
-clipXY.y - clipWH.y,
|
|
1924
|
+
-clipXY.y,
|
|
1925
|
+
fastText.contentAlign.y
|
|
1926
|
+
)
|
|
1927
|
+
);
|
|
1928
|
+
pixelOffset += scrollPixels;
|
|
1929
|
+
gl_Position.xy += project_pixel_size_to_clipspace(scrollPixels);
|
|
1930
|
+
}
|
|
1931
|
+
|
|
1932
|
+
if (clipRect.z >= 0.0) {
|
|
1933
|
+
if (pixelOffset.x < clipXY.x || pixelOffset.x > clipXY.x + clipWH.x) {
|
|
1934
|
+
gl_Position = vec4(0.0);
|
|
1935
|
+
} else if (fastText.contentCutoffPixels.x > 0.0) {
|
|
1936
|
+
float viewportWidth = project.viewportSize.x / project.devicePixelRatio;
|
|
1937
|
+
float left = max(anchorPosScreen.x + clipXY.x, 0.0);
|
|
1938
|
+
float right = min(anchorPosScreen.x + clipXY.x + clipWH.x, viewportWidth);
|
|
1939
|
+
if (right - left < fastText.contentCutoffPixels.x) {
|
|
1940
|
+
gl_Position = vec4(0.0);
|
|
1941
|
+
}
|
|
1942
|
+
}
|
|
1943
|
+
}
|
|
1944
|
+
if (clipRect.w >= 0.0) {
|
|
1945
|
+
if (pixelOffset.y < clipXY.y || pixelOffset.y > clipXY.y + clipWH.y) {
|
|
1946
|
+
gl_Position = vec4(0.0);
|
|
1947
|
+
} else if (fastText.contentCutoffPixels.y > 0.0) {
|
|
1948
|
+
float viewportHeight = project.viewportSize.y / project.devicePixelRatio;
|
|
1949
|
+
float top = max(anchorPosScreen.y - clipXY.y - clipWH.y, 0.0);
|
|
1950
|
+
float bottom = min(anchorPosScreen.y - clipXY.y, viewportHeight);
|
|
1951
|
+
if (bottom - top < fastText.contentCutoffPixels.y) {
|
|
1952
|
+
gl_Position = vec4(0.0);
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
|
|
1958
|
+
void main(void) {
|
|
1959
|
+
vec3 worldPosition = vec3(instancePositions, 0.0);
|
|
1960
|
+
geometry.worldPosition = worldPosition;
|
|
1961
|
+
geometry.uv = positions;
|
|
1962
|
+
uv = positions;
|
|
1963
|
+
|
|
1964
|
+
vec4 glyphFrame = vec4(instanceGlyphFrames);
|
|
1965
|
+
vec2 glyphSize = glyphFrame.zw;
|
|
1966
|
+
float sizePixels = clamp(
|
|
1967
|
+
project_size_to_pixel(fastText.size * fastText.sizeScale, fastText.sizeUnits),
|
|
1968
|
+
fastText.sizeMinPixels,
|
|
1969
|
+
fastText.sizeMaxPixels
|
|
1970
|
+
);
|
|
1971
|
+
float instanceScale = fastText.fontSize == 0.0 ? 0.0 : sizePixels / fastText.fontSize;
|
|
1972
|
+
vec2 pixelOffset = vec2(instanceGlyphOffsets) + positions * glyphSize;
|
|
1973
|
+
pixelOffset = pixelOffset * instanceScale + fastText.pixelOffset;
|
|
1974
|
+
pixelOffset.y *= -1.0;
|
|
1975
|
+
|
|
1976
|
+
vec2 anchorPosScreen;
|
|
1977
|
+
if (fastText.billboard) {
|
|
1978
|
+
gl_Position = project_position_to_clipspace(
|
|
1979
|
+
worldPosition,
|
|
1980
|
+
vec3(0.0),
|
|
1981
|
+
vec3(0.0),
|
|
1982
|
+
geometry.position
|
|
1983
|
+
);
|
|
1984
|
+
anchorPosScreen = gl_Position.xy / gl_Position.w;
|
|
1985
|
+
DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
|
|
1986
|
+
vec3 offset = vec3(pixelOffset, 0.0);
|
|
1987
|
+
DECKGL_FILTER_SIZE(offset, geometry);
|
|
1988
|
+
gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
|
|
1989
|
+
} else {
|
|
1990
|
+
vec3 offsetCommon = vec3(project_pixel_size(pixelOffset), 0.0);
|
|
1991
|
+
if (fastText.flipY) {
|
|
1992
|
+
offsetCommon.y *= -1.0;
|
|
1993
|
+
}
|
|
1994
|
+
DECKGL_FILTER_SIZE(offsetCommon, geometry);
|
|
1995
|
+
vec4 anchorPosition = project_position_to_clipspace(worldPosition, vec3(0.0), vec3(0.0));
|
|
1996
|
+
anchorPosScreen = anchorPosition.xy / anchorPosition.w;
|
|
1997
|
+
gl_Position = project_position_to_clipspace(
|
|
1998
|
+
worldPosition,
|
|
1999
|
+
vec3(0.0),
|
|
2000
|
+
offsetCommon,
|
|
2001
|
+
geometry.position
|
|
2002
|
+
);
|
|
2003
|
+
DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
anchorPosScreen = vec2(anchorPosScreen.x + 1.0, 1.0 - anchorPosScreen.y) / 2.0 *
|
|
2007
|
+
project.viewportSize / project.devicePixelRatio;
|
|
2008
|
+
fastTextClipGlyphVertex(pixelOffset, anchorPosScreen);
|
|
2009
|
+
|
|
2010
|
+
vTextureCoords = (glyphFrame.xy + positions * glyphSize) / fastText.fontAtlasSize;
|
|
2011
|
+
vColor = instanceColors;
|
|
2012
|
+
DECKGL_FILTER_COLOR(vColor, geometry);
|
|
2013
|
+
}
|
|
2014
|
+
`;
|
|
2015
|
+
var FAST_TEXT_FS = `#version 300 es
|
|
2016
|
+
#define SHADER_NAME fast-text-layer-fragment-shader
|
|
2017
|
+
|
|
2018
|
+
precision highp float;
|
|
2019
|
+
|
|
2020
|
+
uniform sampler2D fontAtlasTexture;
|
|
2021
|
+
|
|
2022
|
+
in vec4 vColor;
|
|
2023
|
+
in vec2 vTextureCoords;
|
|
2024
|
+
in vec2 uv;
|
|
2025
|
+
|
|
2026
|
+
out vec4 fragColor;
|
|
2027
|
+
|
|
2028
|
+
void main(void) {
|
|
2029
|
+
geometry.uv = uv;
|
|
2030
|
+
|
|
2031
|
+
float alpha = texture(fontAtlasTexture, vTextureCoords).a;
|
|
2032
|
+
if (fastText.sdfEnabled) {
|
|
2033
|
+
alpha = smoothstep(fastText.sdfBuffer - fastText.sdfGamma, fastText.sdfBuffer + fastText.sdfGamma, alpha);
|
|
2034
|
+
}
|
|
2035
|
+
float outputAlpha = alpha * vColor.a;
|
|
2036
|
+
|
|
2037
|
+
if (outputAlpha < fastText.alphaCutoff) {
|
|
2038
|
+
discard;
|
|
2039
|
+
}
|
|
2040
|
+
|
|
2041
|
+
fragColor = vec4(vColor.rgb, outputAlpha * layer.opacity);
|
|
2042
|
+
|
|
2043
|
+
DECKGL_FILTER_COLOR(fragColor, geometry);
|
|
2044
|
+
}
|
|
2045
|
+
`;
|
|
2046
|
+
function getFastTextLayoutSourceSignature(props) {
|
|
2047
|
+
const textUtf8ColumnSignature = getFastTextUtf8ColumnSourceSignature(props.textUtf8Column);
|
|
2048
|
+
return {
|
|
2049
|
+
dataRowCount: getFastTextDataRowCount(props.data),
|
|
2050
|
+
hasTextUtf8Accessor: Boolean(props.getTextUtf8),
|
|
2051
|
+
textUtf8ColumnRowCount: textUtf8ColumnSignature.rowCount,
|
|
2052
|
+
textUtf8ColumnChunkCount: textUtf8ColumnSignature.chunkCount,
|
|
2053
|
+
textUtf8ColumnOffsetCount: textUtf8ColumnSignature.offsetCount,
|
|
2054
|
+
textUtf8ColumnValueByteLength: textUtf8ColumnSignature.valueByteLength
|
|
2055
|
+
};
|
|
2056
|
+
}
|
|
2057
|
+
function areFastTextLayoutSourceSignaturesEqual(signature, oldSignature) {
|
|
2058
|
+
return signature.dataRowCount === oldSignature.dataRowCount && signature.hasTextUtf8Accessor === oldSignature.hasTextUtf8Accessor && signature.textUtf8ColumnRowCount === oldSignature.textUtf8ColumnRowCount && signature.textUtf8ColumnChunkCount === oldSignature.textUtf8ColumnChunkCount && signature.textUtf8ColumnOffsetCount === oldSignature.textUtf8ColumnOffsetCount && signature.textUtf8ColumnValueByteLength === oldSignature.textUtf8ColumnValueByteLength;
|
|
2059
|
+
}
|
|
2060
|
+
function getFastTextDataRowCount(data) {
|
|
2061
|
+
const arrayLikeLength = data.length;
|
|
2062
|
+
if (typeof arrayLikeLength === "number") {
|
|
2063
|
+
return arrayLikeLength;
|
|
2064
|
+
}
|
|
2065
|
+
const tableLikeNumRows = data.numRows;
|
|
2066
|
+
if (typeof tableLikeNumRows === "number") {
|
|
2067
|
+
return tableLikeNumRows;
|
|
2068
|
+
}
|
|
2069
|
+
const { iterable } = (0, import_core2.createIterable)(data);
|
|
2070
|
+
let rowCount = 0;
|
|
2071
|
+
for (const _object of iterable) {
|
|
2072
|
+
rowCount++;
|
|
2073
|
+
}
|
|
2074
|
+
return rowCount;
|
|
2075
|
+
}
|
|
2076
|
+
function getFastTextUtf8ColumnSourceSignature(textUtf8Column) {
|
|
2077
|
+
if (!textUtf8Column) {
|
|
2078
|
+
return { rowCount: 0, chunkCount: 0, offsetCount: 0, valueByteLength: 0 };
|
|
2079
|
+
}
|
|
2080
|
+
const source = normalizeFastTextUtf8ColumnForComparison(textUtf8Column);
|
|
2081
|
+
if (!source) {
|
|
2082
|
+
return { rowCount: -1, chunkCount: -1, offsetCount: -1, valueByteLength: -1 };
|
|
2083
|
+
}
|
|
2084
|
+
let offsetCount = 0;
|
|
2085
|
+
let valueByteLength = 0;
|
|
2086
|
+
for (const chunk of source.chunks) {
|
|
2087
|
+
offsetCount += chunk.valueOffsets.length;
|
|
2088
|
+
valueByteLength += chunk.values.byteLength;
|
|
2089
|
+
}
|
|
2090
|
+
return {
|
|
2091
|
+
rowCount: source.rowCount,
|
|
2092
|
+
chunkCount: source.chunks.length,
|
|
2093
|
+
offsetCount,
|
|
2094
|
+
valueByteLength
|
|
2095
|
+
};
|
|
2096
|
+
}
|
|
2097
|
+
function shouldRebuildFastText(layerParams) {
|
|
2098
|
+
const { props, oldProps, changeFlags } = layerParams;
|
|
2099
|
+
const updateTriggersChanged = changeFlags.updateTriggersChanged;
|
|
2100
|
+
return Boolean(changeFlags.dataChanged) || didFastTextAccessorPropChange(props.getText, oldProps.getText) || !areFastTextUtf8ColumnsEqual(props.textUtf8Column, oldProps.textUtf8Column) || didFastTextAccessorPropChange(props.getTextUtf8Row, oldProps.getTextUtf8Row) || didFastTextAccessorPropChange(props.getTextUtf8, oldProps.getTextUtf8) || props.singleLine !== oldProps.singleLine || props.textAnchor !== oldProps.textAnchor || props.alignmentBaseline !== oldProps.alignmentBaseline || props.characterSet !== oldProps.characterSet || props.fontFamily !== oldProps.fontFamily || props.fontWeight !== oldProps.fontWeight || props.lineHeight !== oldProps.lineHeight || props.fontSettings !== oldProps.fontSettings || props.characterMapping !== oldProps.characterMapping || props.fontAtlas !== oldProps.fontAtlas || Boolean(updateTriggersChanged && (updateTriggersChanged.all || updateTriggersChanged.getText || updateTriggersChanged.getTextUtf8 || updateTriggersChanged.getTextUtf8Row));
|
|
2101
|
+
}
|
|
2102
|
+
function getFastTextDynamicUpdate(layerParams) {
|
|
2103
|
+
const { props, oldProps, changeFlags } = layerParams;
|
|
2104
|
+
const updateTriggersChanged = changeFlags.updateTriggersChanged;
|
|
2105
|
+
const positions = didFastTextAccessorPropChange(props.getPosition, oldProps.getPosition) || Boolean(updateTriggersChanged && updateTriggersChanged.getPosition);
|
|
2106
|
+
const colors = didFastTextAccessorPropChange(props.getColor, oldProps.getColor) || Boolean(updateTriggersChanged && updateTriggersChanged.getColor);
|
|
2107
|
+
const clipRects = didFastTextAccessorPropChange(props.getClipRect, oldProps.getClipRect) || Boolean(updateTriggersChanged && updateTriggersChanged.getClipRect);
|
|
2108
|
+
if (!positions && !colors && !clipRects) {
|
|
2109
|
+
return null;
|
|
2110
|
+
}
|
|
2111
|
+
return { positions, colors, clipRects };
|
|
2112
|
+
}
|
|
2113
|
+
function areFastTextUtf8ColumnsEqual(textUtf8Column, oldTextUtf8Column) {
|
|
2114
|
+
if (textUtf8Column === oldTextUtf8Column) {
|
|
2115
|
+
return true;
|
|
2116
|
+
}
|
|
2117
|
+
if (!textUtf8Column || !oldTextUtf8Column) {
|
|
2118
|
+
return false;
|
|
2119
|
+
}
|
|
2120
|
+
const source = normalizeFastTextUtf8ColumnForComparison(textUtf8Column);
|
|
2121
|
+
const oldSource = normalizeFastTextUtf8ColumnForComparison(oldTextUtf8Column);
|
|
2122
|
+
if (!source || !oldSource || source.rowCount !== oldSource.rowCount) {
|
|
2123
|
+
return false;
|
|
2124
|
+
}
|
|
2125
|
+
if (source.chunks.length !== oldSource.chunks.length) {
|
|
2126
|
+
return false;
|
|
2127
|
+
}
|
|
2128
|
+
for (let index = 0; index < source.chunks.length; index += 1) {
|
|
2129
|
+
const chunk = source.chunks[index];
|
|
2130
|
+
const oldChunk = oldSource.chunks[index];
|
|
2131
|
+
if (chunk.rowOffset !== oldChunk.rowOffset || chunk.rowCount !== oldChunk.rowCount || chunk.valueOffsetIndex !== oldChunk.valueOffsetIndex || chunk.valueOffsets !== oldChunk.valueOffsets || chunk.values !== oldChunk.values) {
|
|
2132
|
+
return false;
|
|
2133
|
+
}
|
|
2134
|
+
}
|
|
2135
|
+
return true;
|
|
2136
|
+
}
|
|
2137
|
+
function normalizeFastTextUtf8ColumnForComparison(textUtf8Column) {
|
|
2138
|
+
return isFastTextUtf8ColumnSource2(textUtf8Column) ? textUtf8Column : buildFastTextUtf8ColumnSource(textUtf8Column);
|
|
2139
|
+
}
|
|
2140
|
+
function isFastTextUtf8ColumnSource2(textUtf8Column) {
|
|
2141
|
+
return "rowCount" in textUtf8Column && "chunks" in textUtf8Column;
|
|
2142
|
+
}
|
|
2143
|
+
function didFastTextAccessorPropChange(accessor, oldAccessor) {
|
|
2144
|
+
if (typeof oldAccessor === "function") {
|
|
2145
|
+
return false;
|
|
2146
|
+
}
|
|
2147
|
+
if (typeof accessor === "function") {
|
|
2148
|
+
return true;
|
|
2149
|
+
}
|
|
2150
|
+
return !areFastTextAccessorConstantsEqual(accessor, oldAccessor);
|
|
2151
|
+
}
|
|
2152
|
+
function areFastTextAccessorConstantsEqual(accessor, oldAccessor) {
|
|
2153
|
+
if (accessor === oldAccessor) {
|
|
2154
|
+
return true;
|
|
2155
|
+
}
|
|
2156
|
+
if (!Array.isArray(accessor) || !Array.isArray(oldAccessor)) {
|
|
2157
|
+
return false;
|
|
2158
|
+
}
|
|
2159
|
+
if (accessor.length !== oldAccessor.length) {
|
|
2160
|
+
return false;
|
|
2161
|
+
}
|
|
2162
|
+
for (let index = 0; index < accessor.length; index += 1) {
|
|
2163
|
+
if (accessor[index] !== oldAccessor[index]) {
|
|
2164
|
+
return false;
|
|
2165
|
+
}
|
|
2166
|
+
}
|
|
2167
|
+
return true;
|
|
2168
|
+
}
|
|
2169
|
+
function logFastTextAttributeBuildProbe(params) {
|
|
2170
|
+
getFastTextProbeLog().probe(0, `%cFastTextLayer%c ${params.glyphStats.rowCount} rows in ${formatFastTextDurationMs(params.totalDurationMs)} ${params.layerId}`, FAST_TEXT_PROBE_LABEL_STYLE, "", {
|
|
2171
|
+
layerId: params.layerId,
|
|
2172
|
+
updateMode: "full",
|
|
2173
|
+
sourceMode: params.glyphStats.sourceMode,
|
|
2174
|
+
layoutMode: params.glyphStats.layoutMode,
|
|
2175
|
+
rowCount: params.glyphStats.rowCount,
|
|
2176
|
+
glyphCount: params.glyphStats.glyphCount,
|
|
2177
|
+
attributeByteLength: params.glyphStats.attributeByteLength,
|
|
2178
|
+
atlasDurationMs: params.atlasDurationMs,
|
|
2179
|
+
glyphDataDurationMs: params.glyphDataDurationMs,
|
|
2180
|
+
columnNormalizeDurationMs: params.glyphStats.columnNormalizeDurationMs,
|
|
2181
|
+
countDurationMs: params.glyphStats.countDurationMs,
|
|
2182
|
+
allocateDurationMs: params.glyphStats.allocateDurationMs,
|
|
2183
|
+
writeDurationMs: params.glyphStats.writeDurationMs,
|
|
2184
|
+
textResolveDurationMs: params.glyphStats.textResolveDurationMs,
|
|
2185
|
+
styleAccessorDurationMs: params.glyphStats.styleAccessorDurationMs,
|
|
2186
|
+
layoutDurationMs: params.glyphStats.layoutDurationMs,
|
|
2187
|
+
glyphWriteDurationMs: params.glyphStats.glyphWriteDurationMs,
|
|
2188
|
+
bufferCreateDurationMs: params.bufferCreateDurationMs,
|
|
2189
|
+
totalDurationMs: params.totalDurationMs
|
|
2190
|
+
})();
|
|
2191
|
+
}
|
|
2192
|
+
function logFastTextDynamicAttributeUpdateProbe(params) {
|
|
2193
|
+
getFastTextProbeLog().probe(0, `%cFastTextLayer%c dynamic ${params.dynamicStats.rowCount} rows in ${formatFastTextDurationMs(params.totalDurationMs)} ${params.layerId}`, FAST_TEXT_PROBE_LABEL_STYLE, "", {
|
|
2194
|
+
layerId: params.layerId,
|
|
2195
|
+
updateMode: "dynamic",
|
|
2196
|
+
updatePositions: params.update.positions,
|
|
2197
|
+
updateColors: params.update.colors,
|
|
2198
|
+
updateClipRects: params.update.clipRects,
|
|
2199
|
+
rowCount: params.dynamicStats.rowCount,
|
|
2200
|
+
glyphCount: params.dynamicStats.glyphCount,
|
|
2201
|
+
attributeByteLength: params.dynamicStats.attributeByteLength,
|
|
2202
|
+
positionAccessorDurationMs: params.dynamicStats.positionAccessorDurationMs,
|
|
2203
|
+
colorAccessorDurationMs: params.dynamicStats.colorAccessorDurationMs,
|
|
2204
|
+
clipRectAccessorDurationMs: params.dynamicStats.clipRectAccessorDurationMs,
|
|
2205
|
+
writeDurationMs: params.dynamicStats.writeDurationMs,
|
|
2206
|
+
bufferUploadDurationMs: params.bufferUploadDurationMs,
|
|
2207
|
+
totalDurationMs: params.totalDurationMs
|
|
2208
|
+
})();
|
|
2209
|
+
}
|
|
2210
|
+
function formatFastTextDurationMs(durationMs) {
|
|
2211
|
+
return `${durationMs.toFixed(durationMs < 10 ? 2 : 1)}ms`;
|
|
2212
|
+
}
|
|
2213
|
+
function getFastTextProbeLog() {
|
|
2214
|
+
var _a;
|
|
2215
|
+
const globalLog = (_a = globalThis.traceLayers) == null ? void 0 : _a.log;
|
|
2216
|
+
return globalLog ?? fastTextLog;
|
|
2217
|
+
}
|
|
2218
|
+
function createFastTextBuffers(device, glyphData) {
|
|
2219
|
+
const { attributes } = glyphData;
|
|
2220
|
+
return {
|
|
2221
|
+
instanceGlyphData: createVertexBuffer(device, attributes.instanceGlyphData, new Uint8Array(FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE)),
|
|
2222
|
+
instancePositions: createVertexBuffer(device, attributes.instancePositions, new Float32Array(2))
|
|
2223
|
+
};
|
|
2224
|
+
}
|
|
2225
|
+
function createVertexBuffer(device, data, fallback) {
|
|
2226
|
+
return device.createBuffer({
|
|
2227
|
+
data: data.byteLength > 0 ? data : fallback,
|
|
2228
|
+
usage: import_core3.Buffer.VERTEX | import_core3.Buffer.COPY_DST
|
|
2229
|
+
});
|
|
2230
|
+
}
|
|
2231
|
+
function destroyFastTextBuffers(buffers) {
|
|
2232
|
+
if (!buffers) {
|
|
2233
|
+
return;
|
|
2234
|
+
}
|
|
2235
|
+
for (const buffer of Object.values(buffers)) {
|
|
2236
|
+
buffer.destroy();
|
|
2237
|
+
}
|
|
2238
|
+
}
|
|
2239
|
+
function createFastTextAtlasTexture(device, atlas) {
|
|
2240
|
+
const texture = device.createTexture({
|
|
2241
|
+
format: "rgba8unorm",
|
|
2242
|
+
data: null,
|
|
2243
|
+
width: atlas.width,
|
|
2244
|
+
height: atlas.height,
|
|
2245
|
+
sampler: DEFAULT_SAMPLER_PARAMETERS,
|
|
2246
|
+
mipLevels: device.getMipLevelCount(atlas.width, atlas.height)
|
|
2247
|
+
});
|
|
2248
|
+
texture.copyExternalImage({
|
|
2249
|
+
image: atlas.data,
|
|
2250
|
+
width: atlas.width,
|
|
2251
|
+
height: atlas.height
|
|
2252
|
+
});
|
|
2253
|
+
regenerateMipmaps(texture);
|
|
2254
|
+
return texture;
|
|
2255
|
+
}
|
|
2256
|
+
function regenerateMipmaps(texture) {
|
|
2257
|
+
if (texture.device.type === "webgl") {
|
|
2258
|
+
texture.generateMipmapsWebGL();
|
|
2259
|
+
} else if (texture.device.type === "webgpu") {
|
|
2260
|
+
texture.device.generateMipmapsWebGPU(texture);
|
|
2261
|
+
}
|
|
2262
|
+
}
|
|
2263
|
+
function getFastTextContentAlignUniform(mode) {
|
|
2264
|
+
return FAST_TEXT_CONTENT_ALIGN[mode];
|
|
2265
|
+
}
|
|
2266
|
+
|
|
2267
|
+
// dist/layers/time-delta-layer.js
|
|
2268
|
+
var TimeDeltaLayer = class extends import_core4.CompositeLayer {
|
|
2269
|
+
renderLayers() {
|
|
2270
|
+
var _a, _b;
|
|
2271
|
+
const { startTimeMs, endTimeMs, color: color3 = [0, 0, 0, 255], yMin, yMax } = this.props;
|
|
2272
|
+
if (!this.props.header) {
|
|
2273
|
+
const timeLines2 = [
|
|
2274
|
+
{
|
|
2275
|
+
sourcePosition: [startTimeMs, yMin],
|
|
2276
|
+
targetPosition: [startTimeMs, yMax]
|
|
2277
|
+
},
|
|
2278
|
+
{
|
|
2279
|
+
sourcePosition: [endTimeMs, yMin],
|
|
2280
|
+
targetPosition: [endTimeMs, yMax]
|
|
2281
|
+
}
|
|
2282
|
+
];
|
|
2283
|
+
return [
|
|
2284
|
+
// Interval end lines
|
|
2285
|
+
new import_layers.LineLayer({
|
|
2286
|
+
id: "time-delta-side-bars",
|
|
2287
|
+
data: timeLines2,
|
|
2288
|
+
getSourcePosition: (d) => d.sourcePosition,
|
|
2289
|
+
getTargetPosition: (d) => d.targetPosition,
|
|
2290
|
+
getColor: color3,
|
|
2291
|
+
getWidth: 4,
|
|
2292
|
+
widthUnits: "pixels"
|
|
2293
|
+
})
|
|
2294
|
+
];
|
|
2295
|
+
}
|
|
2296
|
+
const { y, fontSize, fontFamily, fontSettings, fontWeight } = this.props;
|
|
2297
|
+
const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, y - 10];
|
|
2298
|
+
const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
|
|
2299
|
+
const timeDeltaLabel = formatTimeMs(timeDeltaMs, { space: false });
|
|
2300
|
+
const labelData = [{ position: timeDeltaPosition, text: timeDeltaLabel }];
|
|
2301
|
+
const timeLines = [
|
|
2302
|
+
{
|
|
2303
|
+
sourcePosition: [startTimeMs, y],
|
|
2304
|
+
targetPosition: [startTimeMs, y - 7]
|
|
2305
|
+
},
|
|
2306
|
+
{
|
|
2307
|
+
sourcePosition: [endTimeMs, y],
|
|
2308
|
+
targetPosition: [endTimeMs, y - 7]
|
|
2309
|
+
}
|
|
2310
|
+
];
|
|
2311
|
+
return [
|
|
2312
|
+
// Interval end lines
|
|
2313
|
+
new import_layers.LineLayer({
|
|
2314
|
+
id: "header-time-delta-side-bars",
|
|
2315
|
+
data: timeLines,
|
|
2316
|
+
getSourcePosition: (d) => d.sourcePosition,
|
|
2317
|
+
getTargetPosition: (d) => d.targetPosition,
|
|
2318
|
+
getColor: color3,
|
|
2319
|
+
getWidth: 4,
|
|
2320
|
+
widthUnits: "pixels"
|
|
2321
|
+
}),
|
|
2322
|
+
// Interval center
|
|
2323
|
+
new import_layers.LineLayer({
|
|
2324
|
+
id: "header-time-delta-dotted-line",
|
|
2325
|
+
data: [
|
|
2326
|
+
{
|
|
2327
|
+
sourcePosition: [startTimeMs, y - 7],
|
|
2328
|
+
targetPosition: [endTimeMs, y - 7]
|
|
2329
|
+
}
|
|
2330
|
+
],
|
|
2331
|
+
getSourcePosition: (d) => d.sourcePosition,
|
|
2332
|
+
getTargetPosition: (d) => d.targetPosition,
|
|
2333
|
+
getColor: color3,
|
|
2334
|
+
getWidth: 1,
|
|
2335
|
+
widthUnits: "pixels"
|
|
2336
|
+
}),
|
|
2337
|
+
// Label
|
|
2338
|
+
((_b = (_a = this.context) == null ? void 0 : _a.device) == null ? void 0 : _b.type) === "webgpu" ? new FastTextLayer({
|
|
2339
|
+
id: "header-time-delta-label",
|
|
2340
|
+
data: labelData,
|
|
2341
|
+
getPosition: (d) => d.position,
|
|
2342
|
+
getText: (d) => d.text,
|
|
2343
|
+
characterSet: "-0123456789.dhms\xB5",
|
|
2344
|
+
size: fontSize,
|
|
2345
|
+
fontFamily,
|
|
2346
|
+
fontSettings,
|
|
2347
|
+
fontWeight,
|
|
2348
|
+
getColor: color3,
|
|
2349
|
+
textAnchor: "middle",
|
|
2350
|
+
alignmentBaseline: "center"
|
|
2351
|
+
}) : new import_layers.TextLayer({
|
|
2352
|
+
id: "header-time-delta-label",
|
|
2353
|
+
data: labelData,
|
|
2354
|
+
getPosition: (d) => d.position,
|
|
2355
|
+
getText: (d) => d.text,
|
|
2356
|
+
characterSet: "-0123456789.dhms\xB5",
|
|
2357
|
+
getSize: fontSize,
|
|
2358
|
+
fontFamily,
|
|
2359
|
+
fontSettings,
|
|
2360
|
+
fontWeight,
|
|
2361
|
+
getColor: color3,
|
|
2362
|
+
getTextAnchor: "middle",
|
|
2363
|
+
getAlignmentBaseline: "center",
|
|
2364
|
+
background: true,
|
|
2365
|
+
getBackgroundColor: [255 - color3[0], 255 - color3[1], 255 - color3[2], 255],
|
|
2366
|
+
backgroundPadding: [4, 2]
|
|
2367
|
+
})
|
|
2368
|
+
];
|
|
2369
|
+
}
|
|
2370
|
+
};
|
|
2371
|
+
__publicField(TimeDeltaLayer, "layerName", "TimeDeltaLayer");
|
|
2372
|
+
__publicField(TimeDeltaLayer, "defaultProps", {
|
|
2373
|
+
header: false,
|
|
2374
|
+
minTimeMs: 0,
|
|
2375
|
+
maxTimeMs: 100,
|
|
2376
|
+
startTimeMs: 0,
|
|
2377
|
+
endTimeMs: 100,
|
|
2378
|
+
y: 0,
|
|
2379
|
+
color: [0, 0, 0, 255],
|
|
2380
|
+
unit: "timestamp",
|
|
2381
|
+
yMin: -1e6,
|
|
2382
|
+
// Should cover full viewport height in most cases
|
|
2383
|
+
yMax: 1e6,
|
|
2384
|
+
// Should cover full viewport height in most cases
|
|
2385
|
+
fontSize: 12,
|
|
2386
|
+
fontFamily: import_layers.TextLayer.defaultProps.fontFamily,
|
|
2387
|
+
fontSettings: import_layers.TextLayer.defaultProps.fontSettings,
|
|
2388
|
+
fontWeight: import_layers.TextLayer.defaultProps.fontWeight
|
|
2389
|
+
});
|
|
2390
|
+
|
|
2391
|
+
// dist/layers/animation-layer/animation-layer.js
|
|
2392
|
+
var import_core5 = require("@deck.gl/core");
|
|
2393
|
+
|
|
2394
|
+
// dist/layers/animation-layer/animation.js
|
|
2395
|
+
var LINEAR_EASING = (t) => t;
|
|
2396
|
+
function resolveFramesGroup(group, baseStart) {
|
|
2397
|
+
if ("props" in group) {
|
|
2398
|
+
const delay2 = group.delay ?? 0;
|
|
2399
|
+
const start = baseStart + delay2;
|
|
2400
|
+
const end = start + group.duration;
|
|
2401
|
+
return {
|
|
2402
|
+
frames: [
|
|
2403
|
+
{
|
|
2404
|
+
from: void 0,
|
|
2405
|
+
to: group.props,
|
|
2406
|
+
start,
|
|
2407
|
+
end,
|
|
2408
|
+
easing: group.easing ?? LINEAR_EASING
|
|
2409
|
+
}
|
|
2410
|
+
],
|
|
2411
|
+
duration: delay2 + group.duration
|
|
2412
|
+
};
|
|
2413
|
+
}
|
|
2414
|
+
const delay = group.delay ?? 0;
|
|
2415
|
+
const frames = [];
|
|
2416
|
+
if (group.type === "sequence") {
|
|
2417
|
+
let current = baseStart;
|
|
2418
|
+
for (let i = 0; i < group.frames.length; i += 1) {
|
|
2419
|
+
const child = group.frames[i];
|
|
2420
|
+
const childResult = resolveFramesGroup(child, current);
|
|
2421
|
+
frames.push(...childResult.frames);
|
|
2422
|
+
current += childResult.duration;
|
|
2423
|
+
if (i < group.frames.length - 1)
|
|
2424
|
+
current += delay;
|
|
2425
|
+
}
|
|
2426
|
+
return { frames, duration: Math.max(0, current - baseStart) };
|
|
2427
|
+
}
|
|
2428
|
+
if (group.type === "concurrence") {
|
|
2429
|
+
const start = baseStart + delay;
|
|
2430
|
+
let maxDuration = 0;
|
|
2431
|
+
for (const child of group.frames) {
|
|
2432
|
+
const childResult = resolveFramesGroup(child, start);
|
|
2433
|
+
frames.push(...childResult.frames);
|
|
2434
|
+
if (childResult.duration > maxDuration)
|
|
2435
|
+
maxDuration = childResult.duration;
|
|
2436
|
+
}
|
|
2437
|
+
return { frames, duration: delay + maxDuration };
|
|
2438
|
+
}
|
|
2439
|
+
let maxEnd = baseStart;
|
|
2440
|
+
for (let i = 0; i < group.frames.length; i += 1) {
|
|
2441
|
+
const child = group.frames[i];
|
|
2442
|
+
const childResult = resolveFramesGroup(child, baseStart + i * delay);
|
|
2443
|
+
frames.push(...childResult.frames);
|
|
2444
|
+
const childEnd = baseStart + i * delay + childResult.duration;
|
|
2445
|
+
if (childEnd > maxEnd)
|
|
2446
|
+
maxEnd = childEnd;
|
|
2447
|
+
}
|
|
2448
|
+
frames.sort((f1, f2) => f1.end - f2.end);
|
|
2449
|
+
return { frames, duration: Math.max(0, maxEnd - baseStart) };
|
|
2450
|
+
}
|
|
2451
|
+
function getFramesDuration(frames) {
|
|
2452
|
+
let maxEnd = 0;
|
|
2453
|
+
for (const frame of frames) {
|
|
2454
|
+
if (frame.end > maxEnd)
|
|
2455
|
+
maxEnd = frame.end;
|
|
2192
2456
|
}
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
in uvec4 instanceGlyphFrames;
|
|
2208
|
-
in ivec4 instanceClipRects;
|
|
2209
|
-
in vec4 instanceColors;
|
|
2210
|
-
|
|
2211
|
-
out vec4 vColor;
|
|
2212
|
-
out vec2 vTextureCoords;
|
|
2213
|
-
out vec2 uv;
|
|
2214
|
-
|
|
2215
|
-
float fastTextGetAlignmentPixelOffset(float anchor, float extent, float clipStart, float clipEnd, int mode) {
|
|
2216
|
-
if (clipEnd < clipStart) {
|
|
2217
|
-
return 0.0;
|
|
2457
|
+
return maxEnd;
|
|
2458
|
+
}
|
|
2459
|
+
function reverseResolvedFrames(frames) {
|
|
2460
|
+
const duration = getFramesDuration(frames);
|
|
2461
|
+
const reversed = [];
|
|
2462
|
+
for (let i = frames.length - 1; i >= 0; i -= 1) {
|
|
2463
|
+
const frame = frames[i];
|
|
2464
|
+
reversed.push({
|
|
2465
|
+
from: void 0,
|
|
2466
|
+
to: frame.from ?? frame.to,
|
|
2467
|
+
start: duration - frame.end,
|
|
2468
|
+
end: duration - frame.start,
|
|
2469
|
+
easing: frame.easing
|
|
2470
|
+
});
|
|
2218
2471
|
}
|
|
2219
|
-
|
|
2220
|
-
|
|
2472
|
+
return reversed;
|
|
2473
|
+
}
|
|
2474
|
+
function resolveAnimationFrames(time, opts, prevState) {
|
|
2475
|
+
const { frames, repeat = 0, repeatType = "loop", repeatDelay = 0 } = opts;
|
|
2476
|
+
if (!prevState) {
|
|
2477
|
+
const resolved = resolveFramesGroup(frames, 0);
|
|
2478
|
+
return {
|
|
2479
|
+
start: time,
|
|
2480
|
+
end: time + resolved.duration,
|
|
2481
|
+
inProgress: true,
|
|
2482
|
+
iterations: 0,
|
|
2483
|
+
frames: resolved.frames
|
|
2484
|
+
};
|
|
2221
2485
|
}
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
return visibleMin < visibleMax ? (visibleMin + visibleMax) / 2.0 - anchor : 0.0;
|
|
2486
|
+
const state = prevState;
|
|
2487
|
+
if (time < state.end) {
|
|
2488
|
+
return state;
|
|
2226
2489
|
}
|
|
2227
|
-
|
|
2228
|
-
|
|
2490
|
+
const iterationEnd = state.end;
|
|
2491
|
+
const iterations = state.iterations + 1;
|
|
2492
|
+
if (iterations > repeat) {
|
|
2493
|
+
return state;
|
|
2494
|
+
}
|
|
2495
|
+
const start = iterationEnd + repeatDelay;
|
|
2496
|
+
if (repeatType === "reverse" && iterations % 2 === 1) {
|
|
2497
|
+
const duration = state.end - state.start;
|
|
2498
|
+
return {
|
|
2499
|
+
start,
|
|
2500
|
+
end: start + duration,
|
|
2501
|
+
iterations,
|
|
2502
|
+
frames: reverseResolvedFrames(state.frames),
|
|
2503
|
+
inProgress: true
|
|
2504
|
+
};
|
|
2505
|
+
} else {
|
|
2506
|
+
const resolved = resolveFramesGroup(frames, 0);
|
|
2507
|
+
return {
|
|
2508
|
+
start,
|
|
2509
|
+
end: start + resolved.duration,
|
|
2510
|
+
inProgress: true,
|
|
2511
|
+
iterations,
|
|
2512
|
+
frames: resolved.frames
|
|
2513
|
+
};
|
|
2229
2514
|
}
|
|
2230
|
-
return 0.0;
|
|
2231
2515
|
}
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
if (
|
|
2238
|
-
|
|
2516
|
+
function interpolateProp(from, to, ratio) {
|
|
2517
|
+
if (from === void 0 || to === void 0)
|
|
2518
|
+
return to;
|
|
2519
|
+
if (typeof to === "string" || typeof to === "function")
|
|
2520
|
+
return to;
|
|
2521
|
+
if (typeof to === "number" && typeof from === "number") {
|
|
2522
|
+
return from + (to - from) * ratio;
|
|
2239
2523
|
}
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
fastText.contentAlign.x
|
|
2250
|
-
),
|
|
2251
|
-
-fastTextGetAlignmentPixelOffset(
|
|
2252
|
-
anchorPosScreen.y,
|
|
2253
|
-
viewportPixels.y,
|
|
2254
|
-
-clipXY.y - clipWH.y,
|
|
2255
|
-
-clipXY.y,
|
|
2256
|
-
fastText.contentAlign.y
|
|
2257
|
-
)
|
|
2258
|
-
);
|
|
2259
|
-
pixelOffset += scrollPixels;
|
|
2260
|
-
gl_Position.xy += project_pixel_size_to_clipspace(scrollPixels);
|
|
2524
|
+
if (Array.isArray(to) && Array.isArray(from)) {
|
|
2525
|
+
const len = to.length;
|
|
2526
|
+
const out = new Array(len);
|
|
2527
|
+
for (let i = 0; i < len; i += 1) {
|
|
2528
|
+
const toValue = to[i];
|
|
2529
|
+
const fromValue = from[i];
|
|
2530
|
+
out[i] = typeof toValue === "number" && typeof fromValue === "number" ? fromValue + (toValue - fromValue) * ratio : toValue;
|
|
2531
|
+
}
|
|
2532
|
+
return out;
|
|
2261
2533
|
}
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2534
|
+
return to;
|
|
2535
|
+
}
|
|
2536
|
+
function resolveProps(layer, frames, timeSinceStart) {
|
|
2537
|
+
if (timeSinceStart < 0 || frames.length === 0)
|
|
2538
|
+
return {};
|
|
2539
|
+
const baseProps = layer.props;
|
|
2540
|
+
const nextProps = {};
|
|
2541
|
+
let transitions = baseProps.transitions ? { ...baseProps.transitions } : void 0;
|
|
2542
|
+
const updateTriggers = { ...baseProps.updateTriggers };
|
|
2543
|
+
const getPropValue = (key) => Object.prototype.hasOwnProperty.call(nextProps, key) ? nextProps[key] : baseProps[key];
|
|
2544
|
+
for (const frame of frames) {
|
|
2545
|
+
if (timeSinceStart < frame.start)
|
|
2546
|
+
continue;
|
|
2547
|
+
const duration = frame.end - frame.start;
|
|
2548
|
+
if (duration <= 0) {
|
|
2549
|
+
Object.assign(nextProps, frame.to);
|
|
2550
|
+
continue;
|
|
2551
|
+
}
|
|
2552
|
+
if (frame.from === void 0) {
|
|
2553
|
+
const from = {};
|
|
2554
|
+
for (const key of Object.keys(frame.to)) {
|
|
2555
|
+
from[key] = getPropValue(key);
|
|
2556
|
+
}
|
|
2557
|
+
frame.from = from;
|
|
2558
|
+
}
|
|
2559
|
+
if (timeSinceStart >= frame.end) {
|
|
2560
|
+
Object.assign(nextProps, frame.to);
|
|
2561
|
+
continue;
|
|
2562
|
+
}
|
|
2563
|
+
const t = frame.easing((timeSinceStart - frame.start) / duration);
|
|
2564
|
+
for (const key of Object.keys(frame.to)) {
|
|
2565
|
+
const toValue = frame.to[key];
|
|
2566
|
+
const fromValue = frame.from[key];
|
|
2567
|
+
if (String(key).startsWith("get") && (typeof fromValue === "function" || typeof toValue === "function")) {
|
|
2568
|
+
nextProps[key] = toValue;
|
|
2569
|
+
updateTriggers[key] = { ...updateTriggers[key], animation: toValue };
|
|
2570
|
+
transitions ??= {};
|
|
2571
|
+
transitions[key] = {
|
|
2572
|
+
duration: frame.end - frame.start,
|
|
2573
|
+
easing: frame.easing
|
|
2574
|
+
};
|
|
2575
|
+
} else {
|
|
2576
|
+
const value = interpolateProp(fromValue, toValue, t);
|
|
2577
|
+
if (value !== void 0) {
|
|
2578
|
+
nextProps[key] = value;
|
|
2579
|
+
}
|
|
2272
2580
|
}
|
|
2273
2581
|
}
|
|
2274
2582
|
}
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2583
|
+
return nextProps;
|
|
2584
|
+
}
|
|
2585
|
+
|
|
2586
|
+
// dist/layers/animation-layer/animation-layer.js
|
|
2587
|
+
var AnimationLayer = class extends import_core5.CompositeLayer {
|
|
2588
|
+
state = {};
|
|
2589
|
+
// Hack - hijacking another flag to force updates
|
|
2590
|
+
hasUniformTransition() {
|
|
2591
|
+
if (!this.props.visible)
|
|
2592
|
+
return false;
|
|
2593
|
+
const { animationState } = this.state;
|
|
2594
|
+
return !animationState || animationState.inProgress;
|
|
2595
|
+
}
|
|
2596
|
+
updateState() {
|
|
2597
|
+
if (!this.props.visible) {
|
|
2598
|
+
this.state.animationState = void 0;
|
|
2599
|
+
this.state.layer = void 0;
|
|
2600
|
+
return;
|
|
2601
|
+
}
|
|
2602
|
+
const time = this.context.timeline.getTime();
|
|
2603
|
+
const baseLayer = this.props.layer.clone({
|
|
2604
|
+
parameters: {
|
|
2605
|
+
...this.props.layer.props.parameters,
|
|
2606
|
+
...this.props.parameters
|
|
2607
|
+
}
|
|
2608
|
+
});
|
|
2609
|
+
let { animationState } = this.state;
|
|
2610
|
+
let layer = baseLayer;
|
|
2611
|
+
while (true) {
|
|
2612
|
+
if (animationState == null ? void 0 : animationState.inProgress) {
|
|
2613
|
+
const nextProps = resolveProps(layer, animationState.frames, time - animationState.start);
|
|
2614
|
+
nextProps["id"] = `${this.id}-animation-layer`;
|
|
2615
|
+
layer = baseLayer.clone(nextProps);
|
|
2616
|
+
animationState.inProgress = time < animationState.end;
|
|
2617
|
+
this.setNeedsRedraw();
|
|
2284
2618
|
}
|
|
2619
|
+
const nextState = resolveAnimationFrames(time, this.props, animationState);
|
|
2620
|
+
if (nextState === animationState)
|
|
2621
|
+
break;
|
|
2622
|
+
animationState = nextState;
|
|
2285
2623
|
}
|
|
2624
|
+
this.state.animationState = animationState;
|
|
2625
|
+
this.state.layer = layer;
|
|
2286
2626
|
}
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
void main(void) {
|
|
2290
|
-
vec3 worldPosition = vec3(instancePositions, 0.0);
|
|
2291
|
-
geometry.worldPosition = worldPosition;
|
|
2292
|
-
geometry.uv = positions;
|
|
2293
|
-
uv = positions;
|
|
2294
|
-
|
|
2295
|
-
vec4 glyphFrame = vec4(instanceGlyphFrames);
|
|
2296
|
-
vec2 glyphSize = glyphFrame.zw;
|
|
2297
|
-
float sizePixels = clamp(
|
|
2298
|
-
project_size_to_pixel(fastText.size * fastText.sizeScale, fastText.sizeUnits),
|
|
2299
|
-
fastText.sizeMinPixels,
|
|
2300
|
-
fastText.sizeMaxPixels
|
|
2301
|
-
);
|
|
2302
|
-
float instanceScale = fastText.fontSize == 0.0 ? 0.0 : sizePixels / fastText.fontSize;
|
|
2303
|
-
vec2 pixelOffset = vec2(instanceGlyphOffsets) + positions * glyphSize;
|
|
2304
|
-
pixelOffset = pixelOffset * instanceScale + fastText.pixelOffset;
|
|
2305
|
-
pixelOffset.y *= -1.0;
|
|
2306
|
-
|
|
2307
|
-
vec2 anchorPosScreen;
|
|
2308
|
-
if (fastText.billboard) {
|
|
2309
|
-
gl_Position = project_position_to_clipspace(
|
|
2310
|
-
worldPosition,
|
|
2311
|
-
vec3(0.0),
|
|
2312
|
-
vec3(0.0),
|
|
2313
|
-
geometry.position
|
|
2314
|
-
);
|
|
2315
|
-
anchorPosScreen = gl_Position.xy / gl_Position.w;
|
|
2316
|
-
DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
|
|
2317
|
-
vec3 offset = vec3(pixelOffset, 0.0);
|
|
2318
|
-
DECKGL_FILTER_SIZE(offset, geometry);
|
|
2319
|
-
gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
|
|
2320
|
-
} else {
|
|
2321
|
-
vec3 offsetCommon = vec3(project_pixel_size(pixelOffset), 0.0);
|
|
2322
|
-
if (fastText.flipY) {
|
|
2323
|
-
offsetCommon.y *= -1.0;
|
|
2324
|
-
}
|
|
2325
|
-
DECKGL_FILTER_SIZE(offsetCommon, geometry);
|
|
2326
|
-
vec4 anchorPosition = project_position_to_clipspace(worldPosition, vec3(0.0), vec3(0.0));
|
|
2327
|
-
anchorPosScreen = anchorPosition.xy / anchorPosition.w;
|
|
2328
|
-
gl_Position = project_position_to_clipspace(
|
|
2329
|
-
worldPosition,
|
|
2330
|
-
vec3(0.0),
|
|
2331
|
-
offsetCommon,
|
|
2332
|
-
geometry.position
|
|
2333
|
-
);
|
|
2334
|
-
DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
|
|
2627
|
+
renderLayers() {
|
|
2628
|
+
return this.state.layer;
|
|
2335
2629
|
}
|
|
2630
|
+
};
|
|
2631
|
+
__publicField(AnimationLayer, "layerName", "AnimationLayer");
|
|
2336
2632
|
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2633
|
+
// dist/layers/block-layer/block-layer.js
|
|
2634
|
+
var import_core6 = require("@deck.gl/core");
|
|
2635
|
+
var import_engine2 = require("@luma.gl/engine");
|
|
2340
2636
|
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
}
|
|
2345
|
-
`;
|
|
2346
|
-
var FAST_TEXT_FS = `#version 300 es
|
|
2347
|
-
#define SHADER_NAME fast-text-layer-fragment-shader
|
|
2637
|
+
// dist/layers/block-layer/block-layer-fragment.glsl.js
|
|
2638
|
+
var block_layer_fragment_glsl_default = `#version 300 es
|
|
2639
|
+
#define SHADER_NAME block-layer-fragment-shader
|
|
2348
2640
|
|
|
2349
2641
|
precision highp float;
|
|
2350
2642
|
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
in vec4
|
|
2354
|
-
in
|
|
2355
|
-
in vec2
|
|
2643
|
+
in vec2 unitPosition;
|
|
2644
|
+
flat in vec4 vFillColor;
|
|
2645
|
+
flat in vec4 vLineColor;
|
|
2646
|
+
flat in float lineWidth;
|
|
2647
|
+
flat in vec2 size;
|
|
2356
2648
|
|
|
2357
2649
|
out vec4 fragColor;
|
|
2358
2650
|
|
|
2359
2651
|
void main(void) {
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2652
|
+
if (lineWidth > 0.0) {
|
|
2653
|
+
vec2 relPosition = unitPosition * size;
|
|
2654
|
+
float distToBorder =
|
|
2655
|
+
min(
|
|
2656
|
+
min(
|
|
2657
|
+
min(relPosition.x, relPosition.y),
|
|
2658
|
+
size.x - relPosition.x
|
|
2659
|
+
),
|
|
2660
|
+
size.y - relPosition.y
|
|
2661
|
+
);
|
|
2662
|
+
if (distToBorder <= lineWidth) {
|
|
2663
|
+
fragColor = vLineColor;
|
|
2664
|
+
} else {
|
|
2665
|
+
fragColor = vFillColor;
|
|
2666
|
+
}
|
|
2667
|
+
} else {
|
|
2668
|
+
fragColor = vFillColor;
|
|
2370
2669
|
}
|
|
2371
2670
|
|
|
2372
|
-
fragColor = vec4(vColor.rgb, outputAlpha * layer.opacity);
|
|
2373
|
-
|
|
2374
2671
|
DECKGL_FILTER_COLOR(fragColor, geometry);
|
|
2375
2672
|
}
|
|
2376
2673
|
`;
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
return tableLikeNumRows;
|
|
2674
|
+
|
|
2675
|
+
// dist/layers/block-layer/block-layer-uniforms.js
|
|
2676
|
+
var glslUniformBlock = `uniform blockLayerUniforms {
|
|
2677
|
+
highp int sizeUnits;
|
|
2678
|
+
highp float widthMinPixels;
|
|
2679
|
+
highp float heightMinPixels;
|
|
2680
|
+
highp float sizeMaxPixels;
|
|
2681
|
+
highp int lineWidthUnits;
|
|
2682
|
+
} blockLayer;
|
|
2683
|
+
`;
|
|
2684
|
+
var blockUniforms = {
|
|
2685
|
+
name: "blockLayer",
|
|
2686
|
+
source: "",
|
|
2687
|
+
vs: glslUniformBlock,
|
|
2688
|
+
fs: glslUniformBlock,
|
|
2689
|
+
uniformTypes: {
|
|
2690
|
+
sizeUnits: "i32",
|
|
2691
|
+
widthMinPixels: "f32",
|
|
2692
|
+
heightMinPixels: "f32",
|
|
2693
|
+
sizeMaxPixels: "f32",
|
|
2694
|
+
lineWidthUnits: "i32"
|
|
2399
2695
|
}
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2696
|
+
};
|
|
2697
|
+
|
|
2698
|
+
// dist/layers/block-layer/block-layer-vertex.glsl.js
|
|
2699
|
+
var block_layer_vertex_glsl_default = `#version 300 es
|
|
2700
|
+
#define SHADER_NAME block-layer-vertex-shader
|
|
2701
|
+
|
|
2702
|
+
in vec3 positions;
|
|
2703
|
+
in vec3 instancePositions;
|
|
2704
|
+
in vec3 instancePositions64Low;
|
|
2705
|
+
in vec2 instanceSizes;
|
|
2706
|
+
in float instanceLineWidths;
|
|
2707
|
+
in vec4 instanceFillColors;
|
|
2708
|
+
in vec4 instanceLineColors;
|
|
2709
|
+
in vec3 instancePickingColors;
|
|
2710
|
+
|
|
2711
|
+
out vec2 unitPosition;
|
|
2712
|
+
flat out vec4 vFillColor;
|
|
2713
|
+
flat out vec4 vLineColor;
|
|
2714
|
+
flat out float lineWidth;
|
|
2715
|
+
flat out vec2 size;
|
|
2716
|
+
|
|
2717
|
+
// This needs to be added back to the project module
|
|
2718
|
+
vec2 project_size_to_pixel(vec2 size, int unit) {
|
|
2719
|
+
if (unit == UNIT_PIXELS) return size;
|
|
2720
|
+
if (unit == UNIT_COMMON && project.projectionMode != PROJECTION_MODE_IDENTITY) {
|
|
2721
|
+
return size * project.scale;
|
|
2404
2722
|
}
|
|
2405
|
-
return
|
|
2723
|
+
return project_size(size) * project.scale;
|
|
2406
2724
|
}
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
if (!source) {
|
|
2413
|
-
return { rowCount: -1, chunkCount: -1, offsetCount: -1, valueByteLength: -1 };
|
|
2414
|
-
}
|
|
2415
|
-
let offsetCount = 0;
|
|
2416
|
-
let valueByteLength = 0;
|
|
2417
|
-
for (const chunk of source.chunks) {
|
|
2418
|
-
offsetCount += chunk.valueOffsets.length;
|
|
2419
|
-
valueByteLength += chunk.values.byteLength;
|
|
2725
|
+
|
|
2726
|
+
float clamp_signed_size(float size, float minPixels, float maxPixels) {
|
|
2727
|
+
float clampedMagnitude = clamp(abs(size), minPixels, maxPixels);
|
|
2728
|
+
if (size < 0.0) {
|
|
2729
|
+
return -clampedMagnitude;
|
|
2420
2730
|
}
|
|
2421
|
-
return
|
|
2422
|
-
rowCount: source.rowCount,
|
|
2423
|
-
chunkCount: source.chunks.length,
|
|
2424
|
-
offsetCount,
|
|
2425
|
-
valueByteLength
|
|
2426
|
-
};
|
|
2427
|
-
}
|
|
2428
|
-
function shouldRebuildFastText(layerParams) {
|
|
2429
|
-
const { props, oldProps, changeFlags } = layerParams;
|
|
2430
|
-
const updateTriggersChanged = changeFlags.updateTriggersChanged;
|
|
2431
|
-
return Boolean(changeFlags.dataChanged) || didFastTextAccessorPropChange(props.getText, oldProps.getText) || !areFastTextUtf8ColumnsEqual(props.textUtf8Column, oldProps.textUtf8Column) || didFastTextAccessorPropChange(props.getTextUtf8Row, oldProps.getTextUtf8Row) || didFastTextAccessorPropChange(props.getTextUtf8, oldProps.getTextUtf8) || props.singleLine !== oldProps.singleLine || props.textAnchor !== oldProps.textAnchor || props.alignmentBaseline !== oldProps.alignmentBaseline || props.characterSet !== oldProps.characterSet || props.fontFamily !== oldProps.fontFamily || props.fontWeight !== oldProps.fontWeight || props.lineHeight !== oldProps.lineHeight || props.fontSettings !== oldProps.fontSettings || props.characterMapping !== oldProps.characterMapping || props.fontAtlas !== oldProps.fontAtlas || Boolean(updateTriggersChanged && (updateTriggersChanged.all || updateTriggersChanged.getText || updateTriggersChanged.getTextUtf8 || updateTriggersChanged.getTextUtf8Row));
|
|
2731
|
+
return clampedMagnitude;
|
|
2432
2732
|
}
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2733
|
+
|
|
2734
|
+
void main(void) {
|
|
2735
|
+
geometry.worldPosition = instancePositions;
|
|
2736
|
+
geometry.pickingColor = instancePickingColors;
|
|
2737
|
+
geometry.uv = positions.xy;
|
|
2738
|
+
|
|
2739
|
+
vec2 pixelSize = project_size_to_pixel(instanceSizes, blockLayer.sizeUnits);
|
|
2740
|
+
pixelSize.x = clamp_signed_size(pixelSize.x, blockLayer.widthMinPixels, blockLayer.sizeMaxPixels);
|
|
2741
|
+
pixelSize.y = clamp_signed_size(pixelSize.y, blockLayer.heightMinPixels, blockLayer.sizeMaxPixels);
|
|
2742
|
+
unitPosition = positions.xy;
|
|
2743
|
+
size = pixelSize;
|
|
2744
|
+
lineWidth = project_size_to_pixel(vec2(instanceLineWidths, 0.0), blockLayer.lineWidthUnits).x;
|
|
2745
|
+
|
|
2746
|
+
// Find the center of the point and add the current vertex
|
|
2747
|
+
vec3 offset = vec3(unitPosition * project_pixel_size(pixelSize), 0.0);
|
|
2748
|
+
DECKGL_FILTER_SIZE(offset, geometry);
|
|
2749
|
+
|
|
2750
|
+
gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
|
|
2751
|
+
DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
|
|
2752
|
+
|
|
2753
|
+
// Apply opacity to instance color, or return instance picking color
|
|
2754
|
+
vFillColor = vec4(instanceFillColors.rgb, instanceFillColors.a * layer.opacity);
|
|
2755
|
+
DECKGL_FILTER_COLOR(vFillColor, geometry);
|
|
2756
|
+
|
|
2757
|
+
vLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * layer.opacity);
|
|
2758
|
+
DECKGL_FILTER_COLOR(vLineColor, geometry);
|
|
2443
2759
|
}
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2760
|
+
`;
|
|
2761
|
+
|
|
2762
|
+
// dist/layers/block-layer/block-layer.wgsl.js
|
|
2763
|
+
var block_layer_wgsl_default = (
|
|
2764
|
+
/* wgsl */
|
|
2765
|
+
`
|
|
2766
|
+
struct BlockUniforms {
|
|
2767
|
+
sizeUnits: i32,
|
|
2768
|
+
widthMinPixels: f32,
|
|
2769
|
+
heightMinPixels: f32,
|
|
2770
|
+
sizeMaxPixels: f32,
|
|
2771
|
+
lineWidthUnits: i32,
|
|
2772
|
+
};
|
|
2773
|
+
|
|
2774
|
+
@group(0) @binding(auto) var<uniform> blockLayer: BlockUniforms;
|
|
2775
|
+
|
|
2776
|
+
struct BlockAttributes {
|
|
2777
|
+
@location(0) positions: vec3<f32>,
|
|
2778
|
+
@location(1) instancePositions: vec3<f32>,
|
|
2779
|
+
@location(2) instanceSizes: vec2<f32>,
|
|
2780
|
+
@location(3) instanceLineWidths: f32,
|
|
2781
|
+
@location(4) instanceLineColors: vec4<f32>,
|
|
2782
|
+
@location(5) instanceFillColors: vec4<f32>,
|
|
2783
|
+
@location(6) instancePickingColors: vec3<f32>,
|
|
2784
|
+
};
|
|
2785
|
+
|
|
2786
|
+
struct BlockVaryings {
|
|
2787
|
+
@builtin(position) position: vec4<f32>,
|
|
2788
|
+
@location(0) unitPosition: vec2<f32>,
|
|
2789
|
+
@location(1) @interpolate(flat) fillColor: vec4<f32>,
|
|
2790
|
+
@location(2) @interpolate(flat) lineColor: vec4<f32>,
|
|
2791
|
+
@location(3) @interpolate(flat) lineWidth: f32,
|
|
2792
|
+
@location(4) @interpolate(flat) size: vec2<f32>,
|
|
2793
|
+
@location(5) @interpolate(flat) pickingColor: vec3<f32>,
|
|
2794
|
+
};
|
|
2795
|
+
|
|
2796
|
+
fn block_size_to_pixels(size: vec2<f32>, unit: i32) -> vec2<f32> {
|
|
2797
|
+
return vec2<f32>(
|
|
2798
|
+
project_unit_size_to_pixel(size.x, unit),
|
|
2799
|
+
project_unit_size_to_pixel(size.y, unit)
|
|
2800
|
+
);
|
|
2467
2801
|
}
|
|
2468
|
-
|
|
2469
|
-
|
|
2802
|
+
|
|
2803
|
+
fn block_clamp_signed_size(size: f32, minimum: f32, maximum: f32) -> f32 {
|
|
2804
|
+
return select(1.0, -1.0, size < 0.0) * clamp(abs(size), minimum, maximum);
|
|
2470
2805
|
}
|
|
2471
|
-
|
|
2472
|
-
|
|
2806
|
+
|
|
2807
|
+
@vertex
|
|
2808
|
+
fn vertexMain(attributes: BlockAttributes) -> BlockVaryings {
|
|
2809
|
+
geometry.worldPosition = attributes.instancePositions;
|
|
2810
|
+
geometry.pickingColor = attributes.instancePickingColors;
|
|
2811
|
+
geometry.uv = attributes.positions.xy;
|
|
2812
|
+
|
|
2813
|
+
var pixelSize = block_size_to_pixels(attributes.instanceSizes, blockLayer.sizeUnits);
|
|
2814
|
+
pixelSize.x = block_clamp_signed_size(
|
|
2815
|
+
pixelSize.x,
|
|
2816
|
+
blockLayer.widthMinPixels,
|
|
2817
|
+
blockLayer.sizeMaxPixels
|
|
2818
|
+
);
|
|
2819
|
+
pixelSize.y = block_clamp_signed_size(
|
|
2820
|
+
pixelSize.y,
|
|
2821
|
+
blockLayer.heightMinPixels,
|
|
2822
|
+
blockLayer.sizeMaxPixels
|
|
2823
|
+
);
|
|
2824
|
+
|
|
2825
|
+
let offset = vec3<f32>(
|
|
2826
|
+
attributes.positions.xy * project_pixel_size_vec2(pixelSize),
|
|
2827
|
+
0.0
|
|
2828
|
+
);
|
|
2829
|
+
let projected = project_position_to_clipspace_and_commonspace(
|
|
2830
|
+
attributes.instancePositions,
|
|
2831
|
+
vec3<f32>(0.0),
|
|
2832
|
+
offset
|
|
2833
|
+
);
|
|
2834
|
+
geometry.position = projected.commonPosition;
|
|
2835
|
+
|
|
2836
|
+
var varyings: BlockVaryings;
|
|
2837
|
+
varyings.position = projected.clipPosition;
|
|
2838
|
+
varyings.unitPosition = attributes.positions.xy;
|
|
2839
|
+
varyings.fillColor = vec4<f32>(
|
|
2840
|
+
attributes.instanceFillColors.rgb,
|
|
2841
|
+
attributes.instanceFillColors.a * layer.opacity
|
|
2842
|
+
);
|
|
2843
|
+
varyings.lineColor = vec4<f32>(
|
|
2844
|
+
attributes.instanceLineColors.rgb,
|
|
2845
|
+
attributes.instanceLineColors.a * layer.opacity
|
|
2846
|
+
);
|
|
2847
|
+
varyings.lineWidth = project_unit_size_to_pixel(
|
|
2848
|
+
attributes.instanceLineWidths,
|
|
2849
|
+
blockLayer.lineWidthUnits
|
|
2850
|
+
);
|
|
2851
|
+
varyings.size = pixelSize;
|
|
2852
|
+
varyings.pickingColor = attributes.instancePickingColors;
|
|
2853
|
+
return varyings;
|
|
2473
2854
|
}
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2855
|
+
|
|
2856
|
+
@fragment
|
|
2857
|
+
fn fragmentMain(varyings: BlockVaryings) -> @location(0) vec4<f32> {
|
|
2858
|
+
let relativePosition = varyings.unitPosition * varyings.size;
|
|
2859
|
+
let distanceToBorder = min(
|
|
2860
|
+
min(relativePosition.x, relativePosition.y),
|
|
2861
|
+
min(varyings.size.x - relativePosition.x, varyings.size.y - relativePosition.y)
|
|
2862
|
+
);
|
|
2863
|
+
var fragColor = select(
|
|
2864
|
+
varyings.fillColor,
|
|
2865
|
+
varyings.lineColor,
|
|
2866
|
+
varyings.lineWidth > 0.0 && distanceToBorder <= varyings.lineWidth
|
|
2867
|
+
);
|
|
2868
|
+
|
|
2869
|
+
if (picking.isActive > 0.5) {
|
|
2870
|
+
if (!picking_isColorValid(varyings.pickingColor)) {
|
|
2871
|
+
discard;
|
|
2872
|
+
}
|
|
2873
|
+
return vec4<f32>(picking_normalizeColor(varyings.pickingColor), 1.0);
|
|
2477
2874
|
}
|
|
2478
|
-
|
|
2479
|
-
|
|
2875
|
+
|
|
2876
|
+
if (picking.isHighlightActive > 0.5) {
|
|
2877
|
+
let highlightedColor = picking_normalizeColor(picking.highlightedObjectColor);
|
|
2878
|
+
let objectColor = picking_normalizeColor(varyings.pickingColor);
|
|
2879
|
+
if (picking_isColorZero(abs(objectColor - highlightedColor))) {
|
|
2880
|
+
let highlightAlpha = picking.highlightColor.a;
|
|
2881
|
+
let blendedAlpha = highlightAlpha + fragColor.a * (1.0 - highlightAlpha);
|
|
2882
|
+
if (blendedAlpha > 0.0) {
|
|
2883
|
+
fragColor = vec4<f32>(
|
|
2884
|
+
mix(fragColor.rgb, picking.highlightColor.rgb, highlightAlpha / blendedAlpha),
|
|
2885
|
+
blendedAlpha
|
|
2886
|
+
);
|
|
2887
|
+
}
|
|
2888
|
+
}
|
|
2480
2889
|
}
|
|
2481
|
-
|
|
2890
|
+
|
|
2891
|
+
return deckgl_premultiplied_alpha(fragColor);
|
|
2482
2892
|
}
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2893
|
+
`
|
|
2894
|
+
);
|
|
2895
|
+
|
|
2896
|
+
// dist/layers/block-layer/block-layer.js
|
|
2897
|
+
var DEFAULT_COLOR2 = [0, 0, 0, 255];
|
|
2898
|
+
var defaultProps2 = {
|
|
2899
|
+
sizeUnits: "meters",
|
|
2900
|
+
widthMinPixels: { type: "number", min: 0, value: 0 },
|
|
2901
|
+
heightMinPixels: { type: "number", min: 0, value: 0 },
|
|
2902
|
+
sizeMaxPixels: { type: "number", min: 0, value: Number.MAX_SAFE_INTEGER },
|
|
2903
|
+
lineWidthUnits: "pixels",
|
|
2904
|
+
getPosition: { type: "accessor", value: (x) => x.position },
|
|
2905
|
+
getSize: { type: "accessor", value: [10, 10] },
|
|
2906
|
+
getLineWidth: { type: "accessor", value: 1 },
|
|
2907
|
+
getFillColor: { type: "accessor", value: DEFAULT_COLOR2 },
|
|
2908
|
+
getLineColor: { type: "accessor", value: DEFAULT_COLOR2 }
|
|
2909
|
+
};
|
|
2910
|
+
var BlockLayer = class extends import_core6.Layer {
|
|
2911
|
+
state = {};
|
|
2912
|
+
getShaders() {
|
|
2913
|
+
return super.getShaders({
|
|
2914
|
+
source: block_layer_wgsl_default,
|
|
2915
|
+
vs: block_layer_vertex_glsl_default,
|
|
2916
|
+
fs: block_layer_fragment_glsl_default,
|
|
2917
|
+
modules: [import_core6.project32, import_core6.color, import_core6.picking, blockUniforms]
|
|
2918
|
+
});
|
|
2486
2919
|
}
|
|
2487
|
-
|
|
2488
|
-
|
|
2920
|
+
/** WebGPU consumes float32 positions directly, including external binary attributes. */
|
|
2921
|
+
use64bitPositions() {
|
|
2922
|
+
var _a, _b;
|
|
2923
|
+
return ((_b = (_a = this.context) == null ? void 0 : _a.device) == null ? void 0 : _b.type) !== "webgpu" && super.use64bitPositions();
|
|
2489
2924
|
}
|
|
2490
|
-
|
|
2491
|
-
|
|
2925
|
+
initializeState() {
|
|
2926
|
+
this.getAttributeManager().addInstanced({
|
|
2927
|
+
instancePositions: {
|
|
2928
|
+
size: 3,
|
|
2929
|
+
type: "float64",
|
|
2930
|
+
fp64: this.use64bitPositions(),
|
|
2931
|
+
transition: true,
|
|
2932
|
+
accessor: "getPosition"
|
|
2933
|
+
},
|
|
2934
|
+
instanceSizes: {
|
|
2935
|
+
size: 2,
|
|
2936
|
+
transition: true,
|
|
2937
|
+
accessor: "getSize"
|
|
2938
|
+
},
|
|
2939
|
+
instanceLineWidths: {
|
|
2940
|
+
size: 1,
|
|
2941
|
+
transition: true,
|
|
2942
|
+
accessor: "getLineWidth"
|
|
2943
|
+
},
|
|
2944
|
+
instanceLineColors: {
|
|
2945
|
+
size: this.props.colorFormat.length,
|
|
2946
|
+
type: "unorm8",
|
|
2947
|
+
transition: true,
|
|
2948
|
+
accessor: "getLineColor",
|
|
2949
|
+
defaultValue: DEFAULT_COLOR2
|
|
2950
|
+
},
|
|
2951
|
+
instanceFillColors: {
|
|
2952
|
+
size: this.props.colorFormat.length,
|
|
2953
|
+
type: "unorm8",
|
|
2954
|
+
transition: true,
|
|
2955
|
+
accessor: "getFillColor",
|
|
2956
|
+
defaultValue: DEFAULT_COLOR2
|
|
2957
|
+
}
|
|
2958
|
+
});
|
|
2492
2959
|
}
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2960
|
+
updateState(params) {
|
|
2961
|
+
var _a;
|
|
2962
|
+
const { changeFlags } = params;
|
|
2963
|
+
super.updateState(params);
|
|
2964
|
+
if (changeFlags.extensionsChanged) {
|
|
2965
|
+
(_a = this.state.model) == null ? void 0 : _a.destroy();
|
|
2966
|
+
this.state.model = this._getModel();
|
|
2967
|
+
this.getAttributeManager().invalidateAll();
|
|
2496
2968
|
}
|
|
2497
2969
|
}
|
|
2498
|
-
|
|
2499
|
-
}
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
glyphDataDurationMs: params.glyphDataDurationMs,
|
|
2511
|
-
columnNormalizeDurationMs: params.glyphStats.columnNormalizeDurationMs,
|
|
2512
|
-
countDurationMs: params.glyphStats.countDurationMs,
|
|
2513
|
-
allocateDurationMs: params.glyphStats.allocateDurationMs,
|
|
2514
|
-
writeDurationMs: params.glyphStats.writeDurationMs,
|
|
2515
|
-
textResolveDurationMs: params.glyphStats.textResolveDurationMs,
|
|
2516
|
-
styleAccessorDurationMs: params.glyphStats.styleAccessorDurationMs,
|
|
2517
|
-
layoutDurationMs: params.glyphStats.layoutDurationMs,
|
|
2518
|
-
glyphWriteDurationMs: params.glyphStats.glyphWriteDurationMs,
|
|
2519
|
-
bufferCreateDurationMs: params.bufferCreateDurationMs,
|
|
2520
|
-
totalDurationMs: params.totalDurationMs
|
|
2521
|
-
})();
|
|
2522
|
-
}
|
|
2523
|
-
function logFastTextDynamicAttributeUpdateProbe(params) {
|
|
2524
|
-
getFastTextProbeLog().probe(0, `%cFastTextLayer%c dynamic ${params.dynamicStats.rowCount} rows in ${formatFastTextDurationMs(params.totalDurationMs)} ${params.layerId}`, FAST_TEXT_PROBE_LABEL_STYLE, "", {
|
|
2525
|
-
layerId: params.layerId,
|
|
2526
|
-
updateMode: "dynamic",
|
|
2527
|
-
updatePositions: params.update.positions,
|
|
2528
|
-
updateColors: params.update.colors,
|
|
2529
|
-
updateClipRects: params.update.clipRects,
|
|
2530
|
-
rowCount: params.dynamicStats.rowCount,
|
|
2531
|
-
glyphCount: params.dynamicStats.glyphCount,
|
|
2532
|
-
attributeByteLength: params.dynamicStats.attributeByteLength,
|
|
2533
|
-
positionAccessorDurationMs: params.dynamicStats.positionAccessorDurationMs,
|
|
2534
|
-
colorAccessorDurationMs: params.dynamicStats.colorAccessorDurationMs,
|
|
2535
|
-
clipRectAccessorDurationMs: params.dynamicStats.clipRectAccessorDurationMs,
|
|
2536
|
-
writeDurationMs: params.dynamicStats.writeDurationMs,
|
|
2537
|
-
bufferUploadDurationMs: params.bufferUploadDurationMs,
|
|
2538
|
-
totalDurationMs: params.totalDurationMs
|
|
2539
|
-
})();
|
|
2540
|
-
}
|
|
2541
|
-
function formatFastTextDurationMs(durationMs) {
|
|
2542
|
-
return `${durationMs.toFixed(durationMs < 10 ? 2 : 1)}ms`;
|
|
2543
|
-
}
|
|
2544
|
-
function getFastTextProbeLog() {
|
|
2545
|
-
var _a;
|
|
2546
|
-
const globalLog = (_a = globalThis.traceLayers) == null ? void 0 : _a.log;
|
|
2547
|
-
return globalLog ?? fastTextLog;
|
|
2548
|
-
}
|
|
2549
|
-
function createFastTextBuffers(device, glyphData) {
|
|
2550
|
-
const { attributes } = glyphData;
|
|
2551
|
-
return {
|
|
2552
|
-
instanceGlyphData: createVertexBuffer(device, attributes.instanceGlyphData, new Uint8Array(FAST_TEXT_GLYPH_VERTEX_BYTE_STRIDE)),
|
|
2553
|
-
instancePositions: createVertexBuffer(device, attributes.instancePositions, new Float32Array(2))
|
|
2554
|
-
};
|
|
2555
|
-
}
|
|
2556
|
-
function createVertexBuffer(device, data, fallback) {
|
|
2557
|
-
return device.createBuffer({
|
|
2558
|
-
data: data.byteLength > 0 ? data : fallback,
|
|
2559
|
-
usage: import_core6.Buffer.VERTEX | import_core6.Buffer.COPY_DST
|
|
2560
|
-
});
|
|
2561
|
-
}
|
|
2562
|
-
function destroyFastTextBuffers(buffers) {
|
|
2563
|
-
if (!buffers) {
|
|
2564
|
-
return;
|
|
2565
|
-
}
|
|
2566
|
-
for (const buffer of Object.values(buffers)) {
|
|
2567
|
-
buffer.destroy();
|
|
2970
|
+
draw() {
|
|
2971
|
+
const { sizeUnits, widthMinPixels, heightMinPixels, sizeMaxPixels, lineWidthUnits } = this.props;
|
|
2972
|
+
const model = this.state.model;
|
|
2973
|
+
const blockProps = {
|
|
2974
|
+
sizeUnits: import_core6.UNIT[sizeUnits],
|
|
2975
|
+
widthMinPixels,
|
|
2976
|
+
heightMinPixels,
|
|
2977
|
+
sizeMaxPixels,
|
|
2978
|
+
lineWidthUnits: import_core6.UNIT[lineWidthUnits]
|
|
2979
|
+
};
|
|
2980
|
+
model.shaderInputs.setProps({ blockLayer: blockProps });
|
|
2981
|
+
model.draw(this.context.renderPass);
|
|
2568
2982
|
}
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
}
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2983
|
+
_getModel() {
|
|
2984
|
+
const positions = [0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0];
|
|
2985
|
+
const bufferLayout = this.getAttributeManager().getBufferLayouts();
|
|
2986
|
+
const webgpuAttributes = /* @__PURE__ */ new Set([
|
|
2987
|
+
"instancePositions",
|
|
2988
|
+
"instanceSizes",
|
|
2989
|
+
"instanceLineWidths",
|
|
2990
|
+
"instanceLineColors",
|
|
2991
|
+
"instanceFillColors",
|
|
2992
|
+
"instancePickingColors"
|
|
2993
|
+
]);
|
|
2994
|
+
const webgpuBufferLayout = bufferLayout.map((layout) => {
|
|
2995
|
+
var _a;
|
|
2996
|
+
return {
|
|
2997
|
+
...layout,
|
|
2998
|
+
attributes: (_a = layout.attributes) == null ? void 0 : _a.filter(({ attribute }) => webgpuAttributes.has(attribute))
|
|
2999
|
+
};
|
|
3000
|
+
}).filter((layout) => !layout.attributes || layout.attributes.length > 0);
|
|
3001
|
+
return new import_engine2.Model(this.context.device, {
|
|
3002
|
+
...this.getShaders(),
|
|
3003
|
+
id: this.props.id,
|
|
3004
|
+
bufferLayout: this.context.device.type === "webgpu" ? webgpuBufferLayout : bufferLayout,
|
|
3005
|
+
geometry: new import_engine2.Geometry({
|
|
3006
|
+
topology: "triangle-strip",
|
|
3007
|
+
attributes: {
|
|
3008
|
+
positions: new Float32Array(positions)
|
|
3009
|
+
}
|
|
3010
|
+
}),
|
|
3011
|
+
isInstanced: true
|
|
3012
|
+
});
|
|
2592
3013
|
}
|
|
2593
|
-
}
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
}
|
|
3014
|
+
};
|
|
3015
|
+
__publicField(BlockLayer, "layerName", "BlockLayer");
|
|
3016
|
+
__publicField(BlockLayer, "defaultProps", defaultProps2);
|
|
2597
3017
|
|
|
2598
3018
|
// dist/views/orthographic-utils.js
|
|
2599
3019
|
function fitBoundsOrthographic(width, height, bounds, zoomMode = "per-axis") {
|