| 39 | }; |
| 40 | |
| 41 | const createModeToggle = (): { |
| 42 | readonly host: HTMLDivElement; |
| 43 | readonly checkbox: HTMLInputElement; |
| 44 | readonly setEnabled: (enabled: boolean) => void; |
| 45 | readonly setChecked: (checked: boolean) => void; |
| 46 | } => { |
| 47 | const host = document.createElement('div'); |
| 48 | host.style.display = 'flex'; |
| 49 | host.style.alignItems = 'center'; |
| 50 | host.style.gap = '10px'; |
| 51 | host.style.marginTop = '10px'; |
| 52 | host.style.color = '#cfcfcf'; |
| 53 | host.style.fontSize = '0.9rem'; |
| 54 | |
| 55 | const label = document.createElement('label'); |
| 56 | label.style.display = 'inline-flex'; |
| 57 | label.style.alignItems = 'center'; |
| 58 | label.style.gap = '8px'; |
| 59 | label.style.cursor = 'pointer'; |
| 60 | label.style.userSelect = 'none'; |
| 61 | |
| 62 | const checkbox = document.createElement('input'); |
| 63 | checkbox.type = 'checkbox'; |
| 64 | checkbox.id = 'worker-mode-toggle'; |
| 65 | |
| 66 | const labelText = document.createElement('span'); |
| 67 | labelText.textContent = 'Worker mode (OffscreenCanvas)'; |
| 68 | |
| 69 | const note = document.createElement('span'); |
| 70 | note.textContent = 'Recreates the chart to demonstrate annotations work in both modes.'; |
| 71 | note.style.color = '#9a9a9a'; |
| 72 | |
| 73 | label.appendChild(checkbox); |
| 74 | label.appendChild(labelText); |
| 75 | host.appendChild(label); |
| 76 | host.appendChild(note); |
| 77 | |
| 78 | const setEnabled = (enabled: boolean): void => { |
| 79 | checkbox.disabled = !enabled; |
| 80 | label.style.opacity = enabled ? '1' : '0.6'; |
| 81 | label.style.cursor = enabled ? 'pointer' : 'default'; |
| 82 | }; |
| 83 | |
| 84 | const setChecked = (checked: boolean): void => { |
| 85 | checkbox.checked = checked; |
| 86 | }; |
| 87 | |
| 88 | return { host, checkbox, setEnabled, setChecked }; |
| 89 | }; |
| 90 | |
| 91 | type Extrema = Readonly<{ |
| 92 | maxIndex: number; |