@feng3d/reactivity 1.0.6 → 1.0.8

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 (85) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +158 -158
  3. package/dist/index.js +89 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.umd.cjs +91 -5
  6. package/dist/index.umd.cjs.map +1 -1
  7. package/lib/ReactiveObject.d.ts +101 -0
  8. package/lib/ReactiveObject.d.ts.map +1 -0
  9. package/lib/batch.d.ts.map +1 -1
  10. package/lib/index.d.ts +5 -4
  11. package/lib/index.d.ts.map +1 -1
  12. package/package.json +69 -72
  13. package/src/ReactiveObject.ts +131 -0
  14. package/src/Reactivity.ts +168 -168
  15. package/src/arrayInstrumentations.ts +801 -801
  16. package/src/baseHandlers.ts +312 -312
  17. package/src/batch.ts +134 -118
  18. package/src/collectionHandlers.ts +486 -486
  19. package/src/computed.ts +253 -253
  20. package/src/effect.ts +146 -146
  21. package/src/effectScope.ts +294 -294
  22. package/src/index.ts +10 -9
  23. package/src/property.ts +231 -231
  24. package/src/reactive.ts +186 -186
  25. package/src/ref.ts +150 -150
  26. package/src/shared/constants.ts +41 -41
  27. package/src/shared/general.ts +109 -109
  28. package/tsconfig.json +19 -19
  29. package/dist/assets/RobotoMono-Medium-DVgDz_OO.woff2 +0 -0
  30. package/dist/assets/RobotoMono-Regular-BPoF81uy.woff2 +0 -0
  31. package/dist/assets/index-a2qCSG5V.css +0 -629
  32. package/dist/assets/index.html-Dyp3udP2.js +0 -200
  33. package/dist/assets/modulepreload-polyfill-DaKOjhqt.js +0 -37
  34. package/dist/assets/package-9zMEdmDL.js +0 -2540
  35. package/dist/assets/src//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274/index.html-a69uOZEV.js +0 -59
  36. package/dist/assets/src//346/225/260/347/273/204/index.html-CaZ_5kCZ.js +0 -43
  37. package/dist/docs/.nojekyll +0 -1
  38. package/dist/docs/assets/hierarchy.js +0 -1
  39. package/dist/docs/assets/highlight.css +0 -92
  40. package/dist/docs/assets/icons.js +0 -18
  41. package/dist/docs/assets/icons.svg +0 -1
  42. package/dist/docs/assets/main.js +0 -60
  43. package/dist/docs/assets/navigation.js +0 -1
  44. package/dist/docs/assets/search.js +0 -1
  45. package/dist/docs/assets/style.css +0 -1640
  46. package/dist/docs/classes/ComputedReactivity.html +0 -72
  47. package/dist/docs/classes/EffectReactivity.html +0 -62
  48. package/dist/docs/classes/EffectScope.html +0 -40
  49. package/dist/docs/classes/Reactivity.html +0 -35
  50. package/dist/docs/classes/RefReactivity.html +0 -57
  51. package/dist/docs/functions/batchRun.html +0 -15
  52. package/dist/docs/functions/computed.html +0 -5
  53. package/dist/docs/functions/effect.html +0 -11
  54. package/dist/docs/functions/effectScope.html +0 -5
  55. package/dist/docs/functions/forceTrack.html +0 -6
  56. package/dist/docs/functions/getCurrentScope.html +0 -4
  57. package/dist/docs/functions/isProxy.html +0 -5
  58. package/dist/docs/functions/isReactive.html +0 -5
  59. package/dist/docs/functions/isRef.html +0 -5
  60. package/dist/docs/functions/noTrack.html +0 -6
  61. package/dist/docs/functions/onScopeDispose.html +0 -6
  62. package/dist/docs/functions/reactive.html +0 -19
  63. package/dist/docs/functions/ref.html +0 -13
  64. package/dist/docs/functions/toRaw.html +0 -4
  65. package/dist/docs/hierarchy.html +0 -1
  66. package/dist/docs/index.html +0 -129
  67. package/dist/docs/interfaces/Computed.html +0 -9
  68. package/dist/docs/interfaces/Effect.html +0 -8
  69. package/dist/docs/interfaces/Ref.html +0 -9
  70. package/dist/docs/modules.html +0 -1
  71. package/dist/docs/types/Reactive.html +0 -3
  72. package/dist/docs/types/UnReadonly.html +0 -3
  73. package/dist/files/RobotoMono-Medium.woff2 +0 -0
  74. package/dist/files/RobotoMono-Regular.woff2 +0 -0
  75. package/dist/files/ic_code_black_24dp.svg +0 -4
  76. package/dist/files/ic_search_black_24dp.svg +0 -4
  77. package/dist/files/main.css +0 -629
  78. package/dist/files/thumbnails.svg +0 -7
  79. package/dist/files.json +0 -7
  80. package/dist/index.html +0 -84
  81. package/dist/screenshots//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274.jpg +0 -0
  82. package/dist/screenshots//346/225/260/347/273/204.jpg +0 -0
  83. package/dist/src//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274/index.html +0 -70
  84. package/dist/src//346/225/260/347/273/204/index.html +0 -65
  85. package/dist/tags.json +0 -2
@@ -1,629 +0,0 @@
1
- :root {
2
- color-scheme: light dark;
3
-
4
- --background-color: #fff;
5
- --secondary-background-color: #f7f7f7;
6
-
7
- --color-blue: #049EF4;
8
- --text-color: #444;
9
- --secondary-text-color: #9e9e9e;
10
-
11
- --font-size: 16px;
12
- --line-height: 26px;
13
-
14
- --border-style: 1px solid #E8E8E8;
15
- --header-height: 48px;
16
- --panel-width: 300px;
17
- --panel-padding: 16px;
18
- --icon-size: 20px;
19
- }
20
-
21
- @media (prefers-color-scheme: dark) {
22
-
23
- :root {
24
- --background-color: #222;
25
- --secondary-background-color: #2e2e2e;
26
-
27
- --text-color: #bbb;
28
- --secondary-text-color: #666;
29
-
30
- --border-style: 1px solid #444;
31
- }
32
-
33
- #previewsToggler {
34
- filter: invert(100%);
35
- }
36
-
37
- }
38
-
39
- @font-face {
40
- font-family: 'Roboto Mono';
41
- src: local('Roboto Mono'), local('RobotoMono-Regular'), url('./RobotoMono-Regular.woff2') format('woff2');
42
- font-style: normal;
43
- font-weight: 400;
44
- }
45
-
46
- @font-face {
47
- font-family: 'Roboto Mono';
48
- src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url('./RobotoMono-Medium.woff2') format('woff2');
49
- font-style: normal;
50
- font-weight: 500;
51
- }
52
-
53
- * {
54
- box-sizing: border-box;
55
- -webkit-font-smoothing: antialiased;
56
- -moz-osx-font-smoothing: grayscale;
57
- }
58
-
59
- html, body {
60
- height: 100%;
61
- }
62
-
63
- html {
64
- font-size: calc(var(--font-size) - 1px);
65
- line-height: calc(var(--line-height) - 1px);
66
- }
67
-
68
- body {
69
- font-family: 'Roboto Mono', monospace;
70
- margin: 0px;
71
- color: var(--text-color);
72
- background-color: var(--background-color);
73
- }
74
-
75
- a {
76
- text-decoration: none;
77
- }
78
-
79
- h1 {
80
- font-size: 18px;
81
- line-height: 24px;
82
- font-weight: 500;
83
- }
84
-
85
- h2 {
86
- padding: 0;
87
- margin: 16px 0;
88
- font-size: calc(var(--font-size) - 1px);
89
- line-height: var(--line-height);
90
- font-weight: 500;
91
- color: var(--color-blue);
92
- }
93
-
94
- h3 {
95
- margin: 0;
96
- font-weight: 500;
97
- font-size: calc(var(--font-size) - 1px);
98
- line-height: var(--line-height);
99
- color: var(--secondary-text-color);
100
- }
101
-
102
- h1 a {
103
- color: var(--color-blue);
104
- }
105
-
106
- #header {
107
- display: flex;
108
- height: var(--header-height);
109
- border-bottom: var(--border-style);
110
- align-items: center;
111
- }
112
- #header h1 {
113
- padding-left: var(--panel-padding);
114
- flex: 1;
115
- display: flex;
116
- align-items: center;
117
- color: var(--color-blue);
118
- }
119
- #header #version {
120
- border: 1px solid var(--color-blue);
121
- color: var(--color-blue);
122
- border-radius: 4px;
123
- line-height: 16px;
124
- padding: 0px 2px;
125
- margin-left: 6px;
126
- font-size: .9rem;
127
- }
128
- #panel {
129
- position: fixed;
130
- z-index: 100;
131
- left: 0px;
132
- width: var(--panel-width);
133
- height: 100%;
134
- overflow: auto;
135
- border-right: var(--border-style);
136
- display: flex;
137
- flex-direction: column;
138
- transition: 0s 0s height;
139
- }
140
-
141
- #panel #clearSearchButton {
142
- width: 48px;
143
- height: 48px;
144
- display: none;
145
- background-color: var(--text-color);
146
- background-size: var(--icon-size);
147
- -webkit-mask-image: url(../files/ic_close_black_24dp.svg);
148
- -webkit-mask-position: 50% 50%;
149
- -webkit-mask-repeat: no-repeat;
150
- mask-image: url(../files/ic_close_black_24dp.svg);
151
- mask-position: 50% 50%;
152
- mask-repeat: no-repeat;
153
- cursor: pointer;
154
- margin-right: 0px;
155
- }
156
-
157
- #panel.searchFocused #clearSearchButton {
158
- display: block;
159
- }
160
-
161
- #panel.searchFocused #language {
162
- display: none;
163
- }
164
-
165
- #panel.searchFocused #filterInput {
166
- -webkit-mask-image: none;
167
- mask-image: none;
168
- background-color: inherit;
169
- padding-left: 0;
170
- }
171
-
172
- #panel #expandButton {
173
- width: 48px;
174
- height: 48px;
175
- margin-right: 4px;
176
- margin-left: 4px;
177
- display: none;
178
- cursor: pointer;
179
- background-color: var(--text-color);
180
- background-size: var(--icon-size);
181
- -webkit-mask-image: url(../files/ic_menu_black_24dp.svg);
182
- -webkit-mask-position: 50% 50%;
183
- -webkit-mask-repeat: no-repeat;
184
- mask-image: url(../files/ic_menu_black_24dp.svg);
185
- mask-position: 50% 50%;
186
- mask-repeat: no-repeat;
187
- }
188
-
189
- #panel #sections {
190
- display: flex;
191
- justify-content: center;
192
- z-index: 1000;
193
- position: relative;
194
- height: 100%;
195
- align-items: center;
196
- font-weight: 500;
197
- }
198
-
199
- #panel #sections * {
200
- padding: 0 var(--panel-padding);
201
- height: 100%;
202
- position: relative;
203
- display: flex;
204
- justify-content: center;
205
- align-items: center;
206
- }
207
- #panel #sections .selected:after {
208
- content: "";
209
- position: absolute;
210
- left: 0;
211
- right: 0;
212
- bottom: -1px;
213
- border-bottom: 1px solid var(--text-color);
214
- }
215
- #panel #sections a {
216
- color: var(--secondary-text-color);
217
- }
218
-
219
- body.home #panel #sections {
220
- display: none;
221
- }
222
-
223
-
224
- #panel #inputWrapper {
225
- display: flex;
226
- align-items: center;
227
- height: var(--header-height);
228
- padding: 0 0 0 var(--panel-padding);
229
- position: relative;
230
- background: var(--background-color);
231
- }
232
- #panel #inputWrapper:after {
233
- position: absolute;
234
- left: 0;
235
- right: 0;
236
- bottom: 0;
237
- border-bottom: var(--border-style);
238
- content: "";
239
- }
240
-
241
- #panel #filterInput {
242
- flex: 1;
243
- width: 100%;
244
- font-size: 1rem;
245
- font-weight: 500;
246
- color: var(--text-color);
247
- outline: none;
248
- border: 0px;
249
- background-color: var(--text-color);
250
- background-size: var(--icon-size);
251
- -webkit-mask-image: url(./ic_search_black_24dp.svg);
252
- -webkit-mask-position: 0 50%;
253
- -webkit-mask-repeat: no-repeat;
254
- mask-image: url(./ic_search_black_24dp.svg);
255
- mask-position: 0 50%;
256
- mask-repeat: no-repeat;
257
- font-family: 'Roboto Mono', monospace;
258
- }
259
-
260
- #panel #language {
261
- font-family: 'Roboto Mono', monospace;
262
- font-size: 1rem;
263
- font-weight: 500;
264
- color: var(--text-color);
265
- border: 0px;
266
- background-image: url(ic_arrow_drop_down_black_24dp.svg);
267
- background-size: var(--icon-size);
268
- background-repeat: no-repeat;
269
- background-position: right center;
270
- background-color: var(--background-color);
271
- padding: 2px 24px 4px 24px;
272
- -webkit-appearance: none;
273
- -moz-appearance: none;
274
- appearance: none;
275
- margin-right: 10px;
276
- text-align-last: right;
277
- }
278
-
279
- #panel #language:focus {
280
- outline: none;
281
- }
282
-
283
- #contentWrapper {
284
- flex: 1;
285
- overflow: hidden;
286
- display: flex;
287
- flex-direction: column;
288
- }
289
-
290
- #panel #content {
291
- flex: 1;
292
- overflow-y: auto;
293
- overflow-x: hidden;
294
- -webkit-overflow-scrolling: touch;
295
- padding: 0 var(--panel-padding) var(--panel-padding) var(--panel-padding);
296
- }
297
-
298
- #panel #content ul {
299
- list-style-type: none;
300
- padding: 0px;
301
- margin: 0px 0 20px 0;
302
- }
303
- #panel #content ul li {
304
- margin: 1px 0;
305
- }
306
-
307
- #panel #content h2:not(.hidden) {
308
- margin-top: 16px;
309
- border-top: none;
310
- padding-top: 0;
311
- }
312
-
313
- #panel #content h2:not(.hidden) ~ h2 {
314
- margin-top: 32px;
315
- border-top: var(--border-style);
316
- padding-top: 12px;
317
- }
318
-
319
- #panel #content h3 {
320
- color: var(--text-color);
321
- font-weight: 900;
322
- }
323
-
324
- #panel #content a {
325
- position: relative;
326
- color: var(--text-color);
327
- }
328
-
329
- #panel #content a:hover,
330
- #panel #content a:hover .spacer,
331
- #panel #content .selected {
332
- color: var(--color-blue);
333
- }
334
-
335
- #panel #content .selected {
336
- text-decoration: underline;
337
- }
338
-
339
- #panel #content .hidden {
340
- display: none !important;
341
- }
342
-
343
- #panel #content #previewsToggler {
344
- cursor: pointer;
345
- float: right;
346
- margin-top: 18px;
347
- margin-bottom: -18px;
348
- opacity: 0.25;
349
- }
350
-
351
- #panel #content.minimal .card {
352
- background-color: transparent;
353
- margin-bottom: 4px;
354
- }
355
-
356
- #panel #content.minimal .cover {
357
- display: none;
358
- }
359
-
360
- #panel #content.minimal .title {
361
- padding: 0;
362
- }
363
-
364
- #panel #content.minimal #previewsToggler {
365
- opacity: 1;
366
- }
367
-
368
- body.home #panel #content h2 {
369
- margin-bottom: 2px;
370
- padding-bottom: 0px;
371
- margin-top: 18px;
372
- border-top: none;
373
- padding-top: 6px;
374
- }
375
-
376
- .spacer {
377
- color: var(--secondary-text-color);
378
- margin-left: 2px;
379
- padding-right: 2px;
380
- }
381
-
382
- #viewer,
383
- iframe {
384
- position: absolute;
385
- border: 0px;
386
- left: 0;
387
- right: 0;
388
- width: 100%;
389
- height: 100%;
390
- overflow: auto;
391
- }
392
-
393
- iframe#viewer {
394
- display: none; /* Workaround: The iframe has white background in Chrome for some reason */
395
- }
396
-
397
- #viewer {
398
- padding-left: var(--panel-width);
399
- }
400
-
401
- #button {
402
- position: fixed;
403
- bottom: 16px;
404
- right: 16px;
405
-
406
- padding: 12px;
407
- border-radius: 50%;
408
- margin-bottom: 0px;
409
-
410
- background-color: #FFF;
411
- opacity: .9;
412
- z-index: 999;
413
-
414
- box-shadow: 0 0 4px rgba(0,0,0,.15);
415
- }
416
- #button:hover {
417
- cursor: pointer;
418
- opacity: 1;
419
- }
420
- #button img {
421
- display: block;
422
- width: var(--icon-size);
423
- }
424
-
425
- #button.text {
426
- border-radius: 25px;
427
- padding-right: 20px;
428
- padding-left: 20px;
429
- color: var(--color-blue);
430
- opacity: 1;
431
- font-weight: 500;
432
- }
433
-
434
-
435
- #projects {
436
- display: grid;
437
- grid-template-columns: repeat(6, 1fr);
438
- line-height: 0;
439
- }
440
- #projects a {
441
- overflow: hidden;
442
- }
443
- #projects a img {
444
- width: 100%;
445
- transform: scale(1.0);
446
- transition: 0.15s transform;
447
- }
448
- #projects a:hover img {
449
- transform: scale(1.08);
450
- }
451
-
452
-
453
-
454
- @media all and ( min-width: 1500px ) {
455
- #projects {
456
- grid-template-columns: repeat(7, 1fr);
457
- }
458
- }
459
-
460
- @media all and ( min-width: 1700px ) {
461
- :root {
462
- --panel-width: 360px;
463
- --font-size: 18px;
464
- --line-height: 28px;
465
- --header-height: 56px;
466
- --icon-size: 24px;
467
- }
468
- #projects {
469
- grid-template-columns: repeat(8, 1fr);
470
- }
471
- }
472
-
473
- @media all and ( min-width: 1900px ) {
474
-
475
- #projects {
476
- grid-template-columns: repeat(9, 1fr);
477
- }
478
-
479
- }
480
-
481
- @media all and ( max-width: 1300px ) {
482
- #projects {
483
- grid-template-columns: repeat(6, 1fr);
484
- }
485
- }
486
-
487
- @media all and ( max-width: 1100px ) {
488
- #projects {
489
- grid-template-columns: repeat(5, 1fr);
490
- }
491
- }
492
-
493
- @media all and ( max-width: 900px ) {
494
- #projects {
495
- grid-template-columns: repeat(4, 1fr);
496
- }
497
- }
498
-
499
- @media all and ( max-width: 700px ) {
500
- #projects {
501
- grid-template-columns: repeat(3, 1fr);
502
- }
503
- }
504
-
505
-
506
- .card {
507
- border-radius: 3px;
508
- overflow: hidden;
509
- background-color: var(--secondary-background-color);
510
- padding-bottom: 6px;
511
- margin-bottom: 16px;
512
- }
513
-
514
- .card.selected {
515
- box-shadow: 0 0 0 3px var(--color-blue);
516
- text-decoration: none !important;
517
- }
518
-
519
- .card .cover {
520
- padding-bottom: 56.25%; /* 16:9 aspect ratio */
521
- position: relative;
522
- overflow: hidden;
523
- }
524
-
525
- .card .cover img {
526
- position: absolute;
527
- width: 100%;
528
- top: 50%;
529
- left: 50%;
530
- transform: translate(-50%, -50%);
531
- }
532
-
533
- .card .title {
534
- padding: 8px 12px 4px;
535
- font-size: calc(var(--font-size) - 1px);
536
- font-weight: 500;
537
- line-height: calc(var(--line-height) - 6px);
538
- }
539
-
540
- .card .tag {
541
- background-color: var(--background-color);
542
- color: var(--color-blue);
543
- margin-left: 6px;
544
- padding: 1px 6px 2px;
545
- border-radius: 2px;
546
- font-size: calc(var(--font-size) - 2px);
547
- line-height: calc(var(--line-height) - 6px);
548
- }
549
-
550
- /* mobile */
551
-
552
- @media all and ( max-width: 640px ) {
553
-
554
- :root {
555
- --header-height: 56px;
556
- --icon-size: 24px;
557
- }
558
-
559
- #projects {
560
- grid-template-columns: repeat(2, 1fr);
561
- }
562
-
563
- #panel #expandButton {
564
- display: block;
565
- }
566
- #panel {
567
- position: absolute;
568
- left: 0;
569
- top: 0;
570
- width: 100%;
571
- right: 0;
572
- z-index: 1000;
573
- overflow-x: hidden;
574
- transition: 0s 0s height;
575
- border: none;
576
- height: var(--header-height);
577
- transition: 0s 0.2s height;
578
- }
579
- #panel.open {
580
- height: 100%;
581
- transition: 0s 0s height;
582
- }
583
-
584
- #panelScrim {
585
- pointer-events: none;
586
- background-color: rgba(0,0,0,0);
587
- position: absolute;
588
- left: 0;
589
- right: 0;
590
- top: 0;
591
- bottom: 0;
592
- z-index: 1000;
593
- pointer-events: none;
594
- transition: .2s background-color;
595
- }
596
- #panel.open #panelScrim {
597
- pointer-events: auto;
598
- background-color: rgba(0,0,0,0.4);
599
- }
600
-
601
- #contentWrapper {
602
- position: absolute;
603
- right: 0;
604
- top: 0;
605
- bottom: 0;
606
- background: var(--background-color);
607
- box-shadow: 0 0 8px rgba(0,0,0,.1);
608
- width: calc(100vw - 60px);
609
- max-width: 360px;
610
- z-index: 10000;
611
- transition: .25s transform;
612
- overflow-x: hidden;
613
- margin-right: -380px;
614
- line-height: 2rem;
615
- }
616
- #panel.open #contentWrapper {
617
- transform: translate3d(-380px, 0 ,0);
618
- }
619
- #viewer,
620
- iframe {
621
- left: 0;
622
- top: var(--header-height);
623
- width: 100%;
624
- height: calc(100% - var(--header-height));
625
- }
626
- #viewer {
627
- padding-left: 0;
628
- }
629
- }
@@ -1,7 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
3
- <g fill="none" stroke="#000" stroke-linecap="round" stroke-width="35">
4
- <path d="m308.67 108.63h-194.68c-27.7 0-50 22.3-50 50v194.68m142.66 55.332h194.59c27.7 0 50-22.3 50-50v-194.59"/>
5
- <path d="m66.583 449.71 379.6-379.6"/>
6
- </g>
7
- </svg>
package/dist/files.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "性能测试":[
3
- "复杂情况取值",
4
- "数组",
5
- ""
6
- ]
7
- }
package/dist/index.html DELETED
@@ -1,84 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <title>reactivity examples</title>
7
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
8
- <link rel="shortcut icon" href="./resources/files/favicon_white.ico" media="(prefers-color-scheme: dark)" />
9
- <link rel="shortcut icon" href="./resources/files/favicon.ico" media="(prefers-color-scheme: light)" />
10
- <script type="module" crossorigin src="./assets/index.html-Dyp3udP2.js"></script>
11
- <link rel="modulepreload" crossorigin href="./assets/modulepreload-polyfill-DaKOjhqt.js">
12
- <link rel="stylesheet" crossorigin href="./assets/index-a2qCSG5V.css">
13
- </head>
14
-
15
- <body>
16
-
17
- <div id="panel">
18
-
19
- <div id="header">
20
- <h1><a href="http://www.feng3d.com">feng3d</a>/<a href="https://feng3d.com/reactivity">reactivity</a> </h1>
21
-
22
- <div id="sections">
23
- <a href="https://feng3d.com/reactivity/docs">docs</a>
24
- <a href="https://gitee.com/feng3d/reactivity">source</a>
25
- </div>
26
-
27
- <div id="expandButton"></div>
28
- </div>
29
-
30
- <div id="panelScrim"></div>
31
-
32
- <div id="contentWrapper">
33
-
34
- <div id="inputWrapper">
35
- <input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off"
36
- spellcheck="false" />
37
- <div id="clearSearchButton"></div>
38
- </div>
39
-
40
- <div id="content">
41
- <img id="previewsToggler" src="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20version='1.1'%20viewBox='0%200%20512%20512'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-width='35'%3e%3cpath%20d='m308.67%20108.63h-194.68c-27.7%200-50%2022.3-50%2050v194.68m142.66%2055.332h194.59c27.7%200%2050-22.3%2050-50v-194.59'/%3e%3cpath%20d='m66.583%20449.71%20379.6-379.6'/%3e%3c/g%3e%3c/svg%3e" width="20" height="20" />
42
- </div>
43
- </div>
44
-
45
- </div>
46
-
47
- <iframe id="viewer" name="viewer" allow="fullscreen; xr-spatial-tracking;"></iframe>
48
-
49
- <a id="button" target="_blank"><img src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20fill='%23000000'%3e%3cpath%20fill='none'%20d='M0%200h24v24H0V0z'/%3e%3cpath%20d='M9.4%2016.6L4.8%2012l4.6-4.6L8%206l-6%206%206%206%201.4-1.4zm5.2%200l4.6-4.6-4.6-4.6L16%206l6%206-6%206-1.4-1.4z'/%3e%3c/svg%3e"></a>
50
-
51
- <template id="PlaceholderHTML">
52
- <!DOCTYPE html>
53
- <html lang="en">
54
-
55
- <head>
56
- <meta charset="utf-8">
57
- <title>reactivity examples</title>
58
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
59
- <style>
60
- html,
61
- body {
62
- height: 100%;
63
- }
64
-
65
- body {
66
- height: 100%;
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- user-select: none;
71
- }
72
- </style>
73
- </head>
74
-
75
- <body>
76
- Select an example from the sidebar
77
- </body>
78
-
79
- </html>
80
- </template>
81
-
82
- </body>
83
-
84
- </html>