feat: Jim/GRWT-5290/update crosshair UI based on design

[jim-deriv]

Clickup link:
Fixes issue: #

This PR contains the following changes:

• ✨ New feature (non-breaking change which adds functionality)
• 🛠️ Bug fix (non-breaking change which fixes an issue)
• ❌ Breaking change (fix or feature that would cause existing functionality to change)
• 🧹 Code refactor
• ✅ Build configuration change
• 📝 Documentation
• 🗑️ Chore

Developers Note (Optional)

Pre-launch Checklist (For PR creator)

As a creator of this PR:

• ✍️ I have included clickup id and package/app_name in the PR title.
• 👁️ I have gone through the code and removed any temporary changes (commented lines, prints, debug statements etc.).
• ⚒️ I have fixed any errors/warnings shown by the analyzer/linter.
• 📝 I have added documentation, comments and logging wherever required.
• 🧪 I have added necessary tests for these changes.
• 🔎 I have ensured all existing tests are passing.

Reviewers

Pre-launch Checklist (For Reviewers)

As a reviewer I ensure that:

• ✴️ This PR follows the standard PR template.
• 🪩 The information in this PR properly reflects the code changes.
• 🧪 All the necessary tests for this PR's are passing.

Pre-launch Checklist (For QA)

• 👌 It passes the acceptance criteria.

Pre-launch Checklist (For Maintainer)

• [MAINTAINER_NAME] I make sure this PR fulfills its purpose.

Summary by Sourcery

Add a full crosshair interface following design specs, introduce new gesture and interaction layers for drawing tools, and enhance chart rendering and testing.

New Features:

• Add crosshair UI with smallScreen and largeScreen variants, including CrosshairWidget, CrosshairArea, CrosshairDetails, and highlight painters for line, candle, hollow candle, and OHLC series.
• Introduce CrosshairController for managing crosshair state, animations, hover/long-press events, and auto-pan behavior.
• Integrate crosshair support into InteractiveLayer, MainChart, Chart, BottomChart, and WormChart with new crosshairVariant and showCrosshair options.
• Implement custom DrawingToolGestureRecognizer and InteractionMode enum to prioritize drawing tool gestures and isolate crosshair interactions.

Enhancements:

• Refactor InteractiveLayer to use MultipleAnimatedBuilder, per-tool debouncing timers, epoch/quote range tracking, and drawing-state–based repaint logic.
• Extend DataSeries API to provide a CrosshairHighlightPainter hook and pass crosshairVariant to getCrossHairInfo methods.
• Add EpochRange and QuoteRange models and YAxisNotifier for reactive viewport culling and grid updates.
• Refactor barrier painters to remove saveLayer calls and draw line segments around labels for improved performance.
• Clean up legacy crosshairArea and example screens to use unified crosshair controls and theme toggles.

Documentation:

• Update README with DeepWiki badge.
• Document new crosshair components, ChartDateUtils utilities, and crosshairVariant options in code comments and text styles.

Tests:

• Update findClosestPreviousTick API and adjust existing find tests accordingly.

Chores:

• Bump package version to 0.4.1 and update CHANGELOG.
• Remove outdated imports, deprecated widgets, and redundant crosshairAreaWeb code across library.

[sourcery-ai]

Reviewer's Guide

This PR overhauls the chart’s crosshair feature by introducing a unified CrosshairController and widget pipeline in the interactive layer, supporting two visual variants (smallScreen/largeScreen). It integrates crosshair gestures into the custom gesture system, extends series APIs to provide crosshair info and highlight painters, and adds new UI components (CrosshairArea, CrosshairDetails) and utilities (ChartDateUtils, axis ranges, text styles) to render configurable crosshair UIs. Example, theme, and test code have been updated accordingly.

File-Level Changes

Change	Details	Files
Add crosshair controller and widget pipeline into the interactive layer	Expose crosshairController, crosshairVariant and related callbacks on InteractiveLayer Wire CrosshairWidget under MultipleAnimatedBuilder alongside drawings Implement custom gesture recognizer to cancel crosshair when tool drag begins Use InteractionNotifier to trigger rebuilds on interaction changes	lib/src/deriv_chart/interactive_layer/interactive_layer.dart lib/src/deriv_chart/interactive_layer/interactive_layer_gesture_handler.dart lib/src/deriv_chart/interactive_layer/drawing_tool_gesture_recognizer.dart lib/src/deriv_chart/interactive_layer/interaction_notifier.dart lib/src/deriv_chart/interactive_layer/crosshair/crosshair_controller.dart lib/src/deriv_chart/interactive_layer/crosshair/crosshair_widget.dart
Introduce smallScreen/largeScreen crosshair variants throughout chart APIs	Define CrosshairVariant enum and default to smallScreen in widgets Propagate crosshairVariant into DerivChart, Chart, MainChart, WormChart, IndexBaseCrossHair Expose variant setting in example screens with toggles	lib/src/deriv_chart/interactive_layer/crosshair/crosshair_variant.dart lib/src/deriv_chart/deriv_chart.dart lib/src/deriv_chart/chart/chart.dart lib/src/deriv_chart/chart/main_chart.dart lib/src/deriv_chart/chart/worm_chart/worm_chart.dart showcase_app/lib/screens/chart_examples/
Extend DataSeries interface for crosshair support	Add getCrosshairInfo signature accepting variant Introduce abstract getCrosshairHighlightPainter and implement in line, candle, hollow, OHLC, indicator series Update series painters to return CrosshairHighlightPainter instances	lib/src/deriv_chart/chart/data_visualization/chart_series/data_series.dart lib/src/deriv_chart/chart/data_visualization/chart_series/line_series.dart lib/src/deriv_chart/chart/data_visualization/chart_series/ohlc_series/ohlc_type_series.dart lib/src/deriv_chart/chart/data_visualization/chart_series/ohlc_series/candle/candle_series.dart lib/src/deriv_chart/chart/data_visualization/chart_series/ohlc_series/hollow_candle/hollow_candle_series.dart lib/src/deriv_chart/chart/data_visualization/chart_series/indicators_series
Add UI components and utilities for crosshair rendering	Introduce CrosshairArea and CrosshairDetails widgets for displaying lines, dots, labels and info boxes Add ChartDateUtils for date/time formatting Extend TextStyles and chart default themes with crosshair text styles Add axis_range models for epoch/quote ranges	lib/src/deriv_chart/interactive_layer/crosshair/crosshair_area.dart lib/src/deriv_chart/interactive_layer/crosshair/crosshair_details.dart lib/src/deriv_chart/chart/helpers/chart_date_utils.dart lib/src/theme/text_styles.dart lib/src/theme/chart_default_theme.dart lib/src/models/axis_range.dart
Refactor drawing-tool gesture handling and interactive states	Implement DrawingToolGestureRecognizer to prioritize tool drags over crosshair Replace per-tool debounce timer with map-based timers Unify DrawingToolState enum and adapt InteractiveState methods to return bool Refine shouldRepaint logic in InteractableDrawingCustomPainter	lib/src/deriv_chart/interactive_layer/drawing_tool_gesture_recognizer.dart lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart lib/src/deriv_chart/interactive_layer/interactive_layer_states lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart
Refactor barrier/accumulator painters to avoid label overlap	Remove saveLayer calls and split lines into segments around profit/title areas Ensure barrier lines are redrawn when out of range	lib/src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_indicator_painter.dart lib/src/deriv_chart/chart/data_visualization/annotations/barriers/horizontal_barrier/horizontal_barrier_painter.dart lib/src/deriv_chart/chart/data_visualization/annotations/barriers/vertical_barrier/vertical_barrier.dart

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[jim-deriv]

@sourcery-ai review

[sourcery-ai]

Hey @jim-deriv - I've reviewed your changes - here's some feedback:

• Consider a more unified widget strategy for responsive crosshair information in series to minimize potential code duplication.
• Verify if dynamic animation speeds for the crosshair are intended, as _dragVelocity in CrosshairController currently results in a fixed 5ms duration.
• Clarify the intended positioning behavior for the crosshair details box in CrosshairArea, as the current code primarily places it above the cursor, differing from a comment suggesting conditional placement.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟡 Review instructions: 3 issues found
• 🟢 Testing: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[jim-deriv]

@sourcery-ai review

[sourcery-ai]

Hey @jim-deriv - I've reviewed your changes - here's some feedback:

• The currentCrosshairTick parameter added to numerous painter methods enables highlighting; verify consistent application of highlighting effects where this parameter is now available.
• The new auto-panning behavior in CrosshairController during long-press interactions should be tested for smooth integration with existing chart navigation.
• The CrosshairController's dynamic animation duration based on drag velocity is a fine-grained control; ensure it provides a natural feel during crosshair movement.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Review instructions: all looks good
• 🟢 Testing: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}