feat: Jim/GRWT-6600/implement fibonacci fan drawing tool in interactive layer

lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart

@@ -53,39 +53,39 @@ class _DrawingToolsDialogState extends State<DrawingToolsDialog> {
               DropdownButton<DrawingToolConfig>(
                 value: _selectedDrawingTool,
                 hint: Text(ChartLocalization.of(context).selectDrawingTool),
-                items: const <DropdownMenuItem<DrawingToolConfig>>[
-                  DropdownMenuItem<DrawingToolConfig>(
+                items: <DropdownMenuItem<DrawingToolConfig>>[
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Channel'),
                     value: ChannelDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Continuous'),
                     value: ContinuousDrawingToolConfig(),
                   ),
                   DropdownMenuItem<DrawingToolConfig>(
-                    child: Text('Fib Fan'),
+                    child: const Text('Fib Fan'),
                     value: FibfanDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Horizontal'),
                     value: HorizontalDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Line'),
                     value: LineDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Ray'),
                     value: RayDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                       child: Text('Rectangle'),
                       value: RectangleDrawingToolConfig()),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Trend'),
                     value: TrendDrawingToolConfig(),
                   ),
-                  DropdownMenuItem<DrawingToolConfig>(
+                  const DropdownMenuItem<DrawingToolConfig>(
                     child: Text('Vertical'),
                     value: VerticalDrawingToolConfig(),
                   )

lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart

@@ -4,6 +4,13 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/drawing_pattern.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart';
+import 'package:deriv_chart/src/deriv_chart/chart/helpers/color_converter.dart';
+import 'package:deriv_chart/src/deriv_chart/chart/helpers/text_style_json_converter.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/types.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart';
+import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart';
+import 'package:deriv_chart/src/theme/design_tokens/light_theme_design_tokens.dart';
 import 'package:deriv_chart/src/theme/painting_styles/line_style.dart';
 import 'package:flutter/material.dart';
 import 'package:json_annotation/json_annotation.dart';
@@ -13,16 +20,34 @@ part 'fibfan_drawing_tool_config.g.dart';
 
 /// Fibfan drawing tool config
 @JsonSerializable()
+@ColorConverter()
 class FibfanDrawingToolConfig extends DrawingToolConfig {
   /// Initializes
-  const FibfanDrawingToolConfig({
+  FibfanDrawingToolConfig({
     String? configId,
     DrawingData? drawingData,
     List<EdgePoint> edgePoints = const <EdgePoint>[],
-    this.fillStyle = const LineStyle(thickness: 0.9, color: Colors.blue),
-    this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white),
+    this.fibonacciLevelColors = const <String, Color>{
+      'level0': CoreDesignTokens.coreColorSolidBlue700, // Blue for 0%
+      'level38_2': LightThemeDesignTokens
+          .semanticColorSeawaterSolidBorderStaticMid, // Cyan for 38.2%
+      'level50': LightThemeDesignTokens
+          .semanticColorMustardSolidBorderStaticHigh, // Amber for 50%
+      'level61_8': LightThemeDesignTokens
+          .semanticColorYellowSolidBorderStaticMid, // Orange for 61.8%
+      'level100': CoreDesignTokens.coreColorSolidBlue700, // Blue for 100%
+    },
+    LineStyle? fillStyle,
+    this.lineStyle =
+        const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700),
+    this.labelStyle = const TextStyle(
+      color: CoreDesignTokens.coreColorSolidBlue700,
+      fontSize: 12,
+    ),
     super.number,
-  }) : super(
+  })  : fillStyle =
+            fillStyle ?? LineStyle(color: fibonacciLevelColors['level0']!),
+        super(
           configId: configId,
           drawingData: drawingData,
           edgePoints: edgePoints,
@@ -45,6 +70,13 @@ class FibfanDrawingToolConfig extends DrawingToolConfig {
   /// Drawing tool fill style
   final LineStyle fillStyle;
 
+  /// Colors for each Fibonacci level
+  final Map<String, Color> fibonacciLevelColors;
+
+  /// The style of the label showing on y-axis.
+  @TextStyleJsonConverter()
+  final TextStyle labelStyle;
+
   @override
   DrawingToolItem getItem(
     UpdateDrawingTool updateDrawingTool,
@@ -62,17 +94,39 @@ class FibfanDrawingToolConfig extends DrawingToolConfig {
     DrawingData? drawingData,
     LineStyle? lineStyle,
     LineStyle? fillStyle,
+    TextStyle? labelStyle,
     DrawingPatterns? pattern,
     List<EdgePoint>? edgePoints,
     bool? enableLabel,
     int? number,
+    Map<String, Color>? fibonacciLevelColors,
   }) =>
       FibfanDrawingToolConfig(
         configId: configId ?? this.configId,
         drawingData: drawingData ?? this.drawingData,
         lineStyle: lineStyle ?? this.lineStyle,
         fillStyle: fillStyle ?? this.fillStyle,
+        labelStyle: labelStyle ?? this.labelStyle,
         edgePoints: edgePoints ?? this.edgePoints,
         number: number ?? this.number,
+        fibonacciLevelColors: fibonacciLevelColors ?? this.fibonacciLevelColors,
       );
+
+  @override
+  FibfanInteractableDrawing getInteractableDrawing(
+    DrawingContext drawingContext,
+    GetDrawingState getDrawingState,
+  ) {
+    final EdgePoint? startPoint =
+        edgePoints.isNotEmpty ? edgePoints.first : null;
+    final EdgePoint? endPoint = edgePoints.length > 1 ? edgePoints[1] : null;
+
+    return FibfanInteractableDrawing(
+      config: this,
+      startPoint: startPoint,
+      endPoint: endPoint,
+      drawingContext: drawingContext,
+      getDrawingState: getDrawingState,
+    );
+  }
 }

lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_item.dart

@@ -10,15 +10,15 @@ import '../callbacks.dart';
 /// Fibfan drawing tool item in the list of drawing tools
 class FibfanDrawingToolItem extends DrawingToolItem {
   /// Initializes
-  const FibfanDrawingToolItem({
+  FibfanDrawingToolItem({
     required UpdateDrawingTool updateDrawingTool,
     required VoidCallback deleteDrawingTool,
     Key? key,
-    FibfanDrawingToolConfig config = const FibfanDrawingToolConfig(),
+    FibfanDrawingToolConfig? config,
   }) : super(
           key: key,
           title: 'Fib fan',
-          config: config,
+          config: config ?? FibfanDrawingToolConfig(),
           updateDrawingTool: updateDrawingTool,
           deleteDrawingTool: deleteDrawingTool,
         );

lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart

@@ -1,12 +1,20 @@
 import 'dart:ui';
 
+import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart';
+import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/helpers/chart_date_utils.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_export.dart';
+import 'package:deriv_chart/src/models/chart_config.dart';
+import 'package:deriv_chart/src/theme/chart_theme.dart';
 import 'package:deriv_chart/src/theme/painting_styles/line_style.dart';
 import 'package:flutter/material.dart';
 
+import '../enums/drawing_tool_state.dart';
+import 'types.dart';
+
 /// Draws alignment guides (horizontal and vertical lines) for a single point
 void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset,
     {Color lineColor = const Color(0x80FFFFFF)}) {
@@ -202,7 +210,7 @@ void drawValueLabel({
   final TextPainter textPainter = _getTextPainter(
     formattedValue,
     textStyle: textStyle.copyWith(
-      color: textStyle.color?.withOpacity(animationProgress),
+      color: color.withOpacity(animationProgress),
     ),
   )..layout();
 
@@ -283,7 +291,7 @@ void drawEpochLabel({
   final TextPainter textPainter = _getTextPainter(
     formattedTime,
     textStyle: textStyle.copyWith(
-      color: textStyle.color?.withOpacity(animationProgress),
+      color: color.withOpacity(animationProgress),
     ),
   )..layout();
 
@@ -327,6 +335,65 @@ void drawEpochLabel({
   );
 }
 
+/// Helper method to draw labels with proper z-index based on drag state.
+///
+/// This method handles the logic for drawing labels in the correct order
+/// to ensure the dragged point's labels appear on top of the non-dragged point's labels.
+///
+/// **Parameters:**
+/// - [canvas]: The canvas to draw on
+/// - [size]: The size of the drawing area
+/// - [animationInfo]: Animation information for state changes
+/// - [chartConfig]: Chart configuration
+/// - [chartTheme]: Chart theme
+/// - [getDrawingState]: Function to get the current drawing state
+/// - [drawStartPointLabel]: Callback function to draw the start point label
+/// - [drawEndPointLabel]: Callback function to draw the end point label
+/// - [isDraggingStartPoint]: Whether the start point is currently being dragged
+/// - [isDraggingEndPoint]: Whether the end point is currently being dragged
+///
+/// **Usage:**
+/// This function is designed to be reusable across different drawing tools that have
+/// two edge points and need proper z-index handling during drag operations.
+void drawLabelsWithZIndex<T extends DrawingToolConfig>({
+  required Canvas canvas,
+  required Size size,
+  required AnimationInfo animationInfo,
+  required ChartConfig chartConfig,
+  required ChartTheme chartTheme,
+  required GetDrawingState getDrawingState,
+  required InteractableDrawing<T> drawing,
+  required void Function() drawStartPointLabel,
+  required void Function() drawEndPointLabel,
+  required bool isDraggingStartPoint,
+  required bool isDraggingEndPoint,
+}) {
+  if (!getDrawingState(drawing).contains(DrawingToolState.selected)) {
+    return;
+  }
+
+  // When dragging individual points, draw the non-dragged point first (lower z-index)
+  // and the dragged point last (higher z-index)
+  if (getDrawingState(drawing).contains(DrawingToolState.dragging) &&
+      (isDraggingStartPoint || isDraggingEndPoint)) {
+    if (isDraggingStartPoint) {
+      // Start point is being dragged, so draw end point first (lower z-index)
+      drawEndPointLabel();
+      // Then draw start point (higher z-index)
+      drawStartPointLabel();
+    } else {
+      // End point is being dragged, so draw start point first (lower z-index)
+      drawStartPointLabel();
+      // Then draw end point (higher z-index)
+      drawEndPointLabel();
+    }
+  } else {
+    // Default behavior when not dragging individual points
+    drawStartPointLabel();
+    drawEndPointLabel();
+  }
+}
+
 /// Returns a [TextPainter] for the given formatted value and color.
 TextPainter _getTextPainter(
   String formattedValue, {

lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart

@@ -0,0 +1,25 @@
+/// Enum representing the different drag states for Fibonacci Fan drawing tool.
+///
+/// This enum provides clear, explicit states for drag interactions, improving
+/// code readability and reducing the risk of misinterpreting the drag state
+/// compared to using a nullable boolean.
+enum FibfanDragState {
+  /// User is dragging the start point of the fan.
+  ///
+  /// In this state, only the start point moves while the end point remains fixed.
+  /// This allows users to adjust the origin of the Fibonacci fan lines.
+  draggingStartPoint,
+
+  /// User is dragging the end point of the fan.
+  ///
+  /// In this state, only the end point moves while the start point remains fixed.
+  /// This allows users to adjust the direction and scale of the Fibonacci fan lines.
+  draggingEndPoint,
+
+  /// User is dragging the entire fan.
+  ///
+  /// In this state, both start and end points move together, maintaining their
+  /// relative positions. This allows users to reposition the entire fan without
+  /// changing its shape or orientation.
+  draggingEntireFan,
+}