@shapediver/viewer.features.attribute-visualization 3.9.10 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/implementation/AttributeVisualizationEngine.d.ts.map +1 -1
  2. package/dist/implementation/AttributeVisualizationEngine.js +33 -10
  3. package/dist/implementation/AttributeVisualizationEngine.js.map +1 -1
  4. package/dist/implementation/AttributeVisualizationUtils.d.ts +9 -2
  5. package/dist/implementation/AttributeVisualizationUtils.d.ts.map +1 -1
  6. package/dist/implementation/AttributeVisualizationUtils.js +715 -272
  7. package/dist/implementation/AttributeVisualizationUtils.js.map +1 -1
  8. package/dist/index.d.ts +4 -1
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +9 -1
  11. package/dist/index.js.map +1 -1
  12. package/dist/interfaces/IAttribute.d.ts +13 -5
  13. package/dist/interfaces/IAttribute.d.ts.map +1 -1
  14. package/dist/interfaces/IAttribute.js +7 -0
  15. package/dist/interfaces/IAttribute.js.map +1 -1
  16. package/dist/interfaces/IGradient.d.ts +37 -0
  17. package/dist/interfaces/IGradient.d.ts.map +1 -0
  18. package/dist/interfaces/IGradient.js +14 -0
  19. package/dist/interfaces/IGradient.js.map +1 -0
  20. package/package.json +5 -5
package/dist/implementation/AttributeVisualizationUtils.js CHANGED
@@ -1,24 +1,609 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.AttributeVisualizationUtils = void 0;
3
+ exports.AttributeVisualizationUtils = exports.getColorAt = exports.getColorSteps = void 0;
4
+ const viewer_shared_services_1 = require("@shapediver/viewer.shared.services");
4
5
  const viewer_shared_types_1 = require("@shapediver/viewer.shared.types");
5
6
  const gl_matrix_1 = require("gl-matrix");
6
7
  const IAttribute_1 = require("../interfaces/IAttribute");
7
- const grayscaleVisualization = (factor, materialType) => {
8
- const color = Math.floor(factor * 255.0);
9
- return {
10
- material: materialType === "unlit"
11
- ? new viewer_shared_types_1.MaterialUnlitData({
12
- color: "rgb(" + color + ", " + color + ", " + color + ")",
13
- opacity: 1,
14
- })
15
- : new viewer_shared_types_1.MaterialStandardData({
16
- color: "rgb(" + color + ", " + color + ", " + color + ")",
17
- opacity: 1,
18
- }),
19
- matrix: gl_matrix_1.mat4.create(),
20
- };
8
+ const IGradient_1 = require("../interfaces/IGradient");
9
+ const getColorSteps = (gradient) => {
10
+ switch (gradient) {
11
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.GRAYSCALE:
12
+ return [
13
+ {
14
+ value: 0,
15
+ colorBefore: "rgb(0, 0, 0)",
16
+ colorAfter: "rgb(0, 0, 0)",
17
+ },
18
+ {
19
+ value: 1,
20
+ colorBefore: "rgb(255, 255, 255)",
21
+ colorAfter: "rgb(255, 255, 255)",
22
+ },
23
+ ];
24
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_RED:
25
+ return [
26
+ {
27
+ value: 0,
28
+ colorBefore: "rgb(0, 0, 255)",
29
+ colorAfter: "rgb(0, 0, 255)",
30
+ },
31
+ {
32
+ value: 1,
33
+ colorBefore: "rgb(255, 0, 0)",
34
+ colorAfter: "rgb(255, 0, 0)",
35
+ },
36
+ ];
37
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_WHITE_RED:
38
+ return [
39
+ {
40
+ value: 0,
41
+ colorBefore: "rgb(0, 0, 255)",
42
+ colorAfter: "rgb(0, 0, 255)",
43
+ },
44
+ {
45
+ value: 0.5,
46
+ colorBefore: "rgb(255, 255, 255)",
47
+ colorAfter: "rgb(255, 255, 255)",
48
+ },
49
+ {
50
+ value: 1,
51
+ colorBefore: "rgb(255, 0, 0)",
52
+ colorAfter: "rgb(255, 0, 0)",
53
+ },
54
+ ];
55
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_RED:
56
+ return [
57
+ {
58
+ value: 0,
59
+ colorBefore: "rgb(0, 255, 0)",
60
+ colorAfter: "rgb(0, 255, 0)",
61
+ },
62
+ {
63
+ value: 1,
64
+ colorBefore: "rgb(255, 0, 0)",
65
+ colorAfter: "rgb(255, 0, 0)",
66
+ },
67
+ ];
68
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED:
69
+ return [
70
+ {
71
+ value: 0,
72
+ colorBefore: "rgb(0, 255, 0)",
73
+ colorAfter: "rgb(0, 255, 0)",
74
+ },
75
+ {
76
+ value: 0.5,
77
+ colorBefore: "rgb(255, 255, 255)",
78
+ colorAfter: "rgb(255, 255, 255)",
79
+ },
80
+ {
81
+ value: 1,
82
+ colorBefore: "rgb(255, 0, 0)",
83
+ colorAfter: "rgb(255, 0, 0)",
84
+ },
85
+ ];
86
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_YELLOW_RED:
87
+ return [
88
+ {
89
+ value: 0,
90
+ colorBefore: "rgb(0, 255, 0)",
91
+ colorAfter: "rgb(0, 255, 0)",
92
+ },
93
+ {
94
+ value: 0.5,
95
+ colorBefore: "rgb(255, 255, 0)",
96
+ colorAfter: "rgb(255, 255, 0)",
97
+ },
98
+ {
99
+ value: 1,
100
+ colorBefore: "rgb(255, 0, 0)",
101
+ colorAfter: "rgb(255, 0, 0)",
102
+ },
103
+ ];
104
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_YELLOW_RED:
105
+ return [
106
+ {
107
+ value: 0,
108
+ colorBefore: "rgb(0, 0, 255)",
109
+ colorAfter: "rgb(0, 0, 255)",
110
+ },
111
+ {
112
+ value: 0.5,
113
+ colorBefore: "rgb(255, 255, 0)",
114
+ colorAfter: "rgb(255, 255, 0)",
115
+ },
116
+ {
117
+ value: 1,
118
+ colorBefore: "rgb(255, 0, 0)",
119
+ colorAfter: "rgb(255, 0, 0)",
120
+ },
121
+ ];
122
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_RED:
123
+ return [
124
+ {
125
+ value: 0,
126
+ colorBefore: "rgb(0, 0, 255)",
127
+ colorAfter: "rgb(0, 0, 255)",
128
+ },
129
+ {
130
+ value: 0.5,
131
+ colorBefore: "rgb(0, 255, 0)",
132
+ colorAfter: "rgb(0, 255, 0)",
133
+ },
134
+ {
135
+ value: 1,
136
+ colorBefore: "rgb(255, 0, 0)",
137
+ colorAfter: "rgb(255, 0, 0)",
138
+ },
139
+ ];
140
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_YELLOW_RED_PURPLE_WHITE:
141
+ return [
142
+ {
143
+ value: 0,
144
+ colorBefore: "rgb(0, 0, 255)",
145
+ colorAfter: "rgb(0, 0, 255)",
146
+ },
147
+ {
148
+ value: 0.2,
149
+ colorBefore: "rgb(0, 255, 0)",
150
+ colorAfter: "rgb(0, 255, 0)",
151
+ },
152
+ {
153
+ value: 0.4,
154
+ colorBefore: "rgb(255, 255, 0)",
155
+ colorAfter: "rgb(255, 255, 0)",
156
+ },
157
+ {
158
+ value: 0.6,
159
+ colorBefore: "rgb(255, 0, 0)",
160
+ colorAfter: "rgb(255, 0, 0)",
161
+ },
162
+ {
163
+ value: 0.8,
164
+ colorBefore: "rgb(255, 0, 255)",
165
+ colorAfter: "rgb(255, 0, 255)",
166
+ },
167
+ {
168
+ value: 1,
169
+ colorBefore: "rgb(255, 255, 255)",
170
+ colorAfter: "rgb(255, 255, 255)",
171
+ },
172
+ ];
173
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.VIRIDIS:
174
+ return [
175
+ {
176
+ value: 0.0,
177
+ colorBefore: "rgb(68, 1, 84)",
178
+ colorAfter: "rgb(68, 1, 84)",
179
+ },
180
+ {
181
+ value: 0.1,
182
+ colorBefore: "rgb(65, 44, 123)",
183
+ colorAfter: "rgb(65, 44, 123)",
184
+ },
185
+ {
186
+ value: 0.2,
187
+ colorBefore: "rgb(52, 83, 138)",
188
+ colorAfter: "rgb(52, 83, 138)",
189
+ },
190
+ {
191
+ value: 0.3,
192
+ colorBefore: "rgb(38, 119, 140)",
193
+ colorAfter: "rgb(38, 119, 140)",
194
+ },
195
+ {
196
+ value: 0.4,
197
+ colorBefore: "rgb(31, 144, 137)",
198
+ colorAfter: "rgb(31, 144, 137)",
199
+ },
200
+ {
201
+ value: 0.5,
202
+ colorBefore: "rgb(37, 170, 121)",
203
+ colorAfter: "rgb(37, 170, 121)",
204
+ },
205
+ {
206
+ value: 0.6,
207
+ colorBefore: "rgb(86, 193, 90)",
208
+ colorAfter: "rgb(86, 193, 90)",
209
+ },
210
+ {
211
+ value: 0.7,
212
+ colorBefore: "rgb(150, 211, 45)",
213
+ colorAfter: "rgb(150, 211, 45)",
214
+ },
215
+ {
216
+ value: 0.8,
217
+ colorBefore: "rgb(218, 230, 35)",
218
+ colorAfter: "rgb(218, 230, 35)",
219
+ },
220
+ {
221
+ value: 0.9,
222
+ colorBefore: "rgb(253, 231, 36)",
223
+ colorAfter: "rgb(253, 231, 36)",
224
+ },
225
+ {
226
+ value: 1.0,
227
+ colorBefore: "rgb(252, 254, 178)",
228
+ colorAfter: "rgb(252, 254, 178)",
229
+ },
230
+ ];
231
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.PLASMA:
232
+ return [
233
+ {
234
+ value: 0.0,
235
+ colorBefore: "rgb(13, 8, 135)",
236
+ colorAfter: "rgb(13, 8, 135)",
237
+ },
238
+ {
239
+ value: 0.1,
240
+ colorBefore: "rgb(75, 3, 161)",
241
+ colorAfter: "rgb(75, 3, 161)",
242
+ },
243
+ {
244
+ value: 0.2,
245
+ colorBefore: "rgb(125, 3, 168)",
246
+ colorAfter: "rgb(125, 3, 168)",
247
+ },
248
+ {
249
+ value: 0.3,
250
+ colorBefore: "rgb(168, 34, 150)",
251
+ colorAfter: "rgb(168, 34, 150)",
252
+ },
253
+ {
254
+ value: 0.4,
255
+ colorBefore: "rgb(203, 70, 121)",
256
+ colorAfter: "rgb(203, 70, 121)",
257
+ },
258
+ {
259
+ value: 0.5,
260
+ colorBefore: "rgb(229, 107, 93)",
261
+ colorAfter: "rgb(229, 107, 93)",
262
+ },
263
+ {
264
+ value: 0.6,
265
+ colorBefore: "rgb(248, 148, 65)",
266
+ colorAfter: "rgb(248, 148, 65)",
267
+ },
268
+ {
269
+ value: 0.7,
270
+ colorBefore: "rgb(253, 195, 40)",
271
+ colorAfter: "rgb(253, 195, 40)",
272
+ },
273
+ {
274
+ value: 0.8,
275
+ colorBefore: "rgb(240, 242, 51)",
276
+ colorAfter: "rgb(240, 242, 51)",
277
+ },
278
+ {
279
+ value: 0.9,
280
+ colorBefore: "rgb(210, 252, 98)",
281
+ colorAfter: "rgb(210, 252, 98)",
282
+ },
283
+ {
284
+ value: 1.0,
285
+ colorBefore: "rgb(254, 255, 178)",
286
+ colorAfter: "rgb(254, 255, 178)",
287
+ },
288
+ ];
289
+ return [
290
+ {
291
+ value: 0.0,
292
+ colorBefore: "rgb(0, 0, 127)",
293
+ colorAfter: "rgb(0, 0, 127)",
294
+ },
295
+ {
296
+ value: 0.1,
297
+ colorBefore: "rgb(0, 0, 191)",
298
+ colorAfter: "rgb(0, 0, 191)",
299
+ },
300
+ {
301
+ value: 0.2,
302
+ colorBefore: "rgb(0, 0, 255)",
303
+ colorAfter: "rgb(0, 0, 255)",
304
+ },
305
+ {
306
+ value: 0.3,
307
+ colorBefore: "rgb(63, 63, 255)",
308
+ colorAfter: "rgb(63, 63, 255)",
309
+ },
310
+ {
311
+ value: 0.4,
312
+ colorBefore: "rgb(127, 127, 255)",
313
+ colorAfter: "rgb(127, 127, 255)",
314
+ },
315
+ {
316
+ value: 0.5,
317
+ colorBefore: "rgb(255, 255, 255)",
318
+ colorAfter: "rgb(255, 255, 255)",
319
+ },
320
+ {
321
+ value: 0.6,
322
+ colorBefore: "rgb(255, 127, 127)",
323
+ colorAfter: "rgb(255, 127, 127)",
324
+ },
325
+ {
326
+ value: 0.7,
327
+ colorBefore: "rgb(255, 63, 63)",
328
+ colorAfter: "rgb(255, 63, 63)",
329
+ },
330
+ {
331
+ value: 0.8,
332
+ colorBefore: "rgb(255, 0, 0)",
333
+ colorAfter: "rgb(255, 0, 0)",
334
+ },
335
+ {
336
+ value: 0.9,
337
+ colorBefore: "rgb(191, 0, 0)",
338
+ colorAfter: "rgb(191, 0, 0)",
339
+ },
340
+ {
341
+ value: 1.0,
342
+ colorBefore: "rgb(127, 0, 0)",
343
+ colorAfter: "rgb(127, 0, 0)",
344
+ },
345
+ ];
346
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.TURBO:
347
+ return [
348
+ {
349
+ value: 0.0,
350
+ colorBefore: "rgb(48, 18, 59)",
351
+ colorAfter: "rgb(48, 18, 59)",
352
+ },
353
+ {
354
+ value: 0.1,
355
+ colorBefore: "rgb(55, 47, 122)",
356
+ colorAfter: "rgb(55, 47, 122)",
357
+ },
358
+ {
359
+ value: 0.2,
360
+ colorBefore: "rgb(23, 111, 171)",
361
+ colorAfter: "rgb(23, 111, 171)",
362
+ },
363
+ {
364
+ value: 0.3,
365
+ colorBefore: "rgb(16, 153, 142)",
366
+ colorAfter: "rgb(16, 153, 142)",
367
+ },
368
+ {
369
+ value: 0.4,
370
+ colorBefore: "rgb(69, 186, 99)",
371
+ colorAfter: "rgb(69, 186, 99)",
372
+ },
373
+ {
374
+ value: 0.5,
375
+ colorBefore: "rgb(165, 202, 65)",
376
+ colorAfter: "rgb(165, 202, 65)",
377
+ },
378
+ {
379
+ value: 0.6,
380
+ colorBefore: "rgb(234, 190, 70)",
381
+ colorAfter: "rgb(234, 190, 70)",
382
+ },
383
+ {
384
+ value: 0.7,
385
+ colorBefore: "rgb(251, 142, 79)",
386
+ colorAfter: "rgb(251, 142, 79)",
387
+ },
388
+ {
389
+ value: 0.8,
390
+ colorBefore: "rgb(243, 87, 65)",
391
+ colorAfter: "rgb(243, 87, 65)",
392
+ },
393
+ {
394
+ value: 0.9,
395
+ colorBefore: "rgb(224, 37, 77)",
396
+ colorAfter: "rgb(224, 37, 77)",
397
+ },
398
+ {
399
+ value: 1.0,
400
+ colorBefore: "rgb(127, 0, 45)",
401
+ colorAfter: "rgb(127, 0, 45)",
402
+ },
403
+ ];
404
+ return [
405
+ {
406
+ value: 0.0,
407
+ colorBefore: "rgb(0, 0, 3)",
408
+ colorAfter: "rgb(0, 0, 3)",
409
+ },
410
+ {
411
+ value: 0.1,
412
+ colorBefore: "rgb(31, 12, 72)",
413
+ colorAfter: "rgb(31, 12, 72)",
414
+ },
415
+ {
416
+ value: 0.2,
417
+ colorBefore: "rgb(85, 15, 109)",
418
+ colorAfter: "rgb(85, 15, 109)",
419
+ },
420
+ {
421
+ value: 0.3,
422
+ colorBefore: "rgb(136, 34, 106)",
423
+ colorAfter: "rgb(136, 34, 106)",
424
+ },
425
+ {
426
+ value: 0.4,
427
+ colorBefore: "rgb(186, 54, 85)",
428
+ colorAfter: "rgb(186, 54, 85)",
429
+ },
430
+ {
431
+ value: 0.5,
432
+ colorBefore: "rgb(227, 89, 51)",
433
+ colorAfter: "rgb(227, 89, 51)",
434
+ },
435
+ {
436
+ value: 0.6,
437
+ colorBefore: "rgb(249, 140, 10)",
438
+ colorAfter: "rgb(249, 140, 10)",
439
+ },
440
+ {
441
+ value: 0.7,
442
+ colorBefore: "rgb(252, 190, 57)",
443
+ colorAfter: "rgb(252, 190, 57)",
444
+ },
445
+ {
446
+ value: 0.8,
447
+ colorBefore: "rgb(241, 237, 105)",
448
+ colorAfter: "rgb(241, 237, 105)",
449
+ },
450
+ {
451
+ value: 0.9,
452
+ colorBefore: "rgb(252, 253, 191)",
453
+ colorAfter: "rgb(252, 253, 191)",
454
+ },
455
+ {
456
+ value: 1.0,
457
+ colorBefore: "rgb(252, 254, 164)",
458
+ colorAfter: "rgb(252, 254, 164)",
459
+ },
460
+ ];
461
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.MAGMA:
462
+ return [
463
+ {
464
+ value: 0.0,
465
+ colorBefore: "rgb(0, 0, 4)",
466
+ colorAfter: "rgb(0, 0, 4)",
467
+ },
468
+ {
469
+ value: 0.1,
470
+ colorBefore: "rgb(28, 16, 68)",
471
+ colorAfter: "rgb(28, 16, 68)",
472
+ },
473
+ {
474
+ value: 0.2,
475
+ colorBefore: "rgb(79, 18, 123)",
476
+ colorAfter: "rgb(79, 18, 123)",
477
+ },
478
+ {
479
+ value: 0.3,
480
+ colorBefore: "rgb(129, 37, 129)",
481
+ colorAfter: "rgb(129, 37, 129)",
482
+ },
483
+ {
484
+ value: 0.4,
485
+ colorBefore: "rgb(178, 65, 114)",
486
+ colorAfter: "rgb(178, 65, 114)",
487
+ },
488
+ {
489
+ value: 0.5,
490
+ colorBefore: "rgb(221, 104, 89)",
491
+ colorAfter: "rgb(221, 104, 89)",
492
+ },
493
+ {
494
+ value: 0.6,
495
+ colorBefore: "rgb(251, 150, 62)",
496
+ colorAfter: "rgb(251, 150, 62)",
497
+ },
498
+ {
499
+ value: 0.7,
500
+ colorBefore: "rgb(254, 198, 83)",
501
+ colorAfter: "rgb(254, 198, 83)",
502
+ },
503
+ {
504
+ value: 0.8,
505
+ colorBefore: "rgb(237, 243, 129)",
506
+ colorAfter: "rgb(237, 243, 129)",
507
+ },
508
+ {
509
+ value: 0.9,
510
+ colorBefore: "rgb(252, 254, 191)",
511
+ colorAfter: "rgb(252, 254, 191)",
512
+ },
513
+ {
514
+ value: 1.0,
515
+ colorBefore: "rgb(252, 254, 164)",
516
+ colorAfter: "rgb(252, 254, 164)",
517
+ },
518
+ ];
519
+ case IAttribute_1.ATTRIBUTE_VISUALIZATION.CIVIDIS:
520
+ return [
521
+ {
522
+ value: 0.0,
523
+ colorBefore: "rgb(0, 32, 76)",
524
+ colorAfter: "rgb(0, 32, 76)",
525
+ },
526
+ {
527
+ value: 0.1,
528
+ colorBefore: "rgb(20, 53, 96)",
529
+ colorAfter: "rgb(20, 53, 96)",
530
+ },
531
+ {
532
+ value: 0.2,
533
+ colorBefore: "rgb(48, 75, 108)",
534
+ colorAfter: "rgb(48, 75, 108)",
535
+ },
536
+ {
537
+ value: 0.3,
538
+ colorBefore: "rgb(82, 95, 115)",
539
+ colorAfter: "rgb(82, 95, 115)",
540
+ },
541
+ {
542
+ value: 0.4,
543
+ colorBefore: "rgb(120, 113, 114)",
544
+ colorAfter: "rgb(120, 113, 114)",
545
+ },
546
+ {
547
+ value: 0.5,
548
+ colorBefore: "rgb(159, 130, 109)",
549
+ colorAfter: "rgb(159, 130, 109)",
550
+ },
551
+ {
552
+ value: 0.6,
553
+ colorBefore: "rgb(195, 145, 99)",
554
+ colorAfter: "rgb(195, 145, 99)",
555
+ },
556
+ {
557
+ value: 0.7,
558
+ colorBefore: "rgb(227, 158, 85)",
559
+ colorAfter: "rgb(227, 158, 85)",
560
+ },
561
+ {
562
+ value: 0.8,
563
+ colorBefore: "rgb(251, 171, 71)",
564
+ colorAfter: "rgb(251, 171, 71)",
565
+ },
566
+ {
567
+ value: 0.9,
568
+ colorBefore: "rgb(254, 200, 116)",
569
+ colorAfter: "rgb(254, 200, 116)",
570
+ },
571
+ {
572
+ value: 1.0,
573
+ colorBefore: "rgb(252, 255, 164)",
574
+ colorAfter: "rgb(252, 255, 164)",
575
+ },
576
+ ];
577
+ default:
578
+ return;
579
+ }
21
580
  };
581
+ exports.getColorSteps = getColorSteps;
582
+ const getColorAt = (gradient, factor) => {
583
+ const steps = (0, exports.getColorSteps)(gradient);
584
+ if (!steps)
585
+ return;
586
+ for (let i = 0; i < steps.length; i++) {
587
+ if (steps[i].value >= factor) {
588
+ // check if the value is the first step
589
+ if (i === 0) {
590
+ return steps[i].colorBefore;
591
+ }
592
+ else {
593
+ // get the previous color
594
+ const previousColor = steps[i - 1].colorAfter;
595
+ // get the current color
596
+ const currentColor = steps[i].colorBefore;
597
+ // calculate where the factor is between the two colors
598
+ const stepFactor = (factor - steps[i - 1].value) /
599
+ (steps[i].value - steps[i - 1].value);
600
+ // return interpolated color
601
+ return interpolateColors(previousColor, currentColor, stepFactor);
602
+ }
603
+ }
604
+ }
605
+ };
606
+ exports.getColorAt = getColorAt;
22
607
  const opacityVisualization = (factor, materialType, defaultMaterial) => {
23
608
  return {
24
609
  material: materialType === "unlit"
@@ -33,297 +618,155 @@ const opacityVisualization = (factor, materialType, defaultMaterial) => {
33
618
  matrix: gl_matrix_1.mat4.create(),
34
619
  };
35
620
  };
36
- const blueRedVisualization = (factor, materialType) => {
37
- const red = factor * 255.0;
38
- const blue = (1 - factor) * 255.0;
39
- return {
40
- material: materialType === "unlit"
41
- ? new viewer_shared_types_1.MaterialUnlitData({
42
- color: "rgb(" +
43
- Math.floor(red) +
44
- ", " +
45
- Math.floor(0) +
46
- ", " +
47
- Math.floor(blue) +
48
- ")",
49
- opacity: 1,
50
- })
51
- : new viewer_shared_types_1.MaterialStandardData({
52
- color: "rgb(" +
53
- Math.floor(red) +
54
- ", " +
55
- Math.floor(0) +
56
- ", " +
57
- Math.floor(blue) +
58
- ")",
59
- opacity: 1,
60
- }),
61
- matrix: gl_matrix_1.mat4.create(),
62
- };
63
- };
64
- const blueWhiteRedVisualization = (factor, materialType) => {
65
- let red = 255, green = 255, blue = 255;
66
- if (factor < 0.5) {
67
- const remappedFactor = factor / 0.5;
68
- red = 255.0 * remappedFactor;
69
- green = 255.0 * remappedFactor;
70
- blue = 255.0;
71
- }
72
- else {
73
- const remappedFactor = (factor - 0.5) / 0.5;
74
- red = 255.0;
75
- green = 255.0 * (1 - remappedFactor);
76
- blue = 255.0 * (1 - remappedFactor);
77
- }
78
- return {
79
- material: materialType === "unlit"
80
- ? new viewer_shared_types_1.MaterialUnlitData({
81
- color: "rgb(" +
82
- Math.floor(red) +
83
- ", " +
84
- Math.floor(green) +
85
- ", " +
86
- Math.floor(blue) +
87
- ")",
88
- opacity: 1,
89
- })
90
- : new viewer_shared_types_1.MaterialStandardData({
91
- color: "rgb(" +
92
- Math.floor(red) +
93
- ", " +
94
- Math.floor(green) +
95
- ", " +
96
- Math.floor(blue) +
97
- ")",
98
- opacity: 1,
99
- }),
100
- matrix: gl_matrix_1.mat4.create(),
101
- };
102
- };
103
- const greenRedVisualization = (factor, materialType) => {
104
- const red = factor * 255.0;
105
- const green = (1 - factor) * 255.0;
621
+ const hslVisualization = (factor, materialType) => {
622
+ const hue = factor * 359.99;
106
623
  return {
107
624
  material: materialType === "unlit"
108
625
  ? new viewer_shared_types_1.MaterialUnlitData({
109
- color: "rgb(" +
110
- Math.floor(red) +
111
- ", " +
112
- Math.floor(green) +
113
- ", " +
114
- Math.floor(0) +
115
- ")",
626
+ color: "hsl(" + Math.floor(hue) + ", 100%, 50%)",
116
627
  opacity: 1,
117
628
  })
118
629
  : new viewer_shared_types_1.MaterialStandardData({
119
- color: "rgb(" +
120
- Math.floor(red) +
121
- ", " +
122
- Math.floor(green) +
123
- ", " +
124
- Math.floor(0) +
125
- ")",
630
+ color: "hsl(" + Math.floor(hue) + ", 100%, 50%)",
126
631
  opacity: 1,
127
632
  }),
128
633
  matrix: gl_matrix_1.mat4.create(),
129
634
  };
130
635
  };
131
- const greenWhiteRedVisualization = (factor, materialType) => {
132
- let red = 255, green = 255, blue = 255;
133
- if (factor < 0.5) {
134
- const remappedFactor = factor / 0.5;
135
- red = 255.0 * remappedFactor;
136
- green = 255.0;
137
- blue = 255.0 * remappedFactor;
138
- }
139
- else {
140
- const remappedFactor = (factor - 0.5) / 0.5;
141
- red = 255.0;
142
- green = 255.0 * (1 - remappedFactor);
143
- blue = 255.0 * (1 - remappedFactor);
144
- }
145
- return {
146
- material: materialType === "unlit"
147
- ? new viewer_shared_types_1.MaterialUnlitData({
148
- color: "rgb(" +
149
- Math.floor(red) +
150
- ", " +
151
- Math.floor(green) +
152
- ", " +
153
- Math.floor(blue) +
154
- ")",
155
- opacity: 1,
156
- })
157
- : new viewer_shared_types_1.MaterialStandardData({
158
- color: "rgb(" +
159
- Math.floor(red) +
160
- ", " +
161
- Math.floor(green) +
162
- ", " +
163
- Math.floor(blue) +
164
- ")",
165
- opacity: 1,
166
- }),
167
- matrix: gl_matrix_1.mat4.create(),
168
- };
636
+ const interpolateColors = (color1, color2, factor) => {
637
+ const converter = viewer_shared_services_1.Converter.instance;
638
+ const colorArray1 = converter.toColorArray(color1);
639
+ const colorArray2 = converter.toColorArray(color2);
640
+ // Interpolate the colors
641
+ const r = colorArray1[0] + factor * (colorArray2[0] - colorArray1[0]);
642
+ const g = colorArray1[1] + factor * (colorArray2[1] - colorArray1[1]);
643
+ const b = colorArray1[2] + factor * (colorArray2[2] - colorArray1[2]);
644
+ // Convert the interpolated color back to a hex string
645
+ return converter.toHexColor([r * 256, g * 256, b * 256]);
169
646
  };
170
- const blueGreenRedVisualization = (factor, materialType) => {
171
- let red = 255, green = 255, blue = 255;
172
- if (factor < 0.5) {
173
- const remappedFactor = factor / 0.5;
174
- red = 0;
175
- green = 255.0 * remappedFactor;
176
- blue = 255.0 * (1 - remappedFactor);
177
- }
178
- else {
179
- const remappedFactor = (factor - 0.5) / 0.5;
180
- red = 255.0 * remappedFactor;
181
- green = 255.0 * (1 - remappedFactor);
182
- blue = 0;
647
+ const numberGradientVisualization = (factor, gradient) => {
648
+ for (let i = 0; i < gradient.steps.length; i++) {
649
+ if (gradient.steps[i].value >= factor) {
650
+ // check if the value is the first step
651
+ if (i === 0) {
652
+ return {
653
+ material: new viewer_shared_types_1.MaterialStandardData({
654
+ color: gradient.steps[i].colorBefore,
655
+ opacity: 1,
656
+ }),
657
+ matrix: gl_matrix_1.mat4.create(),
658
+ };
659
+ }
660
+ else {
661
+ // get the previous color
662
+ const previousColor = gradient.steps[i - 1].colorAfter;
663
+ // get the current color
664
+ const currentColor = gradient.steps[i].colorBefore;
665
+ // calculate where the factor is between the two colors
666
+ const stepFactor = (factor - gradient.steps[i - 1].value) /
667
+ (gradient.steps[i].value - gradient.steps[i - 1].value);
668
+ // return interpolated color
669
+ return {
670
+ material: new viewer_shared_types_1.MaterialStandardData({
671
+ color: interpolateColors(previousColor, currentColor, stepFactor),
672
+ opacity: 1,
673
+ }),
674
+ matrix: gl_matrix_1.mat4.create(),
675
+ };
676
+ }
677
+ }
183
678
  }
679
+ // return the after color of the last step
184
680
  return {
185
- material: materialType === "unlit"
186
- ? new viewer_shared_types_1.MaterialUnlitData({
187
- color: "rgb(" +
188
- Math.floor(red) +
189
- ", " +
190
- Math.floor(green) +
191
- ", " +
192
- Math.floor(blue) +
193
- ")",
194
- opacity: 1,
195
- })
196
- : new viewer_shared_types_1.MaterialStandardData({
197
- color: "rgb(" +
198
- Math.floor(red) +
199
- ", " +
200
- Math.floor(green) +
201
- ", " +
202
- Math.floor(blue) +
203
- ")",
204
- opacity: 1,
205
- }),
681
+ material: new viewer_shared_types_1.MaterialStandardData({
682
+ color: gradient.steps[gradient.steps.length - 1].colorAfter,
683
+ opacity: 1,
684
+ }),
206
685
  matrix: gl_matrix_1.mat4.create(),
207
686
  };
208
687
  };
209
- const blueGreenYellowRedPurpleWhiteVisualization = (factor, materialType) => {
210
- let red = 255, green = 255, blue = 255;
211
- if (factor < 0.2) {
212
- const remappedFactor = factor / 0.2;
213
- red = 0;
214
- green = 255.0 * remappedFactor;
215
- blue = 255.0 * (1 - remappedFactor);
216
- }
217
- else if (factor < 0.4) {
218
- const remappedFactor = (factor - 0.2) / 0.2;
219
- red = 255.0 * remappedFactor;
220
- green = 255.0;
221
- blue = 0.0;
222
- }
223
- else if (factor < 0.6) {
224
- const remappedFactor = (factor - 0.4) / 0.2;
225
- red = 255.0;
226
- green = 255.0 * (1 - remappedFactor);
227
- blue = 0.0;
688
+ const stringGradientVisualization = (value, gradient) => {
689
+ const steps = gradient.labelColors;
690
+ const stepCount = steps.length;
691
+ let color = gradient.defaultColor || "rgb(128, 128, 128)";
692
+ for (let i = 0; i < stepCount; i++) {
693
+ if (steps[i].values.includes(value)) {
694
+ color = steps[i].color;
695
+ break;
696
+ }
228
697
  }
229
- else if (factor < 0.8) {
230
- const remappedFactor = (factor - 0.6) / 0.2;
231
- red = 255.0;
232
- green = 0.0;
233
- blue = 255.0 * remappedFactor;
234
- }
235
- else {
236
- const remappedFactor = (factor - 0.8) / 0.2;
237
- red = 255.0;
238
- green = 255.0 * remappedFactor;
239
- blue = 255.0;
240
- }
241
- return {
242
- material: materialType === "unlit"
243
- ? new viewer_shared_types_1.MaterialUnlitData({
244
- color: "rgb(" +
245
- Math.floor(red) +
246
- ", " +
247
- Math.floor(green) +
248
- ", " +
249
- Math.floor(blue) +
250
- ")",
251
- opacity: 1,
252
- })
253
- : new viewer_shared_types_1.MaterialStandardData({
254
- color: "rgb(" +
255
- Math.floor(red) +
256
- ", " +
257
- Math.floor(green) +
258
- ", " +
259
- Math.floor(blue) +
260
- ")",
261
- opacity: 1,
262
- }),
263
- matrix: gl_matrix_1.mat4.create(),
264
- };
265
- };
266
- const hslVisualization = (factor, materialType) => {
267
- const hue = factor * 359.99;
268
698
  return {
269
- material: materialType === "unlit"
270
- ? new viewer_shared_types_1.MaterialUnlitData({
271
- color: "hsl(" + Math.floor(hue) + ", 100%, 50%)",
272
- opacity: 1,
273
- })
274
- : new viewer_shared_types_1.MaterialStandardData({
275
- color: "hsl(" + Math.floor(hue) + ", 100%, 50%)",
276
- opacity: 1,
277
- }),
699
+ material: new viewer_shared_types_1.MaterialStandardData({
700
+ color: color,
701
+ opacity: 1,
702
+ }),
278
703
  matrix: gl_matrix_1.mat4.create(),
279
704
  };
280
705
  };
281
706
  const numberVisualization = (value, min, max, type, materialType, defaultMaterial) => {
282
707
  let factor = (value - min) / (max - min);
283
708
  factor = Math.min(1, Math.max(0, factor));
284
- switch (type) {
285
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GRAYSCALE:
286
- return grayscaleVisualization(factor, materialType);
287
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.OPACITY:
709
+ // check if the type is part of the enum
710
+ if (typeof type === "string") {
711
+ const color = (0, exports.getColorAt)(type, factor);
712
+ if (color) {
713
+ return {
714
+ material: materialType === "unlit"
715
+ ? new viewer_shared_types_1.MaterialUnlitData({
716
+ color: color,
717
+ opacity: 1,
718
+ })
719
+ : new viewer_shared_types_1.MaterialStandardData({
720
+ color: color,
721
+ opacity: 1,
722
+ }),
723
+ matrix: gl_matrix_1.mat4.create(),
724
+ };
725
+ }
726
+ else if (type === IAttribute_1.ATTRIBUTE_VISUALIZATION.OPACITY) {
288
727
  return opacityVisualization(factor, materialType, defaultMaterial);
289
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_RED:
290
- return blueRedVisualization(factor, materialType);
291
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_WHITE_RED:
292
- return blueWhiteRedVisualization(factor, materialType);
293
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_RED:
294
- return greenRedVisualization(factor, materialType);
295
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED:
296
- return greenWhiteRedVisualization(factor, materialType);
297
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_RED:
298
- return blueGreenRedVisualization(factor, materialType);
299
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_YELLOW_RED_PURPLE_WHITE:
300
- return blueGreenYellowRedPurpleWhiteVisualization(factor, materialType);
301
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.HSL:
728
+ }
729
+ else if (type === IAttribute_1.ATTRIBUTE_VISUALIZATION.HSL) {
302
730
  return hslVisualization(factor, materialType);
731
+ }
732
+ }
733
+ else {
734
+ if ((0, IGradient_1.isNumberGradient)(type)) {
735
+ return numberGradientVisualization(factor, type);
736
+ }
303
737
  }
304
738
  };
305
739
  const stringVisualization = (value, values, type, materialType, defaultMaterial) => {
306
740
  let factor = values.indexOf(value) / (values.length - 1);
307
741
  factor = Math.min(1, Math.max(0, factor));
308
- switch (type) {
309
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GRAYSCALE:
310
- return grayscaleVisualization(factor, materialType);
311
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.OPACITY:
742
+ // check if the type is part of the enum
743
+ if (typeof type === "string") {
744
+ const color = (0, exports.getColorAt)(type, factor);
745
+ if (color) {
746
+ return {
747
+ material: materialType === "unlit"
748
+ ? new viewer_shared_types_1.MaterialUnlitData({
749
+ color: color,
750
+ opacity: 1,
751
+ })
752
+ : new viewer_shared_types_1.MaterialStandardData({
753
+ color: color,
754
+ opacity: 1,
755
+ }),
756
+ matrix: gl_matrix_1.mat4.create(),
757
+ };
758
+ }
759
+ else if (type === IAttribute_1.ATTRIBUTE_VISUALIZATION.OPACITY) {
312
760
  return opacityVisualization(factor, materialType, defaultMaterial);
313
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_RED:
314
- return blueRedVisualization(factor, materialType);
315
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_WHITE_RED:
316
- return blueWhiteRedVisualization(factor, materialType);
317
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_RED:
318
- return greenRedVisualization(factor, materialType);
319
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED:
320
- return greenWhiteRedVisualization(factor, materialType);
321
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_RED:
322
- return blueGreenRedVisualization(factor, materialType);
323
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.BLUE_GREEN_YELLOW_RED_PURPLE_WHITE:
324
- return blueGreenYellowRedPurpleWhiteVisualization(factor, materialType);
325
- case IAttribute_1.ATTRIBUTE_VISUALIZATION.HSL:
761
+ }
762
+ else if (type === IAttribute_1.ATTRIBUTE_VISUALIZATION.HSL) {
326
763
  return hslVisualization(factor, materialType);
764
+ }
765
+ }
766
+ else {
767
+ if ((0, IGradient_1.isStringGradient)(type)) {
768
+ return stringGradientVisualization(value, type);
769
+ }
327
770
  }
328
771
  };
329
772
  exports.AttributeVisualizationUtils = {