feat(annotator): Canvas settings

[dwesolow]

Summary

This PR introduces annotator canvas settings so the user can change annotation opacity, border opacity, hide labels etc.

Close #5125

How to test

Screen.Recording.2026-01-14.at.14.27.47.mov

Checklist

• The PR title and description are clear and descriptive
• I have manually tested the changes
• All changes are covered by automated tests
• All related issues are linked to this PR (if applicable)
• Documentation has been updated (if applicable)

[Copilot]

Pull request overview

This PR introduces a comprehensive canvas settings dialog for the annotator, allowing users to customize annotation visibility, opacity, image adjustments, and rendering preferences.

Changes:

• Added a settings dialog with controls for annotation opacity (fill and border), image adjustments (brightness, contrast, saturation), label visibility, and pixel view mode
• Refactored the toolbar to separate concerns: visibility toggle, focus toggle, and zoom controls are now individual components
• Implemented a context provider pattern for managing and applying canvas settings through CSS custom properties

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
toggle-focus.component.tsx	New component for toggling focus mode in the annotator
toggle-annotations-visibility.component.tsx	New component for toggling annotation visibility with tooltip
settings.module.scss	Styles for the settings dialog with custom padding
settings.component.tsx	Refactored to display a popover dialog containing canvas settings
settings-list.component.tsx	Main settings UI with switches and sliders for all configurable options
image-setting.component.tsx	Slider component for image adjustment settings (brightness, contrast, saturation)
header-setting.component.tsx	Reusable header component for settings with reset functionality and value display
canvas-settings.test.tsx	Comprehensive test suite for canvas settings functionality
canvas-settings.component.tsx	Wrapper component connecting settings UI to the canvas settings provider
canvas-settings-provider.component.tsx	Context provider managing canvas settings state with default values
annotator-canvas-settings.component.tsx	Component that applies canvas settings as CSS custom properties
annotation-setting.component.tsx	Slider component for annotation opacity settings
primary-toolbar.component.tsx	Updated to include separated visibility, settings, zoom, and focus controls
media-preview.component.tsx	Integrated canvas settings provider and wrapper into the component hierarchy
utils.ts	Changed annotation fill opacity from hardcoded value to CSS variable
edit-bounding-box.component.tsx	Updated to use new AnnotationShapeRenderer component
annotator-canvas.tsx	Added CSS class to image element for applying settings
annotator-canvas.module.scss	Styles applying CSS custom properties for image filters and rendering
mask-annotations.component.tsx	Updated to use new AnnotationShapeRenderer component
annotation.component.tsx	Updated to use new AnnotationShapeRenderer component
annotation-shape-without-labels.component.tsx	New component for rendering annotations without labels
annotation-shape-renderer.component.tsx	New component that conditionally renders annotations with or without labels based on settings

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

📊 Test coverage report

Metric	Coverage
Lines	38.8%
Functions	35.3%
Branches	86.2%
Statements	38.8%

[github-actions]

Docker Image Sizes

CPU

Image	Size
geti-tune-cpu:pr-5192	2.88G
geti-tune-cpu:sha-1cf658f	2.88G

GPU

Image	Size
geti-tune-gpu:pr-5192	10.66G
geti-tune-gpu:sha-1cf658f	10.66G

XPU

Image	Size
geti-tune-xpu:pr-5192	8.72G
geti-tune-xpu:sha-1cf658f	8.72G