Configuration Widget Demo

How to use

  • Click the gear icon to open the configuration dialog.
  • Show Button toggles whether each overlay’s toolbar control is visible (same for annotation pencil / save rows).
  • Activate / Deactivate runs the overlay’s normal mode (unchanged by persistence).
  • Pass new ConfigurationWidget(viewer, { storageKey: 'my-app-scope' }) to save toolbar visibility to localStorage under that key. Omit storageKey (or use null) to disable saving.
  • When persistence is on, stored values override register(..., { showButton }) defaults for each overlay key (default key is overlay.constructor.name; set overlayKey if you register multiple instances of the same class).
  • clears this page’s demo keys, re-seeds the “pre-seeded” scenarios, and reloads.

Scenario 1: All overlays + custom section (no persistence)

Scenario 2: Empty config widget (no overlays, no sections)

Scenario 3: Custom section only (no overlays)

Scenario 4: All overlays, toolbar buttons initially hidden (code defaults, no persistence)

Scenario 5: Overlays + AnnotationToolkit (no persistence)

Scenario 6: Persistence on, fresh key — all toolbar buttons shown until you change them; reload restores your last choices

Scenario 7: Persistence on, pre-seeded — Screenshot toolbar button starts hidden (see configuration.mjs)

Scenario 8: Overlays + annotations, persistence on, pre-seeded — annotation pencil toolbar button starts hidden

Scenario 9: Split annotation API + ConfigurationWidget (no addAnnotationUI)