Skip to content

refactor: Jim/grwt 5290/update crosshair UI based on design refactor #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 49 commits into
base: master
Choose a base branch
from

Conversation

jim-deriv
Copy link
Contributor

@jim-deriv jim-deriv commented May 28, 2025

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

Refactor and enhance the chart crosshair UI to support responsive variants, improved customization, and a more maintainable architecture, with updated showcase examples and theming support.

Enhancements:

  • Refactor crosshair UI to support both small and large screen variants with a new strategy-based architecture.
  • Unify and modernize crosshair logic, moving legacy code to a new interactive_layer/crosshair module and removing old crosshair components.
  • Introduce a CrosshairController for managing crosshair state and interactions, supporting both touch and mouse input.
  • Add customizable crosshair behaviour and variant selection to chart components, enabling platform-specific crosshair experiences.
  • Update chart series to provide series-specific crosshair highlight painters and information displays.
  • Enhance showcase app screens with crosshair and theme toggles for better demonstration and testing.
  • Improve crosshair information box styling and theming, including new text styles and layout adjustments.

Documentation:

  • Add and update user-facing documentation for crosshair configuration, behaviour, and theming.

jim-deriv added 30 commits May 8, 2025 17:48
…grwt-5290/update-crosshair-ui-based-on-design
…grwt-5290/update-crosshair-ui-based-on-design
Copy link

sourcery-ai bot commented May 28, 2025

Reviewer's Guide

This PR refactors and extends the chart’s interactive layer and series rendering to support a new crosshair UI architecture—introducing controllers, behaviours, and variants (small/large), integrating them into gesture handling and chart widgets, removing legacy crosshair code, and updating example screens and theme definitions to expose crosshair toggles.

Sequence Diagram: Crosshair Interaction via Long Press

sequenceDiagram
    actor User
    participant ILGH as _InteractiveLayerGestureHandler
    participant CC as CrosshairController
    participant XAM as XAxisModel

    User->>ILGH: Long press starts (details)
    ILGH->>CC: onLongPressStart(details)
    CC->>CC: Update state (show crosshair)
    CC->>ILGH: Callback onCrosshairAppeared()
    CC->>XAM: disableAutoPan()
    User->>ILGH: Long press moves (details)
    ILGH->>CC: onLongPressUpdate(details)
    CC->>CC: Update crosshair position
    alt Cursor near edge
        CC->>XAM: pan(speed)
    end
    User->>ILGH: Long press ends (details)
    ILGH->>CC: onLongPressEnd(details)
    CC->>CC: Update state (hide crosshair)
    CC->>ILGH: Callback onCrosshairDisappeared()
    CC->>XAM: pan(0)
    CC->>XAM: enableAutoPan()
Loading

Sequence Diagram: Crosshair Interaction via Hover (Large Screen)

sequenceDiagram
    actor User
    participant ILGH as _InteractiveLayerGestureHandler
    participant CC as CrosshairController

    User->>ILGH: Mouse hovers (event)
    ILGH->>ILGH: _handleHover(event, xAxis)
    alt CrosshairVariant is largeScreen AND not drawingTool mode
        ILGH->>CC: onHover(event)
        CC->>CC: Update state (show crosshair)
        CC->>ILGH: Callback onCrosshairAppeared() (if not already visible)
    end

    User->>ILGH: Mouse exits (event)
    ILGH->>ILGH: _handleExit(event)
    alt Not drawingTool mode
        ILGH->>CC: onExit(event)
        CC->>CC: Update state (hide crosshair)
        CC->>ILGH: Callback onCrosshairDisappeared() (if was visible)
    end
Loading

Sequence Diagram: Drawing Tool Pan Interaction

sequenceDiagram
    actor User
    participant RGD as RawGestureDetector
    participant DTGR as DrawingToolGestureRecognizer
    participant ILGH as _InteractiveLayerGestureHandler
    participant IS as _InteractiveState
    participant CC as CrosshairController

    User->>RGD: Pan starts on a drawing tool
    RGD->>DTGR: Gesture event
    DTGR->>ILGH: onDrawingToolPanStart(details) callback
    ILGH->>IS: onPanStart(details)
    ILGH->>ILGH: _updateInteractionMode(drawingTool)
    ILGH->>CC: onExit() (to hide crosshair)
    User->>RGD: Pan updates
    RGD->>DTGR: Gesture event
    DTGR->>ILGH: onDrawingToolPanUpdate(details) callback
    ILGH->>IS: onPanUpdate(details)
    opt Affecting Drawing AND Crosshair Visible
        ILGH->>CC: onExit() (ensure crosshair hidden)
    end
    User->>RGD: Pan ends
    RGD->>DTGR: Gesture event
    DTGR->>ILGH: onDrawingToolPanEnd(details) callback
    ILGH->>IS: onPanEnd(details)
    ILGH->>ILGH: _updateInteractionMode(none)
Loading

File-Level Changes

Change Details Files
Add a new crosshair architecture supporting multiple variants and strategies
  • Introduce CrosshairVariant enum for small/large screen modes
  • Implement CrosshairController and CrosshairState for crosshair lifecycle
  • Create CrosshairBehaviour, strategy context, and default behaviours
  • Develop highlight painters (dot, line, candle, OHLC) and CrosshairWidget
  • Add utility to find closest tick and ChartDateUtils for formatting
lib/src/deriv_chart/interactive_layer/crosshair/core/crosshair_controller.dart
lib/src/deriv_chart/interactive_layer/crosshair/core/crosshair_widget.dart
lib/src/deriv_chart/interactive_layer/crosshair/behaviour
lib/src/deriv_chart/interactive_layer/crosshair/painters
lib/src/deriv_chart/chart/helpers/chart_date_utils.dart
lib/src/deriv_chart/interactive_layer/crosshair/utils/find.dart
Refactor InteractiveLayer to integrate crosshair and separate drawing-tool gestures
  • Add InteractionMode enum and track current mode
  • Inject crosshair parameters into InteractiveLayer
  • Replace GestureDetector with RawGestureDetector + MouseRegion
  • Implement DrawingToolGestureRecognizer and custom gesture routing
  • Handle hover/exit/tap/long-press for crosshair vs drawing tools
lib/src/deriv_chart/interactive_layer/interactive_layer.dart
lib/src/deriv_chart/interactive_layer/drawing_tool_gesture_recognizer.dart
lib/src/deriv_chart/interactive_layer/interactive_layer_states
Integrate crosshair into chart widgets and controllers
  • Add crosshairVariant and crosshairBehaviour to DerivChart, Chart, MainChart
  • Initialize CrosshairController in chart state (_setupCrosshairController)
  • Pass controller, animation, and variant into InteractiveLayer
  • Remove legacy crosshair_area and web-specific implementations
  • Update bottom_chart mobile/web to accept crosshairVariant
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/bottom_chart.dart
lib/src/deriv_chart/chart/chart_state_mobile.dart
lib/src/deriv_chart/chart/chart_state_web.dart
Extend DataSeries API for crosshair tooling
  • Define getCrossHairInfo and getDetailedCrossHairInfo
  • Add getCrosshairHighlightPainter and getCrosshairStrategyContext
  • Implement series-specific info and painter overrides
  • Update line, candle, OHLC, hollow-candle, indicator series
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
lib/src/deriv_chart/chart/data_visualization/chart_series/indicators_series
Remove legacy crosshair widgets and painters
  • Delete old crosshair_area.dart, crosshair_area_web.dart
  • Remove index_base_cross_hair and related find.dart
  • Purge crosshair code in bottom_chart and main_chart
various lib/src/deriv_chart/chart/crosshair files
lib/src/deriv_chart/chart/worm_chart/worm_chart.dart
Update example screens to expose crosshair controls
  • Add _showCrosshair and variant toggle state to all chart examples
  • Introduce theme toggle alongside crosshair controls
  • Pass showCrosshair and crosshairVariant into buildChart
  • Update imports for kIsWeb and ChartDefaultLight/DarkTheme
showcase_app/lib/screens/chart_examples/*.dart
Enhance theme and text styles for crosshair UI
  • Add crosshairInformationBoxTitle/Quote/TimeLabel and axis TextStyles
  • Expose new text styles in ChartDefaultTheme
  • Adjust Dimens.crosshairInformationBoxContainerGlassBackgroundBlur
lib/src/theme/text_styles.dart
lib/src/theme/chart_default_theme.dart
lib/src/theme/dimens.dart
lib/src/theme/chart_theme.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

@jim-deriv jim-deriv changed the title refactor:Jim/grwt 5290/update crosshair UI based on design refactor refactor: Jim/grwt 5290/update crosshair UI based on design refactor May 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant