triiiceratops 0.12.3 → 0.12.5

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 (27) hide show
  1. package/dist/{ArrowCounterClockwise-CM9mGGcp.js → ArrowCounterClockwise-Bcse6skq.js} +1 -1
  2. package/dist/Check-D3d2XX_P.js +423 -0
  3. package/dist/{X-Bn7S7vUL.js → X-BsrpnzCK.js} +169 -156
  4. package/dist/components/DemoHeader.svelte +5 -548
  5. package/dist/components/SettingsMenu.svelte +507 -0
  6. package/dist/components/SettingsMenu.svelte.d.ts +6 -0
  7. package/dist/components/Toolbar.svelte +13 -2
  8. package/dist/components/TriiiceratopsViewer.svelte +37 -11
  9. package/dist/{image_filters_reset-CmWuQiOc.js → image_filters_reset-Dw23NgOZ.js} +1 -1
  10. package/dist/paraglide/messages/_index.d.ts +3 -0
  11. package/dist/paraglide/messages/_index.js +3 -0
  12. package/dist/paraglide/messages/demo_title.d.ts +4 -0
  13. package/dist/paraglide/messages/demo_title.js +34 -0
  14. package/dist/paraglide/messages/settings_thumbnail_height.d.ts +4 -0
  15. package/dist/paraglide/messages/settings_thumbnail_height.js +34 -0
  16. package/dist/paraglide/messages/settings_toggle_show_viewing_mode.js +3 -2
  17. package/dist/paraglide/messages/settings_view_configuration.d.ts +4 -0
  18. package/dist/paraglide/messages/settings_view_configuration.js +34 -0
  19. package/dist/plugins/annotation-editor.js +493 -623
  20. package/dist/plugins/image-manipulation.js +3 -3
  21. package/dist/state/viewer.svelte.d.ts +1 -0
  22. package/dist/state/viewer.svelte.js +6 -1
  23. package/dist/triiiceratops-bundle.js +1780 -1711
  24. package/dist/triiiceratops-element.iife.js +15 -15
  25. package/dist/triiiceratops.css +1 -1
  26. package/package.json +1 -1
  27. package/dist/annotation_tool_point-LoRp_nrI.js +0 -290
package/dist/components/DemoHeader.svelte CHANGED
@@ -1,9 +1,9 @@
1
1
  <script lang="ts">
2
2
  import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
3
3
  import Gear from 'phosphor-svelte/lib/Gear';
4
- import Copy from 'phosphor-svelte/lib/Copy';
5
4
  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
6
5
  import ThemeToggle from './ThemeToggle.svelte';
6
+ import SettingsMenu from './SettingsMenu.svelte';
7
7
 
8
8
  import { m, language } from '../state/i18n.svelte';
9
9
  import { manifestsState } from '../state/manifests.svelte';
@@ -105,17 +105,6 @@
105
105
  onLoad();
106
106
  }
107
107
  }
108
- import Check from 'phosphor-svelte/lib/Check';
109
-
110
- let copied = $state(false);
111
-
112
- function copyConfig() {
113
- navigator.clipboard.writeText(JSON.stringify(config, null, 2));
114
- copied = true;
115
- setTimeout(() => {
116
- copied = false;
117
- }, 2000);
118
- }
119
108
 
120
109
  // Initialize from config
121
110
  let activeSearchTerm = $state(config.search?.query || '');
@@ -221,7 +210,7 @@
221
210
  <ThemeToggle />
222
211
 
223
212
  <!-- Settings Dropdown -->
224
- <div class="dropdown dropdown-end group">
213
+ <div class="dropdown dropdown-end group lg:hidden">
225
214
  <div
226
215
  tabindex="0"
227
216
  role="button"
@@ -230,542 +219,10 @@
230
219
  >
231
220
  <Gear size={20} />
232
221
  </div>
233
- <ul
234
- tabindex="-1"
222
+ <SettingsMenu
223
+ bind:config
235
224
  class="dropdown-content z-20 menu bg-base-100 rounded-box w-80 p-2 shadow border border-base-300 max-h-[80vh] overflow-y-auto block invisible pointer-events-none group-focus-within:visible group-focus-within:pointer-events-auto"
236
- >
237
- <li class="menu-title px-4 py-2">
238
- {m.settings_category_general()}
239
- </li>
240
- <li>
241
- <label class="label cursor-pointer py-1">
242
- <span class="label-text"
243
- >{m.settings_transparent_background()}</span
244
- >
245
- <input
246
- type="checkbox"
247
- class="toggle toggle-sm"
248
- bind:checked={config.transparentBackground}
249
- />
250
- </label>
251
- </li>
252
- <li>
253
- <label class="label cursor-pointer py-1">
254
- <span class="label-text"
255
- >{m.settings_toggle_canvas_nav()}</span
256
- >
257
- <input
258
- type="checkbox"
259
- class="toggle toggle-sm"
260
- bind:checked={config.showCanvasNav}
261
- />
262
- </label>
263
- </li>
264
- <li>
265
- <label class="label cursor-pointer py-1">
266
- <span class="label-text"
267
- >{m.settings_toggle_zoom_controls()}</span
268
- >
269
- <input
270
- type="checkbox"
271
- class="toggle toggle-sm"
272
- bind:checked={config.showZoomControls}
273
- />
274
- </label>
275
- </li>
276
-
277
- <div class="divider my-1"></div>
278
-
279
- <li class="menu-title px-4 py-2">
280
- {m.settings_category_configuration()}
281
- </li>
282
-
283
- <li>
284
- <details>
285
- <summary>{m.settings_submenu_toolbar()}</summary>
286
- <ul>
287
- <li>
288
- <label class="label cursor-pointer py-1">
289
- <span class="label-text"
290
- >{m.settings_toggle_show_toggle()}</span
291
- >
292
- <input
293
- type="checkbox"
294
- class="toggle toggle-sm"
295
- checked={config.showToggle !== false}
296
- onchange={(e) => {
297
- config.showToggle =
298
- e.currentTarget.checked;
299
- }}
300
- />
301
- </label>
302
- </li>
303
- <li>
304
- <label class="label cursor-pointer py-1">
305
- <span class="label-text"
306
- >{m.settings_toolbar_open()}</span
307
- >
308
- <input
309
- type="checkbox"
310
- class="toggle toggle-sm"
311
- bind:checked={config.toolbarOpen}
312
- />
313
- </label>
314
- </li>
315
- <li>
316
- <label class="label cursor-pointer py-1">
317
- <span class="label-text"
318
- >{m.settings_toolbar_position()}</span
319
- >
320
- <select
321
- class="select select-bordered select-xs w-24"
322
- value={config.toolbarPosition ?? 'left'}
323
- onchange={(e) => {
324
- config.toolbarPosition = (
325
- e.currentTarget as HTMLSelectElement
326
- ).value as 'left' | 'right' | 'top';
327
- }}
328
- >
329
- <option value="left"
330
- >{m.settings_position_left()}</option
331
- >
332
- <option value="right"
333
- >{m.settings_position_right()}</option
334
- >
335
- <option value="top"
336
- >{m.settings_position_top()}</option
337
- >
338
- </select>
339
- </label>
340
- </li>
341
- <div class="divider my-1"></div>
342
- <li>
343
- <label class="label cursor-pointer py-1">
344
- <span class="label-text"
345
- >{m.settings_toggle_show_search()}</span
346
- >
347
- <input
348
- type="checkbox"
349
- class="checkbox checkbox-xs"
350
- checked={config.toolbar?.showSearch ??
351
- true}
352
- onchange={(e) => {
353
- if (!config.toolbar)
354
- config.toolbar = {};
355
- config.toolbar.showSearch =
356
- e.currentTarget.checked;
357
- }}
358
- />
359
- </label>
360
- </li>
361
- <li>
362
- <label class="label cursor-pointer py-1">
363
- <span class="label-text"
364
- >{m.settings_toggle_show_gallery()}</span
365
- >
366
- <input
367
- type="checkbox"
368
- class="checkbox checkbox-xs"
369
- checked={config.toolbar?.showGallery ??
370
- true}
371
- onchange={(e) => {
372
- if (!config.toolbar)
373
- config.toolbar = {};
374
- config.toolbar.showGallery =
375
- e.currentTarget.checked;
376
- }}
377
- />
378
- </label>
379
- </li>
380
- <li>
381
- <label class="label cursor-pointer py-1">
382
- <span class="label-text"
383
- >{m.settings_toggle_show_annotations()}</span
384
- >
385
- <input
386
- type="checkbox"
387
- class="checkbox checkbox-xs"
388
- checked={config.toolbar
389
- ?.showAnnotations ?? true}
390
- onchange={(e) => {
391
- if (!config.toolbar)
392
- config.toolbar = {};
393
- config.toolbar.showAnnotations =
394
- e.currentTarget.checked;
395
- }}
396
- />
397
- </label>
398
- </li>
399
- <li>
400
- <label class="label cursor-pointer py-1">
401
- <span class="label-text"
402
- >{m.settings_toggle_show_fullscreen()}</span
403
- >
404
- <input
405
- type="checkbox"
406
- class="checkbox checkbox-xs"
407
- checked={config.toolbar
408
- ?.showFullscreen ?? true}
409
- onchange={(e) => {
410
- if (!config.toolbar)
411
- config.toolbar = {};
412
- config.toolbar.showFullscreen =
413
- e.currentTarget.checked;
414
- }}
415
- />
416
- </label>
417
- </li>
418
- <li>
419
- <label class="label cursor-pointer py-1">
420
- <span class="label-text"
421
- >{m.settings_toggle_show_info()}</span
422
- >
423
- <input
424
- type="checkbox"
425
- class="checkbox checkbox-xs"
426
- checked={config.toolbar?.showInfo ??
427
- true}
428
- onchange={(e) => {
429
- if (!config.toolbar)
430
- config.toolbar = {};
431
- config.toolbar.showInfo =
432
- e.currentTarget.checked;
433
- }}
434
- />
435
- </label>
436
- </li>
437
- <li>
438
- <label class="label cursor-pointer py-1">
439
- <span class="label-text"
440
- >{m.settings_toggle_show_viewing_mode()}</span
441
- >
442
- <input
443
- type="checkbox"
444
- class="checkbox checkbox-xs"
445
- checked={config.toolbar
446
- ?.showViewingMode ?? true}
447
- onchange={(e) => {
448
- if (!config.toolbar)
449
- config.toolbar = {};
450
- config.toolbar.showViewingMode =
451
- e.currentTarget.checked;
452
- }}
453
- />
454
- </label>
455
- </li>
456
- <li>
457
- <label class="label cursor-pointer py-1">
458
- <span class="label-text"
459
- >{m.viewing_mode_label()}</span
460
- >
461
- <select
462
- class="select select-bordered select-xs"
463
- value={config.viewingMode ??
464
- 'individuals'}
465
- onchange={(e) => {
466
- config.viewingMode = (
467
- e.currentTarget as HTMLSelectElement
468
- ).value as 'individuals' | 'paged';
469
- }}
470
- >
471
- <option value="individuals"
472
- >{m.viewing_mode_individuals()}</option
473
- >
474
- <option value="paged"
475
- >{m.viewing_mode_paged()}</option
476
- >
477
- </select>
478
- </label>
479
- </li>
480
- </ul>
481
- </details>
482
- </li>
483
-
484
- <li>
485
- <details>
486
- <summary>{m.settings_submenu_gallery()}</summary>
487
- <ul>
488
- <li>
489
- <label class="label cursor-pointer py-1">
490
- <span class="label-text"
491
- >{m.settings_toggle_open()}</span
492
- >
493
- <input
494
- type="checkbox"
495
- class="toggle toggle-xs"
496
- checked={config.gallery?.open ?? false}
497
- onchange={(e) => {
498
- if (!config.gallery)
499
- config.gallery = {};
500
- config.gallery.open =
501
- e.currentTarget.checked;
502
- }}
503
- />
504
- </label>
505
- </li>
506
- <li>
507
- <label class="label cursor-pointer py-1">
508
- <span class="label-text"
509
- >{m.settings_toggle_draggable()}</span
510
- >
511
- <input
512
- type="checkbox"
513
- class="checkbox checkbox-xs"
514
- checked={config.gallery?.draggable ??
515
- true}
516
- onchange={(e) => {
517
- if (!config.gallery)
518
- config.gallery = {};
519
- config.gallery.draggable =
520
- e.currentTarget.checked;
521
- }}
522
- />
523
- </label>
524
- </li>
525
- <li>
526
- <label class="label cursor-pointer py-1">
527
- <span class="label-text"
528
- >{m.settings_toggle_close_button()}</span
529
- >
530
- <input
531
- type="checkbox"
532
- class="checkbox checkbox-xs"
533
- checked={config.gallery
534
- ?.showCloseButton ?? true}
535
- onchange={(e) => {
536
- if (!config.gallery)
537
- config.gallery = {};
538
- config.gallery.showCloseButton =
539
- e.currentTarget.checked;
540
- }}
541
- />
542
- </label>
543
- </li>
544
- <li>
545
- <label class="label cursor-pointer py-1 gap-2">
546
- <span class="label-text"
547
- >{m.settings_select_dock_position()}</span
548
- >
549
- <select
550
- class="select select-bordered select-xs w-24"
551
- value={config.gallery?.dockPosition ??
552
- 'bottom'}
553
- onchange={(e) => {
554
- if (!config.gallery)
555
- config.gallery = {};
556
- config.gallery.dockPosition = (
557
- e.currentTarget as HTMLSelectElement
558
- ).value;
559
- }}
560
- onclick={(e) => e.stopPropagation()}
561
- >
562
- <option value="bottom"
563
- >{m.settings_position_bottom()}</option
564
- >
565
- <option value="top"
566
- >{m.settings_position_top()}</option
567
- >
568
- <option value="left"
569
- >{m.settings_position_left()}</option
570
- >
571
- <option value="right"
572
- >{m.settings_position_right()}</option
573
- >
574
- <option value="none"
575
- >{m.settings_position_floating()}</option
576
- >
577
- </select>
578
- </label>
579
- </li>
580
- <li>
581
- <label class="label cursor-pointer py-1 gap-2">
582
- <span class="label-text"
583
- >Thumbnail Height</span
584
- >
585
- <input
586
- type="range"
587
- min="50"
588
- max="300"
589
- value={config.gallery?.fixedHeight ??
590
- 120}
591
- class="range range-xs range-primary w-24"
592
- oninput={(e) => {
593
- if (!config.gallery)
594
- config.gallery = {};
595
- config.gallery.fixedHeight =
596
- parseInt(e.currentTarget.value);
597
- }}
598
- />
599
- <span
600
- class="text-xs opacity-50 w-8 text-right"
601
- >{config.gallery?.fixedHeight ??
602
- 120}px</span
603
- >
604
- </label>
605
- </li>
606
- </ul>
607
- </details>
608
- </li>
609
-
610
- <li>
611
- <details>
612
- <summary>{m.settings_submenu_search()}</summary>
613
- <ul>
614
- <li>
615
- <label class="label cursor-pointer py-1">
616
- <span class="label-text"
617
- >{m.settings_toggle_open()}</span
618
- >
619
- <input
620
- type="checkbox"
621
- class="toggle toggle-xs"
622
- checked={config.search?.open ?? false}
623
- onchange={(e) => {
624
- if (!config.search)
625
- config.search = {};
626
- config.search.open =
627
- e.currentTarget.checked;
628
- }}
629
- />
630
- </label>
631
- </li>
632
- <li>
633
- <label class="label cursor-pointer py-1">
634
- <span class="label-text"
635
- >{m.settings_toggle_close_button()}</span
636
- >
637
- <input
638
- type="checkbox"
639
- class="checkbox checkbox-xs"
640
- checked={config.search
641
- ?.showCloseButton ?? true}
642
- onchange={(e) => {
643
- if (!config.search)
644
- config.search = {};
645
- config.search.showCloseButton =
646
- e.currentTarget.checked;
647
- }}
648
- />
649
- </label>
650
- </li>
651
- <li>
652
- <label class="label cursor-pointer py-1 gap-2">
653
- <span class="label-text"
654
- >{m.settings_select_dock_position()}</span
655
- >
656
- <select
657
- class="select select-bordered select-xs w-24"
658
- value={config.search?.position ??
659
- 'right'}
660
- onchange={(e) => {
661
- if (!config.search)
662
- config.search = {};
663
- config.search.position = (
664
- e.currentTarget as HTMLSelectElement
665
- ).value;
666
- }}
667
- onclick={(e) => e.stopPropagation()}
668
- >
669
- <option value="right"
670
- >{m.settings_position_right()}</option
671
- >
672
- <option value="left"
673
- >{m.settings_position_left()}</option
674
- >
675
- </select>
676
- </label>
677
- </li>
678
- <li>
679
- <label class="label cursor-pointer py-1 gap-2">
680
- <span class="label-text"
681
- >{m.settings_panel_width()}</span
682
- >
683
- <input
684
- type="range"
685
- min="200"
686
- max="800"
687
- value={parseInt(
688
- config.search?.width ?? '320',
689
- )}
690
- class="range range-xs range-primary w-32"
691
- oninput={(e) => {
692
- if (!config.search)
693
- config.search = {};
694
- config.search.width = `${e.currentTarget.value}px`;
695
- }}
696
- />
697
- <span
698
- class="text-xs opacity-50 w-8 text-right"
699
- >{config.search?.width ?? '320px'}</span
700
- >
701
- </label>
702
- </li>
703
- </ul>
704
- </details>
705
- </li>
706
-
707
- <li>
708
- <details>
709
- <summary>{m.settings_submenu_annotations()}</summary>
710
- <ul>
711
- <li>
712
- <label class="label cursor-pointer py-1">
713
- <span class="label-text"
714
- >{m.settings_toggle_panel_open()}</span
715
- >
716
- <input
717
- type="checkbox"
718
- class="toggle toggle-xs"
719
- checked={config.annotations?.open ??
720
- false}
721
- onchange={(e) => {
722
- if (!config.annotations)
723
- config.annotations = {};
724
- config.annotations.open =
725
- e.currentTarget.checked;
726
- }}
727
- />
728
- </label>
729
- </li>
730
- <li>
731
- <label class="label cursor-pointer py-1">
732
- <span class="label-text"
733
- >{m.settings_toggle_visible_by_default()}</span
734
- >
735
- <input
736
- type="checkbox"
737
- class="checkbox checkbox-xs"
738
- checked={config.annotations?.visible ??
739
- true}
740
- onchange={(e) => {
741
- if (!config.annotations)
742
- config.annotations = {};
743
- config.annotations.visible =
744
- e.currentTarget.checked;
745
- }}
746
- />
747
- </label>
748
- </li>
749
- </ul>
750
- </details>
751
- </li>
752
- <div class="divider my-1"></div>
753
- <li>
754
- <button
755
- class="btn btn-sm btn-ghost w-full justify-start gap-2"
756
- class:text-success={copied}
757
- onclick={copyConfig}
758
- >
759
- {#if copied}
760
- <Check size={16} />
761
- {m.copied()}
762
- {:else}
763
- <Copy size={16} />
764
- {m.copy_config()}
765
- {/if}
766
- </button>
767
- </li>
768
- </ul>
225
+ />
769
226
  </div>
770
227
 
771
228
  <div class="tooltip tooltip-bottom" data-tip={m.github()}>